/* generated by scripts/portfolio/scope_css.py from design-system/concepts/journey-duja/journey.css (approved sample, 2026-10-28). Edit the sample or the overrides file, not this. */
.pf-jr{--bg: #131210; --bg-2: #0d0c0b; --surface: #1b1917; --line: #3a342d; --ink: #ede7db; --dim: #b9b0a1; --faint: #8a8173;
  --g1: #faa83e; --g2: #fdcf48; --gm: #fbbb43; --on-gold: #1a1507; --gold: linear-gradient(100deg, #fdcf48, #faa83e);
  --hair: #fbbb4359; --silk: #121110;
  --f-body: "Plex Arabic", system-ui, sans-serif; --f-num: "Archivo", "Plex Arabic", system-ui, sans-serif; --f-note: "Aref Ruqaa", "Plex Arabic", serif;
  --pad: clamp(16px, 5vw, 80px); --nav-h: 72px; --gap: clamp(14px, 1.6vw, 24px);
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-mask: cubic-bezier(.77, 0, .18, 1);}
.pf-jr *{box-sizing: border-box; margin: 0;}
.pf-jr{background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px);}
.pf-jr{font-family: var(--f-body); font-size: 17px; line-height: 1.85; overflow-x: clip; -webkit-font-smoothing: antialiased; background: var(--bg);}
.pf-jr a{color: inherit; text-decoration: none;}
.pf-jr ol, .pf-jr ul{list-style: none; padding: 0;}
.pf-jr img, .pf-jr video, .pf-jr svg{display: block; max-width: 100%;}
.pf-jr button{font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;}
.pf-jr .num{font-family: var(--f-num); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;}
.pf-jr .gold{background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;}
.pf-jr .eyebrow{font-size: 14px; line-height: 1.7; color: var(--g2); letter-spacing: 0;}
.pf-jr .btn{position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.4; overflow: hidden; isolation: isolate; max-width: 100%; transition: box-shadow .4s, border-color .4s, background .4s, transform .4s var(--ease-out);}
.pf-jr .btn--sm{min-height: 44px; padding: 0 20px; font-size: 14.5px;}
.pf-jr .btn--xl{min-height: 68px; padding: 0 38px; font-size: 18px;}
.pf-jr .btn--gold{background: var(--gold); color: var(--on-gold); box-shadow: 0 14px 44px -14px #faa83ecc, inset 0 1px 0 #fff8;}
.pf-jr .btn--gold::after{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #0000 35%, #fff9 50%, #0000 65%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: jr-shimmer 4s var(--ease) infinite;}
@keyframes jr-shimmer{ 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.pf-jr .btn--ghost{border: 1px solid #ffffff2e; background: #ffffff08; font-weight: 500;}
@media (hover: hover){.pf-jr .btn--gold:hover{box-shadow: 0 20px 60px -12px #fdcf48dd, inset 0 1px 0 #fff8; transform: translateY(-2px);}
.pf-jr .btn--ghost:hover{border-color: var(--g2); background: #fdcf4812;}}
.pf-jr .jr-rail{position: fixed; z-index: 30; inset-inline-start: clamp(14px, 1.7vw, 30px); top: 50%; height: min(58vh, 520px); transform: translateY(-50%); width: 26px; opacity: 0; transition: opacity .6s; pointer-events: none;}
.pf-jr .jr-rail.is-on{opacity: 1; pointer-events: auto;}
.pf-jr .jr-rail__line{position: absolute; inset: 0 auto 0 50%; width: 1px; margin-left: -.5px; background: #ffffff1a;}
.pf-jr .jr-rail__line i{position: absolute; inset: 0; background: linear-gradient(#fdcf48, #faa83e); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 10px #fdcf4899;}
.pf-jr .jr-rail ol{position: absolute; inset: 0;}
.pf-jr .jr-rail li{position: absolute; left: 0; right: 0; height: 26px; margin-top: -13px; top: calc(var(--k) * 100%);}
.pf-jr .jr-rail a{position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 1px solid #ffffff33; font: 700 9.5px/1 var(--f-num); color: var(--faint); transition: border-color .4s, color .4s, background .4s, transform .5s var(--ease-out), box-shadow .4s;}
.pf-jr .jr-rail a::before{content: ""; position: absolute; inset: -9px;}
.pf-jr .jr-rail a span{position: absolute; inset-inline-start: 36px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font: 500 13px/1.6 var(--f-body); color: var(--ink); background: #1b1917ee; border: 1px solid #ffffff14; padding: 4px 12px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out);}
.pf-jr .jr-rail a.is-done{border-color: var(--g1); color: var(--g1);}
.pf-jr .jr-rail a.is-on{background: var(--gold); border-color: transparent; color: var(--on-gold); transform: scale(1.22); box-shadow: 0 0 18px #fdcf4866;}
.pf-jr .jr-rail a:focus-visible span{opacity: 1; transform: translate(0, -50%);}
@media (hover: hover){.pf-jr .jr-rail a:hover span{opacity: 1; transform: translate(0, -50%);}
.pf-jr .jr-rail a:hover{border-color: var(--g2);}}
.pf-jr .intro{position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 6vw, 110px);
  padding: calc(var(--nav-h) + clamp(36px, 7vh, 80px)) calc(var(--pad) + 30px) clamp(80px, 12vh, 130px) var(--pad); max-width: 1680px; margin-inline: auto;}
.pf-jr .intro h1{margin-block: 18px 22px; font-weight: 700; font-size: clamp(34px, 4.4vw, 70px); line-height: 1.38; text-wrap: balance;}
.pf-jr .intro .jr-ln{display: block; overflow: hidden; padding-block: .04em;}
.pf-jr .intro .jr-ln > span{display: inline-block;}
.pf-jr .intro__lead{max-width: 37em; color: var(--dim); font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.95;}
.pf-jr .intro__map{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 0 18px; margin-block-start: clamp(28px, 5vh, 46px); border-top: 1px solid var(--hair);}
.pf-jr .intro__map a{display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding-block: 12px 8px; border-bottom: 1px solid #ffffff10; font-size: 15px; line-height: 1.6; color: var(--dim); transition: color .3s;}
.pf-jr .intro__map .num{font-size: 12px; color: var(--g2);}
@media (hover: hover){.pf-jr .intro__map a:hover{color: var(--ink);}}
.pf-jr .intro__logo{position: relative; aspect-ratio: 1; width: min(100%, 64vh, 620px); justify-self: center;}
.pf-jr .intro__silk{position: absolute; inset: 0; border-radius: 4px; background: radial-gradient(70% 60% at 40% 30%, #22201d, var(--silk) 70%); box-shadow: 0 50px 90px -70px #000, inset 0 0 0 1px #ffffff0f;}
.pf-jr .intro__logo img{position: relative; width: 100%; height: 100%; object-fit: contain;}
.pf-jr .jr-cue{position: absolute; bottom: clamp(18px, 4vh, 36px); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--faint); min-height: 44px;}
.pf-jr .jr-cue i{width: 1px; height: 42px; background: linear-gradient(var(--g2), transparent); transform-origin: top; animation: jr-cue 2.4s var(--ease) infinite;}
@keyframes jr-cue{ 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.pf-jr .journey{position: relative;}
.pf-jr .st{position: relative; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(36px, 5.5vw, 104px); align-items: start;
  max-width: 1680px; margin-inline: auto; padding: clamp(96px, 15vh, 180px) calc(var(--pad) + 30px) clamp(40px, 6vh, 80px) var(--pad);}
.pf-jr .st + .st{border-top: 1px solid #ffffff0a;}
.pf-jr .st__txt{position: sticky; top: calc(var(--nav-h) + clamp(28px, 6vh, 64px)); display: grid; gap: 14px; align-content: start;}
.pf-jr .st__no{display: flex; align-items: baseline; gap: 12px; direction: ltr; justify-content: flex-end;}
.pf-jr .st__no span{font-weight: 700; font-size: clamp(64px, 7.4vw, 128px); line-height: 1; letter-spacing: -.04em; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;}
.pf-jr .st__no small{font-size: 14px; color: var(--faint); letter-spacing: .08em;}
.pf-jr .st__line{display: block; height: 1px; background: linear-gradient(270deg, var(--g2), #faa83e00); transform-origin: right;}
.pf-jr .st__tag{display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; line-height: 1.6;}
.pf-jr .st__tag span{padding: 3px 12px; border-radius: 999px; border: 1px solid var(--hair); color: var(--g2);}
.pf-jr .st__tag b{font-weight: 500; color: var(--dim);}
.pf-jr .st h2{font-weight: 700; font-size: clamp(28px, 2.9vw, 46px); line-height: 1.4; text-wrap: balance;}
.pf-jr .st__p{display: grid; gap: 10px; color: var(--dim); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.95; max-width: 32em;}
.pf-jr .st__open{justify-self: start; margin-block-start: 6px;}
.pf-jr .st__room{justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block-start: 4px; font-size: 15px; color: var(--g2); border-bottom: 1px solid var(--hair); transition: border-color .3s, gap .4s var(--ease-out);}
@media (hover: hover){.pf-jr .st__room:hover{border-color: var(--g2); gap: 12px;}}
.pf-jr .st__media{display: grid; gap: clamp(44px, 6.5vw, 104px); min-width: 0;}
.pf-jr .fig{min-width: 0; display: grid; gap: 12px;}
.pf-jr .fig__btn{position: relative; display: block; width: 100%; cursor: zoom-in; border-radius: 3px;}
.pf-jr .fig__media{position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar); border-radius: 3px; background: var(--surface); box-shadow: 0 50px 90px -60px #000, 0 0 0 1px #ffffff12;}
.pf-jr .fig__media img{width: 100%; height: 100%; object-fit: contain;}
.pf-jr .fig__zoom{position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #131210b3; border: 1px solid #ffffff22; color: var(--ink); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--ease-out); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
@media (hover: hover){.pf-jr .fig__btn:hover .fig__zoom{opacity: 1; transform: none;}}
@media (hover: none){.pf-jr .fig__zoom{opacity: .75; transform: none; width: 26px; height: 26px; top: 8px; inset-inline-end: 8px;}
.pf-jr .fig__zoom svg{width: 13px; height: 13px;}}
.pf-jr .fig figcaption{display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.7; color: var(--dim);}
.pf-jr .fig figcaption i{flex: none; width: 22px; height: 1px; background: var(--g2); transform: translateY(-4px); transform-origin: right;}
.pf-jr .fig--hero figcaption{font-size: 14.5px;}
.pf-jr .jr-row{display: flex; gap: var(--gap); align-items: flex-start;}
.pf-jr .jr-row > .fig, .pf-jr .jr-row > .jr-stack{flex: var(--ar) 1 0;}
.pf-jr .jr-stack{min-width: 0; display: grid; gap: var(--gap);}
.pf-jr .jr-row--pc{align-items: center;}
.pf-jr .has-note{position: relative;}
.pf-jr .jr-note{font: 700 clamp(26px, 2.4vw, 38px)/1.5 var(--f-note); color: var(--g2);}
.pf-jr .has-note .jr-note{position: absolute; inset-inline-end: 2%; bottom: -34px; transform: rotate(-4deg); pointer-events: none;}
.js .pf-jr .has-note .jr-note.rv-t{transform: rotate(-4deg) translateY(20px);}
.js .pf-jr .has-note .jr-note.rv-t.is-in{transform: rotate(-4deg); transition-delay: 1s;}
.pf-jr .brief{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair);}
.pf-jr .brief div{padding: 20px 0 6px; padding-inline-end: 20px;}
.pf-jr .brief div + div{border-inline-start: 1px solid #ffffff10; padding-inline-start: 20px;}
.pf-jr .brief dt{font-size: 13px; line-height: 1.6; color: var(--g2); margin-block-end: 6px;}
.pf-jr .brief dd{font-size: 16px; line-height: 1.85; color: var(--ink);}
.pf-jr .jr-final{position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; background: radial-gradient(60% 70% at 50% 40%, #1f1d1a, var(--silk) 72%); border-radius: 3px; box-shadow: 0 0 0 1px #ffffff10, 0 50px 90px -60px #000; overflow: hidden;}
.pf-jr .jr-final__k{position: absolute; top: 18px; inset-inline-start: 22px; font-size: 13px; line-height: 1.6; color: var(--g2);}
.pf-jr .jr-final__btn{height: 92%; aspect-ratio: 1; cursor: zoom-in;}
.pf-jr .jr-final__btn img{width: 100%; height: 100%; object-fit: contain;}
.pf-jr .jr-chips{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair);}
.pf-jr .jr-chips li{display: grid; gap: 2px; padding-block: 18px 4px; padding-inline-end: 10px;}
.pf-jr .jr-chips i{display: block; aspect-ratio: 1 / 1.3; background: var(--c); border-radius: 2px; box-shadow: inset 0 0 0 1px #ffffff1c; margin-block-end: 10px;}
.pf-jr .jr-chips b{font-weight: 500; font-size: 14px; line-height: 1.6;}
.pf-jr .jr-chips span{font-size: 11.5px; color: var(--faint); justify-self: end;}
.pf-jr .jr-chips small{font-size: 12px; line-height: 1.5; color: var(--dim);}
.pf-jr .duo{display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap);}
.pf-jr .panel{display: grid; align-content: space-between; gap: 18px; padding: clamp(20px, 2vw, 30px); background: var(--silk); border-radius: 3px; box-shadow: 0 0 0 1px #ffffff10;}
.pf-jr .panel p{font-size: 14.5px; line-height: 1.85; color: var(--dim);}
.pf-jr .panel p b{display: block; color: var(--ink); font-weight: 500; font-size: 15.5px; margin-block-end: 4px;}
.pf-jr .mirage{width: 100%; height: auto; aspect-ratio: 600 / 290;}
.pf-jr .mirage path{stroke-dasharray: 1; stroke-dashoffset: 0;}
.pf-jr .panel--type{align-content: center; gap: 26px;}
.pf-jr .panel--type div{display: grid; gap: 4px; padding-block-end: 18px; border-bottom: 1px solid #ffffff10;}
.pf-jr .panel--type div:last-child{border: 0; padding: 0;}
.pf-jr .tp{font-size: clamp(26px, 2.4vw, 38px); line-height: 1.35; font-weight: 400; color: #f2efe9;}
.pf-jr .tp--lat{font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; direction: ltr; text-align: right;}
.pf-jr .panel--type small{font-size: 12.5px; line-height: 1.6; color: var(--faint);}
.pf-jr .sub-k{display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.6; color: var(--g2); margin-block-end: calc(clamp(44px, 6.5vw, 104px) * -.6);}
.pf-jr .sub-k::after{content: ""; flex: 1; height: 1px; background: linear-gradient(270deg, var(--hair), transparent);}
.pf-jr .devwrap{display: grid; justify-items: center; gap: 26px;}
.pf-jr .jr-dev{--bezel: #0c0b0a; position: relative; width: 100%;}
.pf-jr .jr-dev__body{position: relative; background: var(--bezel); border: 1px solid #ffffff1c; box-shadow: 0 80px 140px -60px #000, 0 0 0 1px #000, inset 0 1px 0 #ffffff1a, 0 40px 120px -70px #fbbb4366;}
.pf-jr .jr-dev__screen{position: relative; overflow: hidden; background: #0f0e0d;}
.pf-jr .jr-dev__poster{display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s;}
.pf-jr .jr-dev__screen::after{content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #13121000 45%, #131210a6); transition: opacity .5s;}
.pf-jr .jr-dev__play{position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink);}
.pf-jr .jr-dev__ring{position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 10px #fdcf4824, 0 20px 60px -10px #faa83ecc; transition: box-shadow .4s, transform .5s var(--ease-out);}
.pf-jr .jr-dev__ring svg{margin-inline-start: 4px;}
.pf-jr .jr-dev__ring::before, .pf-jr .jr-dev__ring::after{content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid #fdcf4866; animation: jr-pulse 2.6s var(--ease-out) infinite;}
.pf-jr .jr-dev__ring::after{animation-delay: 1.3s;}
@keyframes jr-pulse{ from { transform: scale(.9); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.pf-jr .jr-dev__label{font-weight: 700; font-size: 16px; line-height: 1.5; padding: 7px 18px; border-radius: 999px; background: #131210cc; border: 1px solid #ffffff22; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
@media (hover: hover){.pf-jr .jr-dev__play:hover .jr-dev__ring{transform: scale(1.06); box-shadow: 0 0 0 14px #fdcf4833, 0 24px 70px -8px #fdcf48;}}
.pf-jr .jr-dev iframe{position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #121110; opacity: 0; transition: opacity .6s;}
.pf-jr .jr-dev.is-live iframe{opacity: 1;}
.pf-jr .jr-dev.is-live .jr-dev__play, .pf-jr .jr-dev.is-live .jr-dev__screen::after{opacity: 0; visibility: hidden; pointer-events: none;}
.pf-jr .jr-dev.is-loading .jr-dev__ring svg{animation: jr-spin 1s linear infinite;}
@keyframes jr-spin{ to { transform: rotate(360deg); } }
.pf-jr .jr-dev--laptop{max-width: 1000px;}
.pf-jr .jr-dev--laptop .jr-dev__body{padding: clamp(8px, 1vw, 15px); border-radius: clamp(14px, 1.5vw, 22px) clamp(14px, 1.5vw, 22px) 6px 6px;}
.pf-jr .jr-dev--laptop .jr-dev__screen{aspect-ratio: 16 / 9; border-radius: 5px;}
.pf-jr .jr-dev__base{height: clamp(10px, 1.2vw, 17px); margin-inline: -6%; border-radius: 0 0 22px 22px / 0 0 14px 14px; background: linear-gradient(#2a2622, #141210 60%, #0a0908); box-shadow: 0 30px 50px -20px #000; position: relative;}
.pf-jr .jr-dev__base::before{content: ""; position: absolute; top: 0; inset-inline: 42%; height: 40%; border-radius: 0 0 10px 10px; background: #0c0b0a;}
.pf-jr .jr-dev--phone{display: none; width: min(330px, 80vw);}
.pf-jr .jr-dev--phone .jr-dev__body{padding: 10px; border-radius: 50px;}
.pf-jr .jr-dev--phone .jr-dev__screen{aspect-ratio: 390 / 844; border-radius: 40px;}
.pf-jr .jr-dev__island{position: absolute; z-index: 3; top: 12px; left: 50%; width: 32%; height: 26px; margin-left: -16%; border-radius: 20px; background: #000;}
.pf-jr .jr-dev__links{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--faint);}
.pf-jr .jr-note--out{margin: 0 0 -40px; justify-self: start; transform: rotate(-3deg); padding: 0;}
.pf-jr .deliv{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 clamp(20px, 3vw, 44px); counter-reset: d;}
.pf-jr .deliv li{display: grid; gap: 4px; padding-block: 18px 16px; border-top: 1px solid var(--hair); counter-increment: d;}
.pf-jr .deliv b{display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 17px; line-height: 1.6;}
.pf-jr .deliv b::before{content: counter(d, decimal-leading-zero); font: 700 12px/1 var(--f-num); color: var(--g2);}
.pf-jr .deliv span{font-size: 15px; line-height: 1.85; color: var(--dim);}
.pf-jr .cards{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);}
.pf-jr .jr-card{display: grid; gap: 8px; align-content: start;}
.pf-jr .jr-card__img{position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; background: var(--silk); border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px #ffffff12;}
.pf-jr .jr-card__img img{width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--ease-out);}
.pf-jr .jr-card__tag{margin-block-start: 8px; font-size: 12.5px; line-height: 1.6; color: var(--g2);}
.pf-jr .jr-card__t{font-weight: 500; font-size: 16px; line-height: 1.7;}
.pf-jr .jr-card__go{justify-self: start; font-size: 14px; line-height: 1.6; color: var(--dim); border-bottom: 1px solid #ffffff22; padding-block-end: 2px; min-height: 30px; display: inline-flex; align-items: center; transition: color .3s, border-color .3s;}
@media (hover: hover){.pf-jr .jr-card:hover .jr-card__img img{transform: scale(1.03);}
.pf-jr .jr-card:hover .jr-card__go{color: var(--g2); border-color: var(--g2);}}
.pf-jr .cta{position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(110px, 18vh, 200px) var(--pad); margin-block-start: clamp(60px, 10vh, 120px); border-top: 1px solid var(--hair);
  background: radial-gradient(50% 60% at 50% 0%, #fbbb4318, transparent 70%);}
.pf-jr .cta h2{font-weight: 700; font-size: clamp(34px, 5vw, 76px); line-height: 1.35; text-wrap: balance;}
.pf-jr .cta p{max-width: 36em; color: var(--dim); font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.9;}
.pf-jr .cta .btn{margin-block-start: 14px;}
.pf-jr .lb{position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: 0; background: #0b0a09; color: var(--ink); overflow: hidden;}
.pf-jr .lb::backdrop{background: #000c;}
.pf-jr .lb[open]{display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: jr-lbIn .45s var(--ease-out);}
@keyframes jr-lbIn{ from { opacity: 0; } }
.pf-jr .lb__stage{position: relative; display: grid; place-items: center; min-height: 0; padding: clamp(56px, 8vh, 80px) clamp(64px, 8vw, 120px) 8px; overflow: hidden;}
.pf-jr .lb__stage img{max-width: 100%; max-height: calc(100svh - clamp(56px, 8vh, 80px) - 70px); width: auto; height: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 40px 100px -40px #000; transition: opacity .35s, transform .5s var(--ease-out);}
.pf-jr .lb__stage.is-swap img{opacity: 0; transform: scale(.985);}
.pf-jr .lb__stage.is-tall{place-items: start center; overflow-y: auto; overscroll-behavior: contain;}
.pf-jr .lb__stage.is-tall img{max-height: none; width: min(100%, 880px);}
.pf-jr .lb__cap{display: flex; justify-content: center; gap: 14px; align-items: baseline; padding: 12px var(--pad) clamp(16px, 3vh, 28px); font-size: 14.5px; line-height: 1.7; color: var(--dim); text-align: center;}
.pf-jr .lb__cap .num{color: var(--g2); font-size: 13px; white-space: nowrap; flex: none;}
.pf-jr .lb__stage:focus{outline: none;}
.pf-jr .lb__x, .pf-jr .lb__prev, .pf-jr .lb__next{position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1b1917d9; border: 1px solid #ffffff22; color: var(--ink); transition: border-color .3s, background .3s;}
.pf-jr .lb__x{top: 14px; inset-inline-end: 14px; width: 46px; height: 46px;}
.pf-jr .lb__prev, .pf-jr .lb__next{top: 50%; margin-top: -40px;}
.pf-jr .lb__prev{right: clamp(8px, 2vw, 28px);}
.pf-jr .lb__next{left: clamp(8px, 2vw, 28px);}
@media (hover: hover){.pf-jr .lb__x:hover, .pf-jr .lb__prev:hover, .pf-jr .lb__next:hover{border-color: var(--g2); background: #2a2622;}}
.js .pf-jr .rv .fig__media, .js .pf-jr .rv.jr-final, .js .pf-jr .rv.jr-card .jr-card__img{clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--ease-mask) var(--d, 0s);}
.js .pf-jr .rv .fig__media img, .js .pf-jr .rv.jr-final img, .js .pf-jr .rv.jr-card img{transform: scale(1.14); transition: transform 1.9s var(--ease-out) var(--d, 0s);}
.js .pf-jr .rv figcaption, .js .pf-jr .rv.jr-card .jr-card__tag, .js .pf-jr .rv.jr-card .jr-card__t, .js .pf-jr .rv.jr-card .jr-card__go{opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) calc(var(--d, 0s) + .5s), transform .9s var(--ease-out) calc(var(--d, 0s) + .5s);}
.js .pf-jr .rv figcaption i{transform: translateY(-4px) scaleX(0); transition: transform .9s var(--ease-out) calc(var(--d, 0s) + .7s);}
.js .pf-jr .rv.is-in .fig__media, .js .pf-jr .rv.jr-final.is-in, .js .pf-jr .rv.jr-card.is-in .jr-card__img{clip-path: inset(0 0 0 0);}
.js .pf-jr .rv.is-in .fig__media img, .js .pf-jr .rv.jr-final.is-in img, .js .pf-jr .rv.jr-card.is-in img{transform: none;}
.js .pf-jr .rv.is-in figcaption, .js .pf-jr .rv.jr-card.is-in .jr-card__tag, .js .pf-jr .rv.jr-card.is-in .jr-card__t, .js .pf-jr .rv.jr-card.is-in .jr-card__go{opacity: 1; transform: none;}
.js .pf-jr .rv.is-in figcaption i{transform: translateY(-4px) scaleX(1);}
.js .pf-jr .rv.jr-final{clip-path: inset(0 0 0 0);}
.js .pf-jr .rv.jr-final .jr-final__btn{clip-path: inset(0 0 0 100%); transition: clip-path 1.8s var(--ease-mask) .35s;}
.js .pf-jr .rv.jr-final.is-in .jr-final__btn{clip-path: inset(0 0 0 0);}
.js .pf-jr .rv-t{opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s);}
.js .pf-jr .rv-t.is-in{opacity: 1; transform: none;}
.js .pf-jr .mirage path{stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) calc(var(--i) * 35ms + .3s);}
.js .pf-jr .rv-t.is-in .mirage path{stroke-dashoffset: 0;}
.js .pf-jr .st__line{transform: scaleX(0); transition: transform 1.3s var(--ease-out) .2s;}
.js .pf-jr .st.is-in .st__line{transform: scaleX(1);}
.js .pf-jr .st .st__txt > :not(.st__no):not(.st__line){opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform 1s var(--ease-out);}
.js .pf-jr .st.is-in .st__txt > :not(.st__no):not(.st__line){opacity: 1; transform: none;}
.js .pf-jr .st.is-in .st__txt > :nth-child(3){transition-delay: .1s;}
.js .pf-jr .st.is-in .st__txt > :nth-child(4){transition-delay: .18s;}
.js .pf-jr .st.is-in .st__txt > :nth-child(5){transition-delay: .26s;}
.js .pf-jr .st.is-in .st__txt > :nth-child(n+6){transition-delay: .34s;}
.js .pf-jr .intro .jr-ln > span{transform: translateY(105%); transition: transform 1.2s var(--ease-out);}
.js .pf-jr .intro .jr-ln + .jr-ln > span{transition-delay: .12s;}
.js .pf-jr .intro .eyebrow, .js .pf-jr .intro__lead, .js .pf-jr .intro__map{opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .45s, transform 1.1s var(--ease-out) .45s;}
.js .pf-jr .intro__map{transition-delay: .6s;}
.js .pf-jr .intro__logo img{clip-path: inset(0 0 0 100%); transition: clip-path 2s var(--ease-mask) .3s;}
.js .pf-jr .intro__silk{opacity: 0; transform: scale(.96); transition: opacity 1.4s var(--ease), transform 1.8s var(--ease-out);}
.js .pf-jr .intro.is-in .jr-ln > span, .js .pf-jr .intro.is-in .eyebrow, .js .pf-jr .intro.is-in .intro__lead, .js .pf-jr .intro.is-in .intro__map, .js .pf-jr .intro.is-in .intro__silk{opacity: 1; transform: none;}
.js .pf-jr .intro.is-in .intro__logo img{clip-path: inset(0 0 0 0);}
.pf-jr .fig--hero, .pf-jr .intro__logo{will-change: transform;}
@media (prefers-reduced-motion: reduce){.pf-jr *, .pf-jr *::before, .pf-jr *::after{animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important;}
.js .pf-jr .rv .fig__media, .js .pf-jr .rv.jr-final, .js .pf-jr .rv.jr-final .jr-final__btn, .js .pf-jr .rv.jr-card .jr-card__img{clip-path: none;}
.js .pf-jr .rv img, .js .pf-jr .rv figcaption, .js .pf-jr .rv-t, .js .pf-jr .st .st__txt > *, .js .pf-jr .intro *{opacity: 1 !important; transform: none !important; clip-path: none !important;}
.js .pf-jr .mirage path{stroke-dashoffset: 0;}
.js .pf-jr .st__line, .js .pf-jr .rv figcaption i{transform: none;}}
@media (max-width: 1100px){.pf-jr .jr-rail{display: none;}
.pf-jr .st, .pf-jr .intro{padding-inline: var(--pad);}}
@media (max-width: 1100px) and (min-width: 901px){.pf-jr .jr-chips{grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (max-width: 900px){.pf-jr{--nav-h: 60px; --gap: 12px;}
.pf-jr{font-size: 16px;}
.pf-jr .intro{grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 26px; padding-block: calc(var(--nav-h) + 26px) 86px;}
.pf-jr .intro__logo{order: -1; width: min(100%, 300px, 40svh);}
.pf-jr .intro h1{font-size: clamp(29px, 8vw, 40px); margin-block: 12px 16px;}
.pf-jr .intro__map{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px;}
.pf-jr .intro__map a{font-size: 14px; min-height: 46px;}
.pf-jr .st{grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 76px 20px;}
.pf-jr .st__txt{position: static; gap: 12px;}
.pf-jr .st__no{justify-content: flex-end;}
.pf-jr .st__no span{font-size: 64px;}
.pf-jr .st h2{font-size: clamp(25px, 7vw, 32px);}
.pf-jr .st__p{font-size: 16px; line-height: 1.9;}
.pf-jr .st__media{gap: 40px;}
.pf-jr .jr-row{flex-wrap: wrap;}
.pf-jr .jr-row > .fig, .pf-jr .jr-row > .jr-stack{flex: 1 1 100%;}
.pf-jr .jr-row--keep{flex-wrap: nowrap;}
.pf-jr .jr-row--keep > .fig{flex: var(--ar) 1 0;}
.pf-jr .jr-row--m2 > .fig{flex: 1 1 calc(50% - var(--gap) / 2);}
.pf-jr .jr-row--keep figcaption, .pf-jr .jr-row--m2 figcaption{font-size: 12px; gap: 6px;}
.pf-jr .jr-row--keep figcaption i, .pf-jr .jr-row--m2 figcaption i{width: 12px;}
.pf-jr .fig{gap: 9px;}
.pf-jr .jr-note{font-size: 22px;}
.pf-jr .has-note .jr-note{bottom: -30px;}
.pf-jr .jr-cue{display: none;}
.pf-jr .brief{grid-template-columns: minmax(0, 1fr);}
.pf-jr .brief div, .pf-jr .brief div + div{padding: 14px 0; border-inline-start: 0; border-bottom: 1px solid #ffffff10;}
.pf-jr .jr-chips{grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 4px;}
.pf-jr .jr-chips span{font-size: 10.5px;}
.pf-jr .duo{grid-template-columns: minmax(0, 1fr);}
.pf-jr .jr-final{aspect-ratio: 4 / 3;}
.pf-jr .sub-k{margin-block-end: -22px;}
.pf-jr .jr-dev--laptop{display: none;}
.pf-jr .jr-dev--phone{display: block;}
.pf-jr .cards{grid-template-columns: minmax(0, 1fr); gap: 34px;}
.pf-jr .cta{padding-block: 90px;}
.pf-jr .cta .btn{width: 100%;}
.pf-jr .btn--xl{min-height: 62px; padding: 0 22px; font-size: 17px;}
.pf-jr .lb__stage{padding: 64px 10px 6px;}
.pf-jr .lb__stage img{max-height: calc(100svh - 160px);}
.pf-jr .lb__prev, .pf-jr .lb__next{top: auto; bottom: 14px; margin: 0; width: 48px; height: 48px;}
.pf-jr .lb__cap{padding-inline: 72px; font-size: 13.5px; min-height: 76px; align-items: center;}}
/* ---- WordPress integration (brand page /projects/brand/<brand>/): the theme header and footer frame the journey ---- */
.pf-jr { background: transparent; }
.pf-jr .intro { min-height: min(100svh, 980px); }
.pf-jr .intro__logo.is-img .intro__silk { background: radial-gradient(70% 60% at 40% 30%, #22201d, #141210 70%); }
.pf-jr .intro__logo.is-img img { padding: 6%; }
.pf-jr .st__links { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pf-jr .st__links .st__room { margin: 0; }
.pf-jr .cta .eyebrow { margin: 0; }
.pf-jr .lb { z-index: 200; }
.pf-jr .jr-rail { z-index: 30; }
@media (max-width: 900px) { .pf-jr .cards { grid-template-columns: minmax(0, 1fr); } }

/* 2.3.42: no crop, not even briefly: the reveal mask stays, the zoom inside the overflow-hidden frame goes */
.js .pf-jr .rv .fig__media img, .js .pf-jr .rv.jr-final img, .js .pf-jr .rv.jr-card img { transform: none; }
@media (hover: hover) { .pf-jr .jr-card:hover .jr-card__img img { transform: none; } }
.pf-jr .jr-final__btn { position: absolute; top: 4%; bottom: 4%; left: 50%; height: auto; translate: -50% 0; }
.pf-jr .jr-card__img { display: block; }
.pf-jr .jr-card__img img { position: absolute; inset: 0; }