/* ===== Shared P/P/P sticky pointed-tab bar =====================================
   Single source of truth for the People / Process / Product bar.
   HOME (P1S5) uses the base rules below UNCHANGED (single sliding pill, perfect
   corners). SOLUTIONS (P2S2) reuses the SAME .solnav__step buttons but its own
   CONTAINER: floats transparent over the hero, then bands on scroll, and paints the
   steps as a tri-tone chevron flow. All Solutions overrides are .page-solutions-scoped
   so Home can never be affected again. Linked after styles.css. ================= */
:root{ --solnav-h: 84px; }

/* Animatable chevron depths: registering them as <length> lets the pill MORPH
   its left-notch / right-point in sync with the slide (no snap). */
@property --chev-l{ syntax:'<length>'; inherits:false; initial-value:0px; }
@property --chev-r{ syntax:'<length>'; inherits:false; initial-value:30px; }

.sol-zones{ position:relative; }
.solnav{ position:sticky; top:var(--solnav-h); z-index:50; background:#0c3556; border-bottom:1px solid var(--c-line); }  /* constant band tint (= Process); no scroll change */
.solnav__inner{ position:relative; }
.solnav__bar{ --chev-size:30px; --chev-gap:6px; position:relative; display:flex; gap:var(--chev-gap); padding-block:var(--space-md); }
.solnav__pill{ position:absolute; top:var(--space-md); left:0; height:calc(100% - (2 * var(--space-md))); width:0; background:#408CF5; border-radius:var(--r-md);
  --pill-r:40px;   /* the People/Product outer sweep radius; shrinks on m/t (bar is much shorter) */
  --chev-l:0px; --chev-r:var(--chev-size);
  /* Unified 6-point silhouette. Right point = 100%-chev-r apex; left notch apex = chev-l.
     chev-l:0  -> apex on the left edge = flat left; chev-r:0 -> apex on right edge = flat right. */
  -webkit-clip-path:polygon(0 0, calc(100% - var(--chev-r)) 0, 100% 50%, calc(100% - var(--chev-r)) 100%, 0 100%, var(--chev-l) 50%);
  clip-path:polygon(0 0, calc(100% - var(--chev-r)) 0, 100% 50%, calc(100% - var(--chev-r)) 100%, 0 100%, var(--chev-l) 50%);
  transform:translateX(0); transition:transform .45s var(--ease), width .45s var(--ease), background .45s var(--ease), border-radius .45s var(--ease), --chev-l .45s var(--ease), --chev-r .45s var(--ease); z-index:0; pointer-events:none; }
/* People (first): light pill, sharp top-left, rounded bottom-left, pointed right */
.solnav__bar[data-active="0"] .solnav__pill{ background:#BEE3FA; border-radius:0 0 0 var(--pill-r); --chev-l:0px; --chev-r:var(--chev-size); }
/* Process (middle): medium pill, notch-in + point-out (double chevron) */
.solnav__bar[data-active="1"] .solnav__pill{ background:#4785ac; border-radius:0; --chev-l:var(--chev-size); --chev-r:var(--chev-size); }
/* Product (last): dark pill, notch left, flat right, rounded top-right */
.solnav__bar[data-active="2"] .solnav__pill{ background:#08203a; border-radius:0 var(--pill-r) 0 0; --chev-l:var(--chev-size); --chev-r:0px; }
.solnav__step{ flex:1 1 0; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; border:0; background:transparent; font-family:var(--font-accent); font-size:var(--fs-h3); font-weight:var(--w-med); letter-spacing:.04em; padding:var(--space-md) var(--space-lg); color:rgba(190,227,250,.5); cursor:pointer; transition:color .35s var(--ease); -webkit-tap-highlight-color:transparent; }
.solnav__step:hover{ color:var(--c-pale); }
.solnav__step .solnav__num{ font-size:.72em; font-weight:var(--w-semi); opacity:.7; margin-right:.55em; }
.solnav__step.is-active{ font-weight:var(--w-semi); color:var(--c-white); }
.solnav__step.is-active .solnav__num{ opacity:.9; }
.solnav__bar[data-active="0"] .solnav__step.is-active{ color:#0c3556; }   /* label = band bg colour, on the light People pill */
.solnav__progress{ position:relative; height:3px; background:var(--c-line); overflow:hidden; }
.solnav__progress-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:#408CF5; transition:width .12s linear; }
.sol-zone{ scroll-margin-top:calc(var(--solnav-h) + 92px); }

/* ============================================================================
   SOLUTIONS ONLY — SAME look as the Home pill, but painted on ALL THREE steps at
   once (Home slides one active pill; Solutions shows all three "active"). Only the
   CONTAINER differs: it floats transparent over the hero, then bands on scroll
   (.is-stuck). Each step::before reuses the Home pill's exact footprint, chevron
   clip-path, corner radius and colours (#BEE3FA / #4785ac / #08203a). HOME UNTOUCHED.
   ============================================================================ */
.page-solutions .solnav{ margin-top:-104px; background:transparent; border-bottom-color:transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease); }
.page-solutions .solnav.is-stuck{ background:#0c3556; border-bottom-color:var(--c-line); }
.page-solutions .solnav__pill{ display:none; }
.page-solutions .solnav__bar{ gap:0; --sol-pill-r:40px; }

.page-solutions .solnav__step{ position:relative; z-index:1; color:var(--ink); }
/* ::before == the Home pill for this stage. inset:0 = the bar's content box (the
   bar's own padding-block already gives the band margin above/below), matching Home. */
.page-solutions .solnav__step::before{ content:""; position:absolute; z-index:-1; inset:0;
  background:var(--tone); border-radius:var(--pill-radius, 0);
  transition:background .35s var(--ease);   /* fade the tone in/out with the band (not a sudden cut) */
  -webkit-clip-path:polygon(0 0, calc(100% - var(--cr)) 0, 100% 50%, calc(100% - var(--cr)) 100%, 0 100%, var(--cl) 50%);
  clip-path:polygon(0 0, calc(100% - var(--cr)) 0, 100% 50%, calc(100% - var(--cr)) 100%, 0 100%, var(--cl) 50%); }
/* People (= Home pill data-active 0): flat left, point right, rounded bottom-left */
.page-solutions .solnav__step[data-stage="0"]{ --tone:#BEE3FA; --ink:#0c3556; --cl:0px; --cr:var(--chev-size); --pill-radius:0 0 0 var(--sol-pill-r); z-index:3; }
/* Process (= data-active 1): notch left, point right */
.page-solutions .solnav__step[data-stage="1"]{ --tone:#4785ac; --ink:var(--c-white); --cl:var(--chev-size); --cr:var(--chev-size); z-index:2; margin-left:calc(-1 * var(--chev-size)); padding-left:calc(var(--space-lg) + var(--chev-size)); }
/* Product (= data-active 2): notch left, flat right, rounded top-right */
.page-solutions .solnav__step[data-stage="2"]{ --tone:#08203a; --ink:var(--c-white); --cl:var(--chev-size); --cr:0px; --pill-radius:0 var(--sol-pill-r) 0 0; z-index:1; margin-left:calc(-1 * var(--chev-size)); padding-left:calc(var(--space-lg) + var(--chev-size)); }
/* FLOATING (not stuck) = all three coloured (the tri-tone showcase, above). Once the
   band appears (.is-stuck), reset to a single-active scroll-spy: only the ACTIVE step
   keeps its colour; the others go transparent + muted. solutions.js advances .is-active
   per zone as you scroll, so it starts on People and moves to Process/Product in turn. */
.page-solutions .solnav.is-stuck .solnav__step:not(.is-active)::before{ background:transparent; }
.page-solutions .solnav.is-stuck .solnav__step:not(.is-active){ color:var(--t-on-dark-muted); }
/* Progress track follows the band: transparent while floating, surfaces on scroll. */
.page-solutions .solnav__progress{ background:transparent; transition:background .35s var(--ease); }
.page-solutions .solnav.is-stuck .solnav__progress{ background:var(--c-line); }

@media (max-width:979.98px){
  .solnav__bar{ padding-block:var(--space-xs); --chev-size:18px; }
  .solnav__pill{ top:var(--space-xs); height:calc(100% - (2 * var(--space-xs))); --pill-r:18px; }
  .solnav__step{ font-size:var(--fs-xs); padding:var(--space-sm) var(--space-xs); }
  .solnav__step .solnav__num{ display:none; }
  .page-solutions .solnav__bar{ --sol-pill-r:18px; }
  .page-solutions .solnav__step[data-stage="1"],
  .page-solutions .solnav__step[data-stage="2"]{ padding-left:calc(var(--space-xs) + var(--chev-size)); }
}
@media (prefers-reduced-motion:reduce){
  .solnav__pill, .solnav__progress-fill, .solnav__step{ transition:none !important; }
}