/* Denis Mujovic — Producer. "Title sequence" direction.
   Tokens first; everything below derives from them. */
:root{
  --ink:#0b0b0a; --bone:#f1eee6; --dim:#a8a498; --blue:#1f45ff; --line:#f1eee6;
  --disp:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Hanken Grotesk",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(1rem,3.3vw,2.5rem);
}
*{box-sizing:border-box}
/* Everything is sized in rem. From 1440 px wide the root grows with the screen (and is capped by screen height), so a 4K display shows the same composition at 2.7x, not a small page in a big window. */
html{font-size:16px}
@media (min-width:1440px){html{font-size:max(16px,min(calc(100vw/90),calc(100svh/50)))}}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--bone);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-stretch:75%;font-weight:800;text-transform:uppercase;margin:0;line-height:.94;letter-spacing:.012em;text-wrap:balance}
.brand,.ticker,.also b,.mail,.services ul,.facts dd,.portrait b,.btn{letter-spacing:.012em}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
.mono{font:500 0.6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dim{color:var(--dim)}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:0.5rem;top:0.5rem;z-index:100;background:var(--bone);color:var(--ink);padding:0.625rem 0.875rem}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero :focus-visible,.bar :focus-visible,.contact :focus-visible,.panel:focus-visible{outline-color:var(--bone)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;background:#10303f}
.hero-poster{position:absolute;inset:0;background:url("https://i.vimeocdn.com/video/2217142883-84584d0a300bbf9dcfa8bf033aa93e2a230385da5fa0a613abd452e6988bbf50-d_1920x1080") center/cover,linear-gradient(105deg,#10303f,#3f6f7c 40%,#16232a)}
.hero-video{position:absolute;top:0;right:0;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);border:0;pointer-events:none}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 50%,rgba(0,0,0,.78) 100%)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.375rem var(--gut)}
.brand{font:800 1.1875rem var(--disp);font-stretch:75%;text-transform:uppercase}
.menu{display:flex;gap:clamp(0.875rem,2.4vw,1.75rem)}
.menu a,.social a{font:500 0.6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-block:0.375rem;border-bottom:2px solid transparent}
.menu a:hover,.social a:hover{border-color:var(--bone)}
.social{display:flex;gap:0.875rem}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(1rem,2.4cqw,2rem);display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero-text .mono{margin-bottom:clamp(0.625rem,2vw,1.125rem)}
.hero h1{font-size:clamp(2.75rem,15cqw,40rem);line-height:.86;letter-spacing:.008em;display:flex;flex-direction:column;align-items:flex-start}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:1.75rem;width:100%;margin-top:clamp(.75rem,1.6cqw,1.5rem)}
.hero-meta p{max-width:50ch;font-size:clamp(1rem,1.7vw,1.25rem)}
.btn{display:inline-flex;gap:0.625rem;background:var(--bone);color:var(--ink);padding:0.875rem 1.375rem;font:600 0.8125rem var(--body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .15s,color .15s}
.btn:hover{background:var(--blue);color:#fff}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:0.75rem 0;white-space:nowrap;font:800 clamp(1.25rem,2.4vw,1.75rem)/1 var(--disp);font-stretch:75%;text-transform:uppercase}
.ticker-track{display:inline-flex;animation:tick 55s linear infinite;will-change:transform}
.ticker span{margin:0 1.125rem}
.ticker i{font-style:normal;color:var(--blue);margin:0 0}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr);column-gap:clamp(2rem,4vw,4.5rem);padding:clamp(2rem,4.4vw,4.5rem) var(--gut);border-bottom:1px solid var(--dim)}
.portrait{margin:0;position:relative;background:#3b3a36;overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:grayscale(1) contrast(1.05)}
.portrait figcaption{position:absolute;right:0;bottom:0;background:var(--blue);color:#fff;padding:0.875rem 1.125rem;display:grid;gap:4px}
.portrait b{font:800 clamp(1.125rem,2vw,1.5rem)/1 var(--disp);font-stretch:75%;text-transform:uppercase}
.about-text{padding:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2rem,4vw,4.5rem);row-gap:1.75rem;align-content:space-between}
.about-text>.mono{grid-column:1/-1}
.about-copy{display:grid;gap:1.25rem;align-content:start}
.about-text .facts{grid-column:1/-1}
.about h2{font-size:clamp(1.875rem,3.9vw,4rem);max-width:none;align-self:start}
.about-copy p{max-width:56ch;color:#d8d4c9}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--dim);margin:0.5rem 0 0}
.facts div{padding:0.875rem 0;display:grid;gap:2px}
.facts dt{margin:0}
.facts dd{margin:0;font:800 clamp(1.375rem,2.8vw,2rem)/1 var(--disp);font-stretch:75%;text-transform:uppercase}

/* ---------- work ---------- */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;padding:clamp(2.5rem,6vw,4.5rem) var(--gut) 1.25rem}
.section-head h2{font-size:clamp(2.5rem,14vw,12.5rem);letter-spacing:.008em}
.section-head .mono{max-width:34ch;text-align:right}
.panels{display:grid;grid-template-columns:1fr 1fr}
.panel{--img:none;position:relative;min-height:clamp(21.25rem,40vw,32.5rem);padding:clamp(0.875rem,2vw,1.5rem);display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;color:#fff;isolation:isolate;overflow:hidden;background:var(--c1) }
.panel:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img) center/cover,var(--grad);transition:transform .6s}
.panel:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%)}
a.panel:hover:before{transform:scale(1.03)}
.panel.wide{grid-column:1/-1;min-height:clamp(25rem,50vw,40rem)}
.panel.short{min-height:clamp(21.25rem,40vw,30rem)}
.panel .top{display:flex;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.panel .top .mono{background:rgba(0,0,0,.55);padding:3px 0.5rem}
.panel h3{font-size:clamp(2.25rem,6.2vw,6.5rem);line-height:.88;letter-spacing:.008em;overflow-wrap:anywhere}
.panel.wide h3{font-size:clamp(3.75rem,15vw,12.5rem)}
.panel p{margin-top:0.875rem;max-width:42ch;font-size:0.9375rem}
.p-stage{--grad:linear-gradient(105deg,#0451b2,#03298c 34%,#020100 62%,#c1370b)}
.p-venice{--grad:linear-gradient(135deg,#1d3d57,#487268 60%,#31382f)}
.p-bike{--grad:linear-gradient(135deg,#d9d4d1,#c8b0a8)}
.p-joy{--grad:linear-gradient(135deg,#c2baab,#95bccf 55%,#23394f)}
.p-plain{--grad:repeating-linear-gradient(135deg,#22211f 0 0.875rem,#292826 0.875rem 1.75rem)}
.also{padding:clamp(1.5rem,3vw,2.25rem) var(--gut) clamp(2.25rem,5vw,3.5rem)}
.also li{display:grid;grid-template-columns:5.625rem 1fr minmax(11.25rem,17.5rem);gap:1rem;align-items:baseline;border-top:1px solid var(--dim);padding:0.875rem 0}
.also b{font:800 clamp(1.5rem,3.4vw,2.5rem)/1 var(--disp);font-stretch:75%;text-transform:uppercase}
.also>p{margin-bottom:0.75rem}

/* ---------- development ---------- */
.dev{background:var(--bone);color:var(--ink);padding:clamp(2.5rem,6vw,4.5rem) var(--gut) clamp(1.75rem,4vw,2.75rem)}
.dev h2{font-size:clamp(1.5rem,7.4vw,8rem);letter-spacing:.008em;white-space:nowrap;margin:.75rem 0 clamp(1.25rem,3vw,2.25rem)}
.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.dev-grid li{padding:1.125rem 1.125rem 1.75rem 0;display:grid;gap:0.625rem;align-content:start;border-bottom:1px solid var(--ink)}
.dev-grid h3{font-size:clamp(2.125rem,4.3vw,3.25rem)}
.dev-grid p{font-size:0.9375rem;color:#3d3b36;max-width:36ch}

/* ---------- services ---------- */
.services{padding:clamp(1.5rem,3.4vw,2.5rem) var(--gut)}
.services ul{display:flex;flex-wrap:wrap;gap:0.375rem 0;font:800 clamp(1.625rem,4vw,2.875rem)/1 var(--disp);font-stretch:75%;text-transform:uppercase}
.services li:not(:last-child):after{content:"/";color:var(--blue);margin:0 .5em}

/* ---------- contact ---------- */
.contact{background:var(--blue);color:#fff;padding:clamp(2rem,5vw,3.5rem) var(--gut) clamp(1.5rem,3vw,2.25rem);display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
.contact h2{font-size:clamp(5.25rem,25vw,22.5rem);line-height:.82;letter-spacing:.006em}
.contact-info{display:flex;justify-content:space-between;align-items:end;gap:1.25rem;flex-wrap:wrap}
.mail{font:800 clamp(1.5rem,4.2vw,3rem)/1.1 var(--disp);font-stretch:75%;text-transform:uppercase;border-bottom:4px solid #fff;overflow-wrap:anywhere}
.phone{font:500 0.875rem var(--mono);letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px;flex-basis:100%}
.mail:hover{background:#fff;color:var(--blue)}

/* ---------- footer + privacy ---------- */
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.25rem var(--gut);border-top:1px solid var(--dim)}
.link{background:none;border:0;color:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
dialog{max-width:min(38.75rem,calc(100vw - 2rem));max-height:86svh;overflow:auto;background:var(--bone);color:var(--ink);border:0;padding:1.75rem;font-size:0.9375rem}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog h2{font-size:2.5rem;margin-bottom:1.125rem}
dialog h3{font-size:1.25rem;margin:1.125rem 0 0.375rem}
.close{float:right;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:inherit}

/* ---------- tablet / phone ---------- */
@media (max-width:900px){
  .about{grid-template-columns:1fr;row-gap:1.75rem}
  .about-text{grid-template-columns:1fr}
  .portrait{min-height:0;aspect-ratio:1/1}
  .dev-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .panel h3,.panel.wide h3{font-size:12vw}
  .mail{font-size:5.2vw}
  .also b{font-size:6.2vw}
  .bar{padding-block:0.875rem}
  .hero-meta{flex-direction:column;align-items:flex-start}
  .panels{grid-template-columns:1fr}
  .panel,.panel.wide,.panel.short{min-height:21.25rem}
  .section-head{flex-direction:column;align-items:flex-start}
  .section-head .mono{text-align:left}
  .also li{grid-template-columns:3rem 1fr;row-gap:2px}
  .also li .mono:last-child{grid-column:2}
  .dev-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr 1fr;column-gap:1rem}
  .facts dd{font-size:5.2vw}
}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .ticker{overflow-x:auto}
  .ticker-track{animation:none}
  html{scroll-behavior:auto}
  .panel:before{transition:none}
}
main{overflow-x:clip}

/* ---------- icons ---------- */
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bar{position:relative;z-index:60}
.bar-end{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.5rem)}
.social,.menu-social{display:flex;gap:.25rem}
.social a,.menu-social a{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;font-size:1rem;padding:0;border-radius:50%;transition:background .15s,color .15s}
.social a:hover,.menu-social a:hover{background:var(--bone);color:var(--ink);border-color:transparent}
.lang{display:flex;gap:.125rem}
.lang a{font:500 .6875rem/1 var(--mono);letter-spacing:.08em;padding:.5rem .5rem;border:1px solid transparent;border-radius:2rem}
.lang a[aria-current]{border-color:var(--bone)}
.lang a:not([aria-current]):hover{background:rgba(241,238,230,.18)}
.menu-extra,.menu-toggle .when-open{display:none}
.menu-toggle{display:none;background:none;border:0;color:inherit;width:2.75rem;height:2.75rem;place-items:center;cursor:pointer;font-size:1.25rem;padding:0}
.btn{align-items:center}
.btn .i{width:1.1em;height:1.1em}
.panel .top-r{display:flex;align-items:center;gap:.5rem}
.panel .go{width:2rem;height:2rem;padding:.4rem;background:var(--bone);color:var(--ink);border-radius:50%;stroke-width:2;transition:background .15s,color .15s}
a.panel:hover .go{background:var(--blue);color:#fff}
.mail,.phone{display:inline-flex;align-items:center;gap:.6em}
.mail .i{width:.9em;height:.9em;stroke-width:2}
.contact-lines{display:grid;gap:1rem;justify-items:end}
.phone{flex-basis:auto}
.profiles{display:grid;gap:.75rem;border-top:1px solid rgba(255,255,255,.5);padding-top:1.25rem}
.profiles ul{display:flex;flex-wrap:wrap;gap:.625rem}
.chip{display:inline-flex;align-items:center;gap:.6rem;padding:.625rem 1rem .625rem .75rem;border:1px solid #fff;border-radius:3rem;font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .15s,color .15s}
.chip:hover{background:#fff;color:var(--blue)}
.link{display:inline-flex;align-items:center;gap:.5rem}
.close{display:grid;place-items:center;width:2.5rem;height:2.5rem;font-size:1.25rem;padding:0;border-radius:50%}
.close:hover{background:var(--ink);color:var(--bone)}
.ticker-track+.sr{position:absolute}
/* longer German / Dutch words */
html[lang=de] .section-head h2{font-size:clamp(2.5rem,14vw,12.5rem)}
html[lang=nl] .section-head h2{font-size:clamp(2.5rem,14vw,12.5rem)}
html[lang=nl] .dev h2{font-size:clamp(1.5rem,6.9vw,7.5rem)}
html[lang=de] .dev h2{font-size:clamp(1.5rem,7.2vw,8rem)}
/* ---------- phone / tablet menu ---------- */
@media (max-width:900px){
  .menu{display:none}
  .social{display:none}
  .menu-toggle{display:grid}
  html:not(.js) .menu{display:flex;flex-wrap:wrap;gap:1rem}
  .menu.open{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:5rem var(--gut) 2rem;background:var(--ink);overflow-y:auto}
  .menu.open>a{font:800 clamp(2.5rem,13vw,5rem)/1.05 var(--disp);font-stretch:75%;text-transform:uppercase;letter-spacing:.012em;border:0;padding:.1em 0}
  .menu.open .menu-extra{display:grid;gap:1.25rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--dim)}
  .menu-extra .menu-social a{width:3rem;height:3rem;border:1px solid var(--dim)}
  .menu-mail{display:inline-flex;align-items:center;gap:.6rem;font:500 .8125rem var(--mono);letter-spacing:.06em;word-break:break-all}
  .menu-open .menu-toggle .when-closed{display:none}
  .menu-open .menu-toggle .when-open{display:grid}
  body.menu-open{overflow:hidden}
}
@media (max-width:640px){
  .contact-lines{justify-items:start}
  .profiles .chip{padding:.75rem 1rem .75rem .75rem}
  .lang a{padding:.6rem .5rem}
}

/* long German / Dutch words must wrap inside their column, never widen it */
.about>*,.about-text,.about-copy{min-width:0}
.about h2,.about-copy p,.dev-grid h3,.dev-grid p,.also b{overflow-wrap:break-word;hyphens:auto}
html[lang=de] .contact h2,html[lang=nl] .contact h2{font-size:clamp(3.5rem,18vw,22rem)}
@media (max-width:900px){.about{grid-template-columns:minmax(0,1fr)}.about-text{grid-template-columns:minmax(0,1fr)}}
/* comfortable touch targets */
.brand{display:inline-flex;align-items:center;min-height:2.75rem}
.phone,.link{min-height:2.75rem}
@media (max-width:900px){.about h2{font-size:clamp(1.625rem,7.4vw,3rem)}}
a,button{-webkit-tap-highlight-color:transparent}
.brand,.bar-end{position:relative;z-index:60}


/* ---------- hero: full-bleed like the first version, but the video is anchored top-right and never cropped top or bottom ---------- */
.bar{position:absolute;top:0;left:0;right:0;background:transparent}
.stage{position:relative;isolation:isolate;container-type:size;overflow:hidden;width:100%;height:max(min(100svh,56.25vw),50.6vw);min-height:30rem;background:#10303f}
.hero-meta{margin-top:clamp(.75rem,1.6cqw,1.5rem)}
.hero-text .mono{margin-bottom:clamp(.5rem,1.2cqw,1rem)}
@media (max-width:900px){
  .bar{position:relative;background:var(--ink)}
  .stage{container-type:inline-size;overflow:visible;height:auto;min-height:0;display:grid;background:var(--ink)}
  .hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:16/9;container-type:size}
  .hero-media:after{display:none}
  .hero-text{position:static;max-width:none;align-items:flex-start;text-align:left;padding:1.5rem var(--gut) 1.75rem}
  .hero h1{font-size:clamp(3rem,23cqw,12rem);align-items:flex-start}
  .hero-meta{align-items:flex-start}
  .hero-text .mono{margin-bottom:.75rem}
}

/* ---------- header follows the reader ---------- */
html{scroll-padding-top:5.5rem}
.bar{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .25s,padding .25s;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.scrolled .bar{background:rgba(11,11,10,.985);padding-block:.75rem}
.scrolled .bar .brand,.scrolled .bar .social a{min-height:0}
@media (max-width:900px){
  .bar{position:fixed;background:var(--ink)}
  .hero{padding-top:4.5rem}
  .scrolled .bar{padding-block:.5rem}
}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* Showreel overlay */
#reel{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:rgba(5,5,4,.45);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);color:var(--bone);overflow:hidden}
#reel::backdrop{background:transparent}
#reel[open]{display:grid;place-items:center}
.reel-frame{width:min(94vw,calc((100dvh - 6rem) * 1.7778));aspect-ratio:16/9;background:#000}
.reel-frame iframe{width:100%;height:100%;border:0;display:block}
.reel-close{position:absolute;top:1rem;right:1rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;background:var(--bone);color:var(--ink);border:0;cursor:pointer;z-index:2}
.reel-close svg{width:1.25rem;height:1.25rem}


/* local thumbnails: declared here so the path resolves from this stylesheet in every language folder */
.p-1947{--img:url(assets/1947-poster.jpg)}
.p-refl{--img:url(assets/reflections.jpg)}

@media (max-width:900px){
  .hero h1{font-size:clamp(2.5rem,12.8vw,6rem)}
  .mail{font-size:clamp(.9rem,3.9vw,2rem)}
}