/* Prova S1 v5: calm hero + one journey section. Loads after s1-inside-v4.css. */

/* ---------- Local nav: plain title, no status line ---------- */
.l-title b{font-weight:600}
.l-title .grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:inherit}
.l-title small{display:none}

/* ---------- HERO ---------- */
.hx{position:relative;height:calc(100svh - var(--gnav-h) - var(--lnav-h));min-height:640px;max-height:1060px;overflow:hidden;background:#000;isolation:isolate}
.hx-copy{position:relative;z-index:2;text-align:center;padding:clamp(40px,8.2vh,96px) 24px 0}
.hx-h{margin:0;display:flex;flex-direction:column;align-items:center}
.hx-name{font-size:clamp(56px,6.6vw,104px);line-height:1;letter-spacing:-.022em;font-weight:500;color:#f5f5f7}
.hx-sub{text-wrap:balance;margin-top:clamp(10px,1.4vh,16px);font-size:clamp(21px,2.05vw,30px);line-height:1.18;letter-spacing:-.004em;font-weight:500;color:#86868b}
/* the shot: head sits under the type, glass runs out of frame */
.hx-shot{position:absolute;z-index:1;left:50%;top:var(--hx-top,0px);width:var(--hx-w,1400px);transform:translateX(-50%);pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 0,#000 72%,transparent 99%);mask-image:linear-gradient(#000 0,#000 72%,transparent 99%)}
.hx-shot img{display:block;width:100%;height:auto}
.hx::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:min(22vh,190px);background:linear-gradient(rgba(0,0,0,0),#000 88%);pointer-events:none}
.hx-shot{--hx-w:clamp(900px,calc((100svh - 346px) * 2.05),1240px);--hx-top:calc(var(--hx-head,262px) - var(--hx-w) * .127)}
@media (min-width:1600px) and (min-height:1000px){.hx{--hx-head:300px}}
@media (max-width:734px){
  .hx{min-height:600px;height:calc(100svh - var(--gnav-h) - var(--lnav-h))}
  .hx-copy{padding-top:44px}
  .hx-name{font-size:clamp(48px,14vw,64px)}
  .hx-sub{font-size:clamp(19px,5.4vw,23px);max-width:15em}
  .hx-shot{--hx-w:236vw;--hx-top:calc(236px - 236vw * .127)}
}
@media (prefers-reduced-motion:no-preference){
  .hx-copy,.hx-shot{animation:hx-in 1.2s cubic-bezier(.2,.7,.2,1) both}
  .hx-shot{animation-delay:.12s}
  @keyframes hx-in{from{opacity:0;transform:translate(var(--tx,0),14px)}to{opacity:1;transform:translate(var(--tx,0),0)}}
  .hx-shot{--tx:-50%}
}

/* ---------- JOURNEY: one pinned stage, one trace ---------- */
.jx{position:relative;height:560vh;background:#000}
.jx-pin{position:sticky;top:var(--lnav-h,52px);height:calc(100svh - var(--lnav-h,52px));display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:clamp(28px,5vh,64px) 0 clamp(14px,2.4vh,26px);overflow:hidden}
.jx-head{width:min(1180px,calc(100% - 48px));margin:0 auto}
.jx-h{margin:0;font-size:clamp(34px,3.6vw,56px);line-height:1.04;letter-spacing:-.016em;font-weight:500;color:#f5f5f7}
.jx-h span{color:#86868b}
.jx-stage{position:relative;width:min(1180px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:center;gap:clamp(24px,3vw,56px);min-height:0}
.jx-shots{position:relative;aspect-ratio:16/10;max-height:100%;min-height:0;justify-self:stretch;align-self:center}
.jx-shot{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.3,.6,.2,1)}
.jx-shot.on{opacity:1}
.jx-shot img{width:100%;height:100%;object-fit:contain;display:block}
.jx-steps{list-style:none;margin:0;padding:0;position:relative;align-self:center;min-height:16em}
.jx-step{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.jx-step.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
.jx-k{margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:.01em;color:#86868b;display:flex;gap:10px}
.jx-k .num{color:#6e6e73;font-weight:500}
.jx-step h3{margin:0;font-size:clamp(24px,2.1vw,32px);line-height:1.12;letter-spacing:-.01em;font-weight:500;color:#f5f5f7;text-wrap:balance}
.jx-read{margin:18px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jx-read b{font-size:clamp(28px,2.4vw,36px);font-weight:500;letter-spacing:-.01em;color:#f5f5f7}
.jx-read span{font-size:15px;color:#86868b}
.jx-d{margin:14px 0 0;font-size:17px;line-height:1.47;color:#a1a1a6;max-width:30em}
/* trace */
.jx-trace{position:relative;width:min(1180px,calc(100% - 48px));margin:clamp(10px,2vh,22px) auto 0;padding:0 0 0 40px}
.jx-trace svg{display:block;width:100%;height:clamp(64px,10vh,104px);overflow:visible}
.jx-grid path{stroke:rgba(255,255,255,.08);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.jx-grid .sep{stroke:rgba(255,255,255,.14);stroke-dasharray:2 4}
.jx-line-all{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jx-line{fill:none;stroke:#f5f5f7;stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jx-dot{fill:#f5f5f7}
.jx-ylab{position:absolute;left:0;top:0;height:clamp(64px,10vh,104px);display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:#6e6e73;font-variant-numeric:tabular-nums}
.jx-ylab span{transform:translateY(-50%)}.jx-ylab span:last-child{transform:translateY(50%)}
.jx-ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);font-size:12px;color:#6e6e73}
.jx-ticks li{padding-left:2px;transition:color .4s}
.jx-ticks li.on{color:#f5f5f7}
.jx-now{position:absolute;right:0;top:-30px;display:flex;gap:10px;align-items:baseline;font-size:13px;color:#86868b}
.jx-now b{font-size:15px;font-weight:600;color:#f5f5f7}
.jx-fine{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:12px 0 0 40px;font-size:11px;color:#6e6e73}
@media (max-width:980px),(max-width:1180px) and (orientation:portrait){
  .jx{height:520vh}
  .jx-stage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:16px}
  .jx-shots{width:100%;max-height:none}
  .jx-steps{min-height:13.5em}
  .jx-d{display:none}
  .jx-pin{padding-top:22px}
}
@media (max-width:734px){
  .jx-h{font-size:30px}
  .jx-shots{width:calc(100% + 48px);margin:0 -24px}
  .jx-step h3{font-size:22px}
  .jx-read b{font-size:26px}
  .jx-trace{padding-left:30px}
  .jx-ticks{font-size:10px}
  .jx-now{top:-26px}
}
@media (max-height:760px) and (min-width:981px){.jx-d{display:none}.jx-steps{min-height:11em}}
@media (prefers-reduced-motion:reduce){.jx-shot,.jx-step{transition:none}}