/* Projects - hero in the same pattern as the other inner pages (generated from the current site layout) */
.e-74a46a50{background-image:url('../../img/pages/projects/b3.jpeg');background-size:cover;background-position:center center;background-repeat:no-repeat}
.e-74a46a50>.e-ov{background-color:#212121;opacity:0.7}
.e-74a46a50{padding:7% 0 0 0}
.e-74a46a50{z-index:2}
.e-285f2a4a{width:100%}
.e-285f2a4a>.e-w{padding:0 0 0 0}
.e-c15d2d1{padding:7em 1em 0 1em;margin:0 0 -2em 0}
.e-3b981185{width:100%}
.e-3b981185>.e-w{padding:0 0 7em 1em;margin:0 50% 0 0}
.e-3b981185>.e-w{border-style:solid;border-width:0 0 0 1px;border-color:#007EFF}
.e-868badf .e-title{color:#FFFFFF}
.e-2984a79 .e-title{color:#FFFFFF}
@media (max-width:1024px){
.e-74a46a50{padding:7em 0 0 0}
.e-c15d2d1{padding:7em 1em 5em 1em;margin:0 0 0 0}
.e-3b981185>.e-w{padding:0 0 5em 1em;margin:0 0 -7em 0}
}
@media (max-width:767px){
.e-c15d2d1{padding:3em 1em 3em 1em}
.e-3b981185>.e-w{padding:0 0 5em 1em;margin:0 0 -5em 0}
}

/* Projects - "portfolio coming soon" content (hand-built) */

/* ---------- Intro: text + blueprint ---------- */
.pj-intro { background: #fff; }
.pj-intro__grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 64px; align-items: center; }
.pj-intro .h2 { margin-bottom: 22px; }
.pj-lead { font-size: 16px; line-height: 1.75; margin: 0; max-width: 540px; }

/* status widget */
.pj-status { margin-top: 30px; max-width: 480px; padding: 22px 24px; background: var(--light); }
.pj-status__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; }
.pj-status__now { color: var(--text); text-align: right; }
.pj-status__now b { color: var(--ink); font-weight: 600; display: inline-block; transition: opacity .35s, transform .35s; }
.pj-status__now b.is-out { opacity: 0; transform: translateY(6px); }
.pj-status__meta { margin-top: 10px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.pj-status__meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pj-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }
.pj-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.pj-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pjPulse 2s ease-out infinite; }
.pj-bar { margin-top: 16px; height: 3px; background: #E4E4E8; overflow: hidden; }
.pj-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), #5DB0FF); transition: width 2.4s cubic-bezier(.22,.61,.36,1); position: relative; }
.pj-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); transform: translateX(-100%); animation: pjShine 2.6s 2.6s ease-in-out infinite; }
@keyframes pjShine { to { transform: translateX(100%); } }

/* ---------- Line-drawing card (clean, light) ---------- */
.pj-art { position: relative; margin: 0; padding: 40px 34px 28px; overflow: hidden; background: #fff; border: 1px solid #ECECEF; box-shadow: 0 30px 70px rgba(23,23,23,.07); }
.bp { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.bp-l { stroke: #1F2A37; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp-thin { stroke-width: .8; stroke: rgba(31,42,55,.35); }
.bp-dash { stroke-dasharray: .012 .012; opacity: 0; }
.bp-fill { fill: rgba(0,126,255,0); }
.bp-glass { fill: rgba(0,126,255,0); stroke: var(--blue); }
.bp text { fill: #9A9AAA; font-family: var(--font); font-size: 11px; letter-spacing: 1px; opacity: 0; }
.bp .bp-note { font-size: 9.5px; letter-spacing: 2px; fill: #B4B4C0; }

/* drawing starts when the card scrolls into view; each stage (--s) draws after the previous one */
.pj-art.is-in .bp-l { animation: bpDraw 1.2s cubic-bezier(.65,0,.35,1) forwards; animation-delay: calc(.4s + var(--s, 0) * 1.6s + var(--i, 0) * .1s); }
.pj-art.is-in .bp-dash { animation: none; stroke-dashoffset: 0; opacity: 0; animation: pjFade .6s forwards; animation-delay: .9s; }
.pj-art.is-in .bp-fill { animation-name: bpDraw, bpFill; animation-duration: 1.2s, 1s; animation-fill-mode: forwards, forwards; animation-delay: .5s, 1.4s; }
.pj-art.is-in .bp-glass { animation-name: bpDraw, bpGlass; animation-duration: 1.2s, 1.2s; animation-fill-mode: forwards, forwards; animation-delay: calc(.4s + 1.6s + var(--i) * .1s), 6.4s; }
.pj-art.is-in .bp text { animation: pjFade 1s 6s forwards; }
@keyframes bpDraw { to { stroke-dashoffset: 0; } }
@keyframes bpFill { to { fill: rgba(0,126,255,.08); } }
@keyframes bpGlass { to { fill: rgba(0,126,255,.1); } }
@keyframes pjFade { to { opacity: 1; } }

/* stage legend lights up with the drawing */
.pj-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.pj-step { display: flex; align-items: center; gap: 8px; padding: 10px 2px 0; border-top: 2px solid #ECECEF; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #B4B4C0; transition: color .4s, border-color .4s; }
.pj-step b { font-weight: 600; color: inherit; opacity: .6; }
.pj-art.is-in .pj-step { animation: pjStep .5s forwards; animation-delay: calc(.4s + var(--s) * 1.6s); }
@keyframes pjStep { to { color: #171717; border-top-color: var(--blue); } }

.pj-stamp { position: absolute; right: 22px; top: 20px; width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(0,126,255,.55); display: grid; place-content: center; text-align: center; color: #171717; background: rgba(255,255,255,.85); transform: rotate(-12deg) scale(.6); opacity: 0; }
.pj-stamp::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgba(0,126,255,.3); animation: pjSpin 30s linear infinite; }
.pj-stamp span { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); }
.pj-stamp strong { font-size: 21px; letter-spacing: -.5px; }
.pj-art.is-in .pj-stamp { animation: pjStamp .7s 6.6s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes pjStamp { to { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes pjSpin { to { transform: rotate(360deg); } }

/* ---------- What's coming ---------- */
.pj-next { background: var(--light); }
.pj-head { max-width: 720px; margin: 0 auto 56px; }
.pj-head p { font-size: 16px; line-height: 1.7; }

/* ---------- Final CTA ---------- */
.pj-cta { position: relative; overflow: hidden; background: #171717; padding: clamp(90px, 11vw, 150px) 0; color: rgba(255,255,255,.7); }
.pj-cta__inner { position: relative; max-width: calc(760px + var(--gutter) * 2); }
.pj-cta__kicker { font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.pj-cta__title { font-size: clamp(48px, 8vw, 96px); line-height: 1; letter-spacing: -2px; color: #fff; margin: 0 0 26px; }
.pj-cta__text { font-size: 16px; line-height: 1.7; margin: 0 auto; max-width: 600px; }
.pj-cta__btns { justify-content: center; margin-top: 36px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pj-intro__grid { grid-template-columns: 1fr; gap: 44px; }
  .pj-art { max-width: 720px; }
}
@media (max-width: 767px) {
  .pj-status { padding: 18px; }
  .pj-status__row { flex-wrap: wrap; }
  .pj-status__now { text-align: left; }
  .pj-art { padding: 22px 16px 18px; }
  .pj-steps { grid-template-columns: repeat(2, 1fr); }
  .pj-stamp { width: 70px; height: 70px; right: 12px; top: 12px; }
  .pj-stamp strong { font-size: 15px; }
  .pj-stamp span { font-size: 7px; }
}

/* ---------- Reduced motion: show the finished drawing ---------- */
@media (prefers-reduced-motion: reduce) {
  .bp-l, .pj-art.is-in .bp-l { animation: none !important; stroke-dashoffset: 0; }
  .bp text, .pj-stamp { animation: none !important; opacity: 1; }
  .pj-stamp { transform: rotate(-12deg); }
  .pj-step { color: #171717; border-top-color: var(--blue); animation: none !important; }
  .pj-live i::after, .pj-bar i::after, .pj-stamp::before { animation: none !important; display: none; }
}