/* Layout: dark page. Hero = Kenneth on film, glitching into his own lines. Then the two-way work wall, a plain list, about, brands and contact. */
:root{
  --bg:#111114; --panel:#1a1a1f; --fg:#eeece6; --muted:#8f8f98; --line:#2b2b32;
  --red:#ff3b3b; --note:#f4dc6b; --note-ink:#2b2508;
  --f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Gochi Hand","Comic Sans MS","Marker Felt",cursive;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,48px);
  color-scheme:dark;
}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
.wrap{padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);border-bottom:1px dashed var(--line)}
.me{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-size:14px;text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--fg)}
.toggle{font-family:var(--f-mono);font-size:11.5px;background:var(--note);color:var(--note-ink);border:0;border-radius:3px;padding:5px 8px;cursor:pointer}
@media (max-width:640px){.nav a{display:none}}

.note{font-family:var(--f-hand);font-size:17px;line-height:1.25;background:var(--note);color:var(--note-ink);padding:9px 12px 10px;max-width:300px;transform:rotate(-1.5deg);box-shadow:2px 3px 0 rgba(0,0,0,.35);margin:0}
.note.r{transform:rotate(1.2deg)}
body.nonotes .note{display:none}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,64px);align-items:center;padding-block:clamp(24px,5vh,64px) clamp(30px,6vh,72px)}
/* v29: desktop uses the space: bigger headline, much bigger dancer standing on the fold */
@media (min-width:1000px){
  #hero{grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2vw,40px);padding-block:clamp(12px,2.5vh,32px) 0;align-items:center}
  #hero .bigline{font-size:clamp(40px,6.4vw,124px)}
  #hero .mine{font-size:clamp(18px,1.45vw,26px)}
  #hero .eyebrow{font-size:13px}
  #hero .stage{width:min(44vw,calc(100svh - 70px));justify-self:end;align-self:end}
}
/* v30: a case page fits one laptop screen, so the scrolling headline shows under the work */
@media (min-width:1000px){#caseBody{padding-block:16px 64px}#caseBody h2{font-size:clamp(30px,3.4vw,58px);margin-bottom:16px}#caseBody .eyebrow{margin-bottom:10px}#caseBody .marquee{padding-block:8px}#caseBody .mq span{font-size:clamp(24px,2.6vw,40px)}}
/* v18: the opening screen fills the window on its own; the work starts below the fold */
.hero{box-sizing:border-box;min-height:calc(100vh - 55px);min-height:calc(100svh - 55px)}
.hero .bigline{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,6.2vw,104px);line-height:.92;letter-spacing:-.035em;margin:0}
.hero .bigline .ln{display:block;white-space:nowrap}
@media (max-width:760px){.hero .bigline{font-size:min(11.4vw,64px)}}
.hero .bigline em{font-style:normal;color:var(--muted)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.mine{margin:26px 0 0;font-size:clamp(16px,1.35vw,20px);line-height:1.45}
.mine .nw{white-space:nowrap}
@media (max-width:760px){.mine .nw{white-space:normal}}
.mine b{font-weight:600}
.mine .row2{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:12px}
@media (max-width:760px){.mine{font-size:min(15px,3.9vw)}.mine .nw{white-space:nowrap!important}.mine .row2{display:inline;white-space:nowrap}.mine .clickme{display:inline-block;vertical-align:-6px;margin-left:8px}.mine .clickme .toU{height:22px;width:auto}.mine .clickme{margin-left:5px}}
.clickme{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--f-hand);color:var(--red);font-size:clamp(22px,2vw,30px);line-height:1;transform:rotate(-3deg)}
.mine .row2{margin-top:8px;position:relative;z-index:5}.clickme .cl{white-space:nowrap}
.clickme svg{overflow:visible}.clickme path{stroke:var(--red);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.clickme:hover{transform:rotate(-6deg)}
.clickme .toU{display:none}
@media (max-width:760px){.clickme .toR{display:none}.clickme .toU{display:block}}
.wins{margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.heroNotes{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
.stage{position:relative;justify-self:center;width:min(100%,600px);aspect-ratio:1/1;cursor:default;-webkit-tap-highlight-color:transparent}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .hint{position:absolute;right:-6px;bottom:18%;font-family:var(--f-hand);color:var(--red);font-size:clamp(18px,1.8vw,24px);transform:rotate(-6deg);pointer-events:none;transition:opacity .4s;white-space:nowrap}
.stage .hint svg{display:block;overflow:visible;margin-left:-40px}
.stage .hint path{stroke:var(--red);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.again{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--f-hand);font-size:22px;color:var(--fg);background:none;border:1.5px dashed var(--muted);border-radius:999px;padding:6px 16px;cursor:pointer}
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .stage{order:-1;width:min(86%,380px)}
  .stage .hint{right:-10px}
}

#fly{position:absolute;left:0;top:0;width:100%;height:0;z-index:30;pointer-events:none}
.flyer{position:absolute;left:0;top:0;font-family:var(--f-mono);font-weight:600;line-height:1;color:var(--fg);will-change:transform;white-space:pre}
.flyer.landed{z-index:3;text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 8px rgba(0,0,0,.6)}

/* work wall */
.wallHead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;padding-block:0 18px}
.wallHead h2,.sec h2{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;line-height:1;margin:0}
.wallHead p{margin:0;color:var(--muted);font-size:14px}
#wall{position:relative}
.frame{position:sticky;top:0;height:100vh;overflow:hidden;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);padding-inline:var(--gut);height:100%}
.col{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,24px);will-change:transform;min-width:0}
.col.a{padding-top:4vh}
.tile{position:relative;display:block;text-decoration:none;color:var(--fg)}
.tile .pic{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
/* v17 hover: the tile jumps out at you, overshoots and settles; the title comes on big; the rest of the wall steps back */
.tile{--s:1.06;z-index:1;transform:scale(1);transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .35s,filter .35s}
.tile.on{transform:scale(var(--s));z-index:6;transition:transform .55s cubic-bezier(.25,1.5,.45,1),opacity .35s,filter .35s}
.col:has(.tile.on){z-index:6;position:relative}
/* v25: everything bright at rest; the tile under the pointer dims and shows its brand name */
.tile img,.tile video{filter:brightness(1.18) contrast(1.06) saturate(1.1)}
.tile .bn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4vw,64px);letter-spacing:-.035em;line-height:.95;color:#fff;background:rgba(12,12,14,.62);opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,1.2,.4,1);pointer-events:none;z-index:2}
.tile.on .bn{opacity:1;transform:none}
.tile .pic{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out,box-shadow .4s,border-color .4s}
.tile.on .pic{box-shadow:0 18px 40px rgba(0,0,0,.6)}
.tile img,.tile video{transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .4s}
.tile.on img,.tile.on video{transform:scale(1.04)}
.tile .hov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:clamp(14px,2vw,26px);background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.82));opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.tile.on .hov{opacity:1}
.hov .m{display:block;overflow:hidden;line-height:1}
.hov .m>span{display:block;transform:translateY(110%);transition:transform .55s cubic-bezier(.2,1.3,.4,1)}
.tile.on .hov .m>span{transform:none}
.hov .hb{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,3.6vw,58px);letter-spacing:-.035em;color:var(--fg);padding-bottom:.06em}
.hov .ht{font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.01em;color:#d6d4ce}
.hov .ha{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--note)}
.tile.on .hov .m:nth-child(2)>span{transition-delay:.07s}
.tile.on .hov .m:nth-child(3)>span{transition-delay:.14s}
.hov .go{position:absolute;top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);font-family:var(--f-hand);font-size:clamp(18px,1.6vw,24px);color:var(--red);transform:rotate(-6deg) scale(.4);opacity:0;transition:transform .5s cubic-bezier(.25,2.2,.45,1) .15s,opacity .2s .15s}
.tile.on .hov .go{transform:rotate(-6deg) scale(1);opacity:1}
@media (max-width:719px){.tile{--s:1.02}}
@media (prefers-reduced-motion:reduce){.tile,.tile.on{transform:none}.tile .pic{transform:none}.tile.on img,.tile.on video{transform:none}.hov .m>span{transform:none}}
.tile .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;color:var(--muted);text-align:center;padding:16px;background:repeating-linear-gradient(135deg,var(--panel) 0 14px,#16161a 14px 28px)}
.tile .ph b{font-family:var(--f-display);font-size:22px;color:var(--fg)}
.tile .ph span{font-family:var(--f-mono);font-size:11.5px}
.tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:end;gap:10px;padding:14px 16px 12px;background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
.tile .cap b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(16px,1.7vw,24px);letter-spacing:-.01em;line-height:1.05}
.tile .cap span{font-size:12.5px;color:#d6d4ce}
.tag{font-family:var(--f-mono);font-size:10.5px;color:var(--note);white-space:nowrap}
.film{position:absolute;top:10px;left:10px;font-family:var(--f-mono);font-size:10.5px;background:rgba(0,0,0,.6);padding:3px 7px;border-radius:2px}
.wallNote{position:absolute;right:calc(var(--gut) + 8px);bottom:16px;z-index:8}
@media (max-width:719px){
  .frame{position:relative;height:auto;overflow:visible}
  .cols{display:block}
  .col{display:flex;gap:14px;margin-bottom:14px;transform:none!important}
  .col.a{padding-top:0}
  .wallNote{position:static;margin:4px var(--gut) 16px}
}

.sec{padding-block:clamp(56px,9vh,110px) 0}
.secTop{display:flex;justify-content:space-between;align-items:start;gap:20px;flex-wrap:wrap}
.list{margin-top:22px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(120px,1.1fr) 2.2fr 1.2fr auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.row b{font-family:var(--f-display);font-weight:800;letter-spacing:-.01em}
.row .t{min-width:0}
.row .ag{color:var(--muted);font-size:14px}
.row a{font-size:14px;text-decoration:none;white-space:nowrap}
.row a:hover{color:var(--red)}
@media (max-width:640px){.row{grid-template-columns:1fr auto}.row .t,.row .ag{grid-column:1/-1}}

.about{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:24px}
.about img{width:100%;height:auto;display:block;border:1px solid var(--line);background:#000}
.about p{max-width:60ch;margin:0 0 14px}
.about .big2{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.015em;line-height:1.1;margin-bottom:18px}
@media (max-width:760px){.about{grid-template-columns:1fr}.about img{max-width:240px}}

.brands{margin-top:clamp(56px,9vh,110px);border:1.5px dashed var(--muted);padding:clamp(20px,3vw,36px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brands p{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.015em;line-height:1.1;max-width:22ch}
.btn{font-family:var(--f-body);font-weight:600;font-size:15px;background:var(--fg);color:var(--bg);border:0;padding:12px 18px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:none;color:var(--fg);border:1.5px solid var(--fg)}
.contact{padding-block:clamp(64px,10vh,120px) 40px}
.contact h2{font-family:var(--f-display);font-weight:800;font-size:clamp(46px,8vw,120px);letter-spacing:-.035em;line-height:.92;margin:0 0 22px}
.contact .btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.contact .wa{font-family:var(--f-mono);font-size:14px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px dashed var(--line);margin-top:56px;padding-top:18px;color:var(--muted);font-size:13px}

/* case view */
.case{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
.caseBar{position:sticky;top:0;display:flex;gap:10px;justify-content:flex-end;padding-block:14px;background:var(--bg);border-bottom:1px dashed var(--line);z-index:2}
.caseBar button{font-family:var(--f-body);font-size:14px;color:var(--fg);background:none;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.caseBar button:hover{border-color:var(--fg)}
.caseBody{max-width:1100px;margin:0 auto;padding-block:28px 64px}
.caseBody h2{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,5vw,72px);letter-spacing:-.03em;line-height:.95;margin:0 0 24px}
.caseBody h2 span{color:var(--muted)}
.cmedia{width:100%;max-width:100%;background:#000;border:1px solid var(--line);overflow:hidden}
.cmedia video,.cmedia img{display:block;width:100%;height:100%;object-fit:cover}
.cmedia .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;color:var(--muted);background:repeating-linear-gradient(135deg,var(--panel) 0 14px,#16161a 14px 28px)}
.marquee{overflow:hidden;white-space:nowrap;margin:20px 0 22px;border-block:1px solid var(--line);padding-block:12px}
.mq{display:inline-flex;animation:mq 26s linear infinite}
.mq span{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,3.6vw,52px);letter-spacing:-.02em;padding-right:.5em}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq{animation:none}}
.facts{margin:0;padding-left:1.4em;display:grid;gap:14px;max-width:62ch;font-size:clamp(16px,1.5vw,19px)}
.facts li::marker{font-family:var(--f-mono);color:var(--red)}
.facts li.todo{color:var(--note)}
.caseBody .note{margin-top:22px}
.tile video{display:block;width:100%;height:100%;object-fit:cover}

/* launch: real site */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1.eyebrow{font-weight:400}
.foot a{color:var(--muted);text-decoration:none}.foot a:hover{color:var(--fg)}
.foot .links{display:flex;gap:14px;flex-wrap:wrap}
.caseBody h1{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,5vw,72px);letter-spacing:-.03em;line-height:.95;margin:0 0 24px}
.caseBody h1 span{color:var(--muted)}
@media (min-width:1000px){#caseBody h1{font-size:clamp(30px,3.4vw,58px);margin-bottom:16px}}
.casePage .caseBar a{font-family:var(--f-body);font-size:14px;color:var(--fg);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none}
.casePage .caseBar a:hover{border-color:var(--fg)}
.casePage .caseBar{position:static;justify-content:space-between}
.casePage .caseBar .r{display:flex;gap:10px}
.more{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}