/* ===================================================================
   Uptinergy Inc. — Solutions page stylesheet
   Loads after style.css (brand tokens live there).
   Design language matches audit.html: controlled, staged, premium.
   =================================================================== */

/* ---------------------------------------------------------------
   Scroll reveal (progressive enhancement — visible without JS)
   --------------------------------------------------------------- */
.rv-item{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
.rv-hidden{opacity:0;transform:translateY(22px)}
@media (prefers-reduced-motion: reduce){
  .rv-item{transition:none}
  .rv-hidden{opacity:1;transform:none}
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.sol-hero{
  background:var(--navy);
  color:#fff;
  padding:104px 0 56px;
  position:relative;
}
.sol-hero .eyebrow{color:var(--amber)}
.sol-hero h1{
  color:#fff;
  max-width:22ch;
  min-height:2.4em;            /* reserve space while typing */
  margin-bottom:40px;
}
.sol-hero h1 .tw-caret{
  display:inline-block;
  width:3px;
  background:var(--amber);
  margin-left:4px;
  animation:twBlink .9s steps(1) infinite;
  height:1em;
  vertical-align:-0.12em;
}
@keyframes twBlink{50%{opacity:0}}

/* Stage-flow: Audit → Benchmark → Qualify → Source → Pilot */
.stageflow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 0;
  margin:0 0 38px;
}
.stage{
  display:flex;
  align-items:center;
}
.stage-chip{
  display:flex;
  flex-direction:column;
  gap:3px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  padding:14px 22px;
  background:rgba(255,255,255,.04);
}
.stage-chip .sn{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:1.6px;
  color:var(--amber);
}
.stage-chip .sw{
  font-size:1.08rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.2px;
  white-space:nowrap;
}
.stage-arrow{
  color:var(--amber);
  font-size:1.25rem;
  padding:0 12px;
  flex:0 0 auto;
}

/* Hero bullets */
.hero-points{list-style:none;margin:0 0 8px;padding:0;max-width:62ch}
.hero-points li{
  position:relative;
  padding-left:30px;
  margin-bottom:13px;
  color:var(--slate-light);
  font-size:1.12rem;
  line-height:1.55;
}
.hero-points li::before{
  content:"";
  position:absolute;left:0;top:11px;
  width:10px;height:10px;border-radius:2px;
  background:var(--amber);
}

/* ---------------------------------------------------------------
   Down arrow (end of hero + each section)
   --------------------------------------------------------------- */
.down-wrap{display:flex;justify-content:center;padding:34px 0 0}
.sol-hero .down-wrap{padding:26px 0 0}
.down-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--slate);
  background:#fff;
  transition:border-color .2s,color .2s,transform .2s;
}
.down-arrow:hover{border-color:var(--amber);color:var(--amber);transform:translateY(3px)}
.down-arrow svg{display:block}
.down-arrow--dark{
  border-color:rgba(255,255,255,.28);
  background:transparent;
  color:rgba(255,255,255,.75);
}
.down-arrow--dark:hover{border-color:var(--amber);color:var(--amber)}

/* ---------------------------------------------------------------
   SOLUTION SECTIONS — alternating two-column blocks
   --------------------------------------------------------------- */
.sol-section{padding:88px 0 56px}
.sol-section.soft{background:var(--bg-soft)}
.sol-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.sol-grid.flip .sol-text{order:2}
.sol-grid.flip .sol-visual{order:1}

.sol-num{
  font-size:.85rem;
  font-weight:700;
  letter-spacing:2px;
  color:var(--amber);
  margin-bottom:10px;
}
.sol-text .eyebrow{color:var(--slate);letter-spacing:2px;margin-bottom:10px}
.sol-text h2{max-width:18ch}
.sol-body{color:var(--slate);font-size:1.06rem;max-width:54ch}
.sol-text .ticks{margin:26px 0 30px}
.sol-text .ticks li{font-size:1.02rem}

/* Side note box */
.sol-note{
  border-left:4px solid var(--amber);
  background:#fff;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0 10px 10px 0;
  padding:20px 24px;
  max-width:52ch;
}
.sol-section.soft .sol-note{background:#fff}
.sol-note .nt{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 6px;
}
.sol-note p{margin:0;color:var(--navy);font-weight:500;font-size:1rem;line-height:1.6}

/* ---------------------------------------------------------------
   VISUAL CARDS (abstract, data-led — no stock imagery)
   --------------------------------------------------------------- */
.vis-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px 32px;
  box-shadow:0 24px 60px -36px rgba(11,37,69,.35);
}
.sol-section.soft .vis-card{box-shadow:0 24px 60px -36px rgba(11,37,69,.28)}
.vis-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:22px;
  gap:12px;
}
.vis-title{font-size:.78rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--navy)}
.vis-tag{font-size:.72rem;font-weight:600;color:var(--slate);border:1px solid var(--line);border-radius:20px;padding:3px 10px;white-space:nowrap}
.vis-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--slate)}
.vis-foot strong{color:var(--navy)}

/* — 01 · Spend bars — */
.spend-row{margin-bottom:16px}
.spend-row .lbl{display:flex;justify-content:space-between;font-size:.85rem;color:var(--slate);margin-bottom:6px}
.spend-row .lbl b{color:var(--navy);font-weight:600}
.spend-row .gap-note{color:var(--amber);font-weight:700}
.spend-bar{height:12px;border-radius:6px;background:var(--bg-soft);overflow:hidden}
.spend-bar i{display:block;height:100%;border-radius:6px;background:var(--navy)}
.spend-bar.is-gap i{background:var(--amber)}

/* — 02 · Landed cost stack — */
.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end}
.stack-col{display:flex;flex-direction:column;justify-content:flex-end}
.stack-col .col-lbl{text-align:center;font-size:.8rem;color:var(--slate);margin-top:12px;font-weight:600}
.stack-col .col-val{text-align:center;font-size:.78rem;color:var(--slate)}
.seg{border-radius:4px;margin-top:4px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase}
.seg-unit{background:var(--navy);color:#fff}
.seg-freight{background:#3d5a80;color:#fff}
.seg-duty{background:#6C7A89;color:#fff}
.seg-handling{background:#9AA7B3;color:#fff}
.seg-ghost{background:var(--bg-soft);color:var(--slate);border:1px dashed var(--line)}
.stack-rule{grid-column:1 / -1;border-top:2px solid var(--amber);margin-top:10px;padding-top:10px;
  font-size:.82rem;color:var(--navy);font-weight:600;text-align:center}

/* — 03 · Qualification checklist — */
.q-list{list-style:none;margin:0;padding:0}
.q-list li{
  display:flex;align-items:center;gap:14px;
  padding:13px 2px;border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--ink);
}
.q-list li:last-child{border-bottom:none}
.q-mark{
  flex:0 0 24px;height:24px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;
}
.q-list li.q-final{color:var(--navy);font-weight:600}
.q-list li.q-final .q-mark{background:var(--amber);color:var(--navy)}

/* — 04 · Route nodes — */
.route{display:flex;align-items:stretch;gap:0;justify-content:space-between}
.route-node{flex:1;text-align:center;padding:6px 4px}
.route-dot{
  width:46px;height:46px;border-radius:50%;
  margin:0 auto 10px;
  background:var(--bg-soft);border:2px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:var(--navy);letter-spacing:.5px;
}
.route-node.amber .route-dot{border-color:var(--amber);background:#FFF7E8;color:var(--navy)}
.route-node .rn-t{font-size:.86rem;font-weight:700;color:var(--navy);line-height:1.3}
.route-node .rn-s{font-size:.76rem;color:var(--slate);line-height:1.45;margin-top:3px}
.route-link{align-self:center;color:var(--amber);font-size:1.1rem;padding:0 6px;flex:0 0 auto;margin-top:-30px}

/* — 05 · Pilot steps — */
.p-steps{display:flex;flex-direction:column;gap:0}
.p-step{display:flex;gap:16px;position:relative;padding-bottom:24px}
.p-step:last-child{padding-bottom:0}
.p-step::before{
  content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:var(--line);
}
.p-step:last-child::before{display:none}
.p-n{
  flex:0 0 32px;height:32px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;position:relative;z-index:1;
}
.p-step.amber .p-n{background:var(--amber);color:var(--navy)}
.p-step .ps-t{font-weight:700;color:var(--navy);font-size:.95rem;line-height:1.3;padding-top:5px}
.p-step .ps-s{font-size:.84rem;color:var(--slate);line-height:1.5;margin-top:2px}

/* ---------------------------------------------------------------
   CTA band (inherits .cta-band from style.css)
   --------------------------------------------------------------- */
.cta-band .eyebrow{color:var(--amber)}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media(max-width:920px){
  .sol-grid{grid-template-columns:1fr;gap:38px}
  .sol-grid.flip .sol-text{order:1}
  .sol-grid.flip .sol-visual{order:2}
  .sol-section{padding:64px 0 44px}
  .sol-hero{padding:76px 0 44px}
  .stage-arrow{padding:0 8px}
  .stage-chip{padding:11px 16px}
  .route{flex-wrap:wrap;gap:14px}
  .route-link{display:none}
  .route-node{flex:1 1 40%}
}
@media(max-width:560px){
  .stack-grid{gap:16px}
  .vis-card{padding:24px 20px}

  /* Stage-flow: clean vertical list on phones */
  .stageflow{flex-direction:column;align-items:stretch;gap:8px}
  .stage{display:flex;width:100%}
  .stage-arrow{display:none}
  .stage-chip{
    flex-direction:row;
    align-items:center;
    gap:14px;
    width:100%;
    padding:13px 18px;
  }
  .stage-chip .sn{font-size:.72rem}
  .stage-chip .sw{font-size:1.05rem}
}