/* Project journey: full-width photo story for the process section */
#process.jr-sec{padding:0;background:#1c3f7a}
.jr{position:relative;background:#1c3f7a;color:#fff;min-height:620px;overflow:hidden;isolation:isolate}
.jr .jr-ph{position:absolute;inset-block:0;inset-inline-end:0;width:66%;z-index:-1;-webkit-mask-image:linear-gradient(to var(--fade),#000 45%,transparent 98%);mask-image:linear-gradient(to var(--fade),#000 45%,transparent 98%)}
[dir=rtl] .jr .jr-ph{--fade:right}[dir=ltr] .jr .jr-ph{--fade:left}
.jr .jr-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.4s ease}
.jr .jr-ph img.jr-on{opacity:1;animation:jr-drift 7s linear forwards}
@keyframes jr-drift{to{transform:scale(1.12)}}
.jr::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,rgba(19,45,89,.85));z-index:-1;pointer-events:none}
.jr .jr-inner{max-width:var(--max,1180px);margin:0 auto;padding:80px clamp(16px,4vw,40px) 40px;min-height:620px;display:flex;flex-direction:column}
.jr .jr-txt{width:min(32.5rem,48%);margin-block:auto}
.jr .jr-eb{display:flex;align-items:center;gap:12px;color:#d4ae62;font-weight:600;font-size:.95rem}
.jr .jr-eb::before{content:"";width:36px;height:2px;background:#d4ae62}
.jr .jr-num{font-size:96px;line-height:1;font-weight:700;color:transparent;-webkit-text-stroke:1.5px rgba(212,174,98,.85);margin:18px 0 6px;font-family:Inter,Arial,sans-serif}
.jr h3{margin:0 0 12px;font-size:clamp(30px,4vw,50px);line-height:1.2;color:#fff}
.jr p{margin:0;color:rgba(234,240,250,.82);font-size:clamp(16px,1.6vw,19px);line-height:1.8;max-width:27.5rem}
.jr .jr-swap>*{transition:opacity .5s ease,transform .6s ease}
.jr .jr-swap.jr-out>*{opacity:0;transform:translateY(12px)}
.jr .jr-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.jr .jr-steps button{all:unset;cursor:pointer;display:block;width:100%}
.jr .jr-track{display:block;height:3px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.jr .jr-track i{display:block;height:100%;width:0;background:#d4ae62}
.jr li.jr-done .jr-track i{width:100%}
.jr li.jr-on .jr-track i{animation:jr-fill var(--dur) linear forwards}
.jr.jr-paused li.jr-on .jr-track i{animation-play-state:paused}
@keyframes jr-fill{to{width:100%}}
.jr .jr-steps small{display:block;margin-top:10px;font-size:.85rem;color:rgba(234,240,250,.78);line-height:1.35}
.jr .jr-steps small b{display:block;color:#d4ae62;font-size:12px;font-family:Inter,Arial,sans-serif}
.jr li.jr-on small{color:#fff;font-weight:600}
.jr .jr-steps button:focus-visible{outline:2px solid #fff;outline-offset:6px}
.jr .jr-toggle{position:absolute;top:18px;inset-inline-end:18px;z-index:2;background:rgba(19,45,89,.6);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:99px;width:40px;height:40px;cursor:pointer}
@media (max-width:820px){
  .jr,.jr .jr-inner{min-height:0}
  .jr .jr-ph{position:relative;width:100%;height:300px;inset:auto;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
  .jr .jr-inner{padding:0 16px 28px;margin-top:-70px;position:relative}
  .jr .jr-txt{width:100%}
  .jr .jr-num{font-size:64px;margin-top:0}
  .jr .jr-steps{gap:4px;margin-top:28px}
  .jr .jr-steps small span{display:none}
  .jr::after{display:none}
}
@media (prefers-reduced-motion:reduce){.jr .jr-ph img.jr-on{animation:none}.jr .jr-ph img,.jr .jr-swap>*{transition:none}}
.jr .jr-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;max-width:27.5rem}
.jr .jr-list li{display:flex;align-items:flex-start;gap:10px;color:#fff;font-size:clamp(15px,1.4vw,17px);line-height:1.6}
.jr .jr-list li::before{content:"";flex:0 0 22px;height:22px;margin-top:2px;border-radius:50%;background:rgba(212,174,98,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4ae62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;border:1px solid rgba(212,174,98,.55)}
.jr .jr-swap>.jr-list{transition-delay:.26s}
@media (max-width:820px){.jr .jr-list{gap:8px;margin-top:14px}}
.jr .jr-ph img[src*="j0-land"]{object-position:0% 50%;transform-origin:0% 50%}
.jr .jr-num{display:flex;align-items:center;gap:14px;margin:22px 0 14px;-webkit-text-stroke:0;color:inherit;font-size:inherit;line-height:1}
.jr .jr-num b{flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #d4ae62;background:radial-gradient(circle at 30% 25%,rgba(212,174,98,.28),rgba(212,174,98,.06) 70%);color:#d4ae62;font:600 30px/1 Inter,Archivo,Arial,sans-serif;box-shadow:0 0 0 6px rgba(212,174,98,.08)}
.jr .jr-num span{display:flex;flex-direction:column;gap:4px}
.jr .jr-num small{font-size:.8rem;color:rgba(234,240,250,.7);letter-spacing:.04em}
.jr .jr-num em{font-style:normal;font-size:.95rem;color:#fff;font-family:Inter,Archivo,"IBM Plex Sans Arabic",sans-serif}
@media (max-width:820px){.jr .jr-num b{width:52px;height:52px;font-size:24px}}
.jr .jr-num{display:none}
.jr .jr-intro{margin:12px 0 26px;color:rgba(234,240,250,.82);font-size:clamp(15px,1.3vw,17px);line-height:1.7;max-width:30rem}
.jr .jr-swap.jr-out>.jr-eb,.jr .jr-swap.jr-out>.jr-intro{opacity:1;transform:none}
/* section head matches the other sections (e.g. services); panel below it */
#process.jr-sec{padding:clamp(44px,6vw,76px) 0 0;background:none}
#process .jr-head{margin-bottom:clamp(20px,2.5vw,32px)}
.jr .jr-eb,.jr .jr-intro{display:none}

/* Stage bars sit a little lower; each number is white in a small gold circle */
.jr .jr-steps{margin-top:64px}
.jr .jr-steps small{margin-top:14px}
.jr .jr-steps small b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d4ae62;color:#fff;font-size:12px;font-weight:700;line-height:1;margin-bottom:6px;box-shadow:0 0 0 3px rgba(212,174,98,.18);transition:transform .3s,box-shadow .3s}
.jr li.jr-on small b{transform:scale(1.12);box-shadow:0 0 0 4px rgba(212,174,98,.3)}
.jr li:not(.jr-on):not(.jr-done) small b{background:rgba(212,174,98,.55)}
@media (max-width:820px){.jr .jr-steps{margin-top:40px}.jr .jr-steps small b{width:20px;height:20px;font-size:11px}}

/* Light mode: the same layout in light tones (cream panel, navy text, the photo fading into the cream) */
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr{--jr-bg:var(--paper-2,#F2ECE2);background:var(--jr-bg);color:#173A72}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr::after{background:linear-gradient(transparent,color-mix(in srgb,var(--jr-bg) 92%,transparent))}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr h3{color:#173A72}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr p{color:#4A5A72}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-list li{color:#1E3358}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-list li::before{background-color:rgba(179,141,76,.14);border-color:rgba(179,141,76,.6)}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-track{background:rgba(23,58,114,.16)}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-track i{background:#b38d4c}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-steps small{color:#5F6B7A}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr li.jr-on small{color:#173A72}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-steps small b{background:#b38d4c;box-shadow:0 0 0 3px rgba(179,141,76,.18)}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr li:not(.jr-on):not(.jr-done) small b{background:rgba(179,141,76,.5)}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-toggle{background:rgba(255,255,255,.75);border-color:rgba(23,58,114,.2);color:#173A72}
html:not([data-preset="navy"]):not([data-preset="gold"]) .jr .jr-steps button:focus-visible{outline-color:#173A72}