/* ============================================================
   BPI · Juan multi-page site chrome — layered on /assets/bpi.css
   Shared top-nav (multi-page), footer, and small page helpers so
   Home / About / Services / Process / Case Studies / Resources /
   Contact + the Juan funnel landing page all feel like one site.
   Brand is inherited from bpi.css (navy x white x glass, NO gold).
   ============================================================ */

/* multi-page top nav: more links than the single-page funnel topbar */
.sitenav .nav-links{display:flex;gap:clamp(14px,1.6vw,26px);align-items:center}
.sitenav .nav-links a{position:relative;white-space:nowrap}
.sitenav .nav-links a.active{color:var(--ink)}
.sitenav .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad-teal)}
@media(max-width:1080px){
  /* collapse the wide nav into a horizontal scroll strip under the bar on tablet/mobile */
  .sitenav .nav-links{display:none}
  .sitenav .mobnav-toggle{display:inline-flex}
}
.sitenav .mobnav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.sitenav .mobnav-toggle svg{width:22px;height:22px}
.mobnav{display:none;position:fixed;inset:0;z-index:120;background:rgba(6,20,31,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:90px 28px 40px;flex-direction:column;gap:6px}
.mobnav.open{display:flex}
.mobnav a{font-family:"Helvetica Now Display","Helvetica Neue",Inter,Arial,sans-serif;font-size:1.6rem;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none;display:flex;justify-content:space-between;align-items:center}
.mobnav a .ar{color:var(--ink-mute)}
.mobnav .close{position:absolute;top:22px;right:24px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font-size:22px;cursor:pointer}

/* page hero (smaller than the funnel hero — for interior pages) */
.pagehero{padding:clamp(64px,9vw,128px) 0 clamp(28px,4vw,52px)}
.pagehero .eyebrow{display:inline-block}
.pagehero h1{margin:14px 0 0;font-size:clamp(2.3rem,5.2vw,4rem)}
.pagehero p.lead{margin-top:18px;max-width:720px}

/* pull-quote block for weaving Juan's words through pages */
.juanquote{position:relative;padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.juanquote img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line-gold)}
.juanquote q{font-family:"Helvetica Now Display","Helvetica Neue",Inter,Arial,sans-serif;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4;display:block;font-weight:500}
.juanquote q::before{content:"\201C"}.juanquote q::after{content:"\201D"}
.juanquote .by{display:block;margin-top:12px;font:600 .72rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.juanquote .by b{color:var(--ink)}
.juanquote .es{color:var(--ink-soft)}
@media(max-width:560px){.juanquote{grid-template-columns:1fr}.juanquote img{width:54px;height:54px}}

/* simple two-up + service rows reused across pages */
.svc{display:grid;gap:18px}
.svc .row{display:grid;grid-template-columns:1fr;gap:10px;padding:clamp(24px,3.4vw,38px)}
.svc .row h3{font-size:1.45rem}
.svc .row .lab{font:600 .68rem/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.svc .row .mb{margin-top:6px;align-self:flex-start;font:600 .62rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:#04201d;background:var(--grad-teal);padding:.34rem .6rem;border-radius:999px}

/* cross-page CTA strip */
.crossnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.crossnav a{padding:24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;transition:transform .2s,box-shadow .25s}
.crossnav a:hover{transform:translateY(-4px);box-shadow:var(--glow),var(--shadow)}
.crossnav a .k{font:600 .66rem/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.crossnav a h4{font-family:"Helvetica Now Display","Helvetica Neue",Inter,Arial,sans-serif;font-size:1.2rem;font-weight:500;margin:0}
.crossnav a .go{color:var(--teal);font-size:.9rem;margin-top:4px;display:inline-flex;gap:.4em;align-items:center}

/* ============================================================
   INTERACTIVE ANIMATED TIMELINE — vertical connector + milestone
   nodes w/ icons, directional flow, scroll-reveal. Used on the
   funnel "story" arc and the Process page. .tl wraps .tl-item rows.
   ============================================================ */
.tl{position:relative;max-width:900px;margin:0 auto;padding:8px 0}
.tl::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line-gold) 8%,var(--line-gold) 92%,transparent);}
/* animated progress line that fills as you scroll (set --tlp 0..1 via JS) */
.tl::after{content:"";position:absolute;left:31px;top:8px;width:2px;height:calc((100% - 16px) * var(--tlp,0));
  background:linear-gradient(180deg,#fff,rgba(120,180,220,.7));box-shadow:0 0 12px rgba(120,180,220,.6);
  transition:height .25s linear;border-radius:2px}
.tl-item{position:relative;padding:0 0 30px 78px;opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.tl-item.in{opacity:1;transform:none}
.tl-item:last-child{padding-bottom:0}
.tl-node{position:absolute;left:8px;top:0;width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  /* SOLID base under the glass tint so the connector line never shows THROUGH the node */
  background:linear-gradient(var(--glass-strong),var(--glass-strong)),var(--bg-3);
  border:1px solid var(--line-gold);box-shadow:var(--ring);z-index:2;color:var(--ink);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.tl-item.in .tl-node{animation:tlpop .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes tlpop{0%{transform:scale(.4) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.tl-node svg{width:22px;height:22px;stroke-width:1.9}
.tl-node .num{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  background:var(--grad-teal);color:#04201d;font:700 .64rem/20px Inter;text-align:center}
/* modern done-tick badge for the final timeline node (replaces the ✓ text glyph) */
.tl-node .tl-check{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--grad-teal);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 2px var(--bg-3)}
.tl-node .tl-check svg{width:12px;height:12px;stroke:#04201d;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;fill:none;animation:none}
.tl-item:hover .tl-node{transform:scale(1.08);box-shadow:var(--glow)}
.tl-card{padding:22px 26px}
.tl-card .ph{font:600 .68rem/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:9px;display:flex;align-items:center;gap:.5em}
.tl-card q{font-size:1.12rem;line-height:1.5;display:block}
.tl-card q::before{content:"\201C"}.tl-card q::after{content:"\201D"}
.tl-card .es{color:var(--ink-soft);font-style:italic}
.tl-card .tl-arrow{display:inline-flex;color:var(--teal);margin-top:10px;font-size:.82rem;align-items:center;gap:.4em;letter-spacing:.04em}
.tl-card .tl-arrow svg{width:1.1em;height:1.1em;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(max-width:560px){.tl-item{padding-left:64px}.tl::before,.tl::after{left:23px}.tl-node{width:42px;height:42px;left:2px}}

/* small animated stat/figure chips reused across pages */
.figrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.fig{display:flex;align-items:center;gap:.6em;padding:.6rem .9rem;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
.fig svg{width:18px;height:18px;color:var(--teal);flex:none}
.fig b{font-family:"Helvetica Now Display","Helvetica Neue",Inter,Arial,sans-serif;font-weight:600}
.fig span{color:var(--ink-soft);font-size:.86rem}

/* icon badge for section headers + feature cards */
.ic-badge{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass-strong);border:1px solid var(--line-gold);box-shadow:var(--ring);margin-bottom:14px}
.ic-badge svg{width:22px;height:22px;color:var(--ink);stroke-width:1.9}

/* connector arrow between process steps / cards */
.flowarrow{display:flex;justify-content:center;color:var(--ink-mute);margin:-2px 0 6px}
.flowarrow svg{width:26px;height:26px;animation:nudgeY 2s ease-in-out infinite}
@keyframes nudgeY{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* invest-bpi: timely event nav link (gold accent so the 4 Jul event stands out) */
.nav-links a.nav-event{color:var(--gold-hi);font-weight:600}
.nav-links a.nav-event::after{content:"";display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:var(--gold-hi);vertical-align:middle;animation:nudgeY 2s ease-in-out infinite}