:root{--ink:#0d0f24;--paper:#FEF9EC;--blue:#2733f0;--flame:#ff6b3d;--mute:#6b6f8f;--line:rgba(13,15,36,.18);
--d:'Inter Tight','Helvetica Neue',Arial,sans-serif;
--b:'Inter','Helvetica Neue',Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#FEF9EC;--ink:#0d0f24}}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--b)}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{padding:0 clamp(20px,4vw,56px)}
nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-weight:500}
nav div{display:flex;gap:28px}
nav a{text-decoration:none}
nav a:hover{color:var(--blue)}
/* HERO: the timeline */
h1{font:800 clamp(64px,11.5vw,300px)/.82 var(--d);font-stretch:75%;letter-spacing:-.045em;margin:.12em 0 0;text-transform:none}
h1 span{display:block}
h1 .l2{color:var(--blue)}
/* type "keyframes": case-study titles animate weight once on load */
@keyframes wt{from{font-weight:200;letter-spacing:.02em;opacity:.0}to{font-weight:800;letter-spacing:-.045em;opacity:1}}
.status{justify-self:end;text-align:right;color:var(--mute)}
.status b{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--flame);margin-right:8px}
/* reel */
.reel{background:var(--ink);color:var(--paper);position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;margin:0 clamp(20px,4vw,56px);border-radius:6px}
/* WORK */
.sec{padding:clamp(72px,11vw,150px) 0 0}
h2{font:700 clamp(36px,6vw,88px)/.95 var(--d);letter-spacing:-.035em;margin:0 0 40px;max-width:12em}
.work{display:grid;grid-template-columns:1fr minmax(0,38%);gap:48px;align-items:start}
.list{border-top:1px solid var(--ink)}
.list a{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:26px 0;border-bottom:1px solid var(--ink);text-decoration:none;transition:padding .3s,color .3s}
.list a strong{font:700 clamp(30px,4.4vw,64px)/1 var(--d);letter-spacing:-.03em}
.list a em{font-style:normal;color:var(--mute);align-self:center;text-align:right}
.list a:hover,.list a:focus-visible,.list a.on{color:var(--blue);padding-left:22px}
.preview{position:sticky;top:20px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--ink)}
.preview div{position:absolute;inset:0;display:flex;align-items:flex-end;padding:22px;color:#fff;font:600 15px var(--b);opacity:0;transition:opacity .45s}
.preview div.on{opacity:1}
/* contact */
.contact{margin-top:clamp(72px,11vw,150px);background:var(--blue);color:#fff;padding:clamp(48px,8vw,110px) 0 28px}
.contact a.mail{display:block;font:800 clamp(34px,9vw,150px)/.95 var(--d);font-stretch:75%;letter-spacing:-.04em;text-decoration:none;word-break:break-word}
.contact a.mail:hover{color:var(--ink)}
.contact .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:56px;font-size:15px}
@media (max-width:820px){.work{grid-template-columns:1fr}.status{justify-self:start;text-align:left}.preview{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== CASE STUDY PAGES ===== */
.case .ch{padding:6vh 0 40px}
.crumb{margin:0 0 28px;font-weight:500}
.crumb a{text-decoration:none;color:var(--mute)}
.crumb a:hover{color:var(--blue)}
.ct{font:800 clamp(56px,10vw,220px)/.85 var(--d);font-stretch:75%;letter-spacing:-.045em;margin:0 0 40px;animation:wt 1.8s cubic-bezier(.2,.8,.2,1) both}
.meta{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin:0;border-top:1px solid var(--ink);padding-top:18px}
.meta dt{font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.meta dd{margin:0;font-weight:500}
.cmedia{margin:0 clamp(20px,4vw,56px);aspect-ratio:16/9;border-radius:6px;display:flex;align-items:flex-end;padding:22px;color:#fff;font-weight:600;overflow:hidden;position:relative}
.cmedia iframe,.cmedia video,.cmedia img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.cbody{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;padding:clamp(56px,8vw,110px) 0 0}
.cbody h2{font:700 clamp(28px,3.4vw,48px)/1 var(--d);letter-spacing:-.03em;margin:0}
.cbody p{margin:0 0 1em;max-width:38em}
.cbody .lead{font:500 clamp(22px,2.6vw,34px)/1.25 var(--d);letter-spacing:-.015em}
.cf{aspect-ratio:4/3;border-radius:6px;display:flex;align-items:flex-end;padding:18px;color:#fff;font-weight:600;font-size:15px;overflow:hidden;position:relative}
.cf.wide{grid-column:1/-1;aspect-ratio:16/9}
.cf img,.cf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cnext{display:block;margin-top:clamp(72px,10vw,140px);padding:36px 0;border-top:1px solid var(--ink);text-decoration:none}
.cnext span{color:var(--mute);font-weight:500}
.cnext strong{display:block;font:800 clamp(40px,8vw,120px)/.95 var(--d);font-stretch:75%;letter-spacing:-.04em;margin-top:8px;transition:color .3s,padding .3s}
.cnext:hover strong{color:var(--blue);padding-left:18px}
.case .contact{margin-top:0}
@media (max-width:820px){.meta{grid-template-columns:1fr 1fr}.cbody{grid-template-columns:1fr;gap:20px}.cf.wide{aspect-ratio:16/9}}
.reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s ease}
.reel.playing iframe{opacity:1}
.kicker{
  display:flex;align-items:center;gap:12px;
  margin:28px 0 0;
  font:600 clamp(13px,1.4vw,18px)/1 var(--b);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);
  animation:kfade .8s ease .2s both;
}
@keyframes kfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.status b{
  animation:blink 1.6s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(255,107,61,.6);
}
@keyframes blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,107,61,.6)}
  50%{opacity:.25;box-shadow:0 0 0 8px rgba(255,107,61,0)}
}
@media (max-width:820px){
  h1{font-size:13vw}
  .ct{font-size:12vw}
}
h1{margin-left:-.04em}
nav > a{display:inline-block;text-decoration:none;transition:transform .25s}
nav > a:hover{transform:scale(1.08)}
nav > a{flex:none}
@media (max-width:820px){nav div{gap:16px}}
.contact{
  width:100%;
  margin-left:0;
  margin-right:0;
  box-shadow:0 0 0 100vmax var(--blue);
  clip-path:inset(0 -100vmax);
}
body{overflow-x:clip}
.contact .row .social{display:flex;gap:12px}
.contact .row .social a{
  display:grid;place-items:center;
  width:46px;height:46px;
  margin:0;
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:50%;
  color:#fff;
  transition:background .25s,color .25s,transform .25s;
}
.contact .row .social a:hover,
.contact .row .social a:focus-visible{background:#fff;color:var(--blue);transform:translateY(-3px)}
.contact .row .social svg{width:20px;height:20px}
.preview div video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

:root{
  --gutter:clamp(20px,4vw,56px);
  --pad:max(var(--gutter),calc((100% - 1520px)/2));
}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.reel,.cmedia{margin-left:var(--pad);margin-right:var(--pad)}

@media (min-width:1100px){
  h1{font-size:min(11.5vw,200px)}
  .ct{font-size:min(10vw,180px)}
}
.about img.portrait.pulse{animation:portraitPulse 1.6s ease-out .15s 1 both}
@keyframes portraitPulse{
  0%{box-shadow:0 0 0 0 rgba(255,107,61,.7)}
  100%{box-shadow:0 0 0 30px rgba(255,107,61,0)}
}
/* ===== ANIMATED NK LOGO ===== */
.nk-logo{display:block;width:46px;height:46px;overflow:visible}
.nk-logo *{transform-box:view-box;transform-origin:50px 50px}
.nk-disc{animation:nkPop .6s cubic-bezier(.34,1.56,.64,1) both}
.nk-s{stroke-dasharray:1;stroke-dashoffset:0;animation:nkDraw .32s cubic-bezier(.65,0,.25,1) both}
.nk-s.s1{animation-delay:.35s}
.nk-s.s2{animation-delay:.62s;animation-duration:.38s}
.nk-s.s3{animation-delay:.96s}
.nk-s.s4{animation-delay:1.24s;animation-duration:.3s}
.nk-s.s5{animation-delay:1.4s;animation-duration:.3s}
.nk-mark{animation:nkSettle .5s cubic-bezier(.2,.8,.2,1) 1.6s both}
.nk-ring,.nk-hring{opacity:0}
.nk-ring{animation:nkRing .9s ease-out 1.6s both}
a:hover .nk-hring,a:focus-visible .nk-hring{animation:nkRing .9s ease-out}
@keyframes nkPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes nkDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes nkSettle{0%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes nkRing{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@media (max-width:820px){.nk-logo{width:40px;height:40px}}


#work h2{font-size:clamp(32px,5vw,72px)}
.list a strong{font-size:clamp(26px,3.6vw,52px)}
.list a em{font-size:15px}

/* ===== WHAT I DO: accordion ===== */
.acc{--acc-icon:22px;--acc-gap:clamp(14px,2vw,20px);--acc-ind:calc(var(--acc-icon) + var(--acc-gap));--ease:cubic-bezier(.2,.8,.2,1);border-top:1px solid var(--ink)}
.acc-item{border-bottom:1px solid var(--ink)}
.acc-item h3{margin:0;font:inherit}
.acc-btn{display:flex;align-items:center;gap:var(--acc-gap);width:100%;min-height:60px;padding:clamp(16px,1.5vw,20px) 0;margin:0;border:0;border-radius:0;background:none;color:var(--ink);text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;transition:color .25s}
.acc-title{font:700 clamp(22px,2.4vw,32px)/1.1 var(--d);letter-spacing:-.03em}
.acc-icon{position:relative;flex:none;width:var(--acc-icon);height:var(--acc-icon)}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;border-radius:1px;background:currentColor}
.acc-icon::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
.acc-item.open .acc-btn{color:var(--blue)}
.acc-item.open .acc-icon::after{transform:rotate(0deg)}
@media (hover:hover){.acc-btn:hover{color:var(--blue)}}

.acc-panel{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .38s var(--ease),opacity .2s ease,visibility 0s linear .38s}
.acc-item.open .acc-panel{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .38s var(--ease),opacity .3s ease .06s,visibility 0s}
.acc-inner{min-height:0;overflow:hidden}
.acc-desc{margin:2px 0 0 var(--acc-ind);max-width:34em}
.acc-tools{margin:14px 0 clamp(22px,2.4vw,30px) var(--acc-ind);font:500 14px/1.4 var(--b);letter-spacing:.02em;color:var(--mute)}
@media (max-width:820px){.acc-desc{font-size:16px;max-width:none}}

/* ===== WHAT I DO: animated icons ===== */
.acc{--art:clamp(96px,8.2vw,124px)}
.acc-body{position:relative;min-height:calc(var(--art) + 24px)}
.acc-desc{max-width:min(34em,calc(55% - var(--acc-ind) - 40px))}

.acc-art{position:absolute;top:0;left:55%;width:var(--art);height:var(--art);color:var(--flame);pointer-events:none;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s ease,transform .5s var(--ease)}
.acc-item.open .acc-art{opacity:1;transform:none;transition-delay:.1s}
.acc-art svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.acc-art svg *{transform-box:fill-box;transform-origin:50% 50%}
.acc-art .fl{fill:currentColor;stroke:none}
.acc-art .fl.rd{stroke:currentColor;stroke-width:4}
.acc-art .draw{stroke-dasharray:1 3}
.acc-art .dots{stroke-width:1.5;stroke-dasharray:.1 6;opacity:.55}
.acc-art .anc{fill:var(--paper);stroke-width:2.5}
.acc-art .anc.sel{fill:currentColor}

/* shared entrances (restart every time a row opens) */
.acc-item.open .acc-art .draw{animation:acc-draw .75s var(--ease) both;animation-delay:var(--d,.2s)}
.acc-item.open .acc-art .pop{animation:acc-pop .55s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:var(--d,.5s)}
.acc-item.open .acc-art .grow{animation:acc-grow .7s var(--ease) backwards;animation-delay:var(--d,.2s)}
.acc-item.open .acc-art .fade{animation:acc-fade .6s ease backwards;animation-delay:var(--d,.3s)}
.acc-item.open .acc-art .pulse{animation:acc-pulse 2.6s ease-in-out infinite;animation-delay:var(--p,1.5s)}
.acc-item.open .acc-art .breathe{animation:acc-breathe 3.4s ease-in-out infinite;animation-delay:var(--p,1.2s)}
@keyframes acc-draw{from{stroke-dashoffset:1.2}to{stroke-dashoffset:0}}
@keyframes acc-pop{from{transform:scale(0)}}
@keyframes acc-grow{from{transform:scaleX(0)}}
@keyframes acc-fade{from{opacity:0}}
@keyframes acc-pulse{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.35)}}
@keyframes acc-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}

/* Motion: bouncing ball */
.acc-art .m-shadow{fill:currentColor;stroke:none;opacity:.14;transform:scale(.55)}
.acc-item.open .acc-art .m-ball{transform-origin:50% 100%;animation:acc-bounce 1.9s linear infinite .35s backwards}
.acc-item.open .acc-art .m-shadow{animation:acc-shadow 1.9s linear infinite .35s backwards}
@keyframes acc-bounce{
 0%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.5,0,1,.5)}
 42%{transform:translateY(48px) scale(1,1);animation-timing-function:ease-out}
 47%{transform:translateY(48px) scale(1.28,.72);animation-timing-function:ease-out}
 54%{transform:translateY(40px) scale(.9,1.14);animation-timing-function:cubic-bezier(0,.5,.5,1)}
 100%{transform:translateY(0) scale(1,1)}
}
@keyframes acc-shadow{
 0%{transform:scale(.55);opacity:.14;animation-timing-function:cubic-bezier(.5,0,1,.5)}
 42%{transform:scale(1);opacity:.34;animation-timing-function:ease-out}
 47%{transform:scale(1.15)}
 54%{transform:scale(.95);animation-timing-function:cubic-bezier(0,.5,.5,1)}
 100%{transform:scale(.55);opacity:.14}
}

/* Digital: cursor click */
.acc-art .cursor{transform:translate(80px,61px)}
.acc-art .cursor .cur{fill:currentColor;stroke:var(--paper);stroke-width:2;transform-origin:0 0}
.acc-art .ring{opacity:0;stroke-width:2}
.acc-item.open .acc-art .cursor{animation:acc-cursor 3.6s infinite 1.3s backwards}
.acc-item.open .acc-art .cur{animation:acc-press 3.6s infinite 1.3s}
.acc-item.open .acc-art .ring{animation:acc-ring 3.6s infinite 1.3s}
.acc-item.open .acc-art .btn{animation:acc-btn 3.6s infinite 1.3s}
@keyframes acc-cursor{
 0%{transform:translate(106px,108px);opacity:0}
 10%{transform:translate(106px,108px);opacity:1;animation-timing-function:cubic-bezier(.6,0,.2,1)}
 40%{transform:translate(80px,61px);opacity:1}
 86%{transform:translate(80px,61px);opacity:1}
 100%{transform:translate(80px,61px);opacity:0}
}
@keyframes acc-press{0%,44%,56%,100%{transform:scale(1)}49%{transform:scale(.82)}}
@keyframes acc-btn{0%,44%,58%,100%{transform:scale(1)}50%{transform:scale(.9)}}
@keyframes acc-ring{0%,46%{transform:scale(.6);opacity:0}47%{opacity:.7}72%,100%{transform:scale(2.6);opacity:0}}

/* Video: scrubbing playhead */
.acc-art .scrub{transform:translateX(58px)}
.acc-item.open .acc-art .scrub{animation:acc-scrub 3.4s cubic-bezier(.45,0,.55,1) infinite alternate .9s backwards}
@keyframes acc-scrub{from{transform:translateX(16px)}to{transform:translateX(104px)}}

/* Mobile: icon sits to the right of the tools line */
@media (max-width:820px){
 .acc{--art:56px}
 .acc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-height:0}
 .acc-desc{grid-column:1/-1;max-width:none}
 .acc-art{position:static;grid-column:2;grid-row:2;margin:8px 0 16px}
 .acc-art svg{stroke-width:4}
 .acc-art .fl.rd{stroke-width:5}
 .acc-art .dots{stroke-width:2}
}

/* ===== CASE STUDY: vertical (9:16) video tiles ===== */
.cv{position:relative;flex:1 1 0;min-width:0;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:var(--ink)}
.cv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cv span{position:absolute;left:18px;bottom:18px;color:#fff;font-weight:600;font-size:15px}
@media (max-width:820px){
 .cv{border-radius:4px}
 .cv span{left:10px;bottom:10px;font-size:12px}
}
/* ===== sound videos: custom play button only ===== */
.snd-btn{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.snd-btn:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.snd-ic{--s:clamp(44px,5vw,72px);position:relative;width:var(--s);height:var(--s);border-radius:50%;background:var(--paper);box-shadow:0 2px 14px rgba(13,15,36,.25);transition:opacity .3s ease,transform .3s ease}
.snd-ic::before{content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-left:calc(var(--s)*.28) solid var(--blue);border-top:calc(var(--s)*.18) solid transparent;border-bottom:calc(var(--s)*.18) solid transparent}
.snd.playing .snd-ic::before{left:50%;box-sizing:border-box;width:calc(var(--s)*.26);height:calc(var(--s)*.32);border:0;border-left:calc(var(--s)*.09) solid var(--blue);border-right:calc(var(--s)*.09) solid var(--blue)}
.snd.playing .snd-ic{opacity:0;transform:scale(.9)}
.snd.playing .snd-btn:focus-visible .snd-ic{opacity:1;transform:none}
@media (hover:hover){.snd.playing:hover .snd-ic{opacity:1;transform:none}}

/* ===== REEL: watch with sound ===== */
.reel-play{position:absolute;z-index:4;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);display:flex;align-items:center;gap:12px;padding:14px 24px 14px 18px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 16px/1 var(--b);text-decoration:none;box-shadow:0 2px 14px rgba(13,15,36,.25);transition:transform .25s,background .25s,color .25s}
.reel-play i{width:0;height:0;border-left:13px solid var(--blue);border-top:8px solid transparent;border-bottom:8px solid transparent;transition:border-color .25s}
.reel-play:hover{transform:scale(1.05);background:var(--blue);color:#fff}
.reel-play:hover i{border-left-color:#fff}
@media (max-width:820px){.reel-play{padding:10px 18px 10px 14px;font-size:14px;gap:10px}.reel-play i{border-left-width:10px;border-top-width:6px;border-bottom-width:6px}}
.reel-modal{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.reel-modal[open]{display:grid;place-items:center}
.reel-modal::backdrop{background:rgba(13,15,36,.94)}
.reel-frame{position:relative;width:min(92vw,calc((100dvh - 120px)*16/9));aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-close{position:fixed;top:16px;right:16px;width:48px;height:48px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;background:none;cursor:pointer;transition:background .25s}
.reel-close::before,.reel-close::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;margin:-1px 0 0 -10px;background:#fff;transform:rotate(45deg)}
.reel-close::after{transform:rotate(-45deg)}
.reel-close:hover{background:var(--flame);border-color:var(--flame)}

/* ===== WORK list: thumbnails on small screens (the hover preview is desktop only) ===== */
.list .thumb{display:none}
@media (max-width:820px){
 .list a{grid-template-columns:64px minmax(0,1fr);gap:4px 16px;padding:14px 0;align-items:center}
 .list .thumb{display:block;grid-row:1/3;width:64px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--line)}
 .list a strong{grid-column:2;align-self:end}
 .list a em{grid-column:2;align-self:start;text-align:left;font-size:14px}
 .list a:hover,.list a:focus-visible{padding-left:0}
}

/* ===== ABOUT ===== */
.about h2{margin:0 0 clamp(32px,4vw,56px)}
.about-grid{display:grid;grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.about .portrait{display:block;width:clamp(160px,15vw,220px);height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 25%;border-radius:50%}
.about-text p{margin:0 0 1em;max-width:34em;font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.about-text .big{font:500 clamp(28px,3vw,44px)/1.15 var(--d);letter-spacing:-.02em;margin-bottom:.6em}
.about .cv-btn{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:14px 24px;border:1.5px solid var(--ink);border-radius:999px;font:600 15px/1 var(--b);color:var(--ink);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.about .cv-btn[hidden]{display:none}
.about .cv-btn svg{width:18px;height:18px;transition:transform .25s}
.about .cv-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.about .cv-btn:hover svg{transform:translateY(2px)}
.facts{margin:0;border-top:1px solid var(--ink)}
.facts div{padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.facts dd{margin:0;font-weight:500}
@media (max-width:1100px){.about-grid{grid-template-columns:auto minmax(0,1fr)}.facts{grid-column:2}}
@media (max-width:820px){
 .about-grid{grid-template-columns:1fr;gap:28px}
 .facts{grid-column:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
 .facts div:nth-child(n+3){grid-column:1/-1}
 /* Download CV goes below the facts: the text block's children become grid items, the button is ordered last */
 .about-grid{row-gap:0}
 .about-text{display:contents}
 .about .portrait{margin-bottom:28px}
 .facts{margin-top:calc(28px - 1em)}
 .about .cv-btn{order:1;justify-self:start;margin-top:28px}
}

/* ===== CONTACT: visible address + copy ===== */
.contact .addr{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:24px 0 0;font:500 clamp(17px,1.6vw,22px)/1.3 var(--b)}
.contact .addr a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;word-break:break-all}
.contact .addr a:hover{color:var(--ink)}
.contact .copy{font:600 12px/1 var(--b);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:none;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 14px;cursor:pointer;transition:background .25s,color .25s}
.contact .copy:hover,.contact .copy.done{background:#fff;color:var(--blue)}

/* ===== MOBILE: vertical video tiles ===== */
@media (max-width:820px){
 .cv{flex:0 0 62%;scroll-snap-align:start}
}

/* ===== PHONES: big type fills the screen width ===== */
/* divisors = width of the longest word in em: "Korkalainen" 5.12, "Stockmann" 5.0, "Let’s talk" 3.87 */
@media (max-width:600px){
 h1{font-size:calc((100vw - 2*var(--gutter))/5.25)}
 .ct{font-size:calc((100vw - 2*var(--gutter))/5.15)}
 .contact a.mail{font-size:calc((100vw - 2*var(--gutter))/4)}
}

/* ===== 404 ===== */
.nf{padding:12vh 0 clamp(72px,10vw,140px)}
.nf .kicker{margin:0 0 24px}
.nf .ct{margin:0 0 28px}
.nf-lead{font:500 clamp(22px,2.6vw,34px)/1.25 var(--d);letter-spacing:-.015em;margin:0 0 36px;max-width:22em}
.nf-links{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.nf-btn{display:inline-block;padding:14px 24px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;text-decoration:none;border:1.5px solid var(--blue);transition:background .25s,color .25s}
.nf-btn:hover{background:var(--ink);border-color:var(--ink)}
.nf-btn.ghost{background:none;color:var(--ink);border-color:var(--ink)}
.nf-btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ===== CASE STUDY: 16:9 videos with sound ===== */
.cf.tv{aspect-ratio:16/9;background:var(--ink)}
.cmedia.snd{background:var(--ink)}
.snd-fs{position:absolute;z-index:3;right:12px;bottom:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(13,15,36,.55);cursor:pointer;opacity:0;transition:opacity .3s,background .25s}
.snd-fs{display:grid;place-items:center;padding:0}
.snd-fs svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snd-fs:hover,.snd-fs:focus-visible{background:var(--blue)}
.snd.playing .snd-fs,.snd-fs:focus-visible{opacity:1}
@media (hover:hover){.snd:hover .snd-fs{opacity:1}}
@media (hover:none){.snd-fs{opacity:1}}

/* ===== REEL: no black flash while Vimeo loads ===== */
/* soft shimmer, then the Vimeo thumbnail, then the video fades in once it is actually playing */
.reel{background:var(--paper) center/cover no-repeat}
.reel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%) 0 0/250% 100%;animation:reelShimmer 1.6s linear infinite;transition:opacity .6s}
.reel.has-thumb::before,.reel.playing::before{opacity:0;animation:none}
@keyframes reelShimmer{from{background-position:150% 0}to{background-position:-100% 0}}

/* ===== CASE STUDY: images inside video tiles ===== */
.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.preview div > span{position:relative}

/* ===== CASE STUDY: campaign stage (Škoda) ===== */
/* full-bleed brand band: a phone playing the story video, story frames fanned around it */
.stage{--sk-bg:#0e3a2f;--sk-acc:#78faae;--cw:clamp(150px,14vw,220px);--ease:cubic-bezier(.2,.8,.2,1);position:relative;margin-top:clamp(72px,9vw,130px);padding:clamp(48px,6vw,88px) var(--pad) clamp(64px,8vw,120px);background:var(--sk-bg);color:#fff;overflow:hidden}
.stage-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 24px;margin-bottom:clamp(24px,4vw,56px)}
.stage-head h2{margin:0;color:var(--sk-acc);font-size:clamp(34px,5vw,72px);max-width:none}
.stage-head p{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:rgba(255,255,255,.72);font-size:15px;text-align:right}
.marquee{position:absolute;left:0;top:56%;z-index:0;transform:translateY(-50%);white-space:nowrap;pointer-events:none;font:800 clamp(140px,24vw,380px)/1 var(--d);letter-spacing:-.02em;color:var(--sk-bg);-webkit-text-stroke:3px var(--mq,rgba(120,250,174,.2));paint-order:stroke fill}
.marquee span{display:inline-block;animation:marquee 48s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}

.fan{position:relative;z-index:1;display:flex;justify-content:center;perspective:1600px;padding:24px 0 40px}
.fan-inner{display:flex;align-items:center;pointer-events:none;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease)}
.card{--r:0deg;--y:0px;--z:0px;--from:0px;--d:0s;position:relative;flex:none;width:var(--cw);aspect-ratio:9/16;margin:0 calc(var(--cw)*-.16);padding:0;border:0;border-radius:12px;overflow:hidden;background:#082a21;cursor:zoom-in;box-shadow:0 24px 60px rgba(0,0,0,.4);transform:translate3d(0,var(--y),var(--z)) rotate(var(--r));transition:transform .6s var(--ease) var(--d),opacity .6s ease var(--d),filter .4s,box-shadow .4s}
.card,.phone{pointer-events:auto}
.card img{display:block;width:100%;height:100%;object-fit:cover}
.card.c1{--r:-12deg;--y:52px;--z:-70px;--from:calc(var(--cw)*1.7);--d:.18s}
.card.c2{--r:-5deg;--y:16px;--z:-25px;--from:calc(var(--cw)*.85);--d:.06s}
.card.c3{--r:5deg;--y:16px;--z:-25px;--from:calc(var(--cw)*-.85);--d:.06s}
.card.c4{--r:12deg;--y:52px;--z:-70px;--from:calc(var(--cw)*-1.7);--d:.18s}
.fan.dealt .card{--d:0s}
.fan:not(.in) .card{opacity:0;transform:translate3d(var(--from),30px,-140px) rotate(0deg) scale(.86)}
.fan:has(.card:hover) .card:not(:hover),.fan:has(.card:hover) .phone{filter:brightness(.5) saturate(.8)}
.card:hover,.card:focus-visible{transform:translate3d(0,calc(var(--y) - 40px),120px) rotate(0deg) scale(1.14);box-shadow:0 50px 90px rgba(0,0,0,.55)}
.card:focus-visible{outline:3px solid var(--sk-acc);outline-offset:4px}

.phone{position:relative;flex:none;width:calc(var(--cw)*1.2);padding:calc(var(--cw)*.05);border-radius:calc(var(--cw)*.17);background:#050d0a;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 50px 100px rgba(0,0,0,.55);transform:translateZ(50px);transition:transform .6s var(--ease),opacity .6s ease,filter .4s}
.fan:not(.in) .phone{opacity:0;transform:translateZ(0) translateY(40px)}
.phone::before{content:"";position:absolute;z-index:2;top:calc(var(--cw)*.085);left:50%;width:30%;height:calc(var(--cw)*.07);transform:translateX(-50%);border-radius:99px;background:#050d0a}
.phone-screen{position:relative;aspect-ratio:9/16;border-radius:calc(var(--cw)*.13);overflow:hidden;background:#082a21}
.phone-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-snd{position:absolute;z-index:3;left:50%;bottom:calc(var(--cw)*.12);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;border:0;border-radius:99px;background:rgba(5,13,10,.72);color:#fff;font:600 13px/1 var(--b);white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,color .25s}
.phone-snd:hover,.phone-snd[aria-pressed="true"]{background:var(--sk-acc);color:var(--sk-bg)}
.phone-snd .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phone-snd .ic .sp{fill:currentColor}
.phone-snd .on,.phone-snd[aria-pressed="true"] .off{display:none}
.phone-snd[aria-pressed="true"] .on{display:inline}

@media (max-width:820px){
 .stage-head p{align-items:flex-start;text-align:left}
 .fan{display:block;perspective:none;margin:0 calc(var(--pad)*-1);padding:8px 0 0}
 .fan-inner{transform:none!important;pointer-events:auto;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px var(--pad) 20px;scrollbar-width:none}
 .fan-inner::-webkit-scrollbar{display:none}
 .card,.phone,.fan:not(.in) .card,.fan:not(.in) .phone{width:64vw;margin:0;opacity:1;transform:none;scroll-snap-align:center}
 .phone{order:-1;width:68vw;border-radius:9vw}
 .phone-screen{border-radius:7vw}
 .phone::before{top:5vw;height:4vw}
 .phone-snd{bottom:7vw}
 .card:hover,.card:focus-visible{transform:none;box-shadow:0 24px 60px rgba(0,0,0,.4)}
 .fan:has(.card:hover) .card:not(:hover),.fan:has(.card:hover) .phone{filter:none}
}

/* ===== LIGHTBOX for creatives ===== */
.lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#fff}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(13,15,36,.95)}
.lb-img{display:block;max-width:min(86vw,1100px);max-height:84dvh;width:auto;height:auto;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none;animation:lbIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}}
.lb-count{position:fixed;top:28px;left:24px;margin:0;font:600 13px/1 var(--b);letter-spacing:.12em;color:rgba(255,255,255,.75)}
.lb-nav{position:fixed;top:50%;width:52px;height:52px;margin-top:-26px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;background:none;cursor:pointer;transition:background .25s,border-color .25s}
.lb-nav::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff}
.lb-nav.prev{left:16px}.lb-nav.prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.lb-nav.next{right:16px}.lb-nav.next::before{transform:translate(-70%,-50%) rotate(45deg)}
.lb-nav:hover{background:var(--flame);border-color:var(--flame)}
@media (max-width:820px){.lb-nav{top:auto;bottom:20px;margin:0}.lb-nav.prev{left:calc(50% - 64px)}.lb-nav.next{right:calc(50% - 64px)}.lb-img{max-width:92vw;max-height:76dvh}}

/* ===== CASE STUDY: On Air (Intersport TV spots) ===== */
/* reuses the .stage band; a big screen plays the chosen spot, tiles scrub on hover */
.onair{--sk-bg:#0b2a5e;--sk-acc:#fff;--mq:rgba(255,255,255,.11);--red:#e2001a}
.oa{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.oa-screen{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.45)}
.oa-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.oa-bar{position:absolute;z-index:2;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:16px 18px 40px;background:linear-gradient(rgba(0,0,0,.45),transparent);font:600 12px/1 var(--b);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.oa-live{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;background:rgba(0,0,0,.4);transition:background .3s}
.oa-live b{width:8px;height:8px;border-radius:50%;background:var(--red)}
.oa.playing .oa-live{background:var(--red)}
.oa.playing .oa-live b{background:#fff;animation:oaBlink 1.2s ease-in-out infinite}
@keyframes oaBlink{50%{opacity:.25}}
.oa-tc{font-variant-numeric:tabular-nums;letter-spacing:.08em;padding:7px 10px;border-radius:4px;background:rgba(0,0,0,.4)}
.oa-big{position:absolute;z-index:1;inset:0;display:grid;place-items:center;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer}
.oa-big .snd-ic{--s:clamp(56px,7vw,96px);transition:opacity .3s,transform .3s}
.oa.playing .oa-big .snd-ic{opacity:0;transform:scale(.9)}
.oa.playing .oa-big .snd-ic::before{left:50%;box-sizing:border-box;width:calc(var(--s)*.26);height:calc(var(--s)*.32);border:0;border-left:calc(var(--s)*.09) solid var(--blue);border-right:calc(var(--s)*.09) solid var(--blue)}
@media (hover:hover){.oa.playing .oa-screen:hover .oa-big .snd-ic{opacity:1;transform:none}}
.oa-big:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.oa-cap{position:absolute;z-index:2;inset:auto 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:48px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.oa-cap p{margin:0;display:flex;align-items:baseline;gap:14px}
.oa-title{font:700 clamp(20px,2.4vw,34px)/1 var(--d);letter-spacing:-.02em}
.oa-len{font:500 14px/1 var(--b);color:rgba(255,255,255,.7)}
.oa-fs{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);cursor:pointer;pointer-events:auto;transition:background .25s}
.oa-fs:hover,.oa-fs:focus-visible{background:var(--red)}
.oa-fs svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oa-seek{position:absolute;z-index:3;left:0;bottom:0;height:3px;width:var(--p,0%);background:var(--red)}
.oa-screen.swap video{animation:oaSwap .45s ease}
@keyframes oaSwap{from{opacity:0;filter:brightness(2)}}

.oa-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin:clamp(14px,1.8vw,22px) 0 0;padding:0}
.oa-tile{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.oa-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000;outline:2px solid transparent;outline-offset:3px;transition:outline-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.oa-thumb img,.oa-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.oa-thumb video{opacity:0}
.oa-tile.scrub .oa-thumb video.ready{opacity:1}
.oa-line{position:absolute;z-index:2;top:0;bottom:0;left:var(--x,0);width:2px;margin-left:-1px;background:var(--red);opacity:0}
.oa-ttc{position:absolute;z-index:2;left:8px;bottom:8px;padding:5px 7px;border-radius:3px;background:rgba(0,0,0,.6);font:600 11px/1 var(--b);letter-spacing:.06em;font-variant-numeric:tabular-nums;opacity:0}
.oa-tile.scrub .oa-line,.oa-tile.scrub .oa-ttc{opacity:1}
.oa-tile:hover .oa-thumb,.oa-tile:focus-visible .oa-thumb{transform:translateY(-4px)}
.oa-tile:focus-visible{outline:none}
.oa-tile:focus-visible .oa-thumb,.oa-tile.is-on .oa-thumb{outline-color:var(--red)}
.oa-tile:not(.is-on) .oa-thumb img{filter:brightness(.8)}
.oa-info{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:12px;font-weight:600;font-size:15px}
.oa-info i{font-style:normal;font-weight:500;color:rgba(255,255,255,.6)}
.oa-prog{display:block;height:2px;margin-top:10px;background:rgba(255,255,255,.16)}
.oa-prog::before{content:"";display:block;height:100%;width:0;background:var(--red)}
.oa-tile.is-on .oa-prog::before{width:var(--p,0%)}
@media (max-width:820px){
 .oa-screen{border-radius:6px}
 .oa-bar{padding:10px 10px 30px;font-size:10px}
 .oa-cap{padding:30px 10px 10px}
 .oa-len{font-size:12px}
 .oa-fs{width:34px;height:34px}
 .oa-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad)*-1);padding:0 var(--pad) 6px;scroll-padding-inline:var(--pad);scrollbar-width:none}
 .oa-list::-webkit-scrollbar{display:none}
 .oa-list li{flex:0 0 62%;scroll-snap-align:start}
}
.oa-cap p{transition:opacity .4s}
.oa.playing .oa-cap p{opacity:0}
@media (hover:hover){.oa.playing .oa-screen:hover .oa-cap p{opacity:1}}
@media (max-width:820px){.oa-cap p{display:none}.oa-cap{justify-content:flex-end;background:none}}

/* ===== K-RAUTA: grading suite ===== */
.suite-band{--sk-bg:#161616;--sk-acc:#ff6a13;--mq:rgba(255,106,19,.14);padding-bottom:clamp(40px,5vw,72px)}
.suite-band .stage-head h2{color:#fff}
.suite{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);max-width:1320px;margin:0 auto}
.mon{margin:0;min-width:0}
.mon-screen{position:relative;display:block;width:100%;padding:clamp(6px,.8vw,12px);border:0;border-radius:10px;background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 30px 70px rgba(0,0,0,.5);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.mon-screen::after{content:"";position:absolute;right:18px;bottom:3px;width:6px;height:2px;border-radius:1px;background:var(--sk-acc)}
.mon-screen img{display:block;width:100%;height:auto;border-radius:3px}
.suite:has(.mon-screen:hover) .mon-screen:not(:hover){opacity:.55}
.mon-screen:hover{transform:translateY(-4px)}
@media (max-width:820px){.suite{grid-template-columns:1fr}}

/* ===== K-RAUTA: film strip ===== */
.strip{--fh:min(60vh,560px);--film:#0b0b0b;--hole:#2a2a2a;--or:#ff6a13;position:relative;background:#161616;color:#fff}
.strip-sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;padding:0 var(--pad);margin-bottom:clamp(18px,3vh,36px)}
.strip-head h2{margin:0;max-width:none;color:#fff;font-size:clamp(34px,5vw,72px)}
.strip-view{overflow:hidden}
.strip-film{display:flex;gap:16px;width:max-content;margin:0 var(--pad);padding:34px 16px;border-radius:4px;background:var(--film);will-change:transform;
 background-image:repeating-linear-gradient(90deg,var(--hole) 0 16px,transparent 16px 34px),repeating-linear-gradient(90deg,var(--hole) 0 16px,transparent 16px 34px);
 background-size:100% 11px,100% 11px;background-position:9px 12px,9px calc(100% - 12px);background-repeat:no-repeat}
.sf{flex:none;margin:0;width:calc(var(--fh)*9/16)}
.sf.wide{width:calc(var(--fh)*16/9)}
.sf > .cv,.sf > .cf{flex:none;width:100%;height:var(--fh);aspect-ratio:auto;padding:0;border-radius:2px;background:#000}
.strip.free{height:auto!important;padding:clamp(48px,7vw,96px) 0}
.strip.free .strip-sticky{position:static;height:auto;display:block}
.strip.free .strip-view{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.strip.free .strip-view::-webkit-scrollbar{display:none}
.strip.free .strip-film{transform:none!important}
.strip.free .sf{scroll-snap-align:center}
@media (max-width:820px){.strip{--fh:min(64vh,118vw)}.strip-film{gap:12px;padding:30px 12px}}

/* ===== BURGER KING: in-store screens ===== */
.bkstore{--sk-bg:#502314;--sk-acc:#f5ebdc;--mq:rgba(255,135,50,.18);--bko:#ff8732;--e:cubic-bezier(.2,.8,.2,1)}
.bkstore .stage-head p{color:rgba(245,235,220,.7)}
.board{position:relative;z-index:1;max-width:1160px;margin:0 auto}
.screens{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);padding-top:60px}
.screens::before{content:"";position:absolute;top:0;left:-3%;right:-3%;height:7px;border-radius:4px;background:#2b1009;box-shadow:0 2px 0 rgba(255,255,255,.04)}
.scr{position:relative;margin:0}
.scr .rod{position:absolute;top:-60px;left:24%;width:4px;height:60px;border-radius:2px;background:linear-gradient(90deg,#1a0904,#3a170c)}
.scr .rod.r{left:auto;right:24%}
.scr::before{content:"";position:absolute;z-index:-1;inset:-12% -22% -18%;background:radial-gradient(closest-side,rgba(255,135,50,.38),transparent);opacity:.45;transition:opacity .5s}
.scr:hover::before{opacity:1}
.scr-in{position:relative;padding:clamp(6px,.8vw,10px);border-radius:10px;background:#0d0d0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.45);transition:transform .5s var(--e)}
.scr:hover .scr-in{transform:translateY(-5px)}
.scr-in video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:3px;background:#000;transition:opacity .1s linear calc(var(--d,0s) + .45s)}
.scr.wide .scr-in video{aspect-ratio:16/9}
.scr-in::after{content:"";position:absolute;inset:clamp(6px,.8vw,10px);border-radius:3px;background:#fff;opacity:0;pointer-events:none}
.scr.in .scr-in::after{animation:scrOn .8s var(--e) var(--d,0s) both}
.scr:not(.in) .scr-in video{opacity:0}
@keyframes scrOn{0%{opacity:1;transform:scale(0,.006)}35%{opacity:1;transform:scale(1,.006)}65%{opacity:.85;transform:scale(1,1)}100%{opacity:0;transform:scale(1,1)}}
.scr.wide{max-width:860px;margin:clamp(120px,11vw,156px) auto 0}
.scr.wide .rod{top:-90px;height:90px}
@media (max-width:820px){
 .screens{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad)*-1);padding:60px var(--pad) 8px;scrollbar-width:none}
 .screens::-webkit-scrollbar{display:none}
 .screens::before{top:0;left:0;right:0}
 .scr{flex:0 0 62vw;scroll-snap-align:center}
 .scr.wide{margin-top:80px}.scr.wide .rod{top:-60px;height:60px}
}

/* ===== BURGER KING: snapshots ===== */
.wild{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);max-width:1100px;margin:0 auto;padding:clamp(80px,10vw,140px) 0 clamp(64px,8vw,110px)}
.snap{position:relative;margin:0;padding:12px 12px 0;background:#fff;box-shadow:0 18px 50px rgba(80,35,20,.18);transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.snap::before{content:"";position:absolute;z-index:2;top:-13px;left:50%;width:96px;height:26px;background:rgba(255,135,50,.6);transform:translateX(-50%) rotate(-3deg)}
.snap img{display:block;width:100%;height:auto}
.snap figcaption{padding:16px 4px 18px;font:800 clamp(18px,1.6vw,22px)/1 var(--d);letter-spacing:-.01em;color:#502314}
.snap:hover{transform:rotate(0deg) translateY(-6px) scale(1.02);box-shadow:0 30px 70px rgba(80,35,20,.25)}
@media (max-width:820px){.wild{grid-template-columns:1fr;gap:44px}}

/* ===== BURGER KING: social reels ===== */
.bksocial{--sk-bg:#ff8732;--sk-acc:#502314;--mq:rgba(80,35,20,.18);margin-top:0;color:#502314}
.bksocial .stage-head p{color:rgba(80,35,20,.75)}
.reels{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px);max-width:1080px;margin:0 auto;padding-top:24px}
.reelcard{position:relative;margin:0;transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.reelcard .cv{border:5px solid #f5ebdc;border-radius:16px;box-shadow:0 16px 36px rgba(80,35,20,.22)}
.reelcard:hover{transform:rotate(0deg) translateY(-8px)}
@media (max-width:820px){
 .reels{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad)*-1);padding:26px var(--pad) 10px;scrollbar-width:none}
 .reels::-webkit-scrollbar{display:none}
 .reelcard{flex:0 0 62vw;scroll-snap-align:center}
}
.scr.wide::after{content:"";position:absolute;top:-96px;left:12%;right:12%;height:7px;border-radius:4px;background:#2b1009}
@media (max-width:820px){.scr.wide::after{top:-66px}}

/* ===== QOCO: flight deck ===== */
.deck{--sk-bg:#121b31;--sk-acc:#9cffc6;--mq:rgba(156,255,198,.09);--qg:#57c35a}
.deck .stage-head p{color:rgba(220,238,242,.7)}
.hud{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.hud .cf.tv{border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hud-ruler{position:relative;height:12px;margin-top:16px;
 background:repeating-linear-gradient(90deg,rgba(156,255,198,.7) 0 1px,transparent 1px 10%) left bottom/100% 12px no-repeat,repeating-linear-gradient(90deg,rgba(156,255,198,.35) 0 1px,transparent 1px 1%) left bottom/100% 6px no-repeat}
.hud-mark{position:absolute;top:-11px;left:var(--p,0%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--qg);transform:translateX(-50%);transition:left .25s linear}

.dep{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center;max-width:1100px;margin:clamp(64px,8vw,110px) auto 0}
.dep-board{--t:clamp(12px,1.25vw,17px);display:grid;grid-template-columns:auto 1fr auto auto;column-gap:clamp(10px,1.4vw,18px);padding:clamp(14px,1.6vw,22px);border-radius:10px;background:#0a1020;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 30px 70px rgba(0,0,0,.4)}
.dep-title{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-bottom:16px;font:700 13px/1 var(--b);letter-spacing:.22em;text-transform:uppercase;color:#fff}
.dep-title svg{width:26px;height:16px;fill:var(--qg)}
.dep-clock{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--sk-acc)}
.dep-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;margin:0;padding:10px 8px;border:0;border-top:1px solid rgba(255,255,255,.07);border-radius:0;background:none;color:#eef3ff;font:inherit;text-align:left;cursor:pointer;transition:background .25s}
.dep-h{padding:0 8px 10px;border-top:0;cursor:default;font:600 10px/1 var(--b);letter-spacing:.18em;text-transform:uppercase;color:rgba(156,255,198,.6)}
button.dep-row:hover{background:rgba(255,255,255,.04)}
button.dep-row.is-on{background:rgba(156,255,198,.07);box-shadow:inset 3px 0 0 var(--qg)}
button.dep-row:focus-visible{outline:2px solid var(--sk-acc);outline-offset:-2px}
.flap{display:flex;gap:2px;white-space:pre}
.flap b{position:relative;display:inline-grid;place-items:center;width:calc(var(--t)*1.02);height:calc(var(--t)*1.55);border-radius:2px;background:#1a2440;font:700 var(--t)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f4f7ff}
.flap b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6)}
.flap b.f{background:#24315a;color:#cfe0ff}
button.dep-row.is-on .flap.st b{color:var(--sk-acc)}
.dep-view{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#0a1020;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.dep-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.dep-view img.on{opacity:1;transform:none}
@media (max-width:820px){
 .dep{grid-template-columns:1fr}
 .dep-view{order:-1}
 .dep-board{--t:clamp(10px,3vw,14px)}
}
@media (max-width:820px){
 .dep-board{--t:clamp(10px,3.1vw,14px);grid-template-columns:auto 1fr auto;column-gap:10px;padding:14px 10px}
 .dep-row > :nth-child(3){display:none}
 .dep-row{padding:9px 4px}
 .dep-title{font-size:11px;letter-spacing:.16em}
}

/* ===== PHONES: swipe rows move sideways only ===== */
@media (max-width:820px){
 .fan-inner,.oa-list,.screens,.reels,.strip.free .strip-view{overflow-y:hidden;overscroll-behavior-x:contain}
 /* the ceiling rail is drawn per screen so it runs the full length of the swipe row */
 .screens::before,.screens .scr::before{display:none}
 .screens .scr::after{content:"";position:absolute;top:-60px;left:-8px;right:-8px;height:7px;background:#2b1009}
 .screens .scr:first-child::after{left:-40px;border-radius:4px 0 0 4px}
 .screens .scr:last-child::after{right:-40px;border-radius:0 4px 4px 0}
}
/* touch screens: no hover lifts left stuck after a tap */
@media (hover:none){
 .scr:hover .scr-in,.oa-tile:hover .oa-thumb,.mon-screen:hover{transform:none}
 .reelcard:hover,.snap:hover{transform:rotate(var(--r,0deg))}
 .scr:hover::before{opacity:.45}
}

/* phones: swipe rows clip vertically, so drop the big shadows that would be cut into hard bands */
@media (max-width:820px){
 .reelcard .cv,.screens .scr-in,.fan-inner .card,.fan-inner .phone{box-shadow:none}
 .fan-inner .phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
}
/* phones: Škoda story cards keep a mint rim and a short shadow that fits inside the swipe row */
@media (max-width:820px){
 .fan-inner{padding-top:16px;padding-bottom:30px}
 .fan-inner .card{box-shadow:0 0 0 1.5px rgba(120,250,174,.45),0 10px 20px rgba(0,0,0,.35)}
 .fan-inner .phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 0 0 1.5px rgba(120,250,174,.45),0 10px 20px rgba(0,0,0,.35)}
}

/* On air: a placeholder tile for a spot that isn't released yet */
.oa-tile.off{cursor:default}
.oa-tile.off .oa-thumb video{opacity:1}
.oa-tile.off:hover .oa-thumb{transform:none}
.oa-tile.off .oa-info i{color:#ff6b7a}

/* ===== HERO: the name draws in as outlines, then fills ===== */
/* letters are clean SVG outlines of Inter Tight 800 (overlaps removed), one path per letter */
.hero{position:relative;padding:5vh 0 clamp(44px,5vw,72px)}
h1.draw{margin:.12em 0 0 -.04em;line-height:1}
h1.draw svg{display:block;height:auto;overflow:visible;will-change:transform}
h1.draw .l1{color:var(--ink)}
h1.draw .l2{color:var(--blue);margin-top:.045em}
h1.draw path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:26px;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;
 animation:nameDraw 1.7s cubic-bezier(.45,0,.2,1) calc(var(--i)*.075s + .2s) forwards,nameFill .8s ease calc(var(--i)*.075s + 1.45s) forwards}
@keyframes nameDraw{to{stroke-dashoffset:0}}
@keyframes nameFill{to{fill-opacity:1;stroke-opacity:0}}
.hero .kicker{margin:clamp(20px,2.4vw,32px) 0 0;animation-delay:2.2s}
@media (prefers-reduced-motion:reduce){h1.draw path{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0}.hero .kicker{opacity:1}}
@media (max-width:600px){h1.draw path{stroke-width:40px}}

/* ===== STOCKMANN: top scroll (black band, hairline gold frames) ===== */
.stk-top{--sk-bg:#111;--sk-acc:#fff;--mq:rgba(230,180,0,.2);--gold:#e6b400}
.ts{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.316fr);gap:clamp(16px,2.4vw,40px);align-items:end;max-width:1320px;margin:0 auto}
.ts figure{margin:0;min-width:0}
.ts-f{padding:clamp(6px,.7vw,10px);border:1px solid rgba(230,180,0,.55)}
.ts-f video{display:block;width:100%;object-fit:cover;background:#000}
.ts-d video{aspect-ratio:16/9}
.ts-m video{aspect-ratio:9/16}
@media (max-width:820px){.ts{grid-template-columns:1fr;gap:28px}.ts-m{width:58%;justify-self:center}}

/* ===== STOCKMANN: one artboard, justified rows (each item grows by its aspect ratio) ===== */
.artboard{padding:clamp(56px,7vw,110px) var(--pad);background:#f5f7f9}
.ab-board{--rh:clamp(120px,15vw,240px);display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,18px);max-width:1320px;margin-inline:auto}
.ab-board::after{content:"";flex:999 1 0}
.ab{position:relative;margin:0;flex:var(--r) 1 calc(var(--r)*var(--rh));aspect-ratio:var(--r);overflow:hidden;background:#e6e9ec}
.ab > img,.ab > video{display:block;width:100%;height:100%;object-fit:cover}
.ab .bn-win{position:absolute;inset:0;overflow:hidden}
.bn-win iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;transform:scale(var(--k,.5));pointer-events:none}
@media (max-width:820px){.ab-board{--rh:62px;gap:6px}}

/* ===== STOCKMANN artboard: floats in 3D, tilts toward the cursor, items zoom on hover ===== */
@media (hover:hover) and (pointer:fine){
 .artboard{perspective:1800px;perspective-origin:50% 40%}
 .ab-board{transform-style:preserve-3d;pointer-events:none;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s cubic-bezier(.2,.8,.2,1);
  animation:abFloat 9s ease-in-out infinite}
 .ab{pointer-events:auto;transform:translateZ(0);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
 .ab:hover{z-index:2;transform:translateZ(60px) scale(1.07);box-shadow:0 26px 60px rgba(0,0,0,.22)}
}
@keyframes abFloat{
 0%,100%{translate:0 0 0;rotate:x 0deg}
 50%{translate:0 -8px 0;rotate:x 1.2deg}
}
@media (prefers-reduced-motion:reduce){.ab-board{animation:none;transform:none}.ab:hover{transform:none}}

/* ===== S-RYHMÄ: the workspace, a FigJam-style board you can drag around ===== */
.wb{--g1:#00aa46;--g2:#46dc78;--g3:#e3f5e8;--g4:#007841;--g5:#004628;position:relative;margin-top:clamp(72px,9vw,130px);background:#f4f3ee}
.wb-view{position:relative;display:flex;height:min(calc(100vh - 64px),1120px);height:min(calc(100dvh - 64px),1120px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wb-view.drag{cursor:grabbing}
.wb-canvas{position:relative;flex:none;margin:auto;width:3300px;height:1720px;zoom:var(--z,.8);background-image:radial-gradient(circle,#c9cbc2 1.5px,transparent 1.7px);background-size:32px 32px}
.wb-it,.wb-label,.wb-note{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);margin:0}
.wb-it{width:calc(var(--w)*1px);height:calc(var(--h)*1px);transform:rotate(var(--r));transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;box-shadow:0 10px 26px rgba(31,31,31,.16);z-index:1}
.wb-it:hover{z-index:20;transform:rotate(0deg) scale(1.06);box-shadow:0 28px 60px rgba(31,31,31,.28)}
.wb-it > video,.wb-it > img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;pointer-events:none}
.g1{--c:var(--g1)}.g2{--c:var(--g2)}.g4{--c:var(--g4)}.g5{--c:var(--g5)}
.g3{--c:var(--g3)}
.wb-it{background:var(--c);border-radius:4px}
.wb-label{display:inline-block;z-index:9;padding:0 4px;transform:rotate(-1.5deg);font:700 44px/1 'Caveat',cursive;letter-spacing:.03em;text-transform:uppercase;color:#1f1f1f;white-space:nowrap}
.wb-note{z-index:10;width:170px;min-height:150px;padding:18px 16px;transform:rotate(var(--r));font:600 25px/1.05 'Caveat',cursive;color:#1f1f1f;box-shadow:0 8px 18px rgba(31,31,31,.14)}
.wb-note::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wb-note.y{background:#fff27a}.wb-note.g{background:#91fa9b}.wb-note.p{background:#ffb8d2}.wb-note.b{background:#a9d8ff}
.wb-ink{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;fill:none;stroke:#e2231a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.wb-hint{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:30;margin:0;padding:10px 16px;border-radius:999px;background:#1f1f1f;color:#fff;font:600 12px/1 var(--b);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;transition:opacity .5s}
.wb.moved .wb-hint{opacity:0}
.wb-hint .h-touch{display:none}
@media (hover:none){.wb-hint .h-fine{display:none}.wb-hint .h-touch{display:inline}.wb-it:hover{transform:rotate(var(--r));box-shadow:0 10px 26px rgba(31,31,31,.16)}}
@media (max-width:820px){
 .wb-view{height:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;cursor:auto;touch-action:auto;scrollbar-width:none}
 .wb-view::-webkit-scrollbar{display:none}
 .wb-canvas{zoom:.4}
}

/* workspace zoom controls (desktop) */
.wb-zoom{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:30;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:#1f1f1f;box-shadow:0 8px 20px rgba(31,31,31,.2)}
.wb-zoom button{display:grid;place-items:center;min-width:36px;height:36px;margin:0;padding:0 10px;border:0;border-radius:999px;background:none;color:#fff;font:600 13px/1 var(--b);cursor:pointer;transition:background .2s}
.wb-zoom button:hover{background:rgba(255,255,255,.14)}
.wb-zoom button:focus-visible{outline:2px solid #91fa9b;outline-offset:-2px}
.wb-zoom .zv{min-width:58px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wb-zoom .zi{font-size:20px;font-weight:500}
@media (max-width:820px),(hover:none){.wb-zoom{display:none}}


/* workspace: sound button on creatives that have audio */
.wb-snd{position:absolute;left:10px;top:10px;z-index:3;display:grid;place-items:center;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(31,31,31,.78);color:#fff;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.wb-snd:hover{transform:scale(1.08)}
.wb-snd:focus-visible{outline:3px solid #91fa9b;outline-offset:2px}
.wb-snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-snd .sp{fill:currentColor}
.wb-snd .on,.wb-snd[aria-pressed="true"] .off{display:none}
.wb-snd[aria-pressed="true"] .on{display:inline}
.wb-snd[aria-pressed="true"]{background:#00aa46}
.wb-it.sound{z-index:20;transform:rotate(0deg) scale(1.06);box-shadow:0 28px 60px rgba(31,31,31,.28)}

/* visually hidden, still read by screen readers and search engines */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* hero: availability line under the kicker */
.hero .status{display:flex;align-items:center;margin:clamp(12px,1.4vw,18px) 0 0;justify-self:auto;text-align:left;font:500 clamp(15px,1.3vw,18px)/1.3 var(--b);color:var(--ink);opacity:0;animation:kfade .8s ease 2.5s forwards}
@media (prefers-reduced-motion:reduce){.hero .status{opacity:1}}