/* ================= Direction landings: branding (onekey.co.il/branding/) — desktop first ================= */

/* ---------- the brand film: a title card and five scenes on a clock ---------- */
.brf { position: relative; display: grid; grid-template-rows: 52px minmax(0, 1fr) 72px; height: 740px; overflow: hidden; background: #000; color: #fff; }
/* the first screen: the header above, the film, and a strip of the marquee under it (the floating buttons sit over that strip, not over the controls) */
.brf.is-page { height: calc(100vh - 84px - 76px); min-height: 600px; max-height: 900px; }
.brf-top { display: flex; align-items: center; gap: 16px; padding-inline: var(--okx-pad); }
.brf-h1 { margin: 0; font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.2; }
.brf-sample { padding: 3px 12px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); font-size: 12px; color: rgba(255, 255, 255, .85); transition: opacity .6s; }
.brf.no-sample .brf-sample { opacity: 0; }
.brf-tc { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.brf-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); opacity: .35; }
.brf.is-playing .brf-rec { animation: brf-blink 1.2s steps(1) infinite; }
@keyframes brf-blink { 0% { opacity: 1; } 50% { opacity: .25; } }
.brf-stage { position: relative; overflow: hidden; }
.brf-sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .01s linear .42s, visibility 0s linear .42s; }
.brf-sc.is-on { opacity: 1; visibility: visible; }
/* the cut between scenes: a panel crosses the frame while the scenes swap behind it */
.brf-wipe { position: absolute; inset: 0; z-index: 6; pointer-events: none; animation: brf-wipe .95s cubic-bezier(.7, 0, .2, 1) both; }
.brf-wipe.is-lime { background: var(--lime); }
.brf-wipe.is-black { background: #000; }
.brf-wipe::before { content: ""; position: absolute; inset: 0 auto 0 100%; width: 14%; background: var(--green); }
.brf-wipe.is-black::before { background: var(--lime); }
@keyframes brf-wipe { 0% { transform: translateX(115%); } 42%, 54% { transform: translateX(0); } 100% { transform: translateX(-115%); } }
.brf-grain { position: absolute; inset: -40%; z-index: 5; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.brf.is-playing .brf-grain { animation: brf-grain .9s steps(5) infinite; }
@keyframes brf-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
@keyframes brf-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes brf-fade { from { opacity: 0; } }
@keyframes brf-rise { from { transform: translateY(108%); } }
@keyframes brf-draw { from { transform: scaleX(0); } }
@keyframes brf-push { from { transform: scale(.96); } }

/* captions: lower third, on the reading side */
.brf-cap { position: absolute; z-index: 3; inset-inline-start: var(--okx-pad); bottom: 30px; display: grid; gap: 8px; width: min(430px, 34%); padding-inline-start: 18px; border-inline-start: 3px solid var(--lime); color: var(--black); box-sizing: border-box; }
.brf-cap.is-light { color: #fff; }
.brf-cap-n { font-size: 12px; color: var(--ink-muted); }
.brf-cap.is-light .brf-cap-n { color: var(--lime); }
.brf-cap-h { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 2.5vw, 38px); line-height: 1.12; }
.brf-cap-p { margin: 0; font-size: 16px; line-height: 1.55; }
.brf-cap.is-light .brf-cap-p { color: rgba(255, 255, 255, .86); }
.brf-sc.is-on .brf-cap > * { animation: brf-up .9s var(--okx-ease) both; animation-delay: .7s; }
.brf-sc.is-on .brf-cap > :nth-child(2) { animation-delay: .82s; }
.brf-sc.is-on .brf-cap > :nth-child(3) { animation-delay: .94s; }

/* title card */
.brf-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding-bottom: 40px; background: #000; text-align: center; box-sizing: border-box; }
.brf-open-l { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--lime); }
.brf-open-t { margin: 0; font-family: var(--font-display); font-size: clamp(56px, 6.6vw, 108px); line-height: 1.1; color: #fff; }
.brf-line { display: block; overflow: hidden; padding: .05em .1em; }
.brf-line i { display: block; font-style: normal; }
.brf-line b { display: inline-block; padding: 0 .2em; background: var(--lime); color: #000; font-weight: 400; }
.brf-open-rule { width: min(460px, 40%); height: 2px; background: var(--lime); }
.brf-open-p { max-width: 34em; margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.okp-line.is-h.brf-open-code { position: absolute; bottom: 30px; left: 30%; width: 40%; margin: 0; }
.brf-open-code path { stroke: #fff; }
.brf-open-code.is-in path:last-child { fill: #fff; stroke: #fff; }
.brf-open.is-on .brf-open-t { animation: brf-push 4.6s cubic-bezier(.2, .6, .3, 1) both; }
.brf-open.is-on .brf-open-l { animation: brf-fade 1s both .2s; }
.brf-open.is-on .brf-line i { animation: brf-rise 1.2s cubic-bezier(.2, .8, .2, 1) both .35s; }
.brf-open.is-on .brf-line.is-2 i { animation-delay: .6s; }
.brf-open.is-on .brf-open-rule { animation: brf-draw 1.3s var(--okx-ease) both 1.1s; }
.brf-open.is-on .brf-open-p { animation: brf-up 1s var(--okx-ease) both 1.4s; }

/* 01 name */
.brf-name { background: var(--green-900); }
.brf-name-in { position: absolute; inset: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.brf-brief { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.brf-brief li { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.brf-brief small { font-size: 11px; color: var(--lime); }
.brf-brief b { font-weight: 400; font-size: 15px; }
.brf-name-big { font-family: var(--font-display); font-weight: 300; font-size: clamp(130px, 15vw, 220px); line-height: .92; letter-spacing: .05em; color: #fff; transition: letter-spacing 1.8s var(--okx-ease), color 1s; }
.brf-name.is-done .brf-name-big { letter-spacing: .14em; color: var(--lime); }
.brf-name-he { display: flex; align-items: center; gap: 14px; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .9s var(--okx-ease) .5s, transform 1s var(--okx-ease) .5s; }
.brf-name-he b { font-family: var(--font-display); font-weight: 400; font-size: 40px; }
.brf-name-he span { padding: 2px 14px; background: var(--lime); color: #000; font-size: 26px; }
.brf-name.is-done .brf-name-he { opacity: 1; transform: none; }
.brf-cands { display: flex; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.brf-cands li { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font-size: 13px; letter-spacing: .1em; color: rgba(255, 255, 255, .7); transition: all .6s var(--okx-ease); }
.brf-cands li.is-cur { box-shadow: inset 0 0 0 1px #fff; color: #fff; }
.brf-cands li.is-out { box-shadow: none; text-decoration: line-through; }
.brf-cands li.is-win { background: var(--lime); box-shadow: none; color: #000; }
.brf-name.is-on .brf-brief li { animation: brf-up .9s var(--okx-ease) both; animation-delay: calc(.6s + var(--i) * .14s); }
.brf-name.is-on .brf-name-big { animation: brf-fade .7s both 1s; }
.brf-name.is-on .brf-cands { animation: brf-fade .8s both 1.2s; }

/* 02 logo */
.brf-logo { display: flex; align-items: center; justify-content: center; padding-bottom: 110px; background: #fff; color: #000; box-sizing: border-box; }
.brf-guides { position: absolute; inset: 0; pointer-events: none; }
.brf-guides i, .brf-guides b { position: absolute; }
.brf-guides i { top: 0; bottom: 0; width: 0; border-inline-start: 1px dashed rgba(18, 73, 68, .28); }
.brf-guides i:nth-child(1) { left: 24.6%; } .brf-guides i:nth-child(2) { left: 40.6%; } .brf-guides i:nth-child(3) { left: 44.4%; } .brf-guides i:nth-child(4) { left: 75.6%; }
.brf-guides b { left: 0; right: 0; height: 0; border-top: 1px dashed rgba(18, 73, 68, .28); }
.brf-guides b:nth-of-type(1) { top: 23%; } .brf-guides b:nth-of-type(2) { top: 42%; } .brf-guides b:nth-of-type(3) { top: 61%; }
.brf-lockup { position: relative; display: flex; align-items: center; gap: 54px; direction: ltr; }
.brs-mark { width: 150px; height: auto; overflow: visible; }
.brs-mark path.is-green { fill: var(--green); }
.brs-mark path.is-lime { fill: var(--lime); }
.brs-mark path.is-ink { fill: var(--black); }
.brf-lockup .brs-mark { width: 200px; }
.brf-logo .brs-mark path { transform-box: fill-box; transform-origin: center; }
@keyframes brf-fly { from { opacity: 0; transform: translate(calc(var(--x) * 2.4), calc(var(--y) * 2.4)) rotate(var(--r)) scale(.6); } }
.brf-word { display: flex; flex-direction: column; gap: 10px; }
.brf-word-l { display: flex; font-family: var(--font-display); font-weight: 300; font-size: clamp(120px, 12.5vw, 190px); line-height: .85; letter-spacing: .05em; }
.brf-word-l i { font-style: normal; }
.brf-word-he { direction: rtl; align-self: flex-end; font-size: 28px; }
.brf-parts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.brf-parts li { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0; }
.brf-parts li span { padding: 4px 14px; border-radius: var(--radius-pill); background: #000; color: #fff; font-size: 13px; }
.brf-parts li::after { content: ""; width: 1px; height: 30px; background: #000; }
.brf-parts .is-p0 { top: 9%; left: 30.5%; }
.brf-parts .is-p1 { top: 9%; left: 58%; }
.brf-parts .is-p2 { top: 63%; left: 66%; flex-direction: column-reverse; }
.brf-logo.is-on .brf-guides i, .brf-logo.is-on .brf-guides b { animation: brf-fade 1.2s both .5s; }
.brf-logo.is-on .brs-mark path { animation: brf-fly 1.4s cubic-bezier(.2, .9, .25, 1.06) both; animation-delay: calc(.7s + var(--i) * .18s); }
.brf-logo.is-on .brf-word-l i { animation: brf-up .9s var(--okx-ease) both; animation-delay: calc(1.7s + var(--i) * .09s); }
.brf-logo.is-on .brf-word-he { animation: brf-fade 1s both 2.4s; }
.brf-logo.is-on .brf-parts li { animation: brf-up .8s var(--okx-ease) both; animation-delay: calc(2.8s + var(--i) * .22s); }

/* 03 system */
.brf-sys { display: flex; background: #000; }
.brf-col { position: relative; flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; overflow: hidden; background: var(--c); color: #000; box-sizing: border-box; }
.brf-col.is-c0 { flex: 1.3; color: #fff; }
.brf-col.is-c3 { color: #fff; }
.brf-col-l { margin: 0; font-size: 12px; opacity: .8; }
.brf-pal { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.brf-pal li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; font-size: 16px; }
.brf-pal li i { width: 44px; height: 44px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.brf-pal small { font-size: 12px; opacity: .75; }
.brf-sys > .brf-cap { inset-inline-start: 28px; width: calc(100% * 1.3 / 5.3 - 56px); }
.brf-aa { font-family: var(--font-display); font-weight: 300; font-size: clamp(90px, 8.4vw, 124px); line-height: 1; }
.brf-aa span { display: block; font-family: var(--font-hebrew); }
.brf-type-row { display: grid; gap: 8px; margin: auto 0 0; font-family: var(--font-display); font-size: 30px; line-height: 1.15; }
.brf-type-row small { font-family: var(--font-text); font-size: 12px; opacity: .75; }
.brf-pat { margin-top: 6px; }
.brf-app { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; flex: 1; min-height: 0; padding: 16px; overflow: hidden; color: #000; box-sizing: border-box; }
.brf-app small { font-size: 11px; opacity: .75; }
.brf-app .brs-mark { position: absolute; top: 14px; inset-inline-end: 14px; width: 30px; }
.brf-app b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.brf-app.is-card { background: #fff; }
.brf-app.is-card b { letter-spacing: .06em; }
.brf-app.is-post { background: var(--lime); }
.brf-app.is-book { background: var(--green); color: #fff; }
.brf-app.is-book .brs-mark path.is-green { fill: var(--lime); }
.brf-app.is-book .brs-mark path.is-ink { fill: #fff; }
@keyframes brf-col { from { transform: translateY(101%); } }
@keyframes brf-sw { from { transform: scale(0); } }
.brf-sys.is-on .brf-col { animation: brf-col 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.5s + var(--i) * .13s); }
.brf-sys.is-on .brf-col-l, .brf-sys.is-on .brf-aa, .brf-sys.is-on .brf-type-row, .brf-sys.is-on .brf-pat { animation: brf-up .9s var(--okx-ease) both 1.5s; }
.brf-sys.is-on .brf-type-row { animation-delay: 1.8s; }
.brf-sys.is-on .brf-pal li { animation: brf-up .8s var(--okx-ease) both; animation-delay: calc(1.5s + var(--i) * .12s); }
.brf-sys.is-on .brf-pal li i { animation: brf-sw .7s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(1.6s + var(--i) * .12s); }
.brf-sys.is-on .brf-app { animation: brf-up .9s var(--okx-ease) both 1.8s; }
.brf-sys.is-on .brf-app.is-post { animation-delay: 2s; }
.brf-sys.is-on .brf-app.is-book { animation-delay: 2.2s; }
.brf-sys.is-on .brf-cap > * { animation-delay: 1.9s; }
.brf-sys.is-on .brf-cap > :nth-child(2) { animation-delay: 2.02s; }
.brf-sys.is-on .brf-cap > :nth-child(3) { animation-delay: 2.14s; }

/* 04 building */
.brf-house { background: var(--green-100); }
.brf-scene { position: absolute; inset: 0; }
.brf-scene .okb-gl, .brf-scene canvas { width: 100% !important; height: 100% !important; }
.brf-house .brf-cap { padding-block: 16px; padding-inline-end: 18px; background: #fff; }
.brf-ticks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.brf-ticks li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 5px; border-radius: var(--radius-pill); background: #000; color: #fff; font-size: 13px; }
.brf-ticks li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: #000; }
.brf-sc.is-on .brf-cap > .brf-ticks { animation: none; }
.brf-house.is-on .brf-ticks li { animation: brf-up .7s var(--okx-ease) both; animation-delay: calc(2.4s + var(--i) * 1.25s); }

/* 05 reel */
.brf-reel { background: #000; }
.brf-cut { position: absolute; inset: 0; overflow: hidden; }
.brf-cut > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brf-cut::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 50%), linear-gradient(to left, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 55%); }
.brf-cut-meta { position: absolute; z-index: 2; left: var(--okx-pad); bottom: 30px; display: flex; align-items: flex-end; gap: 18px; color: #fff; }
.brf-cut-logo { display: flex; align-items: center; justify-content: center; width: 170px; height: 110px; background: #fff; }
.brf-cut-logo img { max-width: 78%; max-height: 70%; object-fit: contain; }
.brf-cut-t { display: grid; gap: 4px; }
.brf-cut-t b { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; }
.brf-cut-t small { font-size: 14px; color: rgba(255, 255, 255, .85); }
.brf-cut-n { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--lime); color: #000; font-size: 12px; }
@keyframes brf-cut { 0% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes brf-ken { from { transform: scale(1.16); } to { transform: scale(1.02); } }
.brf-reel.is-on .brf-cut { animation: brf-cut .9s cubic-bezier(.7, 0, .2, 1) both; animation-delay: calc(.5s + var(--i) * 1.8s); }
.brf-reel.is-on .brf-cut > img { animation: brf-ken 4.5s linear both; animation-delay: calc(.5s + var(--i) * 1.8s); }
.brf-reel.is-on .brf-cut-meta { animation: brf-up .8s var(--okx-ease) both; animation-delay: calc(1s + var(--i) * 1.8s); }
.brf-reel .brf-cap { z-index: 4; }

/* end card */
.brf-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #000; text-align: center; }
.brf-end-pat.okp-pattern { position: absolute; inset: 0 0 auto; width: 100%; opacity: .14; }
.brf-end-pat.okp-pattern path, .brf-end-pat.okp-pattern.is-on path, .okt .brf-end-pat.okp-pattern.is-on path.is-ink { fill: transparent; stroke: #fff; stroke-opacity: 1; animation: none; }
.brf-end-t { position: relative; margin: 0; font-family: var(--font-display); font-size: clamp(56px, 6.4vw, 100px); line-height: 1.08; color: #fff; }
.brf-end-t .okx-hl { padding: 0 .18em; background: var(--lime); color: #000; }
.brf-end-p { position: relative; max-width: 30em; margin: 0; font-size: 18px; color: rgba(255, 255, 255, .82); }
.brf-end-acts { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.ok-site a.okx-btn.brf-btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.ok-site a.okx-btn.brf-btn-line:hover { background: #fff; color: #000; }
.brf-replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; }
.brf-end.is-on .brf-end-t { animation: brf-up 1.1s var(--okx-ease) both .6s; }
.brf-end.is-on .brf-end-p { animation: brf-up 1s var(--okx-ease) both .85s; }
.brf-end.is-on .brf-end-acts { animation: brf-up 1s var(--okx-ease) both 1.05s; }

/* controls */
.brf-bot { position: relative; display: flex; align-items: center; gap: 20px; padding-inline: var(--okx-pad); }
.brf-play { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; cursor: pointer; transition: background-color .5s var(--okx-ease), color .5s var(--okx-ease); }
.brf-play:hover { background: #fff; color: #000; }
.brf-tri { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.brf-chaps { display: flex; flex: 1; gap: 6px; margin: 0; padding: 0; list-style: none; }
.brf-chaps li { flex: var(--w) 1 0; min-width: 0; }
.brf-chaps button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0 0; border: 0; border-top: 2px solid rgba(255, 255, 255, .28); background: none; color: rgba(255, 255, 255, .72); font: inherit; font-size: 14px; text-align: start; cursor: pointer; transition: color .5s, border-color .5s; }
.brf-chaps button span { font-size: 11px; }
.brf-chaps button:hover { color: #fff; }
.brf-chaps li.is-done button { border-top-color: rgba(255, 255, 255, .8); }
.brf-chaps li.is-on button { border-top-color: var(--lime); color: #fff; }
.ok-site .okx-btn.brf-cta { height: 44px; padding-inline: 20px; font-size: 15px; }
.brf-bar { position: absolute; inset: 0 0 auto; height: 2px; background: rgba(255, 255, 255, .14); }
.brf-bar i { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: right center; }
.brf :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ---------- why a brand: a statement over a project photo ---------- */
.bri-lead, .brk-lead, .brx-note { max-width: 30em; margin: 0; }
.brw { position: relative; overflow: hidden; padding: clamp(96px, 10vw, 170px) 0 clamp(80px, 8vw, 130px); background: var(--green-900); color: #fff; }
.brw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: brw-drift 28s ease-in-out infinite alternate; }
@keyframes brw-drift { from { transform: scale(1.04); } to { transform: scale(1.18) translate(-1.5%, -1.2%); } }
.brw::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(4, 22, 20, .9), rgba(4, 22, 20, .5)); }
.brw-in { position: relative; z-index: 1; }
.brw .okp-h2.brw-h { max-width: 13em; margin: 16px 0 0; font-size: clamp(48px, 5.4vw, 88px); line-height: 1.06; color: #fff; }
.brw-lead { max-width: 30em; margin: 24px 0 0; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.brw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin: clamp(56px, 6vw, 100px) 0 0; padding: 0; list-style: none; }
.brw-grid li { display: grid; align-content: start; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .45); }
.brw-n { font-size: 13px; color: var(--lime); }
.brw-grid h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; }
.brw-grid p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .85); }

/* ---------- what you get ---------- */
.bri-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.bri-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 22px; background: var(--white); outline: none; transition: background-color .7s var(--okx-ease); }
.bri-card h3 { margin: 6px 0 0; font-weight: 500; font-size: 18px; }
.bri-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.bri-n { position: absolute; top: 14px; inset-inline-end: 16px; z-index: 1; font-size: 11px; color: var(--ink-muted); }
.bri-pic { position: relative; display: flex; align-items: center; justify-content: center; height: 128px; overflow: hidden; background: var(--green-100); transition: background-color .7s var(--okx-ease); }
.bri-card:hover .bri-pic { background: var(--lime-100); }
.brm { position: relative; display: flex; align-items: center; justify-content: center; }
/* target */
.brm-target { width: 96px; height: 96px; }
.brm-target i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--green); }
.brm-target i:nth-child(2) { inset: 18px; } .brm-target i:nth-child(3) { inset: 36px; background: var(--lime); box-shadow: none; }
.brm-target b { position: absolute; width: 60px; height: 2px; top: 22px; right: -20px; background: var(--black); transform-origin: left center; transform: rotate(32deg) translateX(40px); opacity: 0; transition: transform .8s var(--okx-ease), opacity .4s; }
.bri.is-in .brm-target b, .bri-card:hover .brm-target b { transform: rotate(32deg); opacity: 1; transition-delay: .4s; }
/* naming */
.brm-words { align-items: flex-start; height: 44px; overflow: hidden; font-family: var(--font-display); font-size: 40px; line-height: 44px; letter-spacing: .06em; }
.brm-words > span { display: flex; flex-direction: column; }
.brm-words i { font-style: normal; height: 44px; }
.bri-card:hover .brm-words > span { animation: brm-words 2.4s steps(1) infinite; }
.bri.is-in .brm-words > span { animation: brm-words 2.4s var(--okx-ease) 1 both; animation-delay: .6s; }
@keyframes brm-words { 0% { transform: translateY(0); } 33% { transform: translateY(-44px); } 66% { transform: translateY(-88px); } 100% { transform: translateY(-132px); } }
.bri-card:hover .brm-words > span { animation: brm-words 2.4s var(--okx-ease) infinite; }
/* logo */
.brm-logo .brs-mark { width: 54px; }
.brm-logo .brs-mark path { transform: translate(calc(var(--x) * .25), calc(var(--y) * .25)) rotate(var(--r)); transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.2, .9, .25, 1.1); transition-delay: calc(var(--i) * .1s); }
.bri.is-in .brm-logo .brs-mark path { transform: none; }
.bri-card:hover .brm-logo .brs-mark path { transform: translate(calc(var(--x) * .12), calc(var(--y) * .12)) rotate(calc(var(--r) * .5)); }
/* book */
.brm-book { width: 120px; height: 80px; }
.brm-book i { position: absolute; inset: 0 auto 0 50%; width: 56px; background: var(--white); box-shadow: 0 0 0 1px var(--line); transform-origin: left center; transition: transform .9s var(--okx-ease); }
.brm-book i:nth-child(1) { transform: rotateY(0) skewY(-4deg); }
.brm-book i:nth-child(2) { transform: skewY(-4deg) translateX(-4px); background: var(--lime); }
.brm-book i:nth-child(3) { transform: skewY(-4deg) translateX(-8px); }
.brm-book b { position: absolute; right: 8px; bottom: 8px; font-family: var(--font-display); font-weight: 400; font-size: 13px; }
.brm-book { perspective: 300px; }
.bri.is-in .brm-book i:nth-child(1), .bri-card:hover .brm-book i:nth-child(1) { transform: rotateY(-160deg); }
.bri.is-in .brm-book i:nth-child(2), .bri-card:hover .brm-book i:nth-child(2) { transform: rotateY(-120deg); transition-delay: .15s; }
/* colours */
.brm-colors { gap: 6px; height: 80px; align-items: flex-end; }
.brm-colors i { width: 26px; height: 30px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: height .9s var(--okx-ease); }
.bri.is-in .brm-colors i:nth-child(1) { height: 80px; } .bri.is-in .brm-colors i:nth-child(2) { height: 64px; } .bri.is-in .brm-colors i:nth-child(3) { height: 50px; } .bri.is-in .brm-colors i:nth-child(4) { height: 36px; }
.bri-card:hover .brm-colors i { height: 70px !important; }
/* pattern */
.brm-pattern { width: 82%; }
.brm-pattern .okp-line.is-h { margin: 0; }
/* plans */
.brm-plan svg { width: 130px; height: auto; }
.brm-plan path { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 2.2s var(--okx-ease); }
.bri.is-in .brm-plan path { stroke-dashoffset: 0; }
.bri-card:hover .brm-plan path { stroke: var(--black); }
/* renders */
.brm-render { position: absolute; inset: 0; }
.brm-render img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--okx-ease), transform 2s var(--okx-ease); }
.bri.is-in .brm-render img { clip-path: inset(0 0 0 0); }
.bri-card:hover .brm-render img { transform: scale(1.08); }
/* print */
.brm-print { width: 110px; height: 80px; }
.brm-print i { position: absolute; top: 0; bottom: 0; width: 55px; }
.brm-print i:first-child { left: 0; background: var(--white); box-shadow: 0 0 0 1px var(--line); transform: rotate(-6deg); transition: transform .9s var(--okx-ease); }
.brm-print i:last-child { right: 0; display: flex; align-items: center; justify-content: center; background: var(--green); }
.brm-print .brs-mark { width: 24px; }
.brm-print .brs-mark path.is-green { fill: var(--lime); }
.brm-print .brs-mark path.is-ink { fill: var(--white); }
.bri.is-in .brm-print i:first-child { transform: rotate(-12deg) translateX(-10px); }
/* signs / fence */
.brm-fence { position: absolute; inset: 22px 0 auto; flex-direction: column; align-items: stretch; height: 84px; }
.brm-fence span { display: block; height: 40px; overflow: hidden; background: var(--green); color: var(--lime); font-size: 18px; line-height: 40px; white-space: nowrap; letter-spacing: .06em; }
.bri-card:hover .brm-fence span, .bri.is-in .brm-fence span { animation: brm-run 6s linear infinite; }
@keyframes brm-run { from { text-indent: 0; } to { text-indent: -260px; } }
.brm-fence i { position: absolute; top: 40px; width: 3px; height: 30px; background: var(--black); }
.brm-fence i:nth-of-type(1) { left: 14%; } .brm-fence i:nth-of-type(2) { left: 50%; } .brm-fence i:nth-of-type(3) { left: 86%; }
/* office */
.brm-office { width: 120px; height: 84px; margin-top: 16px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--black); }
.brm-office b { position: absolute; top: -16px; left: -1px; right: -1px; height: 18px; background: var(--black); color: var(--lime); font-weight: 400; font-size: 11px; line-height: 18px; text-align: center; letter-spacing: .1em; transition: background-color .6s; }
.brm-office i { position: absolute; bottom: 0; width: 26px; height: 46px; right: 16px; background: var(--green); transform-origin: right; transition: transform .9s var(--okx-ease); }
.brm-office i:last-child { right: auto; left: 14px; bottom: 26px; width: 48px; height: 26px; background: var(--lime-100); }
.bri-card:hover .brm-office i:first-of-type { transform: perspective(200px) rotateY(-60deg); }
.bri-card:hover .brm-office b { background: var(--lime); color: var(--black); }
/* web */
.brm-web { width: 130px; height: 84px; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 18px 10px 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), inset 0 12px 0 var(--black); box-sizing: border-box; }
.brm-web i { display: block; width: 100%; height: 8px; background: var(--green-100); transform: scaleX(.2); transform-origin: right; transition: transform 1s var(--okx-ease); }
.brm-web i:nth-child(1) { height: 22px; background: var(--green); }
.brm-web b { position: absolute; bottom: 8px; left: 10px; width: 36px; height: 12px; border-radius: 6px; background: var(--lime); }
.bri.is-in .brm-web i, .bri-card:hover .brm-web i { transform: none; }
.bri.is-in .brm-web i:nth-child(2) { transition-delay: .2s; } .bri.is-in .brm-web i:nth-child(3) { transition-delay: .4s; width: 70%; }

/* ---------- the brand in the field: a ribbon that pans by itself ---------- */
.brx-sec { overflow: hidden; }
.brx-view { overflow: hidden; margin-top: clamp(32px, 4vw, 56px); outline-offset: -3px; }
.brx-track { display: flex; width: max-content; animation: brx-pan 60s linear infinite; }
.brx-view:hover .brx-track, .brx-view:focus-visible .brx-track { animation-play-state: paused; }
@keyframes brx-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
.brx-item { flex: none; display: flex; flex-direction: column; gap: 12px; width: 560px; margin: 0; margin-inline-end: 28px; }
.brx-item figcaption { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.brx-item figcaption span { font-size: 12px; color: var(--ink-muted); }
.brx { position: relative; height: 360px; overflow: hidden; background: var(--green-100); box-sizing: border-box; }
.brx-logo { display: inline-flex; align-items: center; gap: 10px; direction: ltr; }
.brx-logo .brs-mark { width: 34px; }
.brx-logo b { font-family: var(--font-display); font-weight: 400; font-size: 40px; letter-spacing: .05em; }
.brx-logo i { font-style: normal; font-family: var(--font-display); font-size: 18px; letter-spacing: .06em; }
.brx-logo.is-sm .brs-mark { width: 18px; }
.brx-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--lime); color: var(--black); font-size: 13px; }
.brx-pill.is-dark { background: var(--black); color: var(--white); }
/* fence */
.brx-fence { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 26px; background: linear-gradient(var(--white), var(--green-100)); }
.brx-fence-panel { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 18px; height: 190px; margin: 0 -20px; padding: 34px 40px 20px; background: var(--green); color: var(--white); }
.brx-fence-code.okp-line.is-h { position: absolute; top: 10px; right: 40px; width: auto; height: 14px; margin: 0; }
.brx-fence .brx-logo b { color: var(--white); }
.brx-fence .brs-mark path.is-green { fill: var(--lime); }
.brx-fence .brs-mark path.is-ink { fill: var(--white); }
.brx-fence-main p { margin: 8px 0 0; font-size: 18px; }
.brx-fence-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 18px; }
.brx-posts { display: flex; justify-content: space-around; height: 40px; }
.brx-posts i { width: 6px; background: var(--black); }
/* billboard */
.brx-board { display: flex; flex-direction: column; align-items: center; padding-top: 30px; background: linear-gradient(#eef6f4, var(--green-100)); }
.brx-board-face { display: grid; grid-template-columns: 1fr 1fr; width: 86%; height: 200px; background: var(--white); box-shadow: 0 0 0 8px var(--black); }
.brx-board-img { overflow: hidden; }
.brx-board-img img { width: 100%; height: 100%; object-fit: cover; }
.brx-board-txt { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px; background: var(--lime); }
.brx-board-txt b { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.05; }
.brx-board-txt .brx-logo { margin-top: 10px; }
.brx-pole { display: block; width: 14px; flex: 1; background: var(--black); }
/* brochure */
.brx-book { display: flex; align-items: center; justify-content: center; gap: 0; perspective: 900px; }
.brx-book-cover, .brx-book-page { width: 200px; height: 270px; box-sizing: border-box; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .5); }
.brx-book-cover { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px; background: var(--green); color: var(--white); transform: rotateY(12deg); transform-origin: left; }
.brx-book-cover .brs-mark { width: 44px; margin-bottom: auto; }
.brx-book-cover .brs-mark path.is-green { fill: var(--lime); }
.brx-book-cover .brs-mark path.is-ink { fill: var(--white); }
.brx-book-cover b { font-family: var(--font-display); font-weight: 400; font-size: 36px; letter-spacing: .05em; }
.brx-book-cover span { font-size: 13px; }
.brx-book-page { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px; background: var(--white); transform: rotateY(-12deg); transform-origin: right; }
.brx-book-page svg { width: 100%; height: auto; }
.brx-book-page path { fill: none; stroke: var(--green); stroke-width: 2; }
.brx-book-page small { font-size: 12px; color: var(--ink-muted); }
/* site */
.brx-site { display: flex; flex-direction: column; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.brx-site-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; box-shadow: inset 0 -1px 0 var(--line); font-size: 12px; }
.brx-site-nav > span:last-child { display: flex; gap: 14px; }
.brx-site-nav i { font-style: normal; }
.brx-site-hero { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.brx-site-img { overflow: hidden; background: var(--green-100); }
.brx-site-img img { width: 100%; height: 100%; object-fit: cover; }
.brx-site-txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 22px; }
.brx-site-txt b { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; }
.brx-site-txt span:not(.brx-pill) { font-size: 14px; color: var(--ink-muted); }
/* post */
.brx-post { display: flex; align-items: center; justify-content: center; }
.brx-post-sq { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; width: 290px; height: 290px; padding: 24px; background: var(--lime); box-sizing: border-box; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .45); }
.brx-post-pat { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: auto; }
.brx-post-sq b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.1; }
.brx-post-sq .brx-logo { position: relative; }
/* office */
.brx-office { display: flex; align-items: flex-end; justify-content: center; padding: 20px 20px 0; background: linear-gradient(#eef6f4, var(--green-100)); }
.brx-office svg { width: 100%; height: auto; }
.brx-o-ground { fill: var(--gray-200); }
.brx-o-box { fill: var(--white); stroke: var(--black); stroke-width: 2; }
.brx-o-sign { fill: var(--black); }
.brx-o-t { fill: var(--lime); font-family: var(--font-hebrew); font-size: 15px; letter-spacing: .06em; }
.brx-o-glass { fill: var(--lime-100); stroke: var(--black); stroke-width: 1.5; }
.brx-o-door { fill: var(--green); }
.brx-o-flag { fill: var(--lime); stroke: var(--black); stroke-width: 2; }

/* ---------- our brands ---------- */
.brk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.brk-card { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--black); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.brk-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--green-100); }
.brk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--okx-ease); }
.brk-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--white); transition: width 1s var(--okx-ease), height 1s var(--okx-ease); }
.brk-logo img { max-width: 72%; max-height: 64%; object-fit: contain; }
/* with a photo: the building fills the tile and the logo sits on a plate; on hover the plate grows and the photo comes closer */
.brk-card.has-photo .brk-logo { inset: auto 14px 14px auto; width: 46%; height: 26%; }
.brk-card.has-photo:hover .brk-logo, .brk-card.has-photo:focus-visible .brk-logo { width: calc(100% - 28px); height: 40%; }
.brk-card:hover .brk-photo, .brk-card:focus-visible .brk-photo { transform: scale(1.08); }
.brk-meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.brk-meta b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.brk-meta small { grid-column: 1; font-size: 13px; color: var(--ink-muted); }
.brk-meta .okx-arrow { grid-row: 1 / 3; grid-column: 2; }
.brk-card.is-next .brk-media { flex-direction: column; gap: 14px; background: var(--green); }
.brk-card.is-next .brs-mark { width: 60px; }
.brk-card.is-next .brs-mark path.is-green { fill: var(--lime); }
.brk-card.is-next .brs-mark path.is-ink { fill: var(--white); }
.brk-card.is-next .brk-media b { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .brf *, .brf *::before, .brf *::after { animation: none !important; transition: none !important; }
  .brf-wipe { display: none; }
  .brw-bg { animation: none; }
  .brx-track { animation: none; }
  .brx-view { overflow-x: auto; }
  .brm-words > span, .brm-fence span { animation: none !important; }
  .brm *, .brk-photo, .brk-logo { transition: none !important; }
}

/* ================= phones and tablets ================= */
@media (max-width: 1080px) {
  .brw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .bri-grid, .brk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the film in portrait: the scene above, the caption as a band at the bottom of the stage */
@media (max-width: 900px) {
  .brf { --cap: 150px; grid-template-rows: 44px minmax(0, 1fr) 60px; }
  .brf.is-page { height: calc(100vh - 84px - 80px); height: calc(100svh - 84px - 80px); min-height: 560px; max-height: 780px; }
  .brf-top { gap: 10px; }
  .brf-h1 { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  .brf-sample { flex: none; padding: 2px 10px; font-size: 11px; }
  .brf-tc { display: none; }
  .brf-cap { left: 0; right: 0; bottom: 0; width: auto; gap: 4px; padding: 14px var(--okx-pad) 16px; border-inline-start: 0; border-top: 3px solid var(--lime); background: var(--white); }
  .brf-cap.is-light { background: rgba(0, 0, 0, .86); }
  .brf-cap-n { font-size: 11px; }
  .brf-cap-h { font-size: clamp(22px, 5.6vw, 30px); }
  .brf-cap-p { font-size: 14px; line-height: 1.45; }
  .brf-sys > .brf-cap { inset-inline-start: 0; width: auto; }
  .brf-house .brf-cap { padding-block: 14px 16px; padding-inline-end: var(--okx-pad); }
  .brf-ticks { gap: 4px; margin-top: 4px; }
  .brf-ticks li { height: 26px; padding: 0 10px 0 4px; font-size: 12px; }
  .brf-ticks li span { width: 18px; height: 18px; }
  .brf-house.is-on .brf-ticks li { animation-delay: calc(2.4s + var(--i) * .9s); }
  /* controls: the play button and the chapters; the name shows only on the current chapter */
  .brf-bot { gap: 12px; }
  .brf-play { width: 40px; height: 40px; }
  .brf-chaps { gap: 4px; }
  .brf-chaps li { flex: 1 1 0; }
  .brf-chaps li.is-on { flex: 2.6 1 0; }
  .brf-chaps button { gap: 6px; min-height: 40px; padding-top: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; }
  .brf-chaps button span { font-size: 10px; }
  .brf-chaps li:not(.is-on) button { font-size: 0; }
  .brf-chaps li:not(.is-on) button span { font-size: 10px; }
  .ok-site .okx-btn.brf-cta { display: none; }
  /* title and end cards */
  .brf-open { gap: 18px; padding: 0 var(--okx-pad) 50px; }
  .brf-open-t { font-size: clamp(32px, 8.4vw, 64px); }
  .brf-open-p { font-size: 15px; }
  .brf-open-rule { width: 60%; }
  .okp-line.is-h.brf-open-code { left: 15%; width: 70%; bottom: 22px; }
  .brf-end { gap: 16px; padding-inline: var(--okx-pad); }
  .brf-end-t { font-size: clamp(36px, 9.4vw, 64px); }
  .brf-end-p { font-size: 15px; }
  .brf-end-acts { gap: 10px; }

  /* 01 name */
  .brf-name-in { inset: 0 0 var(--cap); gap: 14px; padding-inline: var(--okx-pad); }
  .brf-brief { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .brf-brief li { padding: 6px 12px; }
  .brf-brief small { font-size: 10px; }
  .brf-brief b { font-size: 13px; }
  .brf-name-big { font-size: clamp(76px, 22vw, 150px); }
  .brf-name-he b { font-size: 28px; }
  .brf-name-he span { font-size: 18px; }
  .brf-cands li { height: 28px; padding: 0 11px; font-size: 12px; }
  /* 02 logo: the mark above the wordmark, the part names as chips under them */
  .brf-logo { flex-direction: column; gap: 22px; padding-bottom: var(--cap); }
  .brf-lockup { flex-direction: column; gap: 18px; }
  .brf-lockup .brs-mark { width: clamp(96px, 28vw, 150px); }
  .brf-word { align-items: center; }
  .brf-word-l { font-size: clamp(72px, 21vw, 140px); }
  .brf-word-he { align-self: center; font-size: 20px; }
  .brf-parts { position: relative; inset: auto; display: flex; justify-content: center; gap: 6px; }
  .brf-parts li, .brf-parts .is-p0, .brf-parts .is-p1, .brf-parts .is-p2 { position: static; }
  .brf-parts li::after { display: none; }
  .brf-parts li span { font-size: 12px; }
  .brf-guides i:nth-child(1) { left: 12%; } .brf-guides i:nth-child(2) { left: 50%; } .brf-guides i:nth-child(3) { display: none; } .brf-guides i:nth-child(4) { left: 88%; }
  .brf-guides b:nth-of-type(1) { top: 14%; } .brf-guides b:nth-of-type(2) { top: 37%; } .brf-guides b:nth-of-type(3) { top: 58%; }
  /* 03 system: four fields as a 2 × 2 grid above the caption */
  .brf-sys { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding-bottom: var(--cap); box-sizing: border-box; }
  .brf-col { gap: 8px; padding: 14px; }
  .brf-col.is-c0 { flex: none; }
  .brf-col-l { font-size: 11px; }
  .brf-pal { gap: 6px; }
  .brf-pal li { grid-template-columns: 22px 1fr; gap: 8px; font-size: 12px; }
  .brf-pal li i { width: 22px; height: 22px; }
  .brf-pal small { display: none; }
  .brf-aa { font-size: clamp(48px, 13vw, 84px); }
  .brf-type-row { gap: 4px; font-size: 16px; }
  .brf-type-row small { font-size: 10px; }
  .brf-pat { margin-top: 0; }
  .brf-col.is-c3 { gap: 6px; }
  .brf-app { gap: 2px; padding: 8px 10px; }
  .brf-app b { font-size: 16px; }
  .brf-app small { font-size: 10px; }
  .brf-app .brs-mark { top: 8px; inset-inline-end: 8px; width: 18px; }
  /* 04 building */
  .brf-scene { bottom: calc(var(--cap) - 30px); }
  /* 05 reel: the project's name at the top, the caption at the bottom */
  .brf-cut::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 45%); }
  .brf-cut-meta { top: 16px; bottom: auto; left: auto; inset-inline-start: var(--okx-pad); flex-direction: row-reverse; align-items: center; gap: 12px; }
  .brf-cut-logo { width: 92px; height: 60px; }
  .brf-cut-t b { font-size: 26px; }
  .brf-cut-t small { font-size: 12px; }
  .brf-cut-n { display: none; }
}
@media (max-width: 760px) {
  .brf { height: 700px; }
  .brf.is-page { height: calc(100vh - 64px - 80px); height: calc(100svh - 64px - 80px); }

  .brw { padding: 72px 0 64px; }
  .brw .okp-h2.brw-h { font-size: clamp(34px, 9vw, 48px); }
  .brw-lead { font-size: 16px; }
  .brw-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
  .brw-grid h3 { font-size: 21px; }
  .brw-grid p { font-size: 15px; }

  .bri-grid { gap: 10px; }
  .bri-card { padding: 10px 10px 16px; }
  .bri-card h3 { font-size: 16px; }
  .bri-card p { font-size: 13px; }
  .bri-pic { height: 104px; }
  .bri-n { top: 8px; inset-inline-end: 10px; }

  /* the ribbon: smaller mock-ups, swiped by hand instead of panning */
  .brx-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .brx-view::-webkit-scrollbar { display: none; }
  .brx-track { animation: none; padding-inline: var(--okx-pad); }
  .brx-item { width: 300px; margin-inline-end: 14px; scroll-snap-align: center; }
  .brx-item[aria-hidden="true"] { display: none; }
  .brx { height: 360px; zoom: .536; }
  .brx-item figcaption { font-size: 15px; }

  .brk-grid { gap: 12px; }
  .brk-card { gap: 8px; }
  .brk-meta b { font-size: 18px; }
  .brk-meta small { font-size: 12px; }
  .brk-card.has-photo .brk-logo { inset: auto 8px 8px auto; width: 60%; height: 28%; }
  .brk-card.has-photo:hover .brk-logo, .brk-card.has-photo:focus-visible .brk-logo { width: calc(100% - 16px); }
  .brk-card.is-next .brk-media b { padding-inline: 12px; font-size: 22px; text-align: center; }
  .brk-card.is-next .brs-mark { width: 44px; }
}