/* =========================================================================
   StepWISE — Homepage-only stylesheet (V1)
   Everything here is specific to the scroll-held hero, the desktop route
   rail and the mobile waypoint pips. Only index.html loads this file, so
   none of it can affect internal pages, and internal pages never need to
   carry this code's weight. Values are reused verbatim from the approved
   StepWISE_Homepage_v4.html baseline.
   ========================================================================= */

/* ---------- Hero (opening scene, contained visual) ---------- */
#hero{ padding-top:72px; padding-bottom:88px; }
.hero-pin{ position:relative; }
.hero-copy{ text-align:center; }
#hero h1{ font-size:50px; width:100%; text-wrap:balance; }
#hero .support{ margin:24px auto 0 auto; max-width:65ch; font-size:18px; color:#2c245f; text-align:left; }
#hero .cta-row{ margin-top:34px; margin-bottom:0; display:flex; align-items:center; justify-content:center; gap:20px; }

.hero-scene{
  width:100%; aspect-ratio:21/9; border-radius:8px; overflow:hidden; position:relative;
  background:#191919; isolation:isolate;
}
.hero-sequence{ margin-top:56px; position:relative; }
.hero-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.025); will-change:opacity,transform; }
.hero-frame:first-child{ opacity:1; transform:scale(1); }
.reduced-motion .hero-frame{ display:none; }
.reduced-motion .hero-frame:last-of-type{ display:block; opacity:1 !important; transform:none !important; }
/* Short mobile-landscape viewports: same static-final-frame treatment as
   reduced motion, but detected and toggled completely independently
   (see home.js) so the two conditions never merge. */
.short-landscape .hero-frame{ display:none; }
.short-landscape .hero-frame:last-of-type{ display:block; opacity:1 !important; transform:none !important; }

/* ---------- Challenge: "Where value gets lost" ---------- */
.challenge-intro{ max-width:58ch; font-size:17px; color:#2c245f; margin-bottom:26px; }
.challenge-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }
.challenge-list li{ position:relative; padding-left:22px; font-size:17px; color:#2c245f; max-width:58ch; }
.challenge-list li::before{ content:""; position:absolute; left:0; top:11px; width:9px; height:2px; background:var(--warm-gray); }

/* ---------- Positioning + differentiators ---------- */
#positioning .wrap{ text-align:left; }
#positioning h2.signature-line{ font-size:36px; margin-bottom:16px; }
#positioning > .wrap > p{ max-width:56ch; font-size:18px; color:#2c245f; }

/* ---------- Capabilities (homepage preview) ---------- */
#capabilities .intro{ max-width:64ch; font-size:18px; color:#2c245f; margin-bottom:40px; }

/* ---------- Method (homepage preview, sequential route animation) ---------- */
#method .intro{ max-width:64ch; font-size:18px; color:#2c245f; margin-bottom:44px; }
#method .method-dot{
  background:var(--paper-2); border:2px solid var(--warm-gray);
  transition:background var(--dur), border-color var(--dur), transform var(--dur);
}
#method .method-step.reached .method-dot{ background:var(--waypoint-blue); border-color:var(--waypoint-blue); }
#method .method-step.current .method-dot{ transform:scale(1.35); }

/* ---------- Environments and sectors (homepage preview) ---------- */
#environments p.lead{ max-width:64ch; font-size:18px; color:#2c245f; }

/* ---------- Ecosystem: orchestration flow ---------- */
#ecosystem p.lead{ max-width:62ch; font-size:18px; color:#2c245f; }
.flow-strip{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:32px; }
.flow-node{ display:flex; align-items:center; gap:8px; }
.flow-node .dot{ width:9px; height:9px; border-radius:50%; background:var(--waypoint-blue); flex:0 0 auto; }
.flow-node .flow-label{ font-size:13.5px; color:var(--navy); font-weight:600; white-space:nowrap; }
.flow-line{ flex:0 0 28px; height:2px; background:linear-gradient(90deg,var(--grad-start),var(--grad-end)); border-radius:2px; }

/* ---------- Philosophy / operational proof ---------- */
#philosophy{ background:var(--paper-2); }
#philosophy .wrap-wide{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#philosophy blockquote{ margin:0; font-size:36px; line-height:1.28; }
.proof-panel{ background:var(--white); border:1px solid var(--rule); border-radius:14px; padding:30px 32px; }
.proof-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.proof-list li{ position:relative; padding-left:24px; font-size:16.5px; font-weight:500; color:var(--navy); }
.proof-list li::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%; background:var(--waypoint-blue); }
.human-image{
  margin-top:26px; border-radius:10px; overflow:hidden;
  aspect-ratio:1400/498;
}
.human-image img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* ---------- Final CTA (homepage) ---------- */
#cta{ text-align:center; }
#cta p{ max-width:54ch; margin:0 auto 30px auto; font-size:19px; color:#2c245f; }

/* ---------- Desktop route rail ---------- */
.route-rail{ position:fixed; left:26px; top:120px; bottom:120px; width:2px; z-index:20; background:var(--rule); border-radius:2px; }
.route-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(180deg,var(--grad-start),var(--grad-end)); border-radius:2px; transition:height 80ms linear; }
.route-dot{
  position:absolute; left:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:2px solid var(--warm-gray);
  transition:background var(--dur), border-color var(--dur), transform var(--dur);
}
.route-dot.reached{ background:var(--waypoint-blue); border-color:var(--waypoint-blue); }
.route-dot.current{ transform:translate(-50%,-50%) scale(1.35); }

/* ---------- Mobile waypoint dots ---------- */
.mobile-waypoints{ display:none; align-items:center; justify-content:center; gap:8px; padding:10px 0; background:var(--paper); border-bottom:1px solid var(--rule); }
.mobile-waypoints .mdot{ width:6px; height:6px; border-radius:50%; background:var(--rule); transition:background var(--dur), width var(--dur), height var(--dur); }
.mobile-waypoints .mdot.current{ width:9px; height:9px; background:var(--navy); }

/* ---------- Narrow viewports (homepage-only) ---------- */
@media (max-width:760px){
  #hero{ padding-top:52px; padding-bottom:52px; }
  #hero h1{ font-size:30px; max-width:none; }
  #hero .support{ font-size:16px; }
  .hero-sequence{ margin-top:32px; }
  .hero-scene{ aspect-ratio:16/9; }
  #philosophy .wrap-wide{ grid-template-columns:1fr; gap:30px; }
  #philosophy blockquote{ font-size:27px; }
  #positioning h2.signature-line{ font-size:27px; }
  .route-rail{ display:none; }
  .mobile-waypoints{ display:flex; }
}