/* Use cases: one photographic stage, one agent window, the same shape for every example */
.uc-page { padding-top: var(--uc-top, 74px); padding-bottom: 10px; background: #fff; }
body:has(.uc-page) .o-bar { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.uc-stage { position: relative; margin: 0 10px; border-radius: 22px; overflow: clip; background: #050505; color: #fff; isolation: isolate; }
.uc-bg { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; z-index: -1; overflow: hidden; }
.uc-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--uc-p, 50% 50%); opacity: 0; transform: scale(1.07); transition: opacity 1s ease, transform 14s cubic-bezier(.2, .6, .3, 1); }
.uc-bg img.on { opacity: 1; transform: none; }
.uc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .54) 50%, rgba(0, 0, 0, .34) 100%), linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 60%); }
.uc-head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: clamp(32px, 4.6vw, 72px) clamp(22px, 4vw, 62px) 0; }
.uc-head h1 { margin: 0; max-width: 100%; font-family: "Geist", "Instrument Sans", sans-serif; font-weight: 400; font-size: clamp(34px, 4.1vw, 66px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.uc-head p { margin: clamp(12px, 1.2vw, 18px) 0 0; max-width: 40em; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.36; color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.uc-obory { margin-top: 10px; }
.uc-sec { margin: 0; padding: clamp(40px, 5vw, 76px) clamp(22px, 4vw, 62px) clamp(10px, 1.4vw, 20px); font-family: "Geist", "Instrument Sans", sans-serif; font-weight: 400; font-size: clamp(32px, 3.9vw, 62px); line-height: 1.06; letter-spacing: -.02em; }
.uc-tabs { position: sticky; top: var(--uc-top, 74px); z-index: 5; background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px clamp(22px, 4vw, 62px); }
.uc-tab { position: relative; height: 92px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #111; color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: box-shadow .25s, transform .25s; }
.uc-tab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); transition: filter .25s, transform .6s; }
.uc-tab span { position: absolute; left: 12px; right: 10px; bottom: 10px; font-size: 15px; line-height: 1.14; letter-spacing: -.005em; font-weight: 500; }
.uc-tab:hover img { filter: brightness(.8); transform: scale(1.05); }
.uc-tab[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff; }
.uc-tab[aria-pressed="true"] img { filter: brightness(.82); }
.uc-tab:focus-visible, .uc-case:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.uc-work { display: grid; grid-template-columns: minmax(250px, 4fr) minmax(0, 9fr); gap: clamp(18px, 3vw, 48px); align-items: start; padding: clamp(24px, 2.8vw, 44px) clamp(22px, 4vw, 62px) clamp(56px, 7vw, 110px); }
.uc-list { position: sticky; top: calc(var(--uc-top, 74px) + 22px); display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.uc-obory .uc-list { top: calc(var(--uc-top, 74px) + 122px); }
.uc-case { display: block; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .28); background: none; color: rgba(255, 255, 255, .84); font: inherit; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.16; letter-spacing: -.012em; text-align: left; cursor: pointer; transition: color .2s, padding .25s; }
.uc-case:hover { color: #fff; }
.uc-case[aria-pressed="true"] { color: #fff; padding-left: 14px; box-shadow: inset 2px 0 0 #fff; }
.uc-win { min-width: 0; padding: clamp(18px, 2.2vw, 32px); border-radius: 22px; background: var(--o-green); color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .42); }
.uc-win small { display: block; font-size: 13px; line-height: 1.2; color: rgba(255, 255, 255, .66); letter-spacing: .005em; }
.uc-win-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.uc-win-h b { display: flex; align-items: center; gap: 11px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.012em; line-height: 1.16; }
.uc-win-h b::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: uc-pulse 2.4s infinite; }
.uc-win-h > span { flex: none; font-size: 13px; padding: 4px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); color: rgba(255, 255, 255, .86); }
@keyframes uc-pulse { 50% { opacity: .35; } }
.uc-in { margin-top: clamp(16px, 1.8vw, 24px); padding: 13px 16px; border-radius: 14px; background: rgba(0, 0, 0, .28); }
.uc-in p { margin: 5px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; }
.uc-flow { position: relative; display: grid; grid-template-columns: minmax(150px, 4fr) minmax(46px, 1.5fr) minmax(0, 7fr); margin-top: clamp(16px, 1.8vw, 24px); align-items: center; }
.uc-srcs { display: flex; flex-direction: column; gap: 7px; }
.uc-srcs small { margin-bottom: 4px; }
.uc-src { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 14.5px; line-height: 1.16; }
.uc-src svg { flex: none; width: 12px; height: 12px; opacity: .72; }
.uc-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.uc-wire path { fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 1.3; stroke-dasharray: 4 7; animation: uc-run 1s linear infinite; }
@keyframes uc-run { to { stroke-dashoffset: -11; } }
.uc-doc { grid-column: 3; position: relative; z-index: 1; min-height: 196px; padding: clamp(16px, 1.6vw, 24px); border-radius: 14px; background: #F4F3EF; color: #000; box-shadow: 0 14px 34px rgba(0, 0, 0, .26); }
.uc-doc small { color: #5c5c5c; }
.uc-doc p { margin: 10px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.34; }
.uc-doc ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: clamp(14.5px, 1.1vw, 16px); }
.uc-doc li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid #DDDBD4; line-height: 1.2; }
.uc-doc li:first-child { border-top: 0; }
.uc-doc li b { font-weight: 500; text-align: right; }
.uc-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: clamp(14px, 1.6vw, 22px); }
.uc-foot div { padding: 13px 14px; border-radius: 12px; background: rgba(0, 0, 0, .28); }
.uc-foot p { margin: 6px 0 0; font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.26; text-wrap: pretty; }
.js .uc-win .uc-a { opacity: 0; transform: translateY(6px); transition: opacity .28s, transform .28s; }
.js .uc-win .uc-a.on { opacity: 1; transform: none; }
.js .uc-wire { opacity: 0; transition: opacity .28s; }
.js .uc-wire.on { opacity: 1; }
.uc-link { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; margin: 10px 10px 0; padding: clamp(26px, 3vw, 44px) clamp(22px, 4vw, 62px); border-radius: 22px; background: #000; color: #fff; }
.uc-link h2 { margin: 0; font-family: "Geist", "Instrument Sans", sans-serif; font-weight: 400; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.uc-link .o-btn { flex: none; background: #fff; color: #000; }
.uc-link .o-btn:hover { background: #DDDEDE; }
.uc-end h2 { margin: 0; font-family: "Geist", "Instrument Sans", sans-serif; font-weight: 400; font-size: clamp(32px, 3.9vw, 62px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.sec .uc-end { margin-top: 10px; }
.sec-wins { min-width: 0; }
.sec-p { min-height: 440px; }
/* 31 Oct, Adam: a white card on the green window looks wrong, the answer stays in the window */
.sec-p .uc-doc { background: rgba(0, 0, 0, .26); color: #fff; box-shadow: none; }
.sec-p .uc-doc small { color: rgba(255, 255, 255, .68); }
.sec-p .uc-doc li { border-top-color: rgba(255, 255, 255, .18); }
.js .sec-p { display: none; }
.js .sec-p.on { display: flex; flex-direction: column; animation: sec-in .45s ease; }
.sec-p > :last-child { flex: 1; }
.sec-p > .uc-doc, .sec-box { display: flex; flex-direction: column; justify-content: center; }
.sec-p .uc-flow { align-items: stretch; }
.sec-p .uc-flow .uc-srcs { justify-content: center; }
.sec-p .uc-flow .uc-doc { display: flex; flex-direction: column; justify-content: center; }
@keyframes sec-in { from { opacity: 0; transform: translateY(8px); } }
.sec-p h2 { margin: 0; font-family: inherit; font-size: clamp(22px, 2vw, 32px); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.sec-p .uc-win-h { display: block; }
.sec-a { margin: clamp(12px, 1.3vw, 18px) 0 clamp(18px, 2vw, 28px); max-width: 40em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.38; color: rgba(255, 255, 255, .9); text-wrap: pretty; }
.sec-box { padding: clamp(18px, 2.4vw, 34px); border-radius: 16px; border: 1.5px dashed rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .22); }
.sec-box > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.sec-box .uc-src { padding: 16px 13px; font-size: 16px; }
.sec-p .uc-doc ul { font-size: clamp(16px, 1.25vw, 19px); }
.sec-big p { margin: 12px 0 2px; font-family: "Geist", "Instrument Sans", sans-serif; font-size: clamp(34px, 4vw, 66px); line-height: 1.04; letter-spacing: -.02em; }
.sec-big { min-height: 0; }
.sec-p .uc-doc:not(.sec-big) { min-height: 0; }
.sec-p .uc-pass { background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0 50%, #141414 50% 100%); }
.uc-pass { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 72px 0 34px; border-radius: 20px; background: linear-gradient(90deg, var(--o-green) 0 50%, #1a1a1a 50% 100%); overflow: hidden; }
.uc-pass > b { position: absolute; top: 20px; font-size: 14px; font-weight: 500; }
.uc-pass > b.l { left: clamp(16px, 2vw, 26px); }
.uc-pass > b.r { right: clamp(16px, 2vw, 26px); }
.uc-pass::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1.5px dashed rgba(255, 255, 255, .72); }
.uc-lane { position: relative; height: 58px; container-type: inline-size; }
.uc-lane > div { position: absolute; inset: 0; overflow: hidden; }
.uc-lane > div:first-child { clip-path: inset(0 50% 0 0); }
.uc-lane > div:last-child { clip-path: inset(0 0 0 50%); }
.uc-lane span { position: absolute; top: 7px; left: 0; display: flex; align-items: center; height: 44px; width: 170px; padding: 0 14px; border-radius: 11px; font-size: 16px; white-space: nowrap; background: #F4F3EF; color: #000; animation: uc-go 9s linear infinite; animation-delay: inherit; }
.uc-lane > div:last-child span { background: #2c2c2c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font-family: "Geist Mono", monospace; font-size: 14px; letter-spacing: .02em; }
.uc-lane:nth-of-type(2) > div { animation-delay: -5.4s; }
.uc-lane:nth-of-type(3) > div { animation-delay: -1.8s; }
.uc-lane:nth-of-type(4) > div { animation-delay: -7.2s; }
@keyframes uc-go { from { transform: translateX(-180px); } to { transform: translateX(100cqw); } }
.uc-end { position: relative; margin: 10px 10px 0; padding: clamp(70px, 11vw, 190px) clamp(22px, 4vw, 62px); border-radius: 22px; overflow: hidden; color: #fff; background: #000; isolation: isolate; }
.uc-end img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.uc-end::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12)); }
.uc-end p { margin: 16px 0 0; font-size: 15px; color: rgba(255, 255, 255, .84); }
.uc-end .o-btn { margin-top: 26px; background: #fff; color: #000; }
.uc-end .o-btn:hover { background: #DDDEDE; }
.uc-stage.uc-obory { background: #EBEBEA; color: #000; }
.uc-obory .uc-tabs { background: rgba(235, 235, 234, .84); }
.uc-obory .uc-tab { box-shadow: none; }
.uc-obory .uc-tab[aria-pressed="true"] { box-shadow: 0 0 0 2px #EBEBEA, 0 0 0 4px #000; }
.uc-obory .uc-tab:focus-visible, .uc-obory .uc-case:focus-visible { outline-color: #000; }
.uc-obory .uc-case { color: #5c5c5c; border-top-color: rgba(0, 0, 0, .16); }
.uc-obory .uc-case:hover, .uc-obory .uc-case[aria-pressed="true"] { color: #000; }
.uc-obory .uc-case[aria-pressed="true"] { box-shadow: inset 2px 0 0 #000; }
.uc-obory .uc-win { box-shadow: 0 18px 44px rgba(0, 0, 0, .14); }
.uc-end-plain { background: #EBEBEA; color: #000; }
.uc-end-plain::after { display: none; }
.uc-end-plain h2 { color: #000; }
.uc-end-plain .o-btn { background: #000; color: #fff; }
.uc-end-plain .o-btn:hover { background: #33383C; }
@media (max-width: 1100px) {
  .uc-work { grid-template-columns: 1fr; }
  .uc-list { position: static; flex-direction: row; gap: 7px; overflow-x: auto; margin: 0 calc(clamp(22px, 4vw, 62px) * -1); padding: 2px clamp(22px, 4vw, 62px); scrollbar-width: none; }
  .uc-list::-webkit-scrollbar, .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-list li { flex: none; }
  .uc-case { width: auto; padding: 9px 14px; border: 0; border-radius: 999px; font-size: 15px; white-space: nowrap; background: rgba(0, 0, 0, .46); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
  .uc-case[aria-pressed="true"] { padding-left: 14px; background: #fff; color: #000; box-shadow: none; }
  .uc-obory .uc-case { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); color: #3a3a3a; }
  .uc-obory .uc-case[aria-pressed="true"] { background: #000; color: #fff; box-shadow: none; }
  .sec .uc-list { display: none; }
  .js .sec-p, .js .sec-p.on { display: block; min-height: 0; animation: none; }
  .sec-p + .sec-p { margin-top: 10px; }
}
@media (max-width: 860px) {
  .uc-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 8px clamp(22px, 4vw, 62px); scrollbar-width: none; }
  .uc-tab { flex: none; width: 136px; height: 68px; }
  .uc-tab span { left: 10px; bottom: 8px; font-size: 13.5px; }
  .uc-flow { grid-template-columns: 1fr; gap: 14px; }
  .uc-srcs { flex-direction: row; flex-wrap: wrap; }
  .uc-srcs small { width: 100%; margin: 0; }
  .uc-src { padding: 7px 10px; font-size: 13.5px; }
  .uc-wire { display: none; }
  .uc-doc { grid-column: 1; min-height: 0; }
  .uc-foot { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .uc-bg img[data-k="firma"] { object-position: 92% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .uc-bg img { transition: opacity .3s; transform: none; }
  .uc-wire path, .uc-win-h b::before { animation: none; }
  .uc-lane span { animation: none; transform: translateX(calc(25vw - 200px)); }
}
@media (max-width: 560px) { .sec-box > div { grid-template-columns: 1fr; } }