/* Join page: practical hiring information, with the homepage's technical energy. */
.join-page .page-hero { padding: 0; }
.join-hero-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(680px, 90vh, 880px);
  background: radial-gradient(132% 116% at 82% -6%, #16294F 0%, #0B1530 46%, #060B16 100%);
  color: #F6F8FC;
}
.join-hero-flow { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: 1; pointer-events: none; }
@media (max-width: 899px) { .join-hero-flow { opacity: .62; } }
.join-hero-aura { position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(58% 54% at 84% 22%, rgba(96,165,250,.22), transparent 66%), radial-gradient(66% 60% at 8% 92%, rgba(20,42,84,.5), transparent 72%); }
.join-hero-band::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(147,180,245,.04) 1px, transparent 1px), linear-gradient(rgba(147,180,245,.04) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.join-hero-band::after { content: ''; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(96,165,250,.42) 22%, rgba(96,165,250,.42) 78%, transparent); }
.join-hero {
  display: grid;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 3;
  min-height: clamp(680px, 90vh, 880px);
  padding-top: 138px;
  padding-bottom: 60px;
}
@media (min-width: 980px) { .join-hero { grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr); gap: 76px; } }
.join-hero-copy { min-width: 0; }
.join-hero .page-h1 { max-width: 15ch; color: #F6F8FC; text-wrap: balance; }
.join-hero-accent { color: #7EB1FF; }
.join-hero .page-lede { max-width: 52ch; color: rgba(214,224,240,.8); }
.join-hero .breadcrumb { color: rgba(214,224,240,.54); }
.join-hero .breadcrumb a { color: rgba(214,224,240,.66); }
.join-hero .breadcrumb .current { color: #F6F8FC; }
.join-hero .eyebrow { color: rgba(214,224,240,.62); }
.join-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.join-hero .btn-primary { background: #F6F8FC; color: #0A0E1A; box-shadow: 0 10px 30px -12px rgba(96,165,250,.45); }
.join-hero .btn-primary:hover { background: #FFFFFF; box-shadow: 0 14px 36px -12px rgba(96,165,250,.6); }
.join-hero .btn-ghost { color: #E8EDF6; border-color: rgba(232,237,246,.28); }
.join-hero .btn-ghost:hover { border-color: rgba(232,237,246,.7); background: rgba(255,255,255,.05); }
.join-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 42px; border-top: 1px solid rgba(147,180,245,.2); }
.join-hero-fact { padding: 18px 16px 2px 0; }
.join-hero-fact + .join-hero-fact { padding-left: 18px; border-left: 1px solid rgba(147,180,245,.16); }
.join-hero-fact dt { color: rgba(214,224,240,.5); font: 700 9px/1.2 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.join-hero-fact dd { margin: 9px 0 0; color: #EAF0FB; font: 700 13.5px/1.35 'Manrope', ui-sans-serif, system-ui, sans-serif; }
.join-hero-visual { position: relative; }
.join-hero-photo { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(147,180,245,.34); border-radius: 5px; background: #0B1E3F; box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(147,180,245,.06); }
.join-hero-photo::before { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.join-hero-photo::after { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; box-shadow: inset 0 -70px 60px -46px rgba(6,11,22,.92); }
.join-hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; object-position: 50% 42%; filter: saturate(.82) contrast(.98); }
.join-hero-photo-badge { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(147,180,245,.3); border-radius: 100px; background: rgba(8,16,33,.66); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); color: #DCE6FB; font: 700 9px/1 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.join-hero-photo-badge i { width: 6px; height: 6px; border-radius: 50%; background: #7EB1FF; box-shadow: 0 0 0 3px rgba(126,177,255,.22); }
.join-hero-photo figcaption { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 16px; padding: 13px 15px; color: rgba(247,248,250,.58); background: #0B1E3F; font: 700 9px/1.35 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.join-hero-photo figcaption span:last-child { display: inline-flex; align-items: center; gap: 7px; color: #93B4F5; }
.join-proof-map-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--kosovo-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kosovo-blue) 20%, transparent); }
.join-page .nav:not(.scrolled) .brand { color: #F6F8FC; }
.join-page .nav:not(.scrolled) .nav-links a { color: rgba(232,237,246,.72); }
.join-page .nav:not(.scrolled) .nav-links a:hover, .join-page .nav:not(.scrolled) .nav-links a.active { color: #FFFFFF; }
.join-page .nav:not(.scrolled) .nav-links a.active::after { background: #FFFFFF; }
.join-page .nav:not(.scrolled) .theme-toggle { color: #F6F8FC; border-color: rgba(232,237,246,.24); }
.join-page .nav:not(.scrolled) .nav-cta { background: #F6F8FC; color: #0A0E1A; }
.join-page .nav:not(.scrolled) .menu-btn { color: #F6F8FC; }
.join-page .nav:not(.scrolled) .dropdown { background: #101A30; border-color: rgba(232,237,246,.14); }
.join-page .nav:not(.scrolled) .dropdown li a { color: rgba(232,237,246,.85); }
.join-page .nav:not(.scrolled) .dropdown li a:hover, .join-page .nav:not(.scrolled) .dropdown li a.active { background: rgba(255,255,255,.07); color: #FFFFFF; }

.join-proof { border-top: 1px solid var(--ridge); border-bottom: 1px solid var(--ridge); }
.join-proof-inner { display: grid; }
.join-proof-item { min-height: 142px; padding: 26px 24px; }
.join-proof-item + .join-proof-item { border-top: 1px solid var(--ridge); }
@media (min-width: 720px) { .join-proof-inner { grid-template-columns: repeat(3, 1fr); }.join-proof-item + .join-proof-item { border-top: 0; border-left: 1px solid var(--ridge); } }
.join-proof-k { display: block; margin-bottom: 14px; color: var(--muted); font: 700 10px/1.2 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.join-proof-v { display: block; color: var(--ink); font: 700 clamp(17px, 2vw, 24px)/1.18 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.join-proof-p { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.join-proof-map { position: relative; margin: 0 0 72px; padding: 22px 26px 12px; overflow: hidden; border: 1px solid var(--ridge); border-top: 0; background: var(--panel); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--kosovo-blue) 12%, transparent); }
.join-proof-map::before, .join-project-map::before, .join-growth-map::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--kosovo-blue) 5%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--kosovo-blue) 5%, transparent) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.join-proof-map::after, .join-project-map::after, .join-growth-map::after { content: ''; position: absolute; top: 0; right: 22px; width: 52px; height: 2px; background: var(--kosovo-blue); opacity: .68; }
.join-proof-map-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font: 700 9px/1.2 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.join-proof-map-head span:last-child { display: inline-flex; align-items: center; gap: 8px; color: var(--kosovo-blue); }
.join-proof-map svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
/* Infographic A - "Engineering environment": three balanced signal tracks. */
.join-track { opacity: 0; }
.join-track-name { fill: var(--ink); font: 700 11px 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-anchor: end; }
.join-track-val { fill: var(--muted); font: 600 12px 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em; text-anchor: start; }
.join-track-base { stroke: var(--ridge-2); stroke-width: 3; stroke-linecap: round; }
.join-track-fill { stroke: var(--kosovo-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 560; stroke-dashoffset: 560; }
.join-track-node { fill: var(--panel); stroke: var(--kosovo-blue); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.join-track-node-halo { fill: none; stroke: color-mix(in srgb, var(--kosovo-blue) 30%, transparent); stroke-width: 1; }

.join-layout { display: grid; gap: 42px; }
@media (min-width: 980px) { .join-layout { grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); gap: 72px; align-items: start; } }
.join-sticky { position: static; }
@media (min-width: 980px) { .join-sticky { position: sticky; top: 106px; } }
.join-sticky .section-h2 { max-width: 13ch; }
.join-sticky p { max-width: 35ch; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.join-points { border-top: 1px solid var(--ridge); }
.join-point { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ridge); }
.join-point-index { padding-top: 2px; color: var(--kosovo-blue); font: 700 10px/1.2 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; }
.join-point h3 { margin: 0 0 7px; color: var(--ink); font: 700 17px/1.3 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.join-point p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.join-benefits { border-top: 1px solid var(--ridge); }
.join-benefit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 23px 0; border-bottom: 1px solid var(--ridge); }
@media (min-width: 700px) { .join-benefit { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; } }
.join-benefit h3 { margin: 0; color: var(--ink); font: 700 13px/1.35 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; }
.join-benefit p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.62; }
.join-benefit strong { color: var(--ink); font-weight: 700; }

.join-growth { background: var(--band-warm); border-top: 1px solid var(--ridge); border-bottom: 1px solid var(--ridge); }
.join-growth .section-h2 { max-width: 18ch; }
.join-growth-grid { display: grid; margin-top: 42px; border-top: 1px solid var(--ridge); border-bottom: 1px solid var(--ridge); }
@media (min-width: 760px) { .join-growth-grid { grid-template-columns: repeat(3, 1fr); } }
.join-growth-item { padding: 24px; min-height: 190px; }
.join-growth-item + .join-growth-item { border-top: 1px solid var(--ridge); }
@media (min-width: 760px) { .join-growth-item + .join-growth-item { border-top: 0; border-left: 1px solid var(--ridge); } }
.join-growth-item span { display: block; color: var(--kosovo-blue); font: 700 10px/1.2 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.join-growth-item h3 { margin: 22px 0 10px; color: var(--ink); font: 700 18px/1.25 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.join-growth-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }
.join-growth-item::before { content: ''; display: block; width: 36px; height: 2px; background: var(--kosovo-blue); transform: scaleX(.22); transform-origin: left; transition: transform .75s cubic-bezier(.22,1,.36,1); }

.join-principles-head { display: grid; gap: 24px; align-items: end; margin-bottom: 36px; }
@media (min-width: 800px) { .join-principles-head { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.join-principles-head p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.join-principles { display: grid; border-top: 1px solid var(--ridge); }
@media (min-width: 700px) { .join-principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .join-principles { grid-template-columns: repeat(3, 1fr); } }
.join-principle { position: relative; isolation: isolate; min-height: 162px; padding: 20px 22px 24px 0; overflow: hidden; border-bottom: 1px solid var(--ridge); transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out); }
@media (min-width: 700px) { .join-principle:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--ridge); } }
@media (min-width: 1040px) { .join-principle:nth-child(3n + 2), .join-principle:nth-child(3n) { padding-left: 22px; border-left: 1px solid var(--ridge); }.join-principle:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--ridge); } }
.join-principle span { display: block; color: var(--kosovo-blue); font: 700 10px/1.2 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.join-principle h3 { margin: 18px 0 8px; color: var(--ink); font: 700 16px/1.3 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.join-principle p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.join-principle::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 2px; background: var(--kosovo-blue); transform: scaleX(0); transform-origin: left; transition: transform .46s cubic-bezier(.22,1,.36,1); }
.join-principle::after { content: ''; position: absolute; top: 17px; right: 17px; width: 12px; height: 12px; border-top: 1px solid var(--kosovo-blue); border-right: 1px solid var(--kosovo-blue); opacity: 0; transform: translate(5px,-5px); transition: opacity .24s ease, transform .36s cubic-bezier(.22,1,.36,1); }
.join-principle span, .join-principle h3, .join-principle p { position: relative; z-index: 1; transition: color .26s var(--ease-out), transform .36s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .join-principle:hover { background: color-mix(in srgb, var(--kosovo-blue) 5%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kosovo-blue) 28%, transparent); }
  .join-principle:hover::before { transform: scaleX(1); }
  .join-principle:hover::after { opacity: 1; transform: none; }
  .join-principle:hover span, .join-principle:hover h3 { color: var(--kosovo-blue); transform: translateX(5px); }
  .join-principle:hover p { color: var(--ink-2); transform: translateX(5px); }
}

.join-cta { padding: 80px 0; background: var(--band-ink); color: #F7F8FA; }
.join-cta-inner { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; justify-content: space-between; }
@media (min-width: 800px) { .join-cta-inner { flex-direction: row; align-items: end; gap: 48px; } }
.join-cta .eyebrow { color: rgba(247,248,250,.58); }
.join-cta h2 { max-width: 17ch; margin: 0; color: #F7F8FA; font: 600 clamp(30px, 4vw, 52px)/1.06 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
.join-cta p { max-width: 48ch; margin: 16px 0 0; color: rgba(247,248,250,.68); font-size: 15px; line-height: 1.65; }
.join-cta .btn { flex: 0 0 auto; background: #F7F8FA; color: #0A0E1A; border-color: #F7F8FA; }

/* Scenes arrive once as their content enters view. */
[data-join-scene] .section-head,
[data-join-scene] .join-layout,
[data-join-scene] .join-benefits,
[data-join-scene] .join-growth-grid,
[data-join-scene] .join-principles-head,
[data-join-scene] .join-principles,
[data-join-scene] .join-cta-inner { opacity: 0; transform: translateY(18px); transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .78s cubic-bezier(.22,1,.36,1); }
[data-join-scene].is-active .section-head,
[data-join-scene].is-active .join-layout,
[data-join-scene].is-active .join-benefits,
[data-join-scene].is-active .join-growth-grid,
[data-join-scene].is-active .join-principles-head,
[data-join-scene].is-active .join-principles,
[data-join-scene].is-active .join-cta-inner { opacity: 1; transform: none; }
.join-hero-band .join-hero > * { opacity: 0; transform: translateY(20px); transition: opacity .82s cubic-bezier(.22,1,.36,1), transform .88s cubic-bezier(.22,1,.36,1); }
.join-hero-band .join-hero-visual { transition-delay: .18s; }
.join-hero-band.is-active .join-hero > * { opacity: 1; transform: none; }
.join-proof-item { opacity: .32; transform: translateY(14px); transition: opacity .48s ease, transform .66s cubic-bezier(.22,1,.36,1); }
.join-proof-map { opacity: .4; transition: opacity .6s ease .35s; }
.join-proof.is-active .join-proof-item { opacity: 1; transform: none; }
.join-proof.is-active .join-proof-item:nth-child(2) { transition-delay: .12s; }
.join-proof.is-active .join-proof-item:nth-child(3) { transition-delay: .24s; }
.join-proof.is-active .join-proof-map { opacity: 1; }
.join-proof.is-active .join-track { animation: join-fade-up .62s cubic-bezier(.22,1,.36,1) forwards; }
.join-proof.is-active .join-track--one { animation-delay: .28s; }
.join-proof.is-active .join-track--two { animation-delay: .42s; }
.join-proof.is-active .join-track--three { animation-delay: .56s; }
.join-proof.is-active .join-track-fill { animation: join-map-draw 1.5s cubic-bezier(.22,1,.36,1) forwards; }
.join-proof.is-active .join-track--one .join-track-fill { animation-delay: .5s; }
.join-proof.is-active .join-track--two .join-track-fill { animation-delay: .64s; }
.join-proof.is-active .join-track--three .join-track-fill { animation-delay: .78s; }
.join-proof.is-active .join-track-node { animation: join-node-pop .5s cubic-bezier(.34,1.4,.5,1) forwards; }
.join-proof.is-active .join-track--one .join-track-node { animation-delay: 1.2s; }
.join-proof.is-active .join-track--two .join-track-node { animation-delay: 1.34s; }
.join-proof.is-active .join-track--three .join-track-node { animation-delay: 1.48s; }
.join-proof.is-active .join-track--three .join-track-node-halo { animation: join-ring 4.2s ease-in-out 2s infinite; transform-box: fill-box; transform-origin: center; }
.join-project-map, .join-growth-map { position: relative; margin-top: 46px; padding: 22px 26px 10px; overflow: hidden; border: 1px solid var(--ridge); background: var(--panel); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--kosovo-blue) 12%, transparent); opacity: .4; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.join-project-map svg, .join-growth-map svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
/* Infographic B - "Project landscape": a production stack from data up to delivery. */
.join-stack-spine { fill: none; stroke: var(--ridge-2); stroke-width: 1.5; stroke-dasharray: 2 6; }
.join-stack-dot { fill: var(--kosovo-blue); opacity: 0; }
.join-stack-idx { fill: var(--muted-2); font: 700 10px 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; text-anchor: end; }
.join-layer { opacity: 0; }
.join-layer-bar { fill: color-mix(in srgb, var(--panel) 90%, var(--kosovo-blue)); stroke: color-mix(in srgb, var(--kosovo-blue) 38%, var(--ridge)); stroke-width: 1.25; }
.join-layer--four .join-layer-bar { fill: color-mix(in srgb, var(--kosovo-blue) 15%, var(--panel)); stroke: var(--kosovo-blue); }
.join-layer-name { fill: var(--ink); font: 700 12.5px 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .09em; text-anchor: start; dominant-baseline: middle; }
.join-layer-desc { fill: var(--muted); font: 600 11.5px 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em; text-anchor: end; dominant-baseline: middle; }

/* Infographic C - "Growth system": an ascending path toward broader ownership. */
.join-steps-base { fill: none; stroke: var(--ridge-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-steps-trace { fill: none; stroke: var(--kosovo-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.join-step { opacity: 0; }
.join-step-name { fill: var(--ink); font: 700 11px 'Manrope', ui-sans-serif, system-ui, sans-serif; letter-spacing: .09em; text-anchor: middle; }
.join-step-idx { fill: var(--muted-2); font: 700 10px 'Manrope', ui-sans-serif, system-ui, sans-serif; text-anchor: middle; }
.join-step-node { fill: var(--panel); stroke: var(--kosovo-blue); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.join-step--four .join-step-node { fill: var(--kosovo-blue); }

/* The wide SVG diagrams read well on desktop; below the two-column
   breakpoint they are swapped for compact, reflowing lists so the page
   never scrolls sideways on phones or tablets. */
.join-proof-map svg, .join-project-map svg, .join-growth-map svg { display: none; }
.join-compact { display: block; list-style: none; margin: 2px 0 0; padding: 0; }
@media (min-width: 980px) {
  .join-proof-map svg, .join-project-map svg, .join-growth-map svg { display: block; }
  .join-compact { display: none; }
}
.join-compact .jc-name { color: var(--ink); font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }
/* A - balance tracks */
.join-compact--tracks li { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; padding: 14px 2px; border-top: 1px solid var(--ridge); }
.join-compact--tracks li:first-child { border-top: 0; }
.join-compact--tracks .jc-name { font-weight: 700; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.join-compact--tracks .jc-val { color: var(--muted); font-size: 12.5px; text-align: right; }
.join-compact--tracks .jc-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--ridge-2); }
.join-compact--tracks .jc-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--kosovo-blue); }
/* B - architecture stack */
.join-compact--stack li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: baseline; padding: 12px 12px; border: 1px solid var(--ridge); border-left: 2px solid color-mix(in srgb, var(--kosovo-blue) 35%, var(--ridge)); background: var(--panel); }
.join-compact--stack li + li { margin-top: 8px; }
.join-compact--stack li.is-top { border-left-color: var(--kosovo-blue); background: color-mix(in srgb, var(--kosovo-blue) 7%, var(--panel)); }
.join-compact--stack .jc-idx { grid-row: span 2; color: var(--kosovo-blue); font: 700 11px 'Manrope', ui-sans-serif, system-ui, sans-serif; }
.join-compact--stack .jc-name { font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.join-compact--stack .jc-desc { color: var(--muted); font-size: 12.5px; }
/* C - growth steps (vertical timeline) */
.join-compact--steps { position: relative; padding-left: 4px; }
.join-compact--steps::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 22px; width: 2px; background: var(--ridge-2); }
.join-compact--steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0 12px 30px; }
.join-compact--steps li::before { content: ''; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--panel); border: 2px solid var(--kosovo-blue); }
.join-compact--steps li.is-goal::before { background: var(--kosovo-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kosovo-blue) 16%, transparent); }
.join-compact--steps .jc-idx { color: var(--muted-2); font: 700 10px 'Manrope', ui-sans-serif, system-ui, sans-serif; }
.join-compact--steps .jc-name { font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.join-compact--steps li.is-goal .jc-name { color: var(--kosovo-blue); }

[data-join-scene].is-active .join-project-map, [data-join-scene].is-active .join-growth-map { opacity: 1; transform: none; }
[data-join-scene].is-active .join-stack-dot { animation: join-node-pop .5s cubic-bezier(.34,1.4,.5,1) 1.1s forwards; }
[data-join-scene].is-active .join-layer { animation: join-fade-left .62s cubic-bezier(.22,1,.36,1) forwards; }
[data-join-scene].is-active .join-layer--one { animation-delay: .4s; }
[data-join-scene].is-active .join-layer--two { animation-delay: .56s; }
[data-join-scene].is-active .join-layer--three { animation-delay: .72s; }
[data-join-scene].is-active .join-layer--four { animation-delay: .88s; }
[data-join-scene].is-active .join-steps-trace { animation: join-map-draw 2.4s cubic-bezier(.22,1,.36,1) .32s forwards; }
[data-join-scene].is-active .join-step { animation: join-fade-up .62s cubic-bezier(.22,1,.36,1) forwards; }
[data-join-scene].is-active .join-step--one { animation-delay: .5s; }
[data-join-scene].is-active .join-step--two { animation-delay: .9s; }
[data-join-scene].is-active .join-step--three { animation-delay: 1.3s; }
[data-join-scene].is-active .join-step--four { animation-delay: 1.7s; }
[data-join-scene].is-active .join-step-node { animation: join-node-pop .5s cubic-bezier(.34,1.4,.5,1) forwards; }
[data-join-scene].is-active .join-step--one .join-step-node { animation-delay: .85s; }
[data-join-scene].is-active .join-step--two .join-step-node { animation-delay: 1.25s; }
[data-join-scene].is-active .join-step--three .join-step-node { animation-delay: 1.65s; }
[data-join-scene].is-active .join-step--four .join-step-node { animation-delay: 2.05s; }
.join-growth.is-active .join-growth-item::before { transform: scaleX(1); }
.join-growth.is-active .join-growth-item:nth-child(2)::before { transition-delay: .12s; }.join-growth.is-active .join-growth-item:nth-child(3)::before { transition-delay: .24s; }
.join-principle { opacity: .4; transform: translateY(10px); transition: opacity .42s ease, transform .58s cubic-bezier(.22,1,.36,1); }
.is-active .join-principle { opacity: 1; transform: none; }
.is-active .join-principle:nth-child(2) { transition-delay: .05s; }.is-active .join-principle:nth-child(3) { transition-delay: .1s; }.is-active .join-principle:nth-child(4) { transition-delay: .15s; }.is-active .join-principle:nth-child(5) { transition-delay: .2s; }.is-active .join-principle:nth-child(6) { transition-delay: .25s; }.is-active .join-principle:nth-child(7) { transition-delay: .3s; }.is-active .join-principle:nth-child(8) { transition-delay: .35s; }.is-active .join-principle:nth-child(9) { transition-delay: .4s; }
@keyframes join-map-draw { to { stroke-dashoffset: 0; } }
@keyframes join-ring { 50% { opacity: .28; transform: scale(1.16); transform-origin: center; } }
@keyframes join-fade-up { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes join-fade-left { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes join-node-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .join-hero { min-height: auto; padding-top: 114px; padding-bottom: 34px; }.join-hero-facts { margin-top: 30px; }.join-hero-fact dd { font-size: 12.5px; }.join-hero-photo figcaption { flex-direction: column; gap: 6px; }.join-proof-map, .join-project-map, .join-growth-map { margin-bottom: 42px; padding: 18px 16px 8px; }.join-page .mobile-menu { background: var(--paper); } }
@media (prefers-reduced-motion: reduce) { .join-page * { transition: none !important; animation: none !important; }.join-hero-band .join-hero > *, [data-join-scene] .section-head, [data-join-scene] .join-layout, [data-join-scene] .join-benefits, [data-join-scene] .join-growth-grid, [data-join-scene] .join-principles-head, [data-join-scene] .join-principles, [data-join-scene] .join-cta-inner, .join-proof-item, .join-principle, .join-project-map, .join-growth-map, .join-track, .join-layer, .join-step { opacity: 1 !important; transform: none !important; }.join-track-fill, .join-steps-trace { stroke-dashoffset: 0; }.join-track-node, .join-stack-dot, .join-step-node { opacity: 1; } }