/* ============================================================
   Pallet Journey — drop-in scrollytelling section for indicold.com
   Self-contained: every rule is scoped under .pj so it can be
   pasted into any page. Requires colors_and_type.css tokens.
   Tune the sticky offset to your nav height:  .pj { --pj-nav: 73px; }
   ============================================================ */

.pj {
  --pj-nav: 73px;                 /* set to the site's sticky-nav height */
  /* fallbacks for design-system tokens not defined globally on this site */
  --indicold-orange: #FEB20F;
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --status-success: #1f9d6b;
  --pj-frost: #cfe0ff;
  --pj-frost-dim: #8fa6d6;
  --pj-line: rgba(255,255,255,0.14);
  --pj-line-soft: rgba(255,255,255,0.08);
  --pj-panel: rgba(11, 40, 112, 0.74);
  --pj-glow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative;
  font-family: var(--font-sans);
}
.pj *, .pj *::before, .pj *::after { box-sizing: border-box; }
.pj .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── intro (on the page's white surface) ── */
.pj-intro { max-width: 1200px; margin: 0 auto; padding: 80px 24px 40px; }
.pj-intro .pj-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--indicold-blue); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
}
.pj-intro .pj-eyebrow::before { content:''; width: 24px; height: 2px; background: var(--indicold-orange); }
.pj-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 44px); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.02em; margin: 0 0 16px; color: var(--fg-1, #070707);
  max-width: 18ch; text-wrap: balance;
}
.pj-intro h2 em { font-style: normal; color: var(--indicold-blue); }
.pj-intro .pj-lead { font-size: 18px; line-height: 1.55; color: var(--fg-2, #4a4f5c); margin: 0; max-width: 60ch; }
.pj-intro .pj-id-row {
  margin-top: 26px; display: inline-flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--border-1, #DDE2EC); border-radius: var(--radius-md); overflow: hidden;
  font-family: var(--font-mono);
}
.pj-id-row .c { padding: 11px 18px; border-right: 1px solid var(--border-1, #DDE2EC); }
.pj-id-row .c:last-child { border-right: 0; }
.pj-id-row .k { font-size: 9.5px; letter-spacing: .12em; color: var(--fg-2,#4a4f5c); text-transform: uppercase; }
.pj-id-row .v { font-size: 14px; color: var(--fg-1,#070707); margin-top: 3px; font-weight: 600; }
.pj-id-row .v.accent { color: var(--indicold-blue); }

/* ── immersive dark-blue scrolly band ── */
.pj-band { background: var(--indicold-blue, #0F3492); position: relative; }
.pj-scrolly { display: grid; grid-template-columns: 1.12fr 0.88fr; position: relative; max-width: 1440px; margin: 0 auto; }

.pj-stage-col { position: relative; }
.pj-stage {
  position: sticky; top: var(--pj-nav);
  height: calc(100svh - var(--pj-nav));
  min-height: 560px;
  overflow: hidden;
  background: var(--indicold-blue, #0F3492);
}
.pj-photo {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.1s var(--ease-out), transform 6s var(--ease-out);
}
.pj-photo.on { opacity: 1; transform: scale(1); }
.pj-grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,26,74,0.55) 0%, rgba(8,26,74,0.14) 30%, rgba(8,26,74,0.82) 100%),
    linear-gradient(90deg, rgba(15,52,146,0.0), rgba(10,30,82,0.55) 100%);
}

/* in-stage stepper */
.pj-rail { position: absolute; top: 18px; left: clamp(20px,3vw,40px); right: clamp(20px,3vw,40px); z-index: 4; }
.pj-rail .track { position: relative; height: 2px; background: var(--pj-line); border-radius: 2px; }
.pj-rail .fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--indicold-orange); border-radius: 2px; transition: width .25s linear; }
.pj-rail .nodes { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; transform: translateY(-50%); top: 50%; }
.pj-rail .node {
  width: 9px; height: 9px; border-radius: 50%; cursor: pointer;
  background: var(--indicold-blue, #0F3492); border: 2px solid var(--pj-frost-dim);
  transition: all .25s var(--ease-out); position: relative;
}
.pj-rail .node.done { border-color: var(--indicold-orange); background: var(--indicold-orange); }
.pj-rail .node.active { border-color: var(--indicold-orange); background: var(--indicold-orange); box-shadow: 0 0 0 5px rgba(254,176,22,.22); }
.pj-rail .node span {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; color: var(--pj-frost-dim); white-space: nowrap;
}
.pj-rail .node.active span { color: #fff; }
@media (max-width: 860px){ .pj-rail .node span { display: none; } }

/* HUD */
.pj-hud { position: absolute; inset: 0; pointer-events: none; }
.pj-hud-top {
  position: absolute; top: clamp(52px, 8vh, 78px); left: clamp(20px,3vw,40px); right: clamp(20px,3vw,40px);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.pj-clock { font-family: var(--font-mono); }
.pj-clock .t { font-size: clamp(28px, 4vw, 50px); font-weight: 500; letter-spacing: -0.02em; color: #fff; line-height: 1; display:flex; align-items:baseline; gap:8px; }
.pj-clock .t small { font-size: 13px; color: var(--pj-frost-dim); font-weight: 500; letter-spacing: 0; }
.pj-clock .loc { margin-top: 10px; font-size: 12px; letter-spacing: .08em; color: var(--pj-frost); display:flex; align-items:center; gap:7px; }
.pj-clock .loc .pin { width:6px;height:6px;border-radius:50%;background:var(--indicold-orange); }

.pj-temp { background: var(--pj-panel); border: 1px solid var(--pj-line); border-radius: var(--radius-md); padding: 12px 14px; min-width: 164px; backdrop-filter: blur(8px); }
.pj-temp .lab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.14em; text-transform: uppercase; color: var(--pj-frost-dim); display:flex; justify-content:space-between; align-items:center; }
.pj-temp .lab .live { color: var(--status-frozen, #2fb0e0); display:flex; align-items:center; gap:5px; }
.pj-temp .lab .live i { width:6px;height:6px;border-radius:50%; background: var(--status-frozen, #2fb0e0); display:inline-block; animation: pjBlink 1.6s steps(1) infinite; }
@keyframes pjBlink { 50%{opacity:.25;} }
.pj-temp .val { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: #fff; line-height: 1; margin: 8px 0 10px; }
.pj-temp .val .u { font-size: 13px; color: var(--pj-frost-dim); font-weight:500; }
.pj-temp .scale { position: relative; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #1380c8 0%, #2fb0e0 38%, #2ea38a 68%, #e89b00 88%, #d7261f 100%); }
.pj-temp .scale .marker { position: absolute; top:-3px; width: 2px; height: 11px; background:#fff; box-shadow:0 0 0 2px rgba(8,26,74,.6); border-radius:2px; transition: left .6s var(--ease-out); }
.pj-temp .scale-tags { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9px; color:var(--pj-frost-dim); margin-top:5px; }

/* pallet glyph */
.pj-pallet-stage { position: absolute; left: 50%; bottom: clamp(140px, 24vh, 220px); transform: translateX(-50%); width: 156px; filter: drop-shadow(0 22px 26px rgba(0,0,0,.5)); }
.pj-pallet { position: relative; width: 156px; }
.pj-pallet .box { height: 86px; background: linear-gradient(160deg, #e9eef9, #c2cde6); border-radius: 3px; position: relative; border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 -10px 20px rgba(15,52,146,.18); overflow: hidden; }
.pj-pallet .box::before { content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height: 9px; background: rgba(15,52,146,.16); }
.pj-pallet .label { position: absolute; top: 9px; left: 9px; right: 9px; background: #fff; border-radius: 2px; padding: 6px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.pj-pallet .label .lc { font-family: var(--font-mono); font-size: 8px; letter-spacing:.04em; color: var(--indicold-blue, #0F3492); font-weight: 700; }
.pj-pallet .label .bars { height: 13px; margin-top: 4px; background-image: repeating-linear-gradient(90deg, #070707 0 1.5px, transparent 1.5px 3px, #070707 3px 4px, transparent 4px 7px, #070707 7px 9px, transparent 9px 11px); }
.pj-pallet .label .chip { position:absolute; top:6px; right:6px; width:13px; height:13px; background: var(--indicold-orange); border-radius:2px; }
.pj-pallet .base { margin-top: 4px; display:flex; flex-direction:column; gap:3px; }
.pj-pallet .deck { height: 7px; background: linear-gradient(#caa46a,#a37c42); border-radius:1px; }
.pj-pallet .legs { display:flex; justify-content:space-between; }
.pj-pallet .legs i { width: 20px; height: 12px; background: linear-gradient(#b08a4f,#8c6735); border-radius:0 0 1px 1px; }
.pj-pallet .scan { position: absolute; left:-6px; right:-6px; height: 28px; top: 0; background: linear-gradient(180deg, rgba(254,176,22,0) 0%, rgba(254,176,22,.55) 50%, rgba(254,176,22,0) 100%); opacity: 0; }
.pj-pallet.scanning .scan { animation: pjScan 1.1s var(--ease-in-out); }
@keyframes pjScan { 0%{opacity:0; top:-10px;} 12%{opacity:1;} 88%{opacity:1;} 100%{opacity:0; top:112px;} }
.pj-pallet-stage .ground { position: absolute; left:50%; bottom:-22px; transform:translateX(-50%); width: 170px; height: 26px; border-radius:50%; background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%); }
.pj-flag { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase; background: var(--indicold-orange); color: var(--indicold-blue); font-weight:700; padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* record card */
.pj-record { position: absolute; left: clamp(20px,3vw,40px); bottom: clamp(20px,3vh,32px); width: min(326px, 42vw); background: var(--pj-panel); border: 1px solid var(--pj-line); border-radius: var(--radius-lg); backdrop-filter: blur(10px); box-shadow: var(--pj-glow); overflow: hidden; }
.pj-record .h { display:flex; align-items:center; justify-content:space-between; padding: 11px 14px; border-bottom: 1px solid var(--pj-line-soft); background: rgba(255,255,255,.03); }
.pj-record .h .ti { font-family: var(--font-mono); font-size: 10px; letter-spacing:.12em; text-transform:uppercase; color: var(--pj-frost); }
.pj-record .h .pid { font-family: var(--font-mono); font-size: 11px; color:#fff; font-weight:700; }
.pj-record .rows { padding: 6px 14px 12px; }
.pj-rr { display:flex; justify-content:space-between; align-items:center; gap:10px; padding: 5px 0; }
.pj-rr .k { font-family: var(--font-mono); font-size: 10px; letter-spacing:.06em; color: var(--pj-frost-dim); text-transform: uppercase; }
.pj-rr .v { font-family: var(--font-mono); font-size: 12px; color:#fff; text-align:right; transition: color .3s; }
.pj-rr .v.flash { color: var(--indicold-orange); }
.pj-record .log { border-top: 1px solid var(--pj-line-soft); padding: 9px 14px 12px; }
.pj-record .log .lg-t { font-family: var(--font-mono); font-size: 9px; letter-spacing:.14em; text-transform:uppercase; color: var(--pj-frost-dim); margin-bottom: 6px; }
.pj-log-line { font-family: var(--font-mono); font-size: 10.5px; color: var(--pj-frost); display:flex; gap:8px; align-items:baseline; padding: 2px 0; opacity: 0; transform: translateX(-6px); animation: pjLogIn .4s var(--ease-out) forwards; }
.pj-log-line .lt { color: var(--pj-frost-dim); flex:none; }
.pj-log-line .lx { color: var(--indicold-orange); flex:none; }
@keyframes pjLogIn { to { opacity:1; transform:none; } }

/* steps */
.pj-steps { position: relative; padding: 0 clamp(24px,4vw,64px); }
.pj-step { min-height: calc(100svh - var(--pj-nav)); display: flex; flex-direction: column; justify-content: center; padding: 11vh 0; }
.pj-step .num { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--pj-frost-dim); margin-bottom: 16px; display:flex; align-items:center; gap:12px; }
.pj-step .num b { color: var(--indicold-orange); font-weight:700; }
.pj-step .num .ln { flex:1; height:1px; background: var(--pj-line); max-width: 70px; }
.pj-step .sname { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--indicold-orange); margin-bottom: 14px; }
.pj-step h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; color: #fff; text-wrap: balance; }
.pj-step .voice { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; color: var(--pj-frost); font-weight: 500; margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--indicold-orange); font-style: italic; }
.pj-step .sop { font-size: 16px; line-height: 1.6; color: var(--pj-frost-dim); margin: 0 0 22px; max-width: 46ch; }
.pj-step .sop b { color: #fff; font-weight: 600; }
.pj-checks { display: flex; flex-direction: column; gap: 8px; }
.pj-check { display:flex; align-items:center; gap: 11px; font-family: var(--font-mono); font-size: 12.5px; color: #fff; padding: 9px 13px; border: 1px solid var(--pj-line); border-radius: var(--radius-md); background: rgba(255,255,255,.025); }
.pj-check .tick { width: 18px; height:18px; border-radius:50%; flex:none; background: var(--status-success, #1f9d6b); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-sans); font-size:11px; font-weight:800; }
.pj-check .k { color: var(--pj-frost-dim); }
.pj-check .v { margin-left:auto; color:#fff; }

/* closing numbers band */
.pj-numbers { background: var(--indicold-blue, #0F3492); border-top: 1px solid var(--pj-line-soft); }
.pj-numbers .wrap { max-width: 1200px; margin: 0 auto; padding: 64px 24px 72px; text-align: center; }
.pj-numbers .pj-eyebrow { color: var(--indicold-orange); justify-content: center; }
.pj-numbers .pj-eyebrow::before { background: var(--indicold-orange); }
.pj-numbers h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.6vw,46px); line-height: 1.04; letter-spacing: -0.03em; margin: 14px auto 16px; max-width: 18ch; color:#fff; text-wrap: balance; }
.pj-numbers h2 em { font-style: normal; color: var(--indicold-orange); }
.pj-numbers .lede { max-width: 58ch; margin: 0 auto 48px; color: var(--pj-frost); font-size: 17px; line-height:1.6; }
.pj-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--pj-line-soft); border: 1px solid var(--pj-line); border-radius: var(--radius-lg); overflow:hidden; max-width: 1080px; margin: 0 auto 48px; }
.pj-stats .s { background: rgba(11,40,112,.5); padding: 26px 16px; }
.pj-stats .s .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px,3.4vw,44px); color: var(--indicold-orange); line-height:1; letter-spacing:-0.02em; }
.pj-stats .s .n .u { font-size: 15px; color: var(--pj-frost); margin-left:2px; }
.pj-stats .s .l { font-family: var(--font-sans); font-size: 12.5px; color: var(--pj-frost-dim); margin-top: 12px; line-height:1.4; }
.pj-care { display:flex; flex-direction:column; align-items:center; gap: 16px; }
.pj-care .line { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px,2.2vw,28px); color:#fff; }
.pj-care .line em { font-style:normal; color: var(--indicold-orange); }
.pj-care .fine { font-family:var(--font-mono); font-size: 11px; letter-spacing:.08em; color: var(--pj-frost-dim); }

/* responsive */
@media (max-width: 1240px){ .pj-record { width: min(300px, 46vw); } }
@media (max-width: 860px){
  .pj-scrolly { grid-template-columns: 1fr; }
  .pj-stage { height: 58svh; min-height: 420px; top: var(--pj-nav); }
  .pj-pallet-stage { bottom: clamp(64px,14vh,110px); width: 116px; }
  .pj-pallet { width: 116px; }
  .pj-record { width: min(280px, 70vw); }
  .pj-step { min-height: auto; padding: 8vh 0; }
  .pj-step:first-child { padding-top: 6vh; }
  .pj-stats { grid-template-columns: repeat(2,1fr); }
  .pj-stats .s:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .pj-intro .pj-id-row { width: 100%; }
  .pj-record { left: 12px; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce){
  .pj * { animation-duration: .001ms !important; }
  .pj-photo { transition: opacity .3s linear; }
}