/* ════════════════════════════════════════════════════════════════
   ARETA — Process page: vertical timeline + animated journey map.
   SCOPED build for the live site: globals (:root/*/body/a/.wrap/em/.btn)
   from the source were dropped; all tokens live on .timeline/.jrny so
   nothing leaks. `.reveal` renamed to `.p-reveal` so the site's GSAP
   reveal never touches these (areta-process.js owns the .in toggle).
   Loaded on process.html only.
   ════════════════════════════════════════════════════════════════ */
.p-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-apple),transform .8s var(--ease-apple);}
.p-reveal.in{opacity:1;transform:none;}
.p-reveal[data-d="1"]{transition-delay:.07s;}.p-reveal[data-d="2"]{transition-delay:.14s;}

/* ════════════ VERTICAL TIMELINE ════════════ */
.timeline{position:relative;padding-block:clamp(18px,3vh,34px) clamp(12px,2vh,24px);}
.tl-step{position:relative;display:grid;grid-template-columns:60px 1fr;gap:clamp(18px,3.4vw,34px);
  padding-block:clamp(10px,1.7vh,18px);}
/* rail: faint base line + accent fill + disc */
.tl-rail{position:relative;display:flex;justify-content:center;}
.tl-rail::after{content:"";position:absolute;inset-inline-start:29px;top:0;bottom:calc(-1 * clamp(10px,1.7vh,18px));width:2px;background:rgba(16,20,36,.1);}
.tl-rail::before{content:"";position:absolute;inset-inline-start:29px;top:0;bottom:calc(-1 * clamp(10px,1.7vh,18px));width:2px;z-index:1;
  background:linear-gradient(180deg,var(--accent,#3b89ff),color-mix(in oklab,var(--accent,#3b89ff) 55%,#06b6d4));
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-apple);}
.tl-step.in .tl-rail::before{transform:scaleY(1);}
.tl-step:last-child .tl-rail::after,.tl-step:last-child .tl-rail::before{bottom:auto;height:58px;}
.tl-disc{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;color:#fff;position:relative;z-index:2;
  background:linear-gradient(180deg,#101424,#070a14);border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 32px -18px rgba(16,20,36,.55);
  transition:box-shadow .55s var(--ease-apple),border-color .55s,transform .55s var(--ease-apple);}
.tl-disc svg{width:27px;height:27px;}
.tl-step.in .tl-disc{transform:translateY(-2px);border-color:color-mix(in oklab,var(--accent,#3b89ff) 60%,transparent);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--accent,#3b89ff) 14%,transparent),0 20px 38px -16px color-mix(in oklab,var(--accent,#3b89ff) 70%,transparent);}
.tl-disc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--accent,#3b89ff) 50%,transparent);opacity:0;}
.tl-step.in .tl-disc::after{animation:discPing 1.6s ease-out 1;opacity:1;}
@keyframes discPing{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent,#3b89ff) 50%,transparent);}100%{box-shadow:0 0 0 18px transparent;}}

.tl-body{padding-bottom:6px;min-width:0;}
.tl-kicker{display:flex;align-items:baseline;gap:11px;margin-bottom:9px;}
.tl-kicker .n{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,5vw,42px);line-height:.8;color:var(--accent,#3b89ff);
  /* a11y: large-text contrast — mix each step's accent toward ink; worst accent lands 3.5:1+ (axe-verified) */
  color:color-mix(in srgb, var(--accent,#3b89ff) 64%, #1a1a2e 36%);}
.tl-kicker .lbl{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.07em;color:var(--ink-muted);text-transform:uppercase;}
.tl-body h2{font-family:'Rubik',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(23px,3.2vw,40px);margin:0 0 12px;text-wrap:balance;}
.tl-lead{color:var(--ink-muted);font-size:clamp(15px,1.4vw,18px);margin:0 0 12px;max-width:52ch;}
.tl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.tl-list li{position:relative;padding-inline-start:28px;font-size:15px;color:#3a3a3d;max-width:54ch;}
.tl-list li::before{content:"";position:absolute;inset-inline-start:2px;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--accent,#3b89ff);opacity:.16;}
.tl-list li::after{content:"";position:absolute;inset-inline-start:6px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--accent,#3b89ff);}


@media (max-width:560px){
  .tl-step{grid-template-columns:48px 1fr;gap:16px;}
  .tl-rail::after,.tl-rail::before{inset-inline-start:23px;}
  .tl-disc{width:48px;height:48px;border-radius:14px;}
  .tl-disc svg{width:23px;height:23px;}
  .tl-step:last-child .tl-rail::after,.tl-step:last-child .tl-rail::before{height:48px;}
}

/* ════════════════════════════════════════════════════════════════
   THE ANIMATION — full-journey map. On reveal: nodes light + connectors
   fill in sequence (once). No hover replay, no loop.
   ════════════════════════════════════════════════════════════════ */
/* top padding clears the fixed nav pill (~80px desktop / ~68px phone) so the
   journey rail is never tucked under the menu. */
.jrny-sec{padding-block:clamp(88px,11vh,112px) clamp(26px,5vh,52px);}
.jrny{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;color:var(--on-dark);
  background:linear-gradient(180deg,#101424,#070a14);border:1px solid rgba(255,255,255,.12);
  padding:clamp(34px,5vw,64px) clamp(22px,4vw,56px) clamp(30px,4vw,52px);
  box-shadow:0 60px 120px -60px rgba(16,20,36,.95);}
.jrny::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.8;
  background:radial-gradient(55% 80% at 82% -14%,rgba(59,137,255,.34),transparent 60%),
             radial-gradient(48% 80% at 6% 116%,rgba(16,185,129,.24),transparent 60%);}
.jrny-grid{position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/48px 48px,
             linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 86%);
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 86%);}
.jrny::after{content:"";position:absolute;inset-inline:0;top:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);}

.jrny-flow{position:relative;z-index:2;display:flex;align-items:flex-start;gap:0;}
.jnode{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  opacity:0;transform:translateY(14px) scale(.94);}
.jrny.in .jnode{animation:jin .6s var(--ease-apple) forwards;}
@keyframes jin{to{opacity:1;transform:none;}}
.jrny.in .jnode:nth-child(1){animation-delay:.25s;}
.jrny.in .jnode:nth-child(3){animation-delay:.85s;}
.jrny.in .jnode:nth-child(5){animation-delay:1.45s;}
.jrny.in .jnode:nth-child(7){animation-delay:2.05s;}
.jrny.in .jnode:nth-child(9){animation-delay:2.65s;}
.jdisc{width:clamp(54px,7vw,66px);aspect-ratio:1;border-radius:18px;display:grid;place-items:center;position:relative;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:.5s;}
.jdisc svg{width:46%;height:46%;}
.jrny.in .jnode .jdisc{animation:jdisc .6s var(--ease-apple) forwards;}
@keyframes jdisc{to{background:color-mix(in oklab,var(--accent,#3b89ff) 22%,transparent);
  border-color:color-mix(in oklab,var(--accent,#3b89ff) 60%,transparent);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent,#3b89ff) 32%,transparent),0 20px 42px -20px color-mix(in oklab,var(--accent,#3b89ff) 90%,transparent);}}
.jdisc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--accent,#3b89ff) 55%,transparent);}
.jrny.in .jnode .jdisc::after{opacity:1;animation:jping 1.7s ease-out 1;}
@keyframes jping{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent,#3b89ff) 55%,transparent);}100%{box-shadow:0 0 0 22px transparent;}}
.jrny.in .jnode:nth-child(1) .jdisc,.jrny.in .jnode:nth-child(1) .jdisc::after{animation-delay:.25s;}
.jrny.in .jnode:nth-child(3) .jdisc,.jrny.in .jnode:nth-child(3) .jdisc::after{animation-delay:.85s;}
.jrny.in .jnode:nth-child(5) .jdisc,.jrny.in .jnode:nth-child(5) .jdisc::after{animation-delay:1.45s;}
.jrny.in .jnode:nth-child(7) .jdisc,.jrny.in .jnode:nth-child(7) .jdisc::after{animation-delay:2.05s;}
.jrny.in .jnode:nth-child(9) .jdisc,.jrny.in .jnode:nth-child(9) .jdisc::after{animation-delay:2.65s;}
.jnum{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,3vw,30px);line-height:1;color:var(--accent,#3b89ff);}
.jname{font-family:'JetBrains Mono',monospace;font-size:13px;color:#fff;}

.jconn{flex:0 0 clamp(18px,5vw,90px);height:3px;border-radius:3px;margin-top:clamp(27px,3.5vw,32px);position:relative;
  background:rgba(255,255,255,.12);overflow:hidden;}
.jconn .jf{position:absolute;inset:0;border-radius:3px;transform:scaleX(0);transform-origin:right;
  background:linear-gradient(90deg,var(--primary-glow),var(--teal));}
.jrny.in .jconn .jf{animation:jfill .55s var(--ease-apple) forwards;}
@keyframes jfill{to{transform:scaleX(1);}}
.jrny.in .jconn:nth-child(2) .jf{animation-delay:.55s;}
.jrny.in .jconn:nth-child(4) .jf{animation-delay:1.15s;}
.jrny.in .jconn:nth-child(6) .jf{animation-delay:1.75s;}
.jrny.in .jconn:nth-child(8) .jf{animation-delay:2.35s;}

.jrny-cta{position:relative;z-index:2;text-align:center;margin-top:clamp(18px,2.6vw,30px);}

@media (max-width:640px){
  .jrny-flow{flex-direction:column;align-items:stretch;}
  .jnode{flex-direction:row;justify-content:flex-start;text-align:start;gap:14px;}
  .jconn{flex:0 0 26px;width:3px;height:26px;align-self:flex-start;margin:0;margin-inline-start:clamp(27px,7vw,33px);}
  .jconn .jf{transform-origin:top;}
  .jrny.in .jconn .jf{animation:jfillY .55s var(--ease-apple) forwards;}
  @keyframes jfillY{to{transform:scaleY(1);}}
}

@media (prefers-reduced-motion:reduce){
  .timeline *,.timeline *::before,.timeline *::after,.jrny *,.jrny *::before,.jrny *::after{animation:none!important;transition-duration:.001ms!important;}
  .p-reveal{opacity:1!important;transform:none!important;}
  .tl-rail::before{transform:scaleY(1)!important;}
  .jnode{opacity:1!important;transform:none!important;}
  .jconn .jf{transform:scaleX(1)!important;}
}

/* scoped emphasis (replaces the dropped global em rule) */
.tl-body h2 em{font-style:normal;background:var(--em-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* ── vibrant per-step identity — colored disc chip + accent underline on the
   heading emphasis (ink text, like the hero/services), matching the site palette ── */
.tl-disc{
  background:linear-gradient(158deg, var(--accent,#3b89ff), color-mix(in oklab, var(--accent,#3b89ff) 50%, #0a1024));
  border-color:color-mix(in oklab, var(--accent,#3b89ff) 34%, rgba(255,255,255,.22));
  box-shadow:0 16px 34px -16px color-mix(in oklab, var(--accent,#3b89ff) 62%, transparent);
}
.tl-body h2 em{
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--ink);color:var(--ink);
  background:linear-gradient(90deg, var(--accent,#3b89ff), color-mix(in oklab, var(--accent,#3b89ff) 55%, #8b5cf6)) left bottom/100% .1em no-repeat;
  padding-bottom:.1em;
}