/* ============================================================
   KOJO AND HARRY — prototype v0.1
   Hero + vault dial. Dark canvas, heavy compressed type,
   3D-crew world. Placeholders where renders/GIF will drop in.
   ============================================================ */

:root{
  --bg:#000000;
  --ink:#f3f1ea;
  --muted:#8b8b86;
  --line:#2a2a2c;
  --blue:#6478ff;          /* brighter electric blue, readable against black */
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 26px;
  mix-blend-mode:difference;
}
.nav__brand{font-family:"Anton";font-size:20px;letter-spacing:.5px}
.nav__links{display:flex;gap:26px}
.nav__links a{font-size:12px;letter-spacing:.18em;font-weight:600;opacity:.85}
.nav__links a:hover{opacity:1}
.theme-light .nav{mix-blend-mode:normal;color:var(--ink)}
.nav__sound{
  display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  color:var(--ink);font-family:"Archivo";font-size:11px;letter-spacing:.18em;font-weight:600;
}
.nav__sound .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:.3s}
.nav__sound.is-on .dot{background:var(--blue);box-shadow:0 0 10px var(--blue)}

/* ---------- landing: the awkward handshake (white canvas) ---------- */
.land{
  min-height:100vh;background:#ffffff;color:#0a0a0a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2vh;text-align:center;padding:9vh 26px 5vh;
}
.land__tag,.land__word{
  font-family:"Anton";text-transform:uppercase;line-height:.86;letter-spacing:.005em;color:#0a0a0a;
}
.land__tag{font-size:clamp(20px,5.4vw,78px);margin:0;white-space:nowrap}
.land__tag .gw{color:#0a0a0a;text-decoration:none;transition:color .25s;display:inline-block}
/* CRAZY — blue, with a slight glitch */
.land__tag .gw[data-g="crazy"]:hover{color:var(--blue);animation:gwGlitch .45s steps(2,end) infinite}
@keyframes gwGlitch{
  0%{text-shadow:none;transform:translate(0)}
  25%{text-shadow:-2px 0 #e22f24,2px 0 #2f47ff;transform:translate(1px,-1px)}
  50%{text-shadow:2px 0 #e22f24,-2px 0 #2f47ff;transform:translate(-1px,1px)}
  75%{text-shadow:-1px 0 #2f47ff,1px 0 #e22f24;transform:translate(1px,0)}
  100%{text-shadow:none;transform:translate(0)}
}
/* SMART — blue, with a soft glow */
.land__tag .gw[data-g="smart"]:hover{color:var(--blue);animation:gwGlow 1.3s ease-in-out infinite}
@keyframes gwGlow{
  0%,100%{text-shadow:0 0 6px rgba(47,71,255,.45)}
  50%{text-shadow:0 0 22px rgba(47,71,255,.9),0 0 4px rgba(47,71,255,.7)}
}
/* HEART — red, with a slight pulse */
.land__tag .gw[data-g="heart"]:hover{color:#e22f24;animation:gwPulse .8s ease-in-out infinite}
@keyframes gwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.land__word{font-size:clamp(34px,7.5vw,108px);margin:0}
.land__img{width:108vw;margin:0 0 0 calc(50% - 54vw);overflow:hidden}
.land__img img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.land__cue{margin-top:1.5vh;font-size:11px;letter-spacing:.25em;color:#888}
.land__cue:hover{color:#000}
@media(max-width:620px){.land__br{display:none}}

/* ---------- work index ---------- */
main{position:relative;z-index:5;background:var(--bg)}
.work{padding:90px 26px 40px;max-width:1300px;margin:0 auto}
.work__head{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:8px}
.work__title{font-family:"Anton";font-size:clamp(22px,3vw,34px);letter-spacing:.04em}
.groups{display:flex;gap:6px;flex-wrap:wrap}
.gbtn{
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:"Archivo";font-weight:700;font-size:11px;letter-spacing:.16em;
  padding:8px 14px;border-radius:40px;transition:.25s;
}
.gbtn:hover{color:var(--ink);border-color:var(--muted)}
.gbtn.is-active{background:var(--ink);color:#000;border-color:var(--ink)}
.witem.is-hidden{display:none}
/* big renders, bold caps beside them */
.worklist{display:flex;flex-direction:column}
.witem{
  display:flex;align-items:center;gap:40px;
  min-height:34vh;padding:28px 4px;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);
}
.witem__fig{position:relative;flex:0 0 38%;height:32vh;display:flex;align-items:center;justify-content:center;margin:0}
.witem__media{
  max-height:100%;max-width:100%;width:auto;object-fit:contain;display:block;
  transition:transform .55s var(--ease);
}
.witem__award{
  position:absolute;right:clamp(2px,2vw,28px);bottom:10%;
  width:clamp(48px,5.5vw,76px);height:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.34));
  transform:rotate(4deg);transition:transform .55s var(--ease);
}
.witem__title{
  flex:1;font-family:"Anton";text-transform:uppercase;
  line-height:1.02;letter-spacing:.005em;
  font-size:clamp(34px,6.4vw,96px);color:var(--ink);
  transition:color .4s var(--ease),transform .55s var(--ease);
}
.witem:hover .witem__media{transform:scale(1.06)}
.witem:hover .witem__award{transform:rotate(0) scale(1.05)}
.witem:hover .witem__title{color:var(--blue);transform:translateX(10px)}
@media(max-width:760px){
  .witem{flex-direction:column;gap:14px;align-items:flex-start;min-height:0;padding:34px 4px}
  .witem__fig{flex:none;width:66%;height:28vh;justify-content:flex-start}
  .witem__award{right:-8px;bottom:8%;width:clamp(46px,14vw,64px)}
  .witem__title{font-size:clamp(38px,12vw,72px)}
  .witem:hover .witem__title{transform:none}
}

/* ---------- about / footer ---------- */
.about{margin:0 auto}
.about--compact{padding:clamp(84px,9vw,120px) 26px;max-width:1100px}
.about__big{font-weight:600;font-size:clamp(22px,3.4vw,46px);line-height:1.25}
.about__big em{font-family:"Pirata One";font-style:normal;color:var(--blue)}
.about__big strong{color:var(--ink)}
.who{position:relative;display:inline-block}
.who img{
  position:absolute;bottom:115%;left:50%;width:130px;height:130px;border-radius:50%;object-fit:cover;
  transform:translateX(-50%) scale(.6);transform-origin:bottom center;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.who:hover img,.who:focus-visible img{opacity:1;transform:translateX(-50%) scale(1)}

.about-page__main{min-height:100vh}
.about--detail{padding:clamp(96px,9vw,132px) 26px clamp(88px,10vw,140px);max-width:1180px}
.about__head{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:clamp(42px,5vw,64px)}
.about__title{font-family:"Anton";font-size:clamp(22px,3vw,34px);letter-spacing:.04em}
.about__people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,72px);max-width:980px;margin:0 auto}
.about-person{text-align:center}
.about-person__character{aspect-ratio:4/5;margin:0 auto;overflow:hidden;background:#000;max-width:430px}
.about-person__character img{width:100%;height:100%;object-fit:cover;display:block}
.about-person--kojo .about-person__character img{object-position:20% center}
.about-person--harry .about-person__character img{object-position:80% center}
.about-person__name{
  font-family:"Anton";font-size:clamp(36px,4.3vw,54px);font-weight:400;line-height:1;
  letter-spacing:.01em;margin-top:clamp(22px,2.5vw,32px);text-align:center;
}
.about-person__bio{
  display:grid;gap:11px;border-top:1px solid var(--line);padding-top:20px;
  width:min(100%,42ch);margin:16px auto 0;
}
.about-person__bio p{font-size:clamp(15px,1.3vw,17px);line-height:1.48;color:var(--muted);text-align:center}
.about-person__bio p:first-child{color:var(--ink);font-weight:600}
.bio-link{
  font-family:"Pirata One";font-size:1.14em;line-height:1;color:var(--ink);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.14em;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.bio-link:hover,.bio-link:focus-visible{color:var(--blue);text-decoration-color:currentColor}
.person-link{transition:color .2s ease}
.about-person__name .person-link:hover,.about-person__name .person-link:focus-visible{color:var(--blue)}
.about__together{
  border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,42px);
  width:min(100%,920px);margin:clamp(82px,9vw,120px) auto 0;text-align:center;
}
.about__together-label{font-size:10px;letter-spacing:.24em;font-weight:600;color:var(--blue)}
.about__together-copy{display:grid;justify-items:center;gap:16px;margin-top:clamp(22px,2.5vw,30px)}
.about__together-copy>p:not(.about__belief){font-size:clamp(16px,1.55vw,20px);line-height:1.45;max-width:62ch;text-align:center}
.about__belief{
  font-family:"Anton";font-size:clamp(34px,5vw,64px);font-weight:400;line-height:1.03;
  letter-spacing:.005em;text-transform:uppercase;margin-top:clamp(18px,2.5vw,28px);max-width:14ch;text-align:center;
}
.about__belief .gw{display:inline-block;transition:color .25s,transform .25s}
.about__belief .gw[data-g="crazy"]:hover{color:var(--blue);animation:gwGlitch .45s steps(2,end) infinite}
.about__belief .gw[data-g="smart"]:hover{color:var(--blue);animation:gwGlow 1.3s ease-in-out infinite}
.about__belief .gw[data-g="heart"]:hover{color:#e22f24;animation:gwPulse .8s ease-in-out infinite}
@media(max-width:760px){
  .about--compact,.about--detail{padding-inline:18px}
  .about__people{grid-template-columns:1fr;gap:82px}
  .about-person__character{aspect-ratio:4/5;width:min(100%,420px)}
  .about__together{margin-top:96px}
  .about__together-copy{gap:15px}
}
.foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:30px 26px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;color:var(--muted);
}
.foot a:hover,.foot a:focus-visible{color:var(--ink)}

/* ============================================================
   CASE STUDY PAGE
   Black opening, project colour story, black closing navigation.
   ============================================================ */
.project-page{background:#000;color:#f3f1ea}
.case{width:100%;background:#000;color:#f3f1ea}
.case__shell{min-height:100vh;background:#000}
.case__inner{max-width:1160px;margin:0 auto;padding:110px 32px 8vh}
.case__back{
  display:inline-flex;gap:8px;align-items:center;margin-bottom:40px;
  font-size:11px;letter-spacing:.2em;font-weight:600;color:#8b8b86;
}
.case__back:hover{color:#f3f1ea}

/* Every project opens on the same black canvas. */
.case__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,96px);align-items:center;min-height:calc(100vh - 220px)}
.case__render{margin:0;display:flex;align-items:center;justify-content:center}
.case__render img,.case__render video{max-height:62vh;max-width:100%;width:auto;object-fit:contain;display:block}
.case__intro{max-width:460px}
.case__eyebrow{font-size:11px;letter-spacing:.22em;font-weight:600;color:#8fa0ff;margin-bottom:16px}
.case__eyebrow:empty,.case__smp:empty{display:none}
.case__title{font-family:"Anton";font-size:clamp(42px,6.2vw,84px);line-height:.92;letter-spacing:.005em}
.case__smp{font-family:"Pirata One";font-size:clamp(22px,2.6vw,36px);line-height:1.08;margin-top:18px;color:#f3f1ea;max-width:19ch}
.case__award{width:64px;margin:22px 0 0}
.case__award[hidden]{display:none}
.case__award img{width:100%;height:auto;display:block}
@media(max-width:760px){
  .case__inner{padding-top:92px}
  .case__hero{grid-template-columns:1fr;min-height:0;gap:28px;text-align:left}
  .case__render img,.case__render video{max-height:46vh}
}
.case__missing{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:800px;margin:0 auto;padding:110px 26px}

/* The story begins with one hard colour cut. */
.case__story{
  --ink:var(--story-ink,#f3f1ea);
  --muted:var(--story-muted,#8b8b86);
  --line:var(--story-line,rgba(255,255,255,.16));
  --blue:var(--story-accent,#6478ff);
  background:var(--story-bg,#101010);color:var(--ink);
}
.story{display:flex;flex-direction:column;max-width:1160px;margin:0 auto;padding:clamp(54px,7vw,96px) 32px clamp(80px,10vw,140px)}
.blk{margin:0 auto;padding:clamp(32px,4vw,56px) 0;width:100%}
.blk.is-medium{max-width:880px}
.blk.is-compact{max-width:680px}

/* Insight and idea are the shared story spine. */
.blk-lead{
  display:grid;grid-template-columns:minmax(120px,160px) minmax(0,680px);
  column-gap:clamp(32px,6vw,80px);align-items:start;margin:0;
  padding:clamp(38px,5vw,68px) 0;
}
.blk-lead + .blk-lead{border-top:1px solid var(--line)}
.blk-lead .blk-k,.blk-note .blk-k{
  display:block;font-size:10px;letter-spacing:.24em;font-weight:600;color:var(--blue);margin-top:5px;
}
.blk-lead p{font-size:clamp(20px,2.1vw,29px);line-height:1.38;letter-spacing:-.018em;max-width:34ch}
.blk-idea p{font-family:"Archivo"}
.blk-idea .blk-k{color:var(--blue)}

/* a section header (e.g. OUT OF HOME) */
.blk-head{padding:18px 0 10px;border-top:1px solid var(--line);margin-top:clamp(48px,7vw,96px)}
.blk-head h2{font-family:"Anton";font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(22px,2.5vw,34px);line-height:1;color:var(--ink)}

/* a format label that remains inside the current branded one-off */
.blk-subhead{padding:clamp(24px,3vw,38px) 0 0}
.blk-subhead h3{font-size:11px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* a quiet connective line */
.blk-note-line{max-width:680px;padding:28px 0;margin-left:calc(min(160px,14vw) + clamp(32px,6vw,80px));margin-right:auto}
.blk-note-line p{font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--muted);letter-spacing:.005em}

/* big pull statement */
.blk-statement{padding:11vh 0;text-align:center}
.blk-statement p{font-family:"Pirata One";font-size:clamp(48px,11vw,150px);line-height:.92;color:var(--ink)}

/* embedded film (YouTube / Vimeo / Drive) */
.blk-embed{padding:clamp(34px,4vw,56px) 0}
.embed-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--line)}
.embed-wrap iframe,.embed-wrap>video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:contain}
.embed-wrap--custom iframe,.embed-wrap--custom>video{pointer-events:none}
.media-toggle{
  position:absolute;z-index:2;left:50%;top:50%;width:clamp(54px,5vw,68px);height:clamp(54px,5vw,68px);
  display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  background:rgba(0,0,0,.48);color:#fff;cursor:pointer;
  transform:translate(-50%,-50%);transition:background .2s ease,transform .2s ease,opacity .2s ease;
}
.media-toggle svg{width:25px;height:25px;fill:currentColor}
.media-toggle__pause{display:none}
.media-toggle[data-playing="true"] .media-toggle__play{display:none}
.media-toggle[data-playing="true"] .media-toggle__pause{display:block}
.media-toggle:hover{background:rgba(0,0,0,.78);transform:translate(-50%,-50%) scale(1.05)}
.media-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.media-toggle:disabled{cursor:wait;opacity:.45}
.media-toggle.is-idle{opacity:0;pointer-events:none}

/* full-width execution, breathing */
.blk-full{padding:clamp(30px,4vw,52px) 0}
.blk-full img,.blk-full video{width:100%;height:auto;max-height:82vh;object-fit:contain;display:block}
.blk-full video,.blk-bleed video{background:#000}

/* Deck-faithful 16:9 pages with enough room to read as individual moments. */
.blk.blk-deck{position:relative;z-index:0;padding:clamp(32px,4vw,60px) 0}
.blk-deck:first-child{padding-top:0}
.blk-deck img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.blk-deck.is-dark::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:#000;
}
.blk-deck.is-dark:last-child::before{bottom:calc(-1 * clamp(80px,10vw,140px))}

/* edge to edge in width, natural height so the whole frame shows */
.blk-bleed{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  margin-top:8vh;margin-bottom:8vh;
  padding:0;max-height:92vh;overflow:hidden;
}
.blk-bleed img,.blk-bleed video{
  width:100%;height:auto;max-height:92vh;object-fit:contain;display:block;
}
.blk-bleed .cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;max-width:none;
  padding:22px 26px;color:#fff;font-size:14px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
}

/* a poster, alone, centred, given room */
.blk-poster{padding:clamp(40px,6vw,78px) 0;display:flex;flex-direction:column;align-items:center}
.blk-poster img{max-height:76vh;width:auto;height:auto;max-width:min(480px,100%);object-fit:contain;display:block}

/* a small set of posters together */
.blk-posters{padding:clamp(32px,4vw,56px) 0}
.blk-posters .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start;max-width:880px;margin:0 auto}
.blk-posters .row img{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block}
.blk-posters.is-mixed .row{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center}
.blk-posters.is-three .row{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px}

/* One Offs behaves as a gallery: each brand label sits the same distance from its artwork. */
.case__story[data-project-id="one-offs"] .blk-head + .blk-full,
.case__story[data-project-id="one-offs"] .blk-head + .blk-poster,
.case__story[data-project-id="one-offs"] .blk-head + .blk-posters,
.case__story[data-project-id="one-offs"] .blk-head + .blk-embed{
  padding-top:clamp(22px,2.6vw,34px);
}

/* Award artwork stays visual and understated. */
.blk-award{display:flex;justify-content:center;padding:7vh 0 2vh}
.blk-award img{width:clamp(74px,9vw,118px);height:auto;display:block}

/* O2 product and the exact QR from the deck. */
.blk-qr{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,240px);gap:clamp(24px,5vw,64px);align-items:center}
.blk-qr__work{width:100%;height:auto;display:block}
.blk-qr__code{width:100%;height:auto;display:block;background:#fff;padding:10px}
@media(max-width:680px){
  .blk-qr{grid-template-columns:1fr}
  .blk-qr__code{width:min(220px,62vw)}
}

/* a contextual note — small image + text, never shouting */
.blk-note{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;padding:6vh 0;max-width:900px}
.blk-note figure{margin:0}
.blk-note img{width:100%;height:auto;border:1px solid var(--line);display:block}
.blk-note p{font-size:clamp(15px,1.8vw,20px);line-height:1.4;color:var(--muted)}
@media(max-width:680px){.blk-note{grid-template-columns:1fr;gap:16px}}

/* captions */
.cap{margin-top:14px;font-size:12px;line-height:1.5;letter-spacing:.01em;color:var(--muted);max-width:54ch}
.blk-poster .cap,.blk-posters .cap,.blk-statement + .cap{text-align:center;margin-left:auto;margin-right:auto}

.case__closing{background:#000;color:#f3f1ea}
.case__nav{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  max-width:1160px;margin:0 auto;padding:70px 32px 46px;border-top:1px solid #2a2a2c;
}
.case__nav a{display:flex;flex-direction:column;gap:6px}
.case__nav .lab{font-size:10px;letter-spacing:.2em;color:#8b8b86;font-weight:600}
.case__nav .nm{font-family:"Anton";font-size:clamp(22px,4vw,40px)}
.case__nav .next{text-align:right}
.case__nav a:hover .nm{color:#6478ff}

@media(max-width:480px){
  .nav{padding:14px 16px}
  .nav__brand{font-size:17px;white-space:nowrap}
  .nav__links{gap:14px}
  .nav__links a{font-size:10px}
  .nav__sound{display:none}
  .foot{padding-inline:16px;line-height:1.7}
}

@media(max-width:760px){
  .case__inner{padding-inline:18px}
  .case__intro{max-width:100%}
  .case__title{font-size:clamp(40px,14vw,66px)}
  .case__smp{font-size:clamp(22px,7vw,32px)}
  .story{padding:44px 18px 80px}
  .blk{padding:28px 0}
  .blk-lead{grid-template-columns:1fr;row-gap:14px;padding:34px 0}
  .blk-lead .blk-k{margin-top:0}
  .blk-lead p{font-size:clamp(19px,5.8vw,24px);max-width:31ch}
  .blk-note-line{margin-left:0}
  .blk-head{margin-top:42px;padding-top:14px}
  .blk-posters.is-mixed .row{grid-template-columns:1fr 1.35fr}
  .blk-posters.is-three .row{grid-template-columns:1fr;max-width:min(420px,100%)}
  .case__nav{padding-inline:18px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}