/* Folders 2 styles. Generated from showreel.src.css: every rule is scoped to .f2s or .f2s-lb. */
.f2s.st-ao { --s-bg: #1B1A17; --s-fg: #F3EEE4; --s-acc: #F2B544; --s-acc2: #7FB7BE; --s-onacc: #1B1A17; }
.f2s.st-ao.t-light { --s-bg: #EFE9DE; --s-fg: #2A241A; --s-acc: #D9822B; --s-acc2: #3E7C87; --s-onacc: #2A241A; }
@media (prefers-color-scheme: light) {
  .f2s.st-ao.t-auto { --s-bg: #EFE9DE; --s-fg: #2A241A; --s-acc: #D9822B; --s-acc2: #3E7C87; --s-onacc: #2A241A; }
}
.f2s {
  --s-onacc: #fff;
  position: relative; direction: ltr; text-align: left; overflow: hidden; overflow: clip; isolation: isolate;
  border-radius: 22px; background: var(--s-bg); color: var(--s-fg);
  font: 500 15px/1.5 "Manrope", "Cairo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
.f2s:not(.f2s-ready) { min-height: 240px; }
.f2s .f2s-fb { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px 16px; margin: 0; padding: clamp(18px, 3vw, 32px); list-style: none; }
.f2s.f2s .f2s-fb li { margin: 0; padding: 0; list-style: none; }
.f2s.f2s .f2s-fb li::before, .f2s.f2s .f2s-fb li::marker { content: none; }
.f2s .f2s-fb a { display: grid; gap: 4px; color: inherit; }
.f2s.f2s .f2s-fb img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; box-shadow: none; background: color-mix(in srgb, var(--s-fg) 10%, var(--s-bg)); }
.f2s .f2s-fb-t { font: 700 14.5px/1.3 "Manrope", "Cairo", sans-serif; }
.f2s .f2s-fb-m { font-size: 12.5px; opacity: .65; }
.f2s *, .f2s *::before, .f2s *::after { box-sizing: border-box; }
.f2s [hidden] { display: none !important; }
.f2s a, .f2s a:hover, .f2s a:focus { text-decoration: none; box-shadow: none; border-bottom: 0; }
.f2s a { color: inherit; }
.f2s button { font: inherit; margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; -webkit-appearance: none; appearance: none; }
.f2s h3, .f2s p { margin: 0; padding: 0; border: 0; background: none; text-transform: none; }
.f2s a:focus-visible, .f2s button:focus-visible, .f2s [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.f2s .f2s-ic { width: 18px; height: 18px; flex: none; }
.f2s canvas, .f2s .f2s-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; display: block; object-fit: cover; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.f2s .f2s-img { opacity: 0; transition: opacity .7s; }
.f2s .f2s-img.ok { opacity: 1; }
.f2s .f2s-ph { background: linear-gradient(135deg, var(--s-bg), color-mix(in srgb, var(--s-acc) 38%, var(--s-bg))); }
.f2s { --k1: var(--s-acc); --k2: var(--s-acc2); --k3: color-mix(in srgb, var(--s-acc) 45%, var(--s-acc2)); --k4: color-mix(in srgb, var(--s-fg) 55%, var(--s-acc)); }
.f2s .sh { padding: clamp(18px, 3vw, 36px) 0 clamp(10px, 2vw, 20px); }
.f2s .fd-folder { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.f2s .fd-back { position: absolute; inset: 14% 0 0 0; border-radius: 6px 16px 16px 16px; background: color-mix(in srgb, var(--k) 55%, var(--s-bg)); }
.f2s .fd-back::before { content: ""; position: absolute; left: 0; top: -12%; width: 42%; height: 14%; border-radius: 12px 12px 0 0; background: inherit; }
.f2s .fd-fan { position: absolute; left: 12%; right: 12%; top: 4%; height: 58%; }
.f2s .fd-sheet { position: absolute; left: 8%; right: 8%; top: 6%; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.3); transform: translateX(var(--x)) rotate(var(--r)); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.f2s .fd-folder:hover .fd-sheet, .f2s .fd-folder:focus-visible .fd-sheet { transform: translateX(calc(var(--x) * 1.7)) translateY(-16%) rotate(calc(var(--r) * 1.5)); }
.f2s .fd-pocket { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--k); color: #16140F; box-shadow: 0 -10px 24px rgba(0,0,0,.18); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.f2s .fd-folder:hover .fd-pocket, .f2s .fd-folder:focus-visible .fd-pocket { transform: perspective(700px) rotateX(-14deg); }
.f2s .fd-name { font: 800 clamp(19px, 1.8vw, 24px)/1.15 "Bricolage Grotesque", "Cairo", sans-serif; letter-spacing: -.015em; }
.f2s .fd-count { font: 700 13px/1.2 "Manrope", sans-serif; opacity: .8; }
.f2s .fx { padding: clamp(18px, 3vw, 36px); }
.f2s .fx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.f2s .fx-label { font: 800 clamp(32px, 4.6vw, 64px)/1 "Bricolage Grotesque", "Cairo", sans-serif; letter-spacing: -.035em; }
.f2s .fx-total { font: 700 13px/1.3 "Manrope", "Cairo", sans-serif; opacity: .6; }
.f2s .fx-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fmin, 250px)), 1fr)); gap: 30px 22px; padding-top: 30px; }
.f2s .fx-grid.many { gap: 24px 16px; }
.f2s .fx-folder { container-type: inline-size; transition: opacity .45s, filter .45s, transform .5s cubic-bezier(.16,1,.3,1); }
.f2s .fx-folder .fd-name { font-size: clamp(14px, 8.5cqi, 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f2s .fx-folder .fd-count { font-size: clamp(11px, 5.4cqi, 13px); }
.f2s .fx-folder .fd-pocket { padding: clamp(10px, 6cqi, 16px) clamp(12px, 7cqi, 18px); }
.f2s .fx-grid.has-on .fx-folder:not(.on) { opacity: .5; filter: saturate(.55); }
.f2s .fx-grid.has-on .fx-folder:not(.on):hover, .f2s .fx-grid.has-on .fx-folder:not(.on):focus-visible { opacity: .85; filter: none; }
.f2s .fx-folder.on .fd-sheet { transform: translateX(calc(var(--x) * 1.7)) translateY(-16%) rotate(calc(var(--r) * 1.5)); }
.f2s .fx-folder.on .fd-pocket { transform: perspective(700px) rotateX(-14deg); }
.f2s .fx-folder.on .fd-back { box-shadow: 0 0 0 2px var(--k); }
.f2s .fx-panel { grid-column: 1 / -1; position: relative; overflow: hidden; margin-top: -8px; }
.f2s .fx-notch { position: absolute; z-index: 1; top: 1px; left: 50%; width: 26px; height: 14px; margin-left: -13px; background: color-mix(in srgb, var(--k) 12%, var(--s-bg)); clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: left .55s cubic-bezier(.16,1,.3,1); }
.f2s .fx-box { margin-top: 14px; padding: clamp(16px, 2.4vw, 26px); border-radius: 22px; background: color-mix(in srgb, var(--k) 12%, var(--s-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 30%, transparent); }
.f2s .fx-ph { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 18px; }
.f2s .fx-pname { font: 800 clamp(22px, 2.6vw, 34px)/1.05 "Bricolage Grotesque", "Cairo", sans-serif; letter-spacing: -.02em; }
.f2s .fx-pcount { padding: 4px 10px; border-radius: 99px; background: var(--k); color: #16140F; font: 700 12px/1.2 "Manrope", sans-serif; }
.f2s .fx-ph .fx-close { margin-left: auto; align-self: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; background: transparent; color: inherit; cursor: pointer; transition: transform .45s cubic-bezier(.16,1,.3,1), background .25s, color .25s; }
.f2s .fx-close:hover { transform: rotate(90deg); background: var(--s-fg); color: var(--s-bg); }
.f2s .fx-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 20px 16px; }
.f2s .fx-card { display: grid; align-content: start; gap: 4px; color: inherit; }
.f2s .fx-pic { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.f2s .fx-pic canvas, .f2s .fx-pic .f2s-img { transition: opacity .7s, transform .9s cubic-bezier(.16,1,.3,1); }
.f2s .fx-card:hover .fx-pic canvas, .f2s .fx-card:hover .fx-pic .f2s-img { transform: scale(1.05); }
.f2s .fx-play { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: #16140F; transform: scale(.85); opacity: .92; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s; }
.f2s .fx-play svg { width: 15px; height: 15px; margin-left: 2px; }
.f2s .fx-card:hover .fx-play, .f2s .fx-card:focus-visible .fx-play { transform: scale(1.08); opacity: 1; }
.f2s .fx-t { font: 700 15px/1.25 "Manrope", "Cairo", sans-serif; }
.f2s .fx-m { font-size: 12.5px; opacity: .7; }
@media (max-width: 560px) {
.f2s .fx-grid, .f2s .fx-grid.many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.f2s .fx-pgrid { grid-template-columns: 1fr; }

}
.f2s.f2s input { margin: 0; min-height: 0; text-transform: none; letter-spacing: normal; }
.f2s svg[fill="none"], .f2s-lb svg[fill="none"] { fill: none; }
.f2s svg[fill="currentColor"], .f2s-lb svg[fill="currentColor"] { fill: currentColor; }
.f2s div, .f2s span, .f2s b, .f2s i { line-height: inherit; }
.f2s.f2s h3, .f2s.f2s p { color: inherit; text-transform: none; font-style: normal; text-shadow: none; border: 0; background: none; padding: 0; }
.f2s.f2s p { margin: 0; }
.f2s.f2s button, .f2s-lb.f2s-lb button { min-width: 0; min-height: 0; margin: 0; text-transform: none; letter-spacing: normal; text-shadow: none; }
.f2s.f2s a, .f2s.f2s a:hover, .f2s.f2s a:focus, .f2s.f2s a:visited, .f2s.f2s a:active { text-decoration: none; border-bottom: 0; }
.f2s a:hover, .f2s a:focus, .f2s a:visited, .f2s a:active { background-color: transparent; }
.f2s .fx-card, .f2s .fx-card:hover, .f2s .fx-card:focus, .f2s .fx-card:visited, .f2s .fx-card:active { color: inherit; }
html.f2s-lb-open { overflow: hidden; }
.f2s-lb { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; font-family: "Manrope", "Cairo", system-ui, sans-serif; direction: ltr; opacity: 0; transition: opacity .35s; }
.f2s-lb[hidden] { display: none !important; }
.f2s-lb.on { opacity: 1; }
.f2s-lb *, .f2s-lb *::before, .f2s-lb *::after { box-sizing: border-box; }
.f2s-lb .f2s-lb-bg { position: absolute; inset: 0; background: rgba(8,6,16,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.f2s-lb .f2s-lb-box { position: relative; width: min(1100px, 100%, calc(78vh * 16 / 9)); transform: translateY(24px) scale(.96); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.f2s-lb.on .f2s-lb-box { transform: none; }
.f2s-lb .f2s-lb-box.vert { width: min(420px, 100%, calc(76vh * 9 / 16)); }
.f2s-lb .f2s-lb-frame { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7); }
.f2s-lb .f2s-lb-box.vert .f2s-lb-frame { aspect-ratio: 9 / 16; }
.f2s-lb .f2s-lb-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.f2s-lb .f2s-lb-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 14px 4px 0; color: #F4F2FA; }
.f2s-lb .f2s-lb-cap b { font-weight: 800; font-size: 16px; }
.f2s-lb .f2s-lb-cap span { font-size: 13.5px; opacity: .65; }
.f2s-lb .f2s-lb-x { position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .35s cubic-bezier(.16,1,.3,1); }
.f2s-lb .f2s-lb-x:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }
.f2s-lb .f2s-lb-x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.f2s-lb .f2s-lb-x svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
.f2s *, .f2s *::before, .f2s *::after, .f2s-lb, .f2s-lb * { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }

}

/* ---------- 1.5.1: full width ---------- */
.f2s.f2s-full { width: var(--f2s-vw, 100vw); max-width: none; margin-left: calc(50% - var(--f2s-vw, 100vw) / 2); box-sizing: border-box; }