/* "Career path" — injected before "Awards and record" on the home page. */
.sj-exp {
  --forest: #14261D; --forest2: #1D3528; --slate: #45564B; --sage: #497E64; --orange: #E8722C;
  --cream: #F4F0E5; --beige: #EAE4D3; --lime: #D6E59A; --powder: #C9E0F2; --blush: #F6D7E8; --peach: #F9D8C0;
  position: relative; width: 100%; overflow: hidden;
  background: var(--forest); color: var(--cream); padding: 150px 0;
  font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
}
.sj-exp * { box-sizing: border-box; }
.sj-exp::before { /* soft light pool behind the timeline */
  content: ""; position: absolute; right: -10%; top: 10%; width: 60%; height: 80%;
  background: radial-gradient(closest-side, rgba(73,126,100,.35), transparent 70%); pointer-events: none;
}
.sj-exp__wrap {
  position: relative; max-width: 1260px; margin: 0 auto; padding: 0 30px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start;
}

/* ---- intro ---- */
.sj-exp__intro { position: sticky; top: 120px; }
.sj-exp__pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px;
  background: rgba(244,240,229,.1); border: 1px solid rgba(244,240,229,.18); color: var(--cream); font-size: 15px; line-height: 1.4;
}
.sj-exp__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.sj-exp__title {
  margin: 18px 0 18px; color: var(--cream);
  font: 600 clamp(42px, 4.6vw, 68px)/1.08 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif;
  letter-spacing: -0.07em;
}
.sj-exp__hl { position: relative; display: inline-block; color: var(--lime); transform: rotate(-4deg); padding-bottom: .12em; }
.sj-exp__hl .u { position: absolute; left: 0; bottom: -.1em; width: 100%; height: .45em; pointer-events: none; }
.sj-exp__hl .s { position: absolute; top: -.2em; right: -.5em; width: .42em; height: .42em; pointer-events: none; }
.sj-exp__lede { margin: 0; max-width: 440px; color: rgba(244,240,229,.72); font-size: 17px; line-height: 1.5; }

.sj-exp__stats { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 440px; }
.sj-exp__stats li {
  padding: 18px 18px 16px; border-radius: 20px; background: rgba(244,240,229,.06); border: 1px solid rgba(244,240,229,.12);
  opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.sj-exp.is-in .sj-exp__stats li { opacity: 1; transform: none; }
.sj-exp__stats li:nth-child(2) { transition-delay: .08s; } .sj-exp__stats li:nth-child(3) { transition-delay: .16s; } .sj-exp__stats li:nth-child(4) { transition-delay: .24s; }
.sj-exp__stats b { display: block; color: var(--cream); font: 600 38px/1 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif; letter-spacing: -.05em; }
.sj-exp__stats b em { font-style: normal; color: var(--orange); }
.sj-exp__stats span { display: block; margin-top: 8px; color: rgba(244,240,229,.66); font-size: 14px; line-height: 1.35; }

/* ---- timeline ---- */
.sj-exp__list { position: relative; margin: 0; padding: 0 0 0 44px; list-style: none; }
.sj-exp__rail, .sj-exp__rail i { position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; }
.sj-exp__rail { background: rgba(244,240,229,.14); }
.sj-exp__rail i { top: 0; bottom: auto; left: 0; height: calc(var(--p, 0) * 100%); background: linear-gradient(var(--orange), var(--lime)); }

.sj-job { position: relative; margin: 0 0 26px; }
.sj-job:last-child { margin-bottom: 0; }
.sj-job__dot {
  position: absolute; left: -38px; top: 30px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--forest); border: 2px solid rgba(244,240,229,.4); transition: border-color .4s ease, background .4s ease;
}
.sj-job.is-on .sj-job__dot { border-color: var(--orange); background: var(--orange); }
.sj-job.is-now .sj-job__dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0;
  animation: sjPing 2.2s ease-out infinite;
}
@keyframes sjPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

.sj-job__card {
  position: relative; padding: 26px 28px 24px; border-radius: 20px; background: var(--cream); color: var(--slate);
  box-shadow: 4px 4px 0 0 var(--tint, var(--lime));
  opacity: 0; transform: translateY(34px) rotate(var(--tilt, 0deg));
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.sj-job.is-on .sj-job__card { opacity: 1; transform: translateY(0) rotate(0deg); }
.sj-job__card:hover { box-shadow: 8px 8px 0 0 var(--tint, var(--lime)); transform: translate(-2px, -2px); }

.sj-job__top { display: flex; align-items: center; gap: 16px; }
.sj-job__logo { flex: none; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(20,38,29,.5); background: #fff; }
.sj-job__logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sj-job__co { margin: 0; color: var(--forest); font: 600 22px/1.15 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif; letter-spacing: -.03em; }
.sj-job__role { margin: 4px 0 0; color: var(--sage); font-weight: 600; font-size: 15px; }
.sj-job__meta { margin-left: auto; align-self: flex-start; text-align: right; font-size: 13px; line-height: 1.4; color: var(--slate); white-space: nowrap; }
.sj-job__meta b { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tint, var(--beige)); color: var(--forest); font-weight: 600; }
.sj-job__meta span { display: block; margin-top: 6px; }
.sj-job.is-now .sj-job__meta b::before { content: "● "; color: var(--orange); }

.sj-job__points { margin: 18px 0 0; padding: 0; list-style: none; }
.sj-job__points li { position: relative; padding-left: 20px; margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
.sj-job__points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); transform: rotate(45deg); }
.sj-job__award {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 5px 12px; border-radius: 999px;
  background: var(--forest); color: var(--cream); font-size: 13px; font-weight: 600;
}
.sj-job__award svg { width: 14px; height: 14px; fill: #FFDC64; }

@media (max-width: 1099px) {
  .sj-exp__wrap { grid-template-columns: 1fr; gap: 48px; }
  .sj-exp__intro { position: relative; top: 0; text-align: left; }
  .sj-exp__stats { grid-template-columns: repeat(4, 1fr); max-width: none; }
}
@media (max-width: 809px) {
  .sj-exp { padding: 90px 0; }
  .sj-exp__wrap { padding: 0 20px; }
  .sj-exp__stats { grid-template-columns: 1fr 1fr; }
  .sj-exp__list { padding-left: 30px; }
  .sj-exp__rail, .sj-exp__rail i { left: 6px; }
  .sj-exp__rail i { left: 0; }
  .sj-job__dot { left: -31px; }
  .sj-job__card { padding: 20px 18px; }
  .sj-job__top { flex-wrap: wrap; }
  .sj-job__meta { margin-left: 72px; text-align: left; white-space: normal; }
  .sj-job__meta span { display: inline; margin: 0 0 0 8px; }
  .sj-job__co { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-job__card, .sj-exp__stats li { opacity: 1 !important; transform: none !important; transition: none; }
  .sj-job.is-now .sj-job__dot::after { animation: none; }
}

/* ===== "Education & credentials" — inserted after "Awards and record" ===== */
.sj-edu {
  --forest: #14261D; --slate: #45564B; --sage: #497E64; --orange: #E8722C;
  --cream: #F4F0E5; --powder: #C9E0F2; --powder-dk: #5488B2; --lime: #D6E59A; --peach: #F9D8C0; --blush: #F6D7E8;
  position: relative; width: 100%; overflow: hidden; background: var(--powder); padding: 150px 0;
  font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; color: var(--slate);
}
.sj-edu * { box-sizing: border-box; }
.sj-edu__wrap { max-width: 1260px; margin: 0 auto; padding: 0 30px; }
.sj-edu__head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.sj-edu__pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--cream); color: var(--forest); font-size: 15px; line-height: 1.4; }
.sj-edu__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.sj-edu__title { margin: 18px 0 14px; color: var(--forest); font: 600 clamp(44px, 5.7vw, 82px)/1.1 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif; letter-spacing: -0.08em; }
.sj-edu__hl { position: relative; display: inline-block; color: var(--sage); transform: rotate(5deg); padding-bottom: .12em; }
.sj-edu__hl .u { position: absolute; left: 0; bottom: -.08em; width: 100%; height: .5em; pointer-events: none; }
.sj-edu__hl .s { position: absolute; top: -.18em; right: -.42em; width: .42em; height: .42em; pointer-events: none; }
.sj-edu__lede { margin: 0 auto; max-width: 560px; font-size: 17px; line-height: 1.45; }

.sj-edu__group { margin: 0 0 18px; color: var(--forest); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.sj-edu__group::after { content: ""; flex: 1; height: 1px; background: rgba(20,38,29,.18); }
.sj-edu__grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 20px; }
.sj-edu__grid:last-child { margin-bottom: 0; }
.sj-edu__grid.is-deg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sj-edu__grid.is-cert { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sj-cred {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 26px 26px 22px; border-radius: 20px; background: var(--cream);
  box-shadow: 4px 4px 0 0 var(--tint, var(--powder-dk));
  opacity: 0; transform: translateY(30px) rotate(var(--tilt, 0deg));
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  transition-delay: var(--d, 0s);
}
.sj-edu.is-in .sj-cred { opacity: 1; transform: none; }
.sj-edu.is-in .sj-cred:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 0 var(--tint, var(--powder-dk)); transition-delay: 0s; }
.sj-cred__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sj-cred__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tint, var(--lime)); color: var(--forest); }
.sj-cred__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sj-cred__year { padding: 4px 12px; border-radius: 999px; background: var(--forest); color: var(--cream); font: 600 14px/1.2 "Bricolage Grotesque", sans-serif; letter-spacing: .02em; }
.sj-cred__name { margin: 0; color: var(--forest); font: 600 21px/1.2 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif; letter-spacing: -.03em; }
.is-deg .sj-cred__name { font-size: clamp(24px, 2.4vw, 32px); }
.sj-cred__org { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.sj-cred__kind { margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--sage); font-weight: 600; }

@media (max-width: 1099px) { .sj-edu__grid.is-cert { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) {
  .sj-edu { padding: 90px 0; }
  .sj-edu__wrap { padding: 0 20px; }
  .sj-edu__head { margin-bottom: 44px; }
  .sj-edu__grid.is-deg, .sj-edu__grid.is-cert { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sj-cred { opacity: 1 !important; transform: none !important; transition: none; } }