:root {
  --bg: #e9eaed;
  --ink: #111214;
  --grey: #7d7d7d;
  --line: rgba(17, 18, 20, .1);
  --gutter: clamp(20px, 4vw, 56px); /* the site's side margin: 20px on a phone (the pages' own margin), up to 56 on a PC */
  --head: 68px;
  --sans: 'Inter Tight', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
#spacer { height: 1000vh; }

/* ── loader: the logo draws itself, the bar glides ───────────── */
#loader {
  position: fixed; inset: 0; z-index: 50; background: radial-gradient(ellipse 70% 60% at 50% 45%, #f4f5f7, var(--bg) 70%);
  display: grid; place-content: center; justify-items: center; gap: 30px;
  transition: opacity 1.1s ease, visibility 1.1s;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader.done .lmark { transform: translateY(-14px) scale(.94); }
.lmark { position: relative; width: 150px; height: 150px; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.lin { position: absolute; inset: 0; }
#loader.play .lin { animation: lBreathe 2.8s ease-in-out 2.1s infinite; }
.lmark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform, opacity; }
.lmark .ic { opacity: 0; transform: translateY(18px) scale(.93); }
#loader.play .lmark .ic { animation: lIn 1s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.05s + var(--i) * .09s); }
.lmark .c2 path { fill: #010101; }
.lmark .c1 path { fill: #7d7d7d; }
.lmark .tx { opacity: 0; transform: translateY(28px); }
#loader.play .lmark .tx { animation: lIn .85s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.75s + var(--i) * .06s); }
.lmark .tx path { fill: #010101; }
@keyframes lIn { to { opacity: 1; transform: none; } }
@keyframes lBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.lbar { position: relative; width: 220px; height: 30px; margin: -10px 0; overflow: hidden; opacity: 0; transform: translateY(8px); }
#loader.play .lbar { animation: lIn .8s ease .4s forwards; }
.lbar::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px; border-radius: 2px; background: rgba(17, 18, 20, .08); }
.lbar i { position: absolute; inset: 0; transform: translateX(-100%); will-change: transform; }
#loader.play .lbar i { animation: lGrow 7s cubic-bezier(.12, .6, .2, 1) .5s forwards; }
.lbar i::before { content: ""; position: absolute; left: 0; right: 3px; top: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(17, 18, 20, .1), #111214 70%, #000); }
.lbar b { position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #050505; box-shadow: 0 0 8px 2px rgba(0, 0, 0, .3), 0 0 14px 3px rgba(0, 0, 0, .12); }
@keyframes lGrow { to { transform: translateX(-14%); } }
#loader .lbar i.full { animation: none; transition: transform .6s cubic-bezier(.3, .7, .2, 1); transform: none; }
#loaderText { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); opacity: 0; transform: translateY(8px); }
#loader.play #loaderText { animation: lIn .8s ease .6s forwards; }
#loaderText em { font-style: normal; }
body.loaded .lbar, body.loaded #loaderText { transition: opacity .6s ease; opacity: 0 !important; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .lmark svg, .lin { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── fixed header bar ───────────────────── */
#top {
  position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 30; height: var(--head);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter);
  background: rgba(240, 241, 243, .94); /* no live blur behind the bar: it is costly over 3D */
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; height: 100%; flex: none; }
.logo img { height: 34px; width: auto; display: block; }
#menu { display: flex; gap: 4px; margin-inline-start: auto; }
#menu > a, #menu .dd-btn {
  position: relative; padding: 8px 14px; font-size: 14px; font-weight: 450; letter-spacing: -.005em;
  color: var(--grey); border-radius: 999px; transition: color .25s, background .25s;
}
#menu > a:hover, #menu .dd-btn:hover, #menu .drop.open .dd-btn { color: var(--ink); }
#menu > a.active, #menu .dd-btn.active { color: var(--ink); background: rgba(17, 18, 20, .06); }
#menu a.cta { margin-inline-start: 10px; color: #fff; background: var(--ink); font-weight: 500; }
#menu a.cta:hover { background: #2a2c30; color: #fff; }
.panel .see-all { pointer-events: auto; align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--ink); padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(17, 18, 20, .25); transition: background .25s, color .25s; }
.panel .see-all:hover { background: var(--ink); color: #fff; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: var(--ink); color: #fff; transition: background .25s, transform .25s;
}
.pill::after { content: '→'; transition: transform .25s; }
.pill:hover { background: #2a2c30; }
.pill:hover::after { transform: translateX(3px); }
.pill.big { padding: 15px 26px; font-size: 16px; }
#burger { display: none; width: 40px; height: 40px; margin-inline-start: auto; position: relative; }
#burger i { position: absolute; inset-inline-start: 10px; inset-inline-end: 10px; height: 1.5px; background: var(--ink); transition: transform .3s; }
#burger i:first-child { top: 16px; } #burger i:last-child { top: 23px; }
#burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
#burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ── copy blocks (intro, sectors, outro) ── */
.copy { position: fixed; z-index: 10; pointer-events: none; }
.copy > * { pointer-events: auto; }
.kicker { font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--grey); text-transform: uppercase; }
.lead { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: #45474c; max-width: 40ch; font-weight: 400; }
h1, h2 { font-weight: 500; letter-spacing: -.035em; line-height: .98; }

#intro { inset-inline-start: var(--gutter); bottom: clamp(48px, 11vh, 120px); display: flex; flex-direction: column; gap: 22px; }
#intro h1 { font-size: clamp(44px, 6.6vw, 112px); max-width: 12ch; }
#intro h1 span { display: block; color: var(--grey); }
#intro { opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease .3s, transform 1.4s cubic-bezier(.2, .7, .2, 1) .3s; }
body.ready #intro { opacity: 1; transform: none; }
.scroll-cue { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--grey); margin-top: 10px; }
.mouse { width: 18px; height: 28px; border: 1.5px solid currentColor; border-radius: 10px; position: relative; }
.mouse i { position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: currentColor; animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-2px) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(8px) } }

#panels { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#panels::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--to-end, 90deg), rgba(236, 237, 240, .84) 0%, rgba(236, 237, 240, .6) 28%, rgba(236, 237, 240, 0) 46%); opacity: 0; transition: opacity .8s ease; }
body.in-panel #panels::before { opacity: 1; }
.panel {
  position: absolute; inset-inline-start: var(--gutter); top: 50%; transform: translateY(calc(-50% + 18px));
  width: min(380px, calc(100vw - 2 * var(--gutter))); opacity: 0;
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  display: flex; flex-direction: column; gap: 18px; padding-top: var(--head);
}
.panel.on { opacity: 1; transform: translateY(-50%); }
.panel .num { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; color: var(--grey); font-variant-numeric: tabular-nums; }
.panel .num::after { content: ''; width: 40px; height: 1px; background: currentColor; opacity: .5; }
.panel h2 { font-size: clamp(42px, 5vw, 84px); }
.panel ul { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 6px; }
.panel li { font-size: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; color: #2b2d31; }
.panel li span { color: var(--grey); font-size: 12px; font-variant-numeric: tabular-nums; }
.panel .tap { font-size: 12px; color: var(--grey); }

#outro { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 20px; padding: 0 var(--gutter) clamp(56px, 12vh, 130px); opacity: 0; visibility: hidden; }
#outro::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 42% at 50% 72%, rgba(236, 237, 240, .82), rgba(236, 237, 240, 0) 70%); }
#outro h2 { font-size: clamp(40px, 6vw, 100px); }
#outro h2 span { display: block; color: var(--grey); }
#outro .lead { margin: 0 auto; }
#outro .pill { margin-top: 8px; }

/* ── counter ────────────────────────────── */
#counter {
  position: fixed; inset-inline-end: var(--gutter); bottom: 32px; z-index: 11; display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; color: var(--grey); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .8s;
}
#counter b { color: var(--ink); font-weight: 500; }
#counter .bar { width: 90px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
#counter .bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
body.moving #counter { opacity: 1; }

/* ── lightbox ───────────────────────────── */
#lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(233, 234, 237, .86); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .4s; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#lightbox.on { opacity: 1; visibility: visible; }
.lb-media > * { display: block; max-width: calc(100vw - 2 * var(--gutter)); max-height: 80vh; border-radius: 6px; box-shadow: 0 40px 120px rgba(20, 24, 40, .25); }
#lbClose { position: absolute; top: calc(var(--head) + 16px); inset-inline-end: var(--gutter); font-size: 14px; padding: 8px 16px; border-radius: 999px; background: #fff; }

body.pointer, body.pointer * { cursor: pointer; }

@media (max-width: 860px) {
  #panels::before { background: linear-gradient(0deg, rgba(236, 237, 240, .92) 0%, rgba(236, 237, 240, .7) 30%, rgba(236, 237, 240, 0) 55%); }
  #menu { display: none; }
  #burger { display: block; }
  #top.open #menu {
    display: flex; flex-direction: column; position: absolute; top: var(--head); inset-inline-start: 0; inset-inline-end: 0; gap: 0;
    padding: 10px var(--gutter) 18px; background: rgba(240, 241, 243, .96); border-bottom: 1px solid var(--line);
  }
  #top.open #menu > a, #top.open #menu .dd-btn { padding: 13px 0; font-size: 17px; border-radius: 0; background: none; text-align: start; }
  #top.open #menu .drop { flex-direction: column; align-items: stretch; }
  #top.open #menu > a.cta { color: var(--ink); margin-inline-start: 0; }
  #top.open #menu .dd-btn svg, #top.open #menu .dd-pics { display: none; }
  #top.open #menu .dd { position: static; display: block; padding: 0 0 8px; background: none; box-shadow: none; clip-path: none; opacity: 1; visibility: visible; transform: none; }
  #top.open #menu .dd-list a { opacity: 1; transform: none; padding: 8px 4px; font-size: 15px; }
  .panel { top: auto; bottom: 84px; transform: translateY(18px); padding-top: 0; gap: 12px; }
  .panel.on { transform: none; }
  .panel .lead, .panel ul { display: none; }
  #counter { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .mouse i { animation: none; }
}

/* ── portfolio page colours: dark (these values) and light ([data-folio="light"] on <html>, the sun / moon button) */
#folio, .f-fly {
  --bg: #07080c; --bg-rgb: 7, 8, 12; --bg2-rgb: 10, 12, 24;
  --ink: #f3f4f7; --ink-rgb: 243, 244, 247; --hi: #fff; --fg: 255, 255, 255;
  --solid: #fff; --solid-hover: #e9eaed; --on-solid: #0b0c12;
  --card: #15161c; --shadow: rgba(0, 0, 0, .45); --logo: invert(1) brightness(1.4);
  --empty: linear-gradient(160deg, #262a45 0%, #14151d 55%, #0c0d12 100%);
  --empty-hero: radial-gradient(ellipse 80% 70% at 70% 40%, #2a2f52 0%, #12131c 60%, #07080c 100%);
}
[data-folio="light"] #folio, [data-folio="light"] .f-fly {
  --bg: #f6f6f8; --bg-rgb: 246, 246, 248; --bg2-rgb: 246, 246, 248;
  --ink: #14151a; --ink-rgb: 20, 21, 26; --hi: #000; --fg: 16, 18, 26;
  --solid: #14151a; --solid-hover: #2d2f39; --on-solid: #fff;
  --card: #e4e5ea; --shadow: rgba(20, 24, 40, .18); --logo: none;
  --empty: linear-gradient(160deg, #d8ddef 0%, #e8eaf0 55%, #f0f1f4 100%);
  --empty-hero: radial-gradient(ellipse 80% 70% at 70% 40%, #dde3f5 0%, #eceef3 60%, #f6f6f8 100%);
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
/* ── portfolio page (opens from a screen) ─────────────────────── */
#folio {
  --fx: cubic-bezier(.2, .7, .2, 1);
  --left: calc(92px + clamp(28px, 5vw, 80px));
  position: fixed; inset: 0; z-index: 45; color: var(--ink); background: var(--bg);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; overflow: hidden;
  font-family: var(--sans);
}
#folio.open { opacity: 1; visibility: visible; }
#folio.closing { opacity: 0; transition: opacity .4s ease; }
:where(#folio) button { color: inherit; } /* zero weight: .f-ic.on, .f-round .on, .f-tabs keep their own colours */
.f-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; z-index: 1; scrollbar-width: thin; scrollbar-color: rgba(var(--fg), .25) transparent; }
/* ── first screen */
.f-first { position: relative; height: 100vh; min-height: 640px; overflow: hidden; --fade: 1; }
.f-hero { position: absolute; inset: -2%; will-change: transform; }
.f-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 0 0 100%); transform: scale(1.1);
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 6s ease-out;
}
.f-layer.in { clip-path: inset(0 0 0 0); transform: scale(1.02); }
.f-layer.now { transition: transform 7s ease-out; clip-path: inset(0); }
img.f-layer.in { animation: fKen 18s ease-in-out infinite alternate; }
@keyframes fKen { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
/* clips and film moments stay still - the slow zoom is for pictures only (a scaling video shimmers) */
video.f-layer, video.f-layer.in { transform: none; transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
video.f-layer.now { transition: none; }
.f-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--to-end, 90deg), rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg2-rgb), .7) 32%, rgba(var(--bg2-rgb), .1) 62%, rgba(var(--bg-rgb), .25) 100%),
    linear-gradient(0deg, rgba(var(--bg-rgb), 1) 0%, rgba(var(--bg-rgb), .75) 14%, rgba(var(--bg-rgb), 0) 42%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), 0) 20%);
}
.f-copy, .f-strip, .f-round, .f-cue { opacity: var(--fade); }
/* rail */
.f-rail {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 92px; z-index: 3; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 26px 0; border-inline-end: 1px solid rgba(var(--fg), .07); background: rgba(var(--bg-rgb), .55);
}
.f-logo img { width: 44px; filter: var(--logo); margin-bottom: 22px; }
.f-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .06); transition: background .25s, transform .25s, color .25s; }
.f-ic svg, .f-round svg, .f-x svg, .f-btn svg, .f-next svg, .f-cue svg, .f-foot svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.f-ic:hover { background: rgba(var(--fg), .14); transform: scale(1.06); }
.f-ic.on { background: var(--ink); color: var(--on-solid); }
/* top bar */
.f-top {
  position: absolute; inset-inline-start: 92px; inset-inline-end: 0; top: 0; height: 84px; z-index: 3; display: flex; align-items: center; gap: 22px;
  padding: 0 clamp(20px, 3vw, 44px); transition: background .4s ease, border-color .4s; border-bottom: 1px solid transparent;
}
#folio.scrolled .f-top { background: rgba(var(--bg-rgb), .9); border-color: rgba(var(--fg), .07); }
.f-tabs { display: flex; gap: 6px; }
.f-tabs > button, .f-tabs .dd-btn { padding: 9px 16px; border-radius: 999px; font-size: 14px; color: rgba(var(--ink-rgb), .6); transition: color .25s, background .25s; }
.f-tabs > button:hover, .f-tabs .dd-btn:hover, .f-tabs .drop.open .dd-btn { color: var(--hi); }
.f-tabs > button.on, .f-tabs .dd-btn.on { color: var(--hi); background: rgba(var(--fg), .1); }
.f-tabs .tab-home { display: inline-flex; align-items: center; gap: 7px; }
.f-tabs .tab-home svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f-search { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; width: min(340px, 30vw); height: 46px; padding: 0 18px; border-radius: 999px; background: rgba(var(--fg), .08); }
.f-search svg { width: 18px; height: 18px; fill: none; stroke: rgba(var(--ink-rgb), .7); stroke-width: 1.6; }
.f-search input { flex: 1; background: none; border: 0; outline: 0; color: var(--hi); font: inherit; font-size: 14px; }
.f-search input::placeholder { color: rgba(var(--ink-rgb), .5); }
.f-x { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .08); transition: background .25s, transform .3s; }
.f-x:hover { background: rgba(var(--fg), .18); transform: rotate(90deg); }
/* copy */
.f-copy { position: absolute; inset-inline-start: var(--left); top: 50%; transform: translateY(-58%); width: min(620px, 48vw); display: flex; flex-direction: column; gap: 18px; }
.f-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 16px; color: rgba(var(--ink-rgb), .82); }
.f-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin-inline-end: 22px; vertical-align: middle; }
.f-sample { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(var(--fg), .35); color: rgba(var(--ink-rgb), .8); }
.f-title { font-size: clamp(48px, 7vw, 116px); font-weight: 600; letter-spacing: -.035em; line-height: .92; text-transform: uppercase; }
.f-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.f-title .w > span { display: inline-block; transform: translateY(105%); }
.f-sub { font-size: clamp(18px, 1.6vw, 24px); font-weight: 400; color: var(--hi); }
.f-text { font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), .66); max-width: 46ch; }
.f-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.f-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
  border: 1.5px solid rgba(var(--fg), .75); color: var(--hi); transition: background .25s, color .25s, transform .25s;
}
.f-btn:hover { background: rgba(var(--fg), .12); transform: translateY(-2px); }
#folio .f-btn.solid { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
#folio .f-btn.solid:hover { background: var(--solid-hover); }
.f-btn svg { width: 16px; height: 16px; }
/* gallery strip on the first screen */
.f-strip { position: absolute; inset-inline-start: var(--left); bottom: clamp(34px, 7vh, 72px); inset-inline-end: 300px; display: flex; flex-direction: column; gap: 12px; }
.f-label { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .55); }
.f-next { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .85); }
.f-next .f-n { color: rgba(var(--ink-rgb), .45); margin-inline-end: 6px; }
.f-next:hover { color: var(--hi); }
.f-next svg { width: 16px; height: 16px; transition: transform .25s; }
.f-next:hover svg { transform: translateX(4px); }
.f-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.f-thumbs button {
  position: relative; flex: none; width: 112px; height: 132px; border-radius: 6px; overflow: hidden;
  outline: 2px solid transparent; outline-offset: 2px; transition: filter .3s, transform .35s, outline-color .3s; filter: brightness(.62);
}
.f-thumbs button img, .f-thumbs button video { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-thumbs button em { position: absolute; inset-inline-end: 7px; bottom: 7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.f-thumbs button em svg { width: 12px; height: 12px; color: #fff; fill: currentColor; }
.f-thumbs button:hover { filter: brightness(.9); transform: translateY(-4px); }
.f-thumbs button.on { filter: none; outline-color: rgba(var(--fg), .9); }
.f-progress { width: 82px; height: 3px; border-radius: 3px; background: rgba(var(--fg), .18); overflow: hidden; }
.f-progress i { display: block; height: 100%; background: var(--solid); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--fx); }
.f-round { position: absolute; inset-inline-end: clamp(24px, 4vw, 64px); bottom: clamp(42px, 8vh, 80px); display: flex; gap: 14px; }
.f-round button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .1); border: 1px solid rgba(var(--fg), .25); transition: background .25s, transform .25s; }
.f-round button:hover { transform: scale(1.08); background: rgba(var(--fg), .18); }
.f-round button.on { background: var(--solid); color: var(--on-solid); }
.f-round button.on svg { fill: currentColor; }
.f-cue { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .55); transition: color .25s; }
.f-cue svg { width: 14px; height: 14px; animation: fBob 1.8s ease-in-out infinite; }
.f-cue:hover { color: var(--hi); }
@keyframes fBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* ── below the first screen */
.f-body { position: relative; padding-block: clamp(60px, 10vh, 120px) 60px; padding-inline: var(--left) clamp(24px, 5vw, 80px); display: flex; flex-direction: column; gap: clamp(70px, 12vh, 130px); }
.f-kick { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); margin-bottom: 18px; }
.f-over { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.f-h2 { font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 26px; max-width: 18ch; }
.f-paras p { font-size: 17px; line-height: 1.7; color: rgba(var(--ink-rgb), .72); max-width: 62ch; }
.f-paras p + p { margin-top: 16px; }
.f-facts { display: flex; flex-direction: column; border-top: 1px solid rgba(var(--fg), .12); }
.f-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(var(--fg), .12); }
.f-facts dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .45); padding-top: 3px; }
.f-facts dd { font-size: 15px; line-height: 1.6; color: var(--ink); }
.f-facts a { color: var(--ink); border-bottom: 1px solid rgba(var(--fg), .3); transition: border-color .25s; }
.f-facts a:hover { border-color: var(--solid); }
.f-screen video, .f-screen iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.f-gi img, .f-gi video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--fx); }
.f-gi:hover img { transform: scale(1.04); } /* (videos never zoom - a scaling video shimmers) */
/* posters of every project in the sector */
.f-more-head { display: flex; align-items: baseline; gap: 16px; }
.f-more-head .f-kick { font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.02em; text-transform: none; color: var(--ink); margin: 0; }
.f-count { font-size: 13px; color: rgba(var(--ink-rgb), .5); }
.f-posters { display: flex; gap: 18px; overflow-x: auto; padding: 22px 2px 10px; scrollbar-width: thin; scrollbar-color: rgba(var(--fg), .2) transparent; }
.f-poster { position: relative; flex: none; width: clamp(170px, 15vw, 230px); text-align: start; display: flex; flex-direction: column; gap: 10px; }
.f-poster .pp { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--card); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .3s, transform .45s var(--fx), box-shadow .45s; }
.f-poster .pp img, .f-poster .pp video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--fx), filter .4s; filter: brightness(.86); }
.f-poster:hover .pp { transform: translateY(-6px); box-shadow: 0 24px 50px var(--shadow); }
.f-poster:hover .pp img { transform: scale(1.05); filter: none; }
.f-poster:hover .pp video { filter: none; }
.f-poster.on .pp { outline-color: rgba(var(--fg), .9); }
.f-poster .pb { position: absolute; inset-inline-start: 12px; top: 12px; z-index: 1; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(7, 8, 12, .7); color: #fff; }
.f-poster.on .pb { background: #fff; color: #0b0c12; }
.f-poster .pt { font-size: 17px; font-weight: 500; color: var(--ink); }
.f-poster .ps { font-size: 13px; color: rgba(var(--ink-rgb), .5); margin-top: -6px; }
.f-foot { display: flex; align-items: center; gap: 22px; padding: 46px 0; border-top: 1px solid rgba(var(--fg), .12); border-bottom: 1px solid rgba(var(--fg), .12); text-align: start; }
.f-foot .f-kick { margin: 0; flex: none; }
.f-foot strong { font-size: clamp(34px, 5vw, 80px); font-weight: 600; letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); transition: transform .5s var(--fx); }
.f-foot svg { width: clamp(30px, 3.5vw, 54px); height: clamp(30px, 3.5vw, 54px); margin-inline-start: auto; transition: transform .5s var(--fx); }
.f-foot:hover strong { transform: translateX(10px); }
.f-foot:hover svg { transform: translateX(10px); }
.f-legal { font-size: 13px; color: rgba(var(--ink-rgb), .45); }
.f-legal a { color: rgba(var(--ink-rgb), .8); border-bottom: 1px solid rgba(var(--fg), .3); }
/* things slide in as they scroll into view */
#folio [data-rv] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--fx), transform 1.1s var(--fx); transition-delay: calc(var(--i, 0) * .07s); }
#folio [data-rv].rv-in { opacity: 1; transform: none; }
/* toast + big viewer */
.f-toast { position: absolute; left: 50%; bottom: 30px; z-index: 5; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-size: 13px; opacity: 0; transition: .35s var(--fx); pointer-events: none; }
.f-toast.on { opacity: 1; transform: translate(-50%, 0); }
.f-player { --fg: 255, 255, 255; --hi: #fff; color: #f3f4f7; position: absolute; inset: 0; z-index: 6; background: rgba(4, 5, 8, .97); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.f-player.on { opacity: 1; visibility: visible; }
.f-frame video, .f-frame iframe, .f-frame img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; border: 0; border-radius: 8px; background: #000; object-fit: contain; }
.f-player .f-x { position: absolute; top: 26px; inset-inline-end: 30px; }
/* the first screen arrives in sequence */
#folio .f-rail > *, #folio .f-top, #folio .f-meta, #folio .f-sub, #folio .f-text, #folio .f-actions > *,
#folio .f-label, #folio .f-thumbs button, #folio .f-progress, #folio .f-round button, #folio .f-cue { opacity: 0; transform: translateY(18px); }
#folio .f-cue { transform: translate(-50%, 18px); }
#folio .f-rail > * { transform: translateX(-16px); }
#folio.show-copy .f-rail > * { animation: fIn .7s var(--fx) forwards; }
#folio.show-copy .f-rail > :nth-child(2) { animation-delay: .05s; }
#folio.show-copy .f-rail > :nth-child(3) { animation-delay: .1s; }
#folio.show-copy .f-rail > :nth-child(4) { animation-delay: .15s; }
#folio.show-copy .f-rail > :nth-child(5) { animation-delay: .2s; }
#folio.show-copy .f-rail > :nth-child(6) { animation-delay: .25s; }
#folio.show-copy .f-rail > :nth-child(7) { animation-delay: .3s; }
#folio.show-copy .f-top { animation: fIn .8s var(--fx) .1s forwards; }
#folio.show-copy .f-meta { animation: fIn .8s var(--fx) .25s forwards; }
#folio.show-copy .f-title .w > span { animation: fUp .95s var(--fx) forwards; animation-delay: calc(.32s + var(--i) * .08s); }
#folio.show-copy .f-sub { animation: fIn .8s var(--fx) .55s forwards; }
#folio.show-copy .f-text { animation: fIn .8s var(--fx) .65s forwards; }
#folio.show-copy .f-actions > * { animation: fIn .7s var(--fx) .75s forwards; }
#folio.show-copy .f-actions > :nth-child(2) { animation-delay: .82s; }
#folio.show-copy .f-actions > :nth-child(3) { animation-delay: .89s; }
#folio.show-copy .f-label { animation: fIn .7s var(--fx) .8s forwards; }
#folio.show-copy .f-thumbs button { animation: fIn .7s var(--fx) forwards; animation-delay: calc(.85s + var(--i) * .06s); }
#folio.show-copy .f-progress { animation: fIn .7s var(--fx) 1.1s forwards; }
#folio.show-copy .f-round button { animation: fPop .6s var(--fx) forwards; }
#folio.show-copy .f-round button:nth-child(1) { animation-delay: 1s; }
#folio.show-copy .f-round button:nth-child(2) { animation-delay: 1.07s; }
#folio.show-copy .f-round button:nth-child(3) { animation-delay: 1.14s; }
#folio.show-copy .f-cue { animation: fInCue .8s var(--fx) 1.3s forwards; }
@keyframes fIn { to { opacity: 1; transform: none; } }
@keyframes fInCue { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fUp { to { transform: none; } }
@keyframes fPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* the picture that grows out of the 3D screen */
.f-fly {
  position: fixed; z-index: 46; border-radius: 6px; background: var(--card) center / cover no-repeat; pointer-events: none;
  box-shadow: 0 30px 80px rgba(10, 14, 30, .35);
  transition: left .85s cubic-bezier(.7, 0, .2, 1), top .85s cubic-bezier(.7, 0, .2, 1), width .85s cubic-bezier(.7, 0, .2, 1),
    height .85s cubic-bezier(.7, 0, .2, 1), border-radius .85s, opacity .55s ease;
}
.f-fly.full { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
.f-fly.gone { opacity: 0; }
#gl { transition: filter .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
body.folio-opening #gl { filter: brightness(.55) blur(2px); transform: scale(1.03); }
body.folio #top, body.folio #counter, body.folio #panels { opacity: 0; pointer-events: none; }
#top, #counter { transition: opacity .5s ease; }
@media (max-width: 860px) {
  #folio { --left: 20px; }
  .f-rail { display: none; }
  .f-top { inset-inline-start: 0; height: 68px; }
  .f-search { display: none; }
  .f-tabs > button, .f-tabs > a, .f-tabs .dd-btn { padding: 8px 10px; font-size: 13px; }
  .f-tabs .dd { position: fixed; inset-inline-start: 12px; inset-inline-end: 12px; top: 62px; grid-template-columns: 1fr; }
  .f-tabs .dd-pics { display: none; }
  .f-x { margin-inline-start: auto; }
  .f-tabs .tab-home { padding: 9px; background: rgba(var(--fg), .08); color: var(--hi); }
  .f-tabs .tab-home span { display: none; } /* a house icon on a phone */
  .f-top .f-x { display: none; } /* Home does the same, and the bar stays on one line */
  .f-copy { inset-inline-start: 20px; inset-inline-end: 20px; width: auto; top: auto; bottom: 236px; transform: none; gap: 12px; }
  .f-text { display: none; }
  .f-meta { gap: 6px 12px; font-size: 13px; }
  .f-meta span + span::before { margin-inline-end: 12px; }
  .f-meta span:nth-child(n+3) { display: none; }
  .f-title { font-size: 46px; }
  .f-btn { height: 42px; padding: 0 18px; font-size: 14px; }
  .f-strip { inset-inline-start: 20px; inset-inline-end: 20px; bottom: 40px; }
  .f-next .f-n { display: none; }
  .f-thumbs button { width: 84px; height: 100px; }
  .f-cue { display: none; }
  .f-round { top: 84px; bottom: auto; inset-inline-end: 20px; flex-direction: column; }
  .f-round button { width: 44px; height: 44px; }
  .f-body { padding: 60px 20px 40px; gap: 64px; }
  .f-over { grid-template-columns: 1fr; }
  .f-poster { width: 150px; }
  .f-foot { flex-wrap: wrap; gap: 10px; padding: 30px 0; }
}
@media (prefers-reduced-motion: reduce) {
  #folio *, #folio [data-rv] { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
}

/* ── portfolio pages: category / portfolio / about / contact ───── */
#folio .f-proj { display: none; }
#folio.v-project .f-proj { display: block; }
#folio .f-page { display: none; opacity: 0; transition: opacity .5s ease; }
#folio.v-page .f-page { display: block; }
#folio .f-page.in { opacity: 1; }
#folio.swap .f-page, #folio.swap .f-proj { opacity: 0; transition: opacity .25s ease; }
#folio.v-page .f-top, #folio.v-page .f-rail > * { opacity: 1; transform: none; animation: none; }
.f-tabs > a { padding: 9px 16px; border-radius: 999px; font-size: 14px; color: rgba(var(--ink-rgb), .6); }
.f-tabs { flex-wrap: nowrap; }
.f-tabs > button, .f-tabs > a, .dd-btn { white-space: nowrap; }

/* ── Portfolio's drop-down (3D home header + portfolio pages): All work + the sections, a picture of the one you point at */
.drop { position: relative; display: flex; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; }
.dd-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.drop.open .dd-btn svg { transform: rotate(180deg); }
.dd {
  --dd-bg: rgba(248, 248, 250, .98); --dd-ink: 17, 18, 20;
  position: absolute; top: calc(100% + 14px); inset-inline-start: -10px; z-index: 40;
  display: grid; grid-template-columns: 250px 180px; gap: 10px; padding: 10px;
  border-radius: 22px; background: var(--dd-bg); color: rgb(var(--dd-ink));
  box-shadow: 0 30px 80px rgba(16, 18, 26, .2), 0 0 0 1px rgba(var(--dd-ink), .07);
  clip-path: inset(0 0 100% 0 round 22px); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: 30px 0;
  transition: clip-path .45s cubic-bezier(.7, 0, .2, 1), opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s;
}
.drop.open .dd {
  clip-path: inset(-20px -20px -40px -20px round 22px); opacity: 1; visibility: visible; transform: none;
  transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), opacity .25s, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
#folio .dd { --dd-bg: rgba(var(--bg-rgb), .97); --dd-ink: var(--ink-rgb); }
#menu { position: relative; }
#menu .drop { position: static; }
#menu .dd { inset-inline-start: auto; inset-inline-end: -10px; transform-origin: calc(100% - 40px) 0; } /* the home header: the panel sits under the menu's right end */
.dd-list { display: flex; flex-direction: column; gap: 2px; }
.dd-list a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding-block: 8px 8px; padding-inline: 8px 12px;
  border-radius: 14px; font-size: 15px; font-weight: 450; color: rgb(var(--dd-ink)); white-space: nowrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1), background .2s;
}
.drop.open .dd-list a { opacity: 1; transform: none; transition-delay: calc(90ms + var(--i) * 50ms), calc(90ms + var(--i) * 50ms), 0s; }
.dd-list a:first-child { margin-bottom: 4px; box-shadow: 0 1px 0 rgba(var(--dd-ink), .08); border-radius: 14px 14px 6px 6px; }
.dd-list a:hover, .dd-list a.on, .dd-list a.active { background: rgba(var(--dd-ink), .06); }
.dd-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--dd-ink), .06); transition: background .25s, color .25s; }
.dd-list a:hover .dd-ic { background: rgb(var(--dd-ink)); color: var(--dd-bg); }
.dd-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dd-list em { font-style: normal; font-size: 12px; opacity: .45; font-variant-numeric: tabular-nums; }
.dd-pics { position: relative; border-radius: 16px; overflow: hidden; background: rgba(var(--dd-ink), .06); min-height: 230px; }
.dd-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .5s, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.dd-pics img.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dd, .dd-list a, .dd-pics img { transition: none !important; } }
.f-all { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 14px; font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(var(--ink-rgb), .7); vertical-align: middle; transition: color .25s; }
.f-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.f-all:hover { color: var(--hi); }
.f-all:hover svg { transform: translateX(4px); }
/* the big slideshow */
.g-hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; --fade: 1; }
.g-slides { position: absolute; inset: -2%; will-change: transform; }
.g-empty { display: grid; place-items: center; background: var(--empty-hero); }
.g-empty span { font-size: clamp(60px, 12vw, 200px); font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: rgba(var(--fg), .05); transform: translateX(14%); }
.g-copy { position: absolute; inset-inline-start: var(--left); top: 50%; transform: translateY(-50%); width: min(640px, 50vw); display: flex; flex-direction: column; gap: 18px; opacity: var(--fade); }
.g-kick { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .65); display: flex; align-items: center; gap: 12px; }
.g-title { font-size: clamp(52px, 8vw, 132px); font-weight: 600; letter-spacing: -.04em; line-height: .9; text-transform: uppercase; }
.g-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.g-title .w > span { display: inline-block; transform: translateY(105%); }
.g-sub { font-size: clamp(18px, 1.6vw, 24px); color: var(--hi); }
.g-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.g-copy.anim .g-kick, .g-copy.anim .g-sub, .g-copy.anim .g-actions { animation: fIn .8s var(--fx) both; }
.g-copy.anim .g-sub { animation-delay: .25s; }
.g-copy.anim .g-actions { animation-delay: .38s; }
.g-copy.anim .g-title .w > span { animation: fUp .95s var(--fx) forwards; animation-delay: calc(.08s + var(--i) * .08s); }
.g-copy .g-kick, .g-copy .g-sub, .g-copy .g-actions { opacity: 0; transform: translateY(18px); }
.g-label { position: absolute; inset-inline-start: var(--left); top: 110px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); opacity: var(--fade); }
.g-dots { position: absolute; inset-inline-start: var(--left); inset-inline-end: 260px; bottom: clamp(50px, 9vh, 90px); display: flex; gap: 14px; opacity: var(--fade); }
.g-dots button { flex: 1; max-width: 220px; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.g-dots span { font-size: 13px; color: rgba(var(--ink-rgb), .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.g-dots button.on span, .g-dots button:hover span { color: var(--hi); }
.g-dots i { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(var(--fg), .2); overflow: hidden; }
.g-dots i::after { content: ""; position: absolute; inset: 0; background: var(--solid); transform-origin: left; transform: scaleX(0); }
.g-dots button.run i::after { animation: gFill 5s linear forwards; }
@keyframes gFill { to { transform: scaleX(1); } }
.g-arrows { position: absolute; inset-inline-end: clamp(24px, 4vw, 64px); bottom: clamp(42px, 8vh, 80px); display: flex; gap: 12px; opacity: var(--fade); }
.g-arrows button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .1); border: 1px solid rgba(var(--fg), .25); transition: background .25s, transform .25s; }
.g-arrows button:hover { background: rgba(var(--fg), .2); transform: scale(1.08); }
.g-arrows svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-hero .f-cue { opacity: var(--fade); animation: none; transform: translateX(-50%); }
/* rows of posters */
.g-rows { padding-block: clamp(50px, 8vh, 90px) 60px; padding-inline: var(--left) clamp(24px, 4vw, 60px); display: flex; flex-direction: column; gap: clamp(40px, 7vh, 70px); }
.g-row-head { display: flex; align-items: baseline; gap: 14px; }
.g-row-head h2 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; }
.g-row-head .f-all { margin-inline-start: auto; }
.g-posters { display: flex; gap: 18px; overflow-x: auto; padding: 22px 2px 10px; scrollbar-width: thin; scrollbar-color: rgba(var(--fg), .2) transparent; }
.g-posters .f-poster { width: clamp(150px, 12vw, 190px); }
.g-posters.big .f-poster { width: clamp(190px, 17vw, 260px); }
.g-sep { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--ink-rgb), .45); border-top: 1px solid rgba(var(--fg), .1); padding-top: 34px; }
.f-poster .pp.empty { display: grid; place-items: end start; padding: 16px; background: var(--empty); }
.f-poster .pp.empty em { font-style: normal; font-size: 22px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; color: rgba(var(--fg), .85); }
/* about */
.a-hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-block: 140px 60px; padding-inline: var(--left) clamp(24px, 5vw, 80px); }
.a-title { font-size: clamp(46px, 7.5vw, 124px); font-weight: 600; letter-spacing: -.04em; line-height: .95; }
.a-line { display: block; }
.a-line.dim { color: rgba(var(--ink-rgb), .45); }
.a-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .05em; }
.a-title .w > span { display: inline-block; transform: translateY(105%); animation: fUp 1s var(--fx) forwards; animation-delay: calc(.15s + var(--i) * .07s); }
.a-line.dim .w > span { animation-delay: calc(.45s + var(--i) * .07s); }
.a-text { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; color: rgba(var(--ink-rgb), .7); max-width: 56ch; animation: fIn .9s var(--fx) .7s both; }
.a-block { padding-block: 0 clamp(60px, 10vh, 110px); padding-inline: var(--left) clamp(24px, 5vw, 80px); }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.a-tile { display: flex; flex-direction: column; gap: 10px; text-align: start; transition-delay: calc(var(--i, 0) * .07s); }
.a-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--empty); }
.a-pic img, .a-pic video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); transition: transform 1s var(--fx), filter .4s; }
.a-pic em svg { width: 46px; height: 46px; fill: none; stroke: rgba(var(--fg), .6); stroke-width: 1.2; }
.a-tile:hover .a-pic img { transform: scale(1.05); filter: none; }
.a-tile:hover .a-pic video { filter: none; }
.a-name { font-size: 20px; font-weight: 500; }
.a-list { font-size: 14px; line-height: 1.5; color: rgba(var(--ink-rgb), .55); }
.a-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(var(--ink-rgb), .8); }
.a-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
.a-tile:hover .a-go svg { transform: translateX(4px); }
.a-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 1px solid rgba(var(--fg), .12); }
.a-steps li { padding-block: 28px 10px; padding-inline: 0 24px; display: flex; flex-direction: column; gap: 10px; }
.a-steps span { font-size: 13px; color: rgba(var(--ink-rgb), .4); font-variant-numeric: tabular-nums; }
.a-steps strong { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.a-steps p { font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), .6); max-width: 30ch; }
.a-clients { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.a-clients span { font-size: clamp(24px, 3vw, 44px); font-weight: 500; letter-spacing: -.02em; color: rgba(var(--ink-rgb), .85); }
/* About v2: a heading on the left, the words on the right; examples, ways to work, the registration */
.a-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(30px, 6vw, 110px); align-items: start; margin-bottom: clamp(30px, 5vh, 54px); }
.a-split .f-kick { margin-bottom: 14px; }
.a-h { font-size: clamp(32px, 3.8vw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.a-body { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: rgba(var(--ink-rgb), .74); max-width: 60ch; padding-top: 32px; }
.a-steps.ex li { padding-top: 24px; }
.a-steps.ex strong { font-size: 21px; }
.a-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 22px; }
.a-ways > div { display: flex; flex-direction: column; gap: 8px; padding: 22px 0 10px; border-top: 1px solid rgba(var(--fg), .14); transition-delay: calc(var(--i, 0) * .06s); }
.a-ways strong { font-size: 20px; font-weight: 500; letter-spacing: -.015em; }
.a-ways p { font-size: 15px; line-height: 1.55; color: rgba(var(--ink-rgb), .6); }
.a-reg-foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(30px, 6vw, 110px); align-items: end; padding-top: 28px; border-top: 1px solid rgba(var(--fg), .14); }
.a-legal { display: inline-block; font-size: 13px; letter-spacing: .03em; line-height: 1.5; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(var(--fg), .2); color: rgba(var(--ink-rgb), .75); }
.a-reg-foot .f-kick { margin-bottom: 10px; }
.a-places { display: flex; flex-wrap: wrap; gap: 4px 30px; }
.a-places span { font-size: clamp(28px, 3.4vw, 54px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
@media (max-width: 860px) {
  .a-split, .a-reg-foot { grid-template-columns: 1fr; }
  .a-body { padding-top: 0; }
}
#folio .f-page > .f-foot, #folio .f-page > .f-legal { margin-block: 0 0; margin-inline: var(--left) clamp(24px, 5vw, 80px); }
#folio .f-page > .f-legal { padding: 40px 0 60px; }
/* contact */
.c-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(40px, 6vw, 110px); align-items: center; padding-block: 140px 60px; padding-inline: var(--left) clamp(24px, 5vw, 80px); }
.c-left { display: flex; flex-direction: column; gap: 26px; }
.c-left .a-title { font-size: clamp(42px, 5.6vw, 96px); }
.c-facts { max-width: 520px; }
.c-form { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 40px); border-radius: 16px; background: rgba(var(--fg), .05); border: 1px solid rgba(var(--fg), .08); }
.c-form label { display: flex; flex-direction: column; gap: 8px; }
.c-form label span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); }
.c-form input, .c-form select, .c-form textarea { font: inherit; font-size: 15px; color: var(--hi); background: rgba(var(--fg), .06); border: 1px solid rgba(var(--fg), .14); border-radius: 10px; padding: 13px 14px; outline: none; transition: border-color .25s, background .25s; resize: vertical; }
.c-form select option { color: #0b0c12; background: #fff; }
.c-form input:focus, .c-form select:focus, .c-form textarea:focus { border-color: rgba(var(--fg), .5); background: rgba(var(--fg), .09); }
.c-form .f-btn { align-self: flex-start; margin-top: 6px; }
.c-note { font-size: 12px; color: rgba(var(--ink-rgb), .45); }
@media (max-width: 860px) {
  .g-copy { inset-inline-start: 20px; inset-inline-end: 20px; width: auto; top: auto; bottom: 150px; transform: none; gap: 12px; }
  .g-title { font-size: 48px; }
  .g-label { inset-inline-start: 20px; top: 84px; }
  .g-dots { inset-inline-start: 20px; inset-inline-end: 20px; bottom: 60px; gap: 8px; }
  .g-dots span { display: none; }
  .g-arrows { display: none; }
  .g-hero .f-cue { display: none; }
  .g-rows { padding: 40px 20px 40px; }
  .g-posters .f-poster, .g-posters.big .f-poster { width: 150px; }
  .a-hero { padding: 110px 20px 40px; min-height: 80vh; }
  .a-block { padding: 0 20px 60px; }
  .c-wrap { grid-template-columns: 1fr; padding: 100px 20px 40px; }
  #folio .f-page > .f-foot, #folio .f-page > .f-legal { margin: 0 20px; }
}

/* ── light / dark switch (top bar) */
.f-theme { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .08); transition: background .25s; }
.f-theme:hover { background: rgba(var(--fg), .16); }
.f-theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--fx); }
.f-theme:hover svg { transform: rotate(-25deg); }
.f-theme .moon, [data-folio="light"] .f-theme .sun { display: none; }
[data-folio="light"] .f-theme .moon { display: block; }

/* ── portfolio page: description on the left, big product pictures across the width that fade into the page */
.p-hero { position: relative; height: max(600px, 84vh); overflow: hidden; --fade: 1; }
.p-slides { position: absolute; top: 0; bottom: 0; inset-inline-start: 24%; inset-inline-end: 0; will-change: transform; }
.p-slides .f-layer { clip-path: none; opacity: 0; transform: scale(1.1); transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); animation: none; }
.p-slides .f-layer.in { opacity: 1; animation: pPush 11s cubic-bezier(.25, .6, .3, 1) forwards; }
.p-slides .f-layer.now { transition: none; }
.p-slides video.f-layer, .p-slides video.f-layer.in { transform: none; animation: none; }
@keyframes pPush { from { transform: scale(1.1) translateX(1.5%); } to { transform: scale(1.01) translateX(0); } }
.p-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 94% 82%, rgba(var(--bg-rgb), .7) 0%, rgba(var(--bg-rgb), 0) 100%),
    linear-gradient(var(--to-end, 90deg), rgb(var(--bg-rgb)) 0%, rgb(var(--bg-rgb)) 25%, rgba(var(--bg-rgb), .9) 33%, rgba(var(--bg-rgb), .4) 47%, rgba(var(--bg-rgb), 0) 62%),
    linear-gradient(0deg, rgb(var(--bg-rgb)) 0%, rgba(var(--bg-rgb), 0) 24%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .75) 0%, rgba(var(--bg-rgb), 0) 18%);
}
.p-copy { position: absolute; inset-inline-start: var(--left); top: 52%; transform: translateY(-50%); width: min(540px, 38vw); display: flex; flex-direction: column; gap: 22px; opacity: var(--fade); }
.p-kick { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .6); }
.p-title { font-size: clamp(54px, 7vw, 118px); font-weight: 600; letter-spacing: -.04em; line-height: .9; text-transform: uppercase; }
.p-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.p-title .w > span { display: inline-block; transform: translateY(105%); animation: fUp 1s var(--fx) forwards; animation-delay: calc(.15s + var(--i) * .08s); }
.p-text { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.7; color: rgba(var(--ink-rgb), .74); max-width: 44ch; }
.p-kick, .p-text { animation: pIn .9s var(--fx) .45s both; }
@keyframes pIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.p-cap { position: absolute; inset-inline-end: clamp(24px, 4vw, 64px); bottom: clamp(36px, 7vh, 72px); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; opacity: var(--fade); text-align: end; }
.p-name { display: flex; flex-direction: column; gap: 4px; }
.p-cat { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .6); }
.p-name strong { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.p-cap.anim .p-name { animation: pIn .8s var(--fx) both; }
.p-cap .f-btn { height: 44px; padding: 0 22px; font-size: 14px; }
.p-dots { display: flex; gap: 8px; }
.p-dots button { width: 34px; padding: 8px 0; }
.p-dots i { position: relative; display: block; height: 2px; border-radius: 2px; background: rgba(var(--fg), .2); overflow: hidden; }
.p-dots i::after { content: ""; position: absolute; inset: 0; background: var(--solid); transform-origin: left; transform: scaleX(0); }
.p-dots button.on i::after { transform: scaleX(1); }
.p-dots button.run i::after { transform: scaleX(0); animation: gFill 5s linear forwards; }
/* rows of four tall posters, one row per category; more than four slide sideways */
.g-posters.four .f-poster { width: calc((100% - 54px) / 4); min-width: 160px; }
.g-posters.four .f-poster .pt { font-size: 18px; }
@media (max-width: 860px) {
  .f-theme { margin-inline-start: auto; }
  .f-theme + .f-x { margin-inline-start: 0; }
  .p-hero { height: max(560px, 88vh); }
  .p-slides { inset-inline-start: 0; }
  .p-shade { background: linear-gradient(0deg, rgb(var(--bg-rgb)) 0%, rgb(var(--bg-rgb)) 30%, rgba(var(--bg-rgb), .6) 52%, rgba(var(--bg-rgb), 0) 75%), linear-gradient(180deg, rgba(var(--bg-rgb), .75) 0%, rgba(var(--bg-rgb), 0) 18%); }
  .p-copy { inset-inline-start: 20px; inset-inline-end: 20px; width: auto; top: auto; bottom: 120px; transform: none; gap: 14px; }
  .p-title { font-size: 52px; }
  .p-text { font-size: 15px; }
  .p-cap { inset-inline-start: 20px; inset-inline-end: 20px; bottom: 34px; flex-direction: row; align-items: center; justify-content: space-between; text-align: start; }
  .p-name, .p-cap .f-btn { display: none; }
  .g-posters.four .f-poster { width: 42vw; min-width: 0; }
}
/* light mode: a lighter veil so the big pictures stay crisp; white form fields */
[data-folio="light"] .f-shade {
  background:
    linear-gradient(var(--to-end, 90deg), rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .9) 30%, rgba(var(--bg-rgb), .5) 43%, rgba(var(--bg-rgb), 0) 60%),
    linear-gradient(0deg, rgb(var(--bg-rgb)) 0%, rgba(var(--bg-rgb), .65) 12%, rgba(var(--bg-rgb), 0) 34%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), 0) 16%);
}
[data-folio="light"] .c-form { background: #fff; border-color: rgba(var(--fg), .08); box-shadow: 0 20px 60px rgba(20, 24, 40, .06); }
[data-folio="light"] .c-form input, [data-folio="light"] .c-form select, [data-folio="light"] .c-form textarea { background: #f6f6f8; }
[data-folio="light"] .c-form input:focus, [data-folio="light"] .c-form select:focus, [data-folio="light"] .c-form textarea:focus { background: #fff; border-color: rgba(var(--fg), .45); }
@media (max-width: 860px) {
  [data-folio="light"] .f-shade { background: linear-gradient(0deg, rgb(var(--bg-rgb)) 0%, rgba(var(--bg-rgb), .85) 34%, rgba(var(--bg-rgb), 0) 64%), linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), 0) 16%); }
}

/* ── project page: 'film in production' card */
.f-screen { position: relative; }
.f-soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; color: rgba(255, 255, 255, .78); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; background: radial-gradient(ellipse at 50% 40%, #262833, #0b0b0e) center / cover; }
.f-soon svg { width: 44px; height: 44px; fill: currentColor; opacity: .55; }

.f-frame video, .f-frame iframe, .f-frame img { border-radius: 0; }

.f-frame { display: block; }
.f-frame > video, .f-frame > img, .f-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* ── private projects: blurred posters with a lock, and the password box */
.f-poster .pb.lockb { display: inline-flex; align-items: center; gap: 6px; }
.f-poster .pb.lockb svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-lock { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(var(--bg-rgb), .86); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.f-lock.on { opacity: 1; visibility: visible; }
.f-lockbox { position: relative; width: min(440px, 90vw); padding: 40px 36px 28px; border-radius: 18px; background: var(--bg); border: 1px solid rgba(var(--fg), .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .22); display: flex; flex-direction: column; gap: 14px; transform: translateY(14px); transition: transform .45s var(--fx); }
.f-lock.on .f-lockbox { transform: none; }
.f-lockic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .07); }
.f-lockic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f-lockbox h3 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.f-lockbox p { font-size: 15px; line-height: 1.6; color: rgba(var(--ink-rgb), .68); }
.f-pass { display: flex; gap: 10px; margin-top: 6px; }
.f-pass input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(var(--fg), .18); background: rgba(var(--fg), .04); color: var(--ink); font: inherit; font-size: 15px; outline: none; transition: border-color .25s; }
.f-pass input:focus { border-color: rgba(var(--fg), .5); }
.f-pass .f-btn { height: 48px; }
.f-lockbox .f-lockerr { min-height: 20px; font-size: 13px; color: #d4553f; }
.f-lockbox .f-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; }
.f-lockbox.shake { animation: fShake .45s; }
@keyframes fShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ── the gallery row on a project's first screen never covers the buttons above it; long titles are smaller */
.f-strip { pointer-events: none; }
.f-strip .f-thumbs, .f-strip .f-next { pointer-events: auto; }
.f-copy { z-index: 2; }
.f-title.long { font-size: clamp(40px, 4.8vw, 82px); }
.g-title.long { font-size: clamp(44px, 5.4vw, 92px); }
/* ── poster hover preview (like a video site): a short clip or the pictures in turn, a thin progress line */
.f-poster .pvw { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s ease; background: #000; }
.f-poster .pvw.on { opacity: 1; }
.f-poster .pvw video, .f-poster .pvw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-poster .pvw img { opacity: 0; transition: opacity .45s ease; transform: scale(1.04); }
.f-poster .pvw img.on { opacity: 1; }
.f-poster .pvbar { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.f-poster .pvbar b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.f-poster.previewing .pp { transform: translateY(-6px) scale(1.03); box-shadow: 0 28px 60px var(--shadow); }
.f-poster.previewing .pp:has(.pvw video) { transform: translateY(-6px); } /* a playing preview only lifts */

/* ── several films side by side (each with its name); one film keeps the full width */
.f-films { display: grid; gap: 22px; }
.f-flabel { margin-top: 12px; font-size: 16px; font-weight: 500; }

/* ── every shape shown whole (each box takes its file's shape: --ar = "w / h", --r = w/h, set by folio.js)
   gallery = justified rows: same height in a row, the full width, nothing cropped */
.f-gal { display: flex; flex-direction: column; gap: 14px; }
.f-row { display: flex; gap: 14px; width: 100%; margin: 0 auto; }
.f-gi { position: relative; display: block; flex: calc(var(--r, 1.5) * 100) 1 0%; min-width: 0; aspect-ratio: var(--r, 1.5); border-radius: 8px; overflow: hidden; background: var(--card); cursor: zoom-in; }
/* (flex-grow is the shape x100: grow factors that add up to under 1 would leave a row part-empty)
   film players: as wide as the column, never taller than the screen; two films share one height */
.f-screen { aspect-ratio: var(--ar, 16 / 9); width: min(100%, calc(80vh * var(--r, 1.7778))); margin: 0 auto; border-radius: 10px; overflow: hidden; background: #000; }
.f-films.n2 { display: flex; gap: 22px; align-items: flex-start; }
.f-films.n2 .f-filmcol { flex: calc(var(--r, 1.7778) * 100) 1 0%; min-width: 0; }
@media (max-width: 860px) { .f-films.n2 { flex-direction: column; align-items: stretch; } .f-films.n2 .f-filmcol { flex: none; } }
/* the big viewer: exactly the picture / clip / film's shape, as big as fits */
.f-frame { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #000; aspect-ratio: var(--ar, 16 / 9); width: min(92vw, 1600px, calc(84vh * var(--r, 1.7778))); height: auto; }


/* ── Contact form extras: two columns, the hidden bot trap, consent, the human check, sent / errors */
.c-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-form label span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; }
.c-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } /* off the side that never scrolls, in both directions */
.c-form { position: relative; }
.c-form label.c-consent { flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; }
.c-form label.c-consent span { font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(var(--ink-rgb), .7); line-height: 1.45; }
.c-form label.c-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--solid); flex: none; padding: 0; }
.c-ts:empty { display: none; }
.c-form label.bad input, .c-form label.bad textarea, .c-form label.bad select { border-color: #d0453a; }
.c-form label.c-consent.bad span { color: #d0453a; }
.c-note.bad { color: #d0453a; }
.c-done { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: rgba(var(--ink-rgb), .75); }
.c-done strong { font-size: 22px; font-weight: 500; color: var(--hi); }
@media (max-width: 860px) { .c-two { grid-template-columns: 1fr; } }

/* ── "Ask MS Studio" chat (leads.js) - above the portfolio overlay, below the intro loader */
#mschat {
  --mc-bg: #ffffff; --mc-ink: #15161b; --mc-soft: #6b6d76; --mc-line: rgba(20, 22, 28, .1); --mc-me: #15161b; --mc-me-ink: #fff; --mc-bot: #f1f2f5;
  position: fixed; right: var(--gutter); bottom: 24px; z-index: 47; font-family: var(--sans, 'Inter', system-ui, sans-serif); color: var(--mc-ink);
}
#mschat[dir="rtl"] { right: auto; left: var(--gutter); }
:root[data-folio="dark"]:has(#folio.open) #mschat { --mc-bg: #17181d; --mc-ink: #f1f2f5; --mc-soft: #9a9ca6; --mc-line: rgba(255, 255, 255, .1); --mc-me: #f1f2f5; --mc-me-ink: #111214; --mc-bot: #23252c; }
.mc-fab { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--mc-me); color: var(--mc-me-ink); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: 0 10px 30px rgba(10, 12, 18, .22); transition: transform .25s ease, box-shadow .25s ease; }
.mc-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(10, 12, 18, .28); }
.mc-fab svg { width: 22px; height: 22px; fill: currentColor; }
#mschat.on .mc-fab { display: none; }
.mc-panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 48px)); display: flex; flex-direction: column; background: var(--mc-bg); border: 1px solid var(--mc-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(10, 12, 18, .25); overflow: hidden; animation: mcIn .28s cubic-bezier(.2, .7, .2, 1); }
.mc-panel[hidden] { display: none; }
@keyframes mcIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.mc-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; border-bottom: 1px solid var(--mc-line); }
.mc-head div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mc-head strong { font-size: 15px; font-weight: 600; }
.mc-head small { font-size: 12px; color: var(--mc-soft); }
.mc-dot { width: 9px; height: 9px; border-radius: 50%; background: #2fb36d; box-shadow: 0 0 0 4px rgba(47, 179, 109, .15); flex: none; }
.mc-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--mc-soft); cursor: pointer; display: grid; place-items: center; }
.mc-x:hover { background: var(--mc-bot); color: var(--mc-ink); }
.mc-x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.mc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.mc-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.mc-msg.bot { align-self: flex-start; background: var(--mc-bot); border-end-start-radius: 4px; }
.mc-msg.me { align-self: flex-end; background: var(--mc-me); color: var(--mc-me-ink); border-end-end-radius: 4px; }
.mc-msg.typing { display: flex; gap: 4px; padding: 14px; }
.mc-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mc-soft); animation: mcDot 1s infinite ease-in-out; }
.mc-msg.typing i:nth-child(2) { animation-delay: .15s; } .mc-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mcDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.mc-gate { padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; font-size: 14px; color: var(--mc-soft); }
.mc-gate[hidden] { display: none; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.mc-chips:empty { display: none; }
.mc-chips button { border: 1px solid var(--mc-line); background: var(--mc-bg); color: var(--mc-ink); border-radius: 999px; padding: 8px 13px; font-family: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; transition: border-color .2s, background .2s; }
.mc-chips button:hover { border-color: var(--mc-ink); }
.mc-bar { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--mc-line); }
.mc-bar input { flex: 1; min-width: 0; border: 1px solid var(--mc-line); border-radius: 999px; padding: 11px 16px; font-family: inherit; font-size: 14px; color: var(--mc-ink); background: var(--mc-bg); outline: none; }
.mc-bar input:focus { border-color: var(--mc-ink); }
.mc-bar button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--mc-me); color: var(--mc-me-ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.mc-bar button:disabled, .mc-bar input:disabled { opacity: .45; cursor: default; }
.mc-bar button svg { width: 18px; height: 18px; fill: currentColor; }
#mschat[dir="rtl"] .mc-bar button svg { transform: scaleX(-1); }
.mc-foot { margin: 0; padding: 0 16px 12px; font-size: 11px; color: var(--mc-soft); text-align: center; }
.mc-wa, .mc-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 500; }
.mc-wa { background: #1fae5b; color: #fff; }
.mc-wa:hover { background: #18984f; }
.mc-wa svg { width: 20px; height: 20px; fill: currentColor; }
.mc-wa small { opacity: .8; font-weight: 400; font-size: 12px; white-space: nowrap; }
.mc-link { border: 1px solid var(--mc-line); color: var(--mc-ink); }
@media (max-width: 600px) {
  .mc-fab span { display: none; } .mc-fab { width: 52px; padding: 0; justify-content: center; }
  .mc-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(78vh, 600px); }
}
/* PC: one gutter for the whole site (the home bar's --gutter). The chat button sits on it on every page, so it never moves
   between pages; the portfolio pages' top bar keeps the same room on both sides. That side's corner things make one column
   as wide as the top bar's 3 round buttons (46 + 22 + 46 + 22 + 46 = 182): close / theme / language at the top, then a
   category's < > arrows or a project's like / save / share right above the chat button, then the chat button. The arrows
   and the 3 buttons live inside the scrolling page, so they take off its scrollbar width (--f-sbw, folio.js) */
@media (min-width: 861px) {
  .mc-fab { width: 182px; justify-content: center; }
  .f-top { padding-inline: var(--gutter); }
  #folio .f-round, .g-arrows { inset-inline-end: calc(var(--gutter) - var(--f-sbw, 0px)); width: 182px; justify-content: space-between; gap: 0; }
  :root:has(#mschat) #folio .f-round, :root:has(#mschat) .g-arrows { bottom: 90px; } /* 90 = 24 + the chat button's 52 + 14 */
  .p-cap { inset-inline-end: calc(var(--gutter) - var(--f-sbw, 0px)); }
  :root:has(#mschat) #counter, :root:has(#mschat) .p-cap { bottom: 90px; }
  :root:has(#mschat) .p-hero { height: max(600px, 100vh); } /* the Portfolio page's first screen fills the window: the first row no longer peeks in under the chat button */
}
/* every portfolio page ends with room for the chat button, so its last lines can always scroll clear of it */
:root:has(#mschat) .f-scroll::after { content: ""; display: block; height: 90px; }
/* phone: the same logic - the chat button 20px from the side and the bottom (the gutter), the top bar on one line with 20px
   at both ends, and the first screens' bottom row (a project's gallery strip, a category's project lines, the Portfolio
   page's dots, the home counter) 14px above the chat button (20 + its 52 + 14 = 86), the words above them moved up by the same */
@media (max-width: 860px) {
  #mschat { bottom: 20px; }
  .f-top { padding-inline: var(--gutter); gap: 6px; }
  .f-theme { flex: none; width: 40px; height: 40px; } /* round, the flag button's size - never squeezed */
  :root:has(#mschat) .f-strip { bottom: 86px; }
  :root:has(#mschat) .f-copy { bottom: 282px; }
  :root:has(#mschat) .g-dots { bottom: 86px; }
  :root:has(#mschat) .g-copy { bottom: 176px; }
  :root:has(#mschat) .p-hero { height: max(560px, 100vh); height: max(560px, 100svh); } /* (the next row no longer peeks in under the chat button) */
  :root:has(#mschat) .p-cap, :root:has(#mschat) #counter { bottom: 86px; }
  :root:has(#mschat) .p-copy { bottom: 172px; }
  :root:has(#mschat) .f-scroll::after { height: 86px; }
}
@media (max-width: 400px) { /* small phones: the tabs a little tighter, so the bar still fits with 20px at both ends */
  .f-tabs { gap: 4px; }
  .f-tabs > button, .f-tabs > a, .f-tabs .dd-btn { padding: 8px 7px; font-size: 12px; }
}
/* chat hand-off: WhatsApp (brief pre-written) or e-mail, + when we reply */
.mc-hand { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.mc-hand .mc-wa { align-self: stretch; justify-content: center; }
.mc-mail { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--mc-line); background: var(--mc-bg); color: var(--mc-ink); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.mc-mail:hover { border-color: var(--mc-ink); }
.mc-mail svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mc-note { margin: 2px 2px 0; font-size: 12px; line-height: 1.45; color: var(--mc-soft); }
.mc-note b { font-weight: 500; color: var(--mc-ink); white-space: nowrap; }
.mc-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--mc-bot); }
.mc-form input:not([type=checkbox]) { border: 1px solid var(--mc-line); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--mc-ink); background: var(--mc-bg); outline: none; }
.mc-form input:focus { border-color: var(--mc-ink); }
.mc-form label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--mc-soft); cursor: pointer; }
.mc-form label input { margin: 1px 0 0; accent-color: var(--mc-me); }
.mc-form button { border: 0; border-radius: 10px; padding: 10px; background: var(--mc-me); color: var(--mc-me-ink); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.mc-form .bad, .mc-form label.bad span { border-color: #d0453a !important; color: #d0453a; }
.mc-err { margin: 0; font-size: 12px; color: #d0453a; }
.mc-err:empty { display: none; }
.mc-gate.ok p { color: #1f9d55; font-weight: 500; }

/* a label after an email / phone / location on the Contact page (e.g. WhatsApp, Office) */
.c-lab { font-size: 12px; letter-spacing: .04em; color: rgba(var(--ink-rgb), .45); margin-inline-start: 6px; }

/* ── a project on a phone: even buttons, the films side by side to swipe, a tighter picture mosaic */
@media (max-width: 860px) {
  .f-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .f-actions > .f-btn { justify-content: center; min-width: 0; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .f-actions > .f-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .f-films.n2 { flex-direction: row; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: 20px;
    margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .f-films.n2::-webkit-scrollbar { display: none; }
  .f-films.n2 .f-filmcol { flex: 0 0 84%; scroll-snap-align: start; }
  .f-films .f-screen { width: 100%; max-height: 64vh; }
  .f-gal, .f-row { gap: 8px; }
  .f-gi { border-radius: 6px; }
}

/* ── portfolio + category pages on a phone: a section's own projects as an even 2-column grid, the other rows swipe
   with the next poster peeking in, the hero buttons even */
@media (max-width: 860px) {
  .g-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .g-actions > .f-btn { justify-content: center; min-width: 0; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .g-actions > .f-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .g-posters.big { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; overflow: visible; padding: 18px 0 4px; }
  .g-posters.big .f-poster { width: auto; }
  .g-posters:not(.big) { gap: 12px; margin: 0 -20px; padding: 18px 20px 8px; scroll-padding-inline-start: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .g-posters:not(.big)::-webkit-scrollbar { display: none; }
  .g-posters:not(.big) .f-poster, .g-posters.four .f-poster { width: 38vw; min-width: 0; scroll-snap-align: start; }
  .g-rows { gap: 44px; }
}

/* ── About + Contact on a phone: the section tiles and the ways to work as even 2-column grids, a full-width Send */
@media (max-width: 860px) {
  .a-grid { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .a-tile { gap: 8px; }
  .a-name { font-size: 16px; }
  .a-list { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .a-go { font-size: 12px; }
  .a-ways { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .a-ways > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .a-ways strong { font-size: 17px; }
  .a-ways p { font-size: 14px; }
  .a-places span { font-size: 32px; }
  .c-form .f-btn { align-self: stretch; justify-content: center; }
}

/* the big opening / closing titles break into even lines (no single word left alone on a phone) */
#heroTitle, #outroTitle { text-wrap: balance; }

/* ── Arabic (html lang=ar dir=rtl): the shading turns, arrows point the other way, bars fill from the right,
   the Arabic letters get their font, no letter-spacing (it breaks the joined letters) and room for their height */
:root[dir="rtl"] { --to-end: 270deg; }
:root[lang="ar"] { --sans: 'Inter Tight', 'Alexandria', 'Segoe UI', system-ui, sans-serif; }
:root[lang="ar"] body, :root[lang="ar"] #folio, :root[lang="ar"] input, :root[lang="ar"] textarea, :root[lang="ar"] select, :root[lang="ar"] button { font-family: var(--sans); }
:root[lang="ar"] * { letter-spacing: 0 !important; }
:root[lang="ar"] :is(h1, h2, h3, .f-title, .g-title, .p-title, .a-title, .a-h, .f-h2) { line-height: 1.28; }
:root[lang="ar"] .a-title .w, :root[lang="ar"] .g-title .w, :root[lang="ar"] .f-title .w, :root[lang="ar"] .p-title .w { padding-block: .08em .18em; }
:root[lang="ar"] :is(p, li, dd, .lead, .a-text, .a-body, .f-text) { line-height: 1.85; }
[dir="rtl"] .i-next, [dir="rtl"] .i-prev, [dir="rtl"] .f-all svg, [dir="rtl"] .a-go svg, [dir="rtl"] .f-foot svg, [dir="rtl"] .f-next svg { scale: -1 1; }
[dir="rtl"] #counter .bar i, [dir="rtl"] .f-progress i, [dir="rtl"] .g-dots i::after, [dir="rtl"] .p-dots i::after, [dir="rtl"] .f-poster .pvbar b { transform-origin: right; }
[dir="rtl"] #menu .dd { transform-origin: 40px 0; }
/* the language button (the 3D header and the portfolio pages' top bar): the other language's whole flag, small, in a circle
   the size of its neighbours */
#langBtn { flex: none; width: 36px; height: 36px; margin-inline-start: 12px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(17, 18, 20, .18); background: transparent; cursor: pointer; transition: background .25s; }
#langBtn:hover { background: rgba(17, 18, 20, .08); }
#langBtn .flag { height: 14px; }
.f-lang { flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--fg), .08); transition: background .25s; margin-inline-start: auto; }
.f-lang:hover { background: rgba(var(--fg), .16); }
.flag { display: block; width: auto; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
@media (max-width: 860px) {
  #langBtn { margin-inline-start: auto; }
  #langBtn + #burger { margin-inline-start: 8px; }
  .f-lang { width: 40px; height: 40px; }
  .f-lang + .f-theme { margin-inline-start: 0; }
}

/* Arabic letters overlap where they join: a see-through colour prints those overlaps darker (marks inside the letters),
   so the grey Arabic text is a solid grey that looks the same */
:root[lang="ar"] .a-line.dim { color: color-mix(in srgb, var(--ink) 45%, var(--bg)); }
:root[lang="ar"] :is(.a-text, .a-body) { color: color-mix(in srgb, var(--ink) 72%, var(--bg)); }
:root[lang="ar"] :is(.f-text, .a-steps p, .a-ways p) { color: color-mix(in srgb, var(--ink) 64%, var(--bg)); }
:root[lang="ar"] .f-meta { color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
/* a project's first screen in Arabic: the taller Arabic lines must not push the words over the gallery strip */
:root[lang="ar"] .f-title { font-size: clamp(40px, 5.2vw, 88px); }
:root[lang="ar"] .f-title.long { font-size: clamp(34px, 4vw, 66px); }
:root[lang="ar"] .f-copy { gap: 14px; }
@media (min-width: 861px) {
  :root[lang="ar"] .f-copy .f-text { line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 861px) and (max-height: 820px) { /* a short laptop screen */
  :root[lang="ar"] .f-copy .f-text { -webkit-line-clamp: 2; }
  :root[lang="ar"] .f-title { font-size: clamp(36px, 4.4vw, 72px); }
  :root[lang="ar"] .f-copy { gap: 12px; }
}

/* a project's first screen, when its words would reach the gallery strip (folio.js fitCopy): step down, then shorter */
.f-copy.tight { gap: 12px; }
.f-copy.tight .f-title { font-size: clamp(34px, 3.8vw, 64px); }
.f-copy.tight .f-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-copy.tighter .f-title { font-size: clamp(30px, 3vw, 52px); }
.f-copy.tighter .f-text { display: none; }

/* the big viewer's previous / next under the picture (also: the arrow keys, a sideways swipe on a phone); each new
   picture fades in */
.f-pnav { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: none; align-items: center; gap: 16px; font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); }
.f-player.multi .f-pnav { display: flex; }
.f-pnav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); transition: background .25s; }
.f-pnav button:hover { background: rgba(255, 255, 255, .2); }
.f-pnav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f-pcount { min-width: 52px; text-align: center; direction: ltr; unicode-bidi: isolate; } /* '4 / 10' in Arabic too */
.f-frame > img, .f-frame > video { animation: fViewIn .35s ease; }
@keyframes fViewIn { from { opacity: 0; } to { opacity: 1; } }

/* client codes (folio.js): the client's name over a code's pictures and films, the countdown, the "time is up" box */
#folio.wm .f-hero::after, #folio.wm .f-gi::after, #folio.wm .f-frame::after, #folio.wm .f-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--wm) center / 560px 470px repeat; }
.f-timer { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(17, 18, 20, .82); color: #fff; font-size: 13px; pointer-events: none; }
.f-timer[hidden] { display: none; }
.f-timer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f-timer span { opacity: .7; }
.f-timer b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 38px; direction: ltr; unicode-bidi: isolate; }
.f-timer.low { background: #c4262e; }
.f-endmsg { display: none; }
.f-lock.ended .f-endmsg { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.f-lock.ended .f-lockbox > h3, .f-lock.ended .f-lockbox > p, .f-lock.ended .f-pass, .f-lock.ended .f-lockic { display: none; }
@media (max-width: 860px) { .f-timer { top: 76px; } }