/* ==========================================================================
   Mikki Sindhunata — static clone stylesheet
   Reconstructed from the live site's compiled theme CSS (Autoptimize bundles).
   Uses a fluid, viewport-based type scale similar to the original theme.
   ========================================================================== */

:root{
  --c-black:#1e1e1e;
  --c-bg-panel:#1e1e1e;
  --c-text:#e8e8e8;
  --c-gold:#c19a5b;
  --c-green:#13e800;
  --font-display:"Anton SC", sans-serif;
  --font-mono:"B612 Mono", monospace;
  --font-body:"Poppins", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}
/* Content pages (Works/Archive/About/Contact/Cookies) run a fully
   inverted "light" theme on the real site — light background, dark text,
   dark-outlined nav pills — while the video-hero homepage stays dark.
   Swapping the two role variables re-themes almost everything for free
   since the rest of the stylesheet is built on top of them. */
body.light{
  --c-black:#e8e8e8;
  --c-text:#1e1e1e;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Stops the rubber-band overscroll at the top/bottom of the page, which
   otherwise pulls the content away and exposes html's black backdrop. */
html,body{overscroll-behavior-y:none;}

html{
  font-size:.85vw;
  background:#000;
}
@media all and (max-width:1080px){
  html{font-size:1.35vw;}
}
@media all and (max-width:580px){
  html{font-size:3.2vw;}
}

body{
  font-family:var(--font-mono);
  background:var(--c-black);
  color:var(--c-text);
  line-height:1.25;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
html.noscroll,body.noscroll{overflow:hidden;height:100%;}

a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
img,video{max-width:100%;display:block;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}

/* ---------- shared type ---------- */
.bigTitle{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:5rem;
  line-height:.92;
}
.bigTitle .left,.bigTitle .right{display:block;}
.bigTitle.smaller{font-size:3.6rem;}
.subTitle{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:1rem;
  color:var(--c-gold);
}
.subTitle.bigger{font-size:1.3rem;}
.text{font-size:1rem;line-height:1.5;}
.text.bigger{
  font-family:var(--font-body);
  font-weight:900;
  font-size:1.55rem;
  line-height:1.35;
}
.contentWrapper{padding:0 1.875vw;margin:0 auto;}
.contentWrapper.smaller{padding:0 10vw;}
.contentWrapper.small{padding:0 26.25vw;}
.contentWrapper.smallest{padding:0 34.375vw;}

@media all and (max-width:580px){
  .contentWrapper,.contentWrapper.small,.contentWrapper.smaller{padding:0 6vw;max-width:none;}
  .bigTitle{font-size:11vw;}
}

/* reveal-on-scroll (IntersectionObserver driven) */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].inview{opacity:1;transform:translateY(0);}
[data-reveal-stagger] > *{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
[data-reveal-stagger].inview > *{opacity:1;transform:translateY(0);}
[data-reveal-stagger].inview > *:nth-child(1){transition-delay:.05s;}
[data-reveal-stagger].inview > *:nth-child(2){transition-delay:.12s;}
[data-reveal-stagger].inview > *:nth-child(3){transition-delay:.19s;}
[data-reveal-stagger].inview > *:nth-child(4){transition-delay:.26s;}
[data-reveal-stagger].inview > *:nth-child(5){transition-delay:.33s;}
[data-reveal-stagger].inview > *:nth-child(n+6){transition-delay:.4s;}

/* ---------- buttons / links ---------- */
/* Verified against the real CSS: the base .button class does NOT force
   uppercase — only .button.upper and .button.smaller do. Plain nav pills
   ("Home", "Works", etc.) render in their natural title-case text. */
.button{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.9rem;
  line-height:2.6rem;
  padding:0 1.6rem;
  border:1px solid var(--c-text);
  border-radius:2rem;
  color:var(--c-text);
  cursor:pointer;
  transition:background .3s,color .3s;
}
.button:hover{background:var(--c-text);color:var(--c-black);}
.button.upper,.button.smaller{text-transform:uppercase;}
.textLink{
  color:var(--c-text);
  text-transform:uppercase;
  text-decoration:underline;
  opacity:1;
  transition:opacity .3s;
}
.textLink:hover{opacity:.6;}

.circlesWrapper .circles{display:inline-flex;vertical-align:middle;}
.circle{
  width:1.2rem;height:1.2rem;border-radius:50%;
  background:var(--c-text);
  display:inline-block;
  margin-left:-.3rem;
}
.circle:first-child{margin-left:0;}

/* ==========================================================================
   Header
   ========================================================================== */
header{position:fixed;top:0;left:0;width:100%;z-index:100;}
.headerBar{
  position:relative;
  height:6rem;
  display:flex;
  align-items:center;
}
.headerBar .headerOverlay{
  position:absolute;inset:-20% 0 auto 0;height:150%;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  -webkit-mask-image:linear-gradient(#000 0%,transparent 100%);
  mask-image:linear-gradient(#000 0%,transparent 100%);
  opacity:0;transition:opacity .3s;
  z-index:-1;
}
header.scrolled .headerBar .headerOverlay{opacity:1;}
.headerBar .innerBar{width:100%;}
/* 1.875vw matches the hero's edge padding exactly (title/about/navigator
   all use the same value) so the nav lines up with MIKKI / SINDHUNATA. */
.headerBar .contentWrapper{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.875vw;max-width:none;
}
.headerBar .left,.headerBar .right{flex:1 1 0;display:flex;}
.headerBar .right{justify-content:flex-end;}
.headerBar .left ul,.headerBar .right ul{display:flex;gap:1.4rem;}
.headerBar .menuLink{
  position:relative;
  font-family:var(--font-mono);
  font-size:.85rem;
  line-height:2.6rem;
  padding:0 1.4rem;
  border:1px solid var(--c-text);
  border-radius:2rem;
  transition:background .3s,color .3s;
}
.headerBar .menuLink:hover,.headerBar .menuLink.currentItem{
  background:var(--c-text);color:var(--c-black);
}
/* .label is the (invisible) text source used by the scramble-text JS;
   .initLabel is the actual visible, absolutely-centered text it animates. */
.headerBar .menuLink .label{opacity:0;}
.headerBar .menuLink .initLabel{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;white-space:nowrap;
}
.headerBar .center{flex:0 0 auto;}
/* The "HENRY" wordmark is 5 separate letter SVGs (see data-anim), each
   sharing the same 0 0 688.77 813.6 canvas and absolutely stacked, with
   each glyph's path pre-translated to its own spot on that canvas
   (tight H/E pair top row, wide N...R spread middle row, Y bottom row)
   so it reproduces the same tight/wide/tight rhythm as the original
   MIKKI mark's M/I, K...K, I stack. */
#logo{width:2.6rem;aspect-ratio:688.77/813.6;height:auto;position:relative;display:inline-block;}
#logo a{display:block;position:absolute;left:0;top:0;height:100%;width:100%;transition:opacity .3s;}
#logo a:hover{opacity:.6;}
#logo .letterContainer,
#introContainer .centerContent .letterContainer{position:absolute;left:0;top:0;height:100%;width:100%;}
#logo svg{width:100%;height:auto;display:block;}
#logo svg path{fill:var(--c-text);}

#hamburger{display:none;cursor:pointer;padding:.6rem;border:none;border-radius:0;background:none;}
#hamburger:hover{background:none;}
#hamburger .bars{display:inline-flex;flex-direction:column;gap:.3rem;width:1.4rem;vertical-align:middle;margin-left:.5rem;}
#hamburger .bar{height:1px;width:100%;background:var(--c-text);transition:transform .3s,opacity .3s;}
#hamburger.active .bar:first-child{transform:translateY(.35rem) rotate(45deg);}
#hamburger.active .bar:last-child{transform:translateY(-.35rem) rotate(-45deg);}

/* hamburger fullscreen menu */
.hamburgerMenu{
  position:fixed;inset:0;z-index:99;
  background:var(--c-black);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.hamburgerMenu.active{opacity:1;pointer-events:all;}
.hamburgerMenu .innerContainer{width:100%;text-align:center;}
.hamburgerMenu ul{display:flex;flex-direction:column;gap:1rem;}
.hamburgerMenu .respMenuItem{
  font-family:var(--font-display);
  font-size:3rem;
  color:var(--c-text);
  opacity:.85;
  transition:opacity .3s,transform .5s var(--ease);
  transform:translateY(30px);
}
.hamburgerMenu.active .respMenuItem{transform:translateY(0);}
.hamburgerMenu .respMenuItem:hover{opacity:1;color:var(--c-gold);}

body.menuOpen{overflow:hidden;}

@media all and (max-width:1080px){
  .headerBar .left,.headerBar .right{display:none;}
  #hamburger{display:flex;align-items:center;}
  .headerBar .contentWrapper{justify-content:space-between;}
}

/* ==========================================================================
   Password gate (soft, client-side)
   Full-screen dark overlay above everything; JS removes it once unlocked.
   The inline <head> guard adds html.gate-ok to hide it instantly on already
   -unlocked navigations (no flash of the gate).
   ========================================================================== */
#passwordGate{
  position:fixed;inset:0;z-index:9999;
  background:#1e1e1e;color:#e8e8e8;
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .5s var(--ease);
}
html.gate-ok #passwordGate{display:none;}
html.gateLocked,html.gateLocked body{overflow:hidden;}
#passwordGate.unlocked{opacity:0;pointer-events:none;}
#passwordGate .gateInner{display:flex;flex-direction:column;align-items:center;width:min(80vw,22rem);}
#passwordGate .gateLogo{position:relative;width:5rem;aspect-ratio:688.77/813.6;margin-bottom:3rem;}
#passwordGate .gateLogo .letterContainer{position:absolute;left:0;top:0;width:100%;height:100%;}
#passwordGate .gateLogo svg{width:100%;height:auto;display:block;}
#passwordGate .gateLogo svg path{fill:#e8e8e8;}
#passwordGate .gateForm{
  display:flex;align-items:flex-end;gap:1rem;width:100%;
  border-bottom:1px solid rgba(232,232,232,.5);padding-bottom:.5rem;
}
#passwordGate .gateInput{
  flex:1 1 auto;min-width:0;background:none;border:none;outline:none;
  color:#e8e8e8;font-family:var(--font-mono);font-size:.95rem;letter-spacing:.05em;
}
#passwordGate .gateEnter{
  flex:0 0 auto;background:none;border:none;cursor:pointer;
  color:#e8e8e8;font-family:var(--font-mono);font-weight:700;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  transition:opacity .2s;
}
#passwordGate .gateEnter:hover{opacity:.6;}
#passwordGate .gateError{
  min-height:1.2em;margin-top:1.1rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:#e0736a;
  opacity:0;transition:opacity .2s;
}
#passwordGate.error .gateError{opacity:1;}
#passwordGate.error .gateForm{animation:gateShake .4s;}
@keyframes gateShake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-6px);}
  40%,80%{transform:translateX(6px);}
}

/* ==========================================================================
   Intro loader
   ========================================================================== */
#introContainer{
  position:fixed;inset:0;z-index:200;
  background:var(--c-black);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s var(--ease);
}
#introContainer.done{opacity:0;visibility:hidden;pointer-events:none;}
#introContainer .centerContent{
  position:relative;
  width:5.3rem;aspect-ratio:688.77/813.6;height:auto;
  transform:scale(.9);opacity:0;
  animation:introPop 1.1s var(--ease) forwards;
}
#introContainer svg{width:100%;height:auto;display:block;}
#introContainer svg path{fill:var(--c-text);}
@keyframes introPop{
  0%{opacity:0;transform:scale(.85);}
  60%{opacity:1;transform:scale(1.02);}
  100%{opacity:1;transform:scale(1);}
}

/* page fade-in per-page load */
/* No transform here (even translateY(0)) — a transform on this ancestor
   would make it the containing block for its position:fixed descendants
   (like .videoOverlay), sizing them to the page's full scroll height
   instead of the real viewport. Opacity-only fade avoids that trap. */
#pageContainer{position:relative;opacity:0;transition:opacity .6s var(--ease);}
#pageContainer.in{opacity:1;}

.pageBackgroundContainer{position:fixed;inset:0;z-index:-2;overflow:hidden;}
.pageBackground .innerBackground{width:100%;height:100%;background-size:cover;background-position:center;opacity:.15;filter:blur(2px);}

/* ==========================================================================
   Home hero (homeBlock)
   ========================================================================== */
/* Verified against the real CSS: footer is `position:absolute;bottom:0`
   relative to #pageContainer, not flowed in the document. It overlays the
   bottom of whatever content sits above it rather than pushing it up or
   adding scroll height. On the homepage this means the 100vh hero and the
   footer occupy the same single viewport with zero scroll (confirmed via
   JS on the live site: body.scrollHeight === window.innerHeight there). */
.homeBlockWrapper{position:relative;height:100vh;min-height:420px;overflow:hidden;background:#000;}
.homeBlock{position:absolute;inset:0;width:100%;}
.homeBlock .background{position:absolute;inset:0;}
.homeBlock .background .slide{
  position:absolute;inset:0;
  opacity:0;filter:blur(20px);
  transition:opacity .5s,filter .5s;
}
.homeBlock .background .slide.active{opacity:1;filter:blur(0);z-index:1;}
.homeBlock .background .slide .image,
.homeBlock .background .slide video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:center;
}
.homeBlock .background::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.75) 100%);
  z-index:2;pointer-events:none;
}

/* play button — dimensions/positions in vw to match the real site exactly.
   All three rings are visible (outlined, unfilled) at rest; hovering fills
   the innermost ring solid white with dark text — no rings appear/disappear
   on hover, only the fill + text color change. */
/* Top edge sits on the 50% line (X-only transform) so the hero button
   baselines with the .about copy and .navigator, which are positioned the
   same way. Contexts that need true centering (works cards) opt in below. */
.playButton{
  position:absolute;top:50%;left:50%;
  transform:translateX(-50%);
  width:14.8125vw;height:4.0625vw;
  z-index:5;cursor:pointer;
  color:var(--c-text);
  transition:color .3s;
}
.playButton:hover{color:var(--c-black);}
/* outerLine = pure size/center-position wrapper; innerLine carries the
   visible border/fill and is the element the cursor-magnet JS moves
   independently, so each ring can drift a different amount. */
.playButton .outerLine1,.playButton .outerLine2,.playButton .outerLine3{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.playButton .outerLine1{width:100%;height:100%;}
.playButton .outerLine2{width:9.1875vw;height:3.4375vw;}
.playButton .outerLine3{width:4.4375vw;height:2.8125vw;}
.playButton .innerLine{
  width:100%;height:100%;
  border:.0625vw solid var(--c-text);
  border-radius:3vw;
  transition:background .3s;
}
.playButton:hover .outerLine3 .innerLine{background:var(--c-text);}
.playButton .label{
  position:absolute;top:50%;left:50%;z-index:1;
  transform:translate(-50%,-50%);
  font-family:var(--font-mono);text-transform:uppercase;font-size:.75vw;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
}

/* title / about / navigator — 1.875vw is the hero's shared edge padding
   (matches header's contentWrapper) so everything lines up on the same
   left/right edges. Title sits flush under the header at full real size;
   about-text and navigator are vertically centered together. */
.homeBlock .titleWrapper{position:absolute;left:0;right:0;top:6rem;z-index:4;padding:0 1.875vw;}
/* Anton SC bakes a lot of empty space above the cap-height into its line
   metrics, so the wrapper's box can sit flush with the header yet the
   visible glyphs still render lower than expected. Pull them up, but not
   so far they run under the header. */
.homeBlock .titleWrapper .bigTitle{margin-top:0;}
.homeBlock .titleWrapper .contentWrapper{padding:0;max-width:none;}
.homeBlock .titleWrapper .bigTitle{color:var(--c-text);display:block;font-size:6.3vw;line-height:.9;}
.homeBlock .titleWrapper .bigTitle::after{content:"";display:block;clear:both;}
.homeBlock .titleWrapper .bigTitle .left,.homeBlock .titleWrapper .bigTitle .right{display:inline-block;vertical-align:top;}
.homeBlock .titleWrapper .bigTitle .right{float:right;}
.homeBlock .about{
  position:absolute;left:1.875vw;top:50%;z-index:4;
  display:flex;gap:3rem;width:20.625vw;
}
.homeBlock .about .col:first-child{flex:0 0 6rem;}
.homeBlock .about .subTitle{color:var(--c-text);font-family:var(--font-body);font-weight:900;font-size:.8rem;line-height:1.05;}
.homeBlock .about .col:last-child{max-width:24rem;}
.homeBlock .about .aboutText{margin-bottom:.75rem;text-transform:uppercase;font-size:.9rem;line-height:1.3;}

.navigator{
  position:absolute;top:50%;right:1.875vw;left:auto;bottom:auto;z-index:5;
  width:22.5vw;
}
/* Real layout: slideInfo (white bold label, no gold) sits on its own row;
   the progress bar and the prev/next buttons share the row below it,
   side by side — not stacked. Progress bar itself is a thick pill track
   with a white gradient fill, not a 1px line. */
.navigator{display:flex;flex-wrap:wrap;align-items:center;}
.navigator .slideInfo{flex:0 0 100%;margin-bottom:.75rem;overflow:hidden;}
.navigator .innerSlideInfo{display:flex;align-items:baseline;gap:.6rem;min-width:0;}
.navigator .counter{display:flex;gap:.25rem;color:var(--c-text);font-family:var(--font-body);font-weight:900;flex:0 0 auto;}
.navigator .slideName{
  font-family:var(--font-body);text-transform:uppercase;font-size:.85rem;font-weight:900;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.navigator .progressBar{position:relative;flex:1 1 8rem;height:.625vw;min-height:4px;cursor:pointer;}
.navigator .barWrapper{
  position:absolute;inset:0;border-radius:2vw;overflow:hidden;
  background:rgba(255,255,255,.2);
  transition:height .3s,margin-top .3s,background .3s;
}
.navigator .progressBar:hover .barWrapper{height:calc(100% + 1vw);margin-top:-.5vw;background:rgba(255,255,255,.4);}
.navigator .innerBar{
  position:relative;height:100%;width:0;
  background:linear-gradient(90deg,#fff 0%,#fff calc(100% - 3.75vw),rgba(255,255,255,0) 100%);
}
.navigator .innerDot{position:absolute;right:0;top:50%;width:.5rem;height:.5rem;border-radius:50%;background:var(--c-text);transform:translate(50%,-50%);}
.navigatorButtons{flex:0 0 auto;position:static;margin-left:.75rem;display:flex;gap:.75rem;}
.navigatorButton{
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid rgba(232,232,232,.4);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
  transition:background .3s,border-color .3s;
}
.navigatorButton:hover{background:var(--c-text);border-color:var(--c-text);}
.navigatorButton:hover svg path{stroke:var(--c-black);}
.navigatorButton svg{width:.6rem;height:auto;}
.navigatorButton svg path{stroke:var(--c-text);transition:stroke .3s;}

@media all and (max-width:1080px){
  .homeBlock .about{flex-direction:column;gap:1rem;width:32vw;}
}
@media all and (max-width:580px){
  .homeBlockWrapper{height:100svh;}
  .homeBlock .about{top:auto;bottom:7rem;left:6vw;width:auto;max-width:80vw;transform:none;padding-right:6vw;}
  .navigator{top:auto;bottom:1rem;right:6vw;left:6vw;width:auto;transform:none;}
  .navigator .slideInfo{min-width:0;}
}

/* ==========================================================================
   Video overlay (fullscreen player)
   ========================================================================== */
.videoOverlay{
  /* Always dark UI (white text/controls on black), regardless of whether
     it was opened from a body.light page — reset the theme variables
     locally so descendants don't inherit the swapped light-theme colors. */
  --c-black:#1e1e1e;
  --c-text:#e8e8e8;
  color:var(--c-text);
  position:fixed;inset:0;z-index:300;
  background:#000;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.96);filter:blur(10px);
  transition:opacity .3s,transform .3s,filter .3s,visibility .3s;
}
.videoOverlay.active{opacity:1;visibility:visible;pointer-events:all;transform:scale(1);filter:blur(0);}
.videoOverlay .background{position:absolute;inset:0;background:#000;}
.videoOverlay .videoWrapper,.videoOverlay .innerVideo{position:absolute;inset:0;}
/* cover, not contain — the video always fills the frame (no letter/pillarbox
   bars), cropping instead of shrinking as the window ratio changes. */
.videoOverlay .innerVideo video{width:100%;height:100%;object-fit:cover;background:#000;}
/* nowrap keeps long titles ("Candy Crush – Candy Cave") on a single line. */
.videoOverlay .videoInfo{position:absolute;top:3rem;left:3rem;z-index:2;white-space:nowrap;}
.videoOverlay .videoInfo .bigTitle{color:var(--c-text);}
.videoOverlay .videoInfo .text{color:var(--c-text);font-family:var(--font-body);font-weight:900;margin-top:.5rem;}
.videoOverlay .closeIndicator{
  position:absolute;top:2rem;right:2rem;z-index:3;
  width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:rgba(30,30,30,.5);
  transition:background .3s;
}
.videoOverlay .closeIndicator:hover{background:var(--c-text);}
.videoOverlay .closeIndicator .bars{position:relative;width:1.1rem;height:1.1rem;}
.videoOverlay .closeIndicator .bar{position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--c-text);}
.videoOverlay .closeIndicator .bar:first-child{transform:rotate(45deg);}
.videoOverlay .closeIndicator .bar:last-child{transform:rotate(-45deg);}
.videoOverlay .closeIndicator:hover .bar{background:var(--c-black);}
.videoOverlay .bottomContent{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.5rem 3rem;
  transition:opacity .4s;
}
/* Two rows: [icon + progress bar] on top, [circles/copyright  ...  Project
   Info] below it. .extraInfo is forced onto its own line via flex-basis;
   statusIcon + videoNavigator naturally fill row one between them. */
.videoOverlay .bottomContent .contentWrapper{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;padding:0;max-width:none;
}
.videoOverlay .extraInfo{flex:0 0 100%;margin-top:.15rem;}
.videoOverlay .statusIcon{width:1.5rem;cursor:pointer;}
.videoOverlay .statusIcon i{display:none;}
/* Icon shows the ACTION available, not the current state: while playing
   (no .pause class) show the pause icon; while paused show the play icon. */
.videoOverlay .statusIcon .icon-pause{display:block;}
.videoOverlay .statusIcon.pause .icon-pause{display:none;}
.videoOverlay .statusIcon.pause .icon-play{display:block;}

/* Idle auto-hide: while the video is playing and the cursor hasn't moved
   recently, fade the chrome out; any mousemove brings it back (see
   initVideoOverlayIdle in main.js). */
.videoOverlay .videoInfo,.videoOverlay .closeIndicator,.videoOverlay .playButton{transition:opacity .4s;}
.videoOverlay.idle .videoInfo,
.videoOverlay.idle .closeIndicator,
.videoOverlay.idle .playButton,
.videoOverlay.idle .bottomContent{opacity:0;pointer-events:none;}
.videoOverlay.projectInfoOpen .playButton{opacity:0;pointer-events:none;}
.videoOverlay .videoNavigator{flex:1 1 auto;}
.videoOverlay .videoNavigator .barWrapper{
  position:relative;height:.5vw;min-height:4px;border-radius:2vw;
  background:rgba(255,255,255,.2);overflow:hidden;cursor:pointer;
  transition:height .3s,margin-top .3s,background .3s;
}
.videoOverlay .videoNavigator .barWrapper:hover{background:rgba(255,255,255,.4);}
.videoOverlay .videoNavigator .innerBar{
  position:relative;height:100%;width:0;
  background:linear-gradient(90deg,#fff 0%,#fff calc(100% - 3.75vw),rgba(255,255,255,0) 100%);
}
.videoOverlay .videoNavigator .innerDot{
  position:absolute;right:0;top:50%;width:.5rem;height:.5rem;
  border-radius:50%;background:#fff;transform:translate(50%,-50%);
}
.videoOverlay .extraInfo{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-width:20rem;}
.videoOverlay .extraInfo .left{display:flex;align-items:center;gap:.75rem;}
.videoOverlay .extraInfo .openProjectInfo{font-size:.75rem;padding:0 1.2rem;line-height:2.8rem;}

/* Project info panel — slides up over the bottom of the video, light
   theme regardless of page (matches the real site's panel look).
   Height is content-driven so everything (copy + gallery) is visible at
   once with no scrolling; max-height is only a small-viewport safety net. */
.videoOverlay .projectInfo{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  height:auto;max-height:88%;
  background:#e8e8e8;color:#1e1e1e;
  transform:translateY(100%);
  transition:transform .4s var(--ease);
  overflow-y:auto;
}
.videoOverlay.projectInfoOpen .projectInfo{transform:translateY(0);}
.videoOverlay .projectInfo .contentWrapper{padding:3.5rem 3rem 2.5rem;max-width:none;}
.videoOverlay .projectInfo .closeIndicator{
  position:absolute;top:1.5rem;right:2rem;z-index:2;
  width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:rgba(30,30,30,.08);
  transition:background .3s;
}
.videoOverlay .projectInfo .closeIndicator:hover{background:#1e1e1e;}
.videoOverlay .projectInfo .closeIndicator .bars{position:relative;width:1.1rem;height:1.1rem;}
.videoOverlay .projectInfo .closeIndicator .bar{position:absolute;top:50%;left:0;width:100%;height:1px;background:#1e1e1e;}
.videoOverlay .projectInfo .closeIndicator .bar:first-child{transform:rotate(45deg);}
.videoOverlay .projectInfo .closeIndicator .bar:last-child{transform:rotate(-45deg);}
.videoOverlay .projectInfo .closeIndicator:hover .bar{background:#e8e8e8;}
.projectInfoGrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2.5rem;
}
.projectInfoCol h4{
  font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-size:.85rem;letter-spacing:.03em;margin:0 0 .75rem;
}
.projectInfoCol p{font-size:.95rem;line-height:1.5;margin:0;}
.projectGalleryLabel{
  font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-size:.85rem;letter-spacing:.03em;margin:2.5rem 0 1rem;
}
/* A justified row of even-height images. Each item's --grow is its image's
   aspect ratio (w/h, see main.js), so with flex-basis:0 every image settles
   at the SAME height and widths vary only by shape — nothing dominates.
   --capw caps each item's width at (rowHeightCap × ratio); when a sparse or
   tall row would otherwise stretch too tall to fill the width, every item
   hits its cap together (same height) and justify-content:center keeps the
   shorter row centred instead of leaving a gap.
   Hover grows the item's flex share (and its cap), so the image genuinely
   gets bigger and its neighbours give up width and slide — a real reflow,
   not a transform zoom. */
.projectGallery{
  display:flex;align-items:flex-start;justify-content:center;gap:1rem;
}
.projectGallery .galleryItem{
  flex-grow:var(--grow,1);flex-shrink:1;flex-basis:0;
  max-width:var(--capw,none);
  min-width:0;overflow:hidden;line-height:0;
  transition:flex-grow .45s var(--ease),max-width .45s var(--ease);
}
.projectGallery .galleryItem:hover{
  flex-grow:calc(var(--grow,1) * 1.225);
  max-width:calc(var(--capw,99999px) * 1.225);
}
.projectGallery img{display:block;width:100%;height:auto;}
@media all and (max-width:768px){
  .projectInfoGrid{grid-template-columns:1fr;gap:1.5rem;}
  .projectGallery{gap:.5rem;}
}

/* icon glyphs (inline svg substitutes for icomoon) */
.icon-play,.icon-pause,.icon-chevron-left,.icon-chevron-right{
  display:inline-flex;align-items:center;justify-content:center;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{position:absolute;left:0;right:0;bottom:0;background:transparent;z-index:2;}
/* .contentWrapper normally carries its own 1.875vw edge padding — zero it
   here so only .innerContainer's padding applies, otherwise the two stack
   and push the footer content in further than the title/about column. */
footer .contentWrapper{padding:0;max-width:none;margin:0;}
footer .innerContainer{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem 1.875vw;max-width:none;
  font-size:.8rem;text-transform:uppercase;
  flex-wrap:wrap;gap:1rem;
}
footer .left{display:flex;align-items:center;gap:.75rem;}
footer .divider{opacity:.5;margin:0 .3rem;}
footer .center{opacity:.7;}
footer .MVCopy{display:flex;align-items:center;gap:.5rem;opacity:.8;transition:opacity .3s;}
footer .MVCopy:hover{opacity:1;}
footer .MVLogo{width:1.4rem;height:auto;}
footer .MVLogo .cls-1{fill:var(--c-text);}
@media all and (max-width:580px){
  footer .innerContainer{padding:1.5rem 6vw 0;flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   Works page
   ========================================================================== */
.worksBlockWrapper{padding:4.5rem 0 4rem;min-height:100vh;}
.worksBlock .titleWrapper{margin-bottom:2rem;}
.worksBlock .titleWrapper .bigTitle{display:block;font-size:5.75rem;}
.worksBlock .titleWrapper .bigTitle::after{content:"";display:block;clear:both;}
.worksBlock .titleWrapper .bigTitle .left,.worksBlock .titleWrapper .bigTitle .right{display:inline-block;vertical-align:top;}
.worksBlock .titleWrapper .bigTitle .right{float:right;}
.worksBlock .innerWrapper{position:relative;}
.worksBlock .circlesWrapper{display:none;}
/* Real layout is percentage-width inline-block flow, NOT CSS grid — a
   .twoThird (66.66%) item wraps a .oneThird (33.33%) item onto the same
   line since they sum to 100%, which is how two items land per row. */
.worksBlock .projects{
  font-size:0;text-align:center;
  margin-top:5vw;margin-bottom:2.5vw;
  width:calc(100% + 1.25vw);margin-left:-.625vw;
}
.project{
  position:relative;display:inline-block;vertical-align:bottom;font-size:1rem;
  width:calc(66.6666% - 1.25vw);margin:0 .625vw 2.5vw;
  border-radius:.5vw;overflow:hidden;cursor:pointer;
}
.project.oneThird{width:calc(33.3333% - 1.25vw);}
.project .intro{
  text-align:left;text-transform:uppercase;margin-bottom:1.25vw;
  display:flex;justify-content:flex-start;gap:.75rem;
  font-family:var(--font-mono);font-size:.85rem;
}
/* A block box among the inline-block .project items, forcing a new row.
   Needed where consecutive items would otherwise total exactly 100% and
   share a line (e.g. a wide item followed by a narrow one). */
.projects .rowBreak{display:block;width:100%;height:0;}
/* Caption is Poppins throughout; only the number and the campaign name (the
   part after the brand) are black-weight — the brand sits in regular. */
.project .projectTitle{flex:0 0 auto;font-family:var(--font-body);font-weight:400;}
.project .brandName{font-weight:400;}
.project .campaignName{font-weight:900;}
.project .subTitle{color:var(--c-text);}
.project .num{font-family:var(--font-body);font-weight:900;}
.project .num{margin-right:.625vw;}
.project .imageWrapper{position:relative;height:30vw;background:#111;overflow:hidden;}
.project .imageWrapper .image{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s var(--ease);}
.project video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;}
/* The video fades in on top of the still poster, which stays put underneath.
   Hiding the poster here instead would expose the wrapper's dark background
   for the length of the fade — a black flash on hover. */
.project.hover video{opacity:1;}
/* Unlike the hero, these centre on the thumbnail rather than baselining. */
.project .playButton{z-index:3;opacity:0;transition:opacity .3s;transform:translate(-50%,-50%);}
.project:hover .playButton{opacity:1;}
/* Works page cards sit on the light theme, but the play button on top of
   the dark video thumbnail should stay white regardless of page theme. */
.project .playButton{color:#e8e8e8;}
.project .playButton .innerLine{border-color:#e8e8e8;}
.project .playButton:hover{color:#1e1e1e;}
.project .playButton:hover .outerLine3 .innerLine{background:#e8e8e8;}
.lineBreaker{display:block;height:0;}
.buttonWrapper{margin-top:3rem;text-align:center;}

@media all and (max-width:580px){
  .worksBlockWrapper{padding:7rem 0 6rem;}
  .project,.project.oneThird{width:calc(100% - 1.25vw);}
}

/* ==========================================================================
   Archive page
   ========================================================================== */
.archiveBlockWrapper{position:relative;padding:9rem 0 4rem;min-height:100vh;}
.archiveBlock .footNote{margin:1.5rem 0 2rem;opacity:.8;}
.archive{border-top:1px solid rgba(232,232,232,.15);}
.archive .row{
  position:relative;
  display:grid;
  grid-template-columns:3rem 1.4fr 1.6fr 1fr 1.4fr 1fr .7fr;
  gap:1rem;align-items:center;
  padding:.9rem 0;
  border-bottom:1px solid rgba(232,232,232,.15);
  font-size:.85rem;text-transform:uppercase;
  cursor:pointer;transition:color .3s;
}
.archive .row:hover{color:var(--c-gold);}
.archive .row .subTitle{color:inherit;}
.archive .rowColumn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fixedVideo{
  position:fixed;top:0;right:0;
  width:26vw;height:16vw;max-width:420px;max-height:260px;
  margin:8rem 3rem 0 0;
  pointer-events:none;z-index:5;
  border-radius:.5rem;overflow:hidden;
  opacity:0;transition:opacity .3s;
}
.fixedVideo.active{opacity:1;}
.fixedVideo .innerVideo{position:relative;width:100%;height:100%;}
.fixedVideo .innerVideo img,.fixedVideo .innerVideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

@media all and (max-width:1080px){
  .fixedVideo{display:none;}
  .archive .row{grid-template-columns:2.5rem 1.3fr 1.6fr 1fr .8fr;font-size:.8rem;}
  .archive .row .hideResp{display:none;}
}
@media all and (max-width:580px){
  .archiveBlockWrapper{padding:8rem 0 5rem;}
  .archive .row{grid-template-columns:2rem 1fr 1fr;gap:.5rem;font-size:.75rem;}
  .archive .row .rowColumn:nth-child(4),
  .archive .row .rowColumn:nth-child(5),
  .archive .row .rowColumn:nth-child(6){display:none;}
}

/* ==========================================================================
   About page
   ========================================================================== */
/* 6rem == the fixed header's height, so the title starts right below it,
   matching the home hero's .titleWrapper{top:6rem}. */
.aboutBlockWrapper{padding:6rem 0 4rem;}
.aboutBlock .titleWrapper{margin-bottom:3rem;text-align:center;}
/* h1's default margin-block-start (.67em) is ~41px at this size and would
   push the title clear of the header — the home hero zeroes it too. */
.aboutBlock .titleWrapper .bigTitle{margin-top:0;}
.aboutBlock .titleWrapper .bigTitle .left,
.aboutBlock .titleWrapper .bigTitle .right{display:inline;}
.aboutBlock .contentContainer{
  padding:0 4.5rem;max-width:1600px;margin:0 auto 4rem;text-align:center;
}
.aboutBlock .contentContainer.intro .subTitle{
  margin-bottom:1.5rem;
  font-family:var(--font-body);font-weight:900;font-size:.8rem;
  color:var(--c-text);
}
/* .text.bigger carries Poppins 900; the about intro wants the size but not
   the weight, so drop back to regular here. */
.aboutBlock .introText{max-width:46rem;margin:0 auto;font-weight:400;}
/* Credentials — Brands / Awards / Featured In, each a centred heading with
   a wrapped row of logos beneath. .credLogo currently renders the name as a
   text wordmark (Poppins black); swap for <img> logo files when supplied. */
.aboutBlock .creds{
  max-width:60rem;margin:5rem auto 0;padding:0 4.5rem;
}
.aboutBlock .credGroup{margin-bottom:3.5rem;text-align:center;}
.aboutBlock .credGroup:last-child{margin-bottom:0;}
.aboutBlock .credHeading{
  font-family:var(--font-body);font-weight:900;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.04em;color:var(--c-text);
  margin:0 0 1.5rem;
}
.aboutBlock .credLogos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:1.25rem 2.5rem;
}
.aboutBlock .credLogo{
  font-family:var(--font-body);font-weight:900;
  font-size:1.5rem;line-height:1;color:var(--c-text);
}
.aboutBlock .creds img.credLogo{height:3.25rem;width:auto;max-width:15rem;object-fit:contain;}
/* Chipotle is a very wide pill lockup; drop its height so it reads at a
   similar visual weight to the other marks. */
.aboutBlock .creds img.credLogo[src*="logo-chipotle"]{height:2.3rem;}
/* Candy Crush supplied a white-on-transparent logo; invert flips it to black
   so it reads on the light About page like the rest. */
.aboutBlock .creds img.credLogo.invert{filter:invert(1);}

@media all and (max-width:1080px){
  .aboutBlock .contentContainer{gap:1.5rem;}
}
@media all and (max-width:580px){
  .aboutBlockWrapper{padding:8rem 0 4rem;}
  .aboutBlock .contentContainer{padding:0 6vw;}
  .aboutBlock .creds{padding:0 6vw;}
  .aboutBlock .credLogo{font-size:1.2rem;}
  .aboutBlock .credLogos{gap:1rem 1.5rem;}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contactBlockWrapper{position:relative;padding:10rem 0 4rem;min-height:100vh;}
.contactBlock .titleWrapper{margin-bottom:3rem;}
/* Keep "Henry Crisp" on one line (default .bigTitle splits left/right into
   separate blocks). */
.contactBlock .titleWrapper .bigTitle .left,
.contactBlock .titleWrapper .bigTitle .right{display:inline;float:none;}
/* Match the title's 1.875vw edge padding so the contact details line up
   with the left edge of "Henry Crisp" above. */
.contactBlock .textWrapper{padding:0 1.875vw;max-width:none;margin:0;position:relative;z-index:2;}
/* "Contact Henry" — black, Poppins Black (not the gold mono subtitle). */
.contactBlock .subTitle{
  margin-bottom:1rem;color:var(--c-text);
  font-family:var(--font-body);font-weight:900;
}
.contactText p{margin:0 0 .25rem;text-transform:none;}
.contactLinks{margin:1.5rem 0;display:flex;flex-direction:column;gap:.5rem;}
/* Email + phone in the site's standard copy font (mono), not the Anton
   display face used elsewhere on this page. */
.contactLinks .textLink{font-size:1.4rem;font-family:var(--font-mono);text-transform:none;text-decoration:none;border-bottom:1px solid rgba(232,232,232,.4);display:inline-block;padding-bottom:.15em;}
.contactLinks .textLink:hover{border-color:var(--c-gold);color:var(--c-gold);}
.contactBlock .circles{margin:1.5rem 0;display:inline-flex;vertical-align:middle;}
.socialLinks{display:flex;gap:1.5rem;}
.background,.backgroundPlaceholder{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 70% 30%,rgba(193,154,91,.08),transparent 60%);}

@media all and (max-width:580px){
  .contactBlockWrapper{padding:8rem 0 4rem;}
  .contactBlock .textWrapper{padding:0 6vw;}
  .socialLinks{flex-wrap:wrap;gap:1rem;}
}

/* ==========================================================================
   Text pages (Cookies)
   ========================================================================== */
.textPage{padding:10rem 0 5rem;}
.cookieBlock .intro{margin-bottom:2.5rem;}
.cookieBlock .contentWrapper.small{max-width:820px;}
.cookieBlock .text{font-size:.95rem;line-height:1.7;}
.cookieBlock h2{
  font-family:var(--font-display);
  font-weight:400;text-transform:uppercase;
  font-size:1.5rem;margin:2.2rem 0 .8rem;color:var(--c-gold);
}
.cookieBlock h3{font-size:1.1rem;margin:1.6rem 0 .4rem;text-transform:uppercase;}
.cookieBlock p{margin:0 0 .9rem;}
.cookieBlock a{color:var(--c-gold);text-decoration:underline;}
.cookieBlock ul{margin:0 0 .9rem 1.4rem;list-style:disc;}
.cookieBlock .cmplz-subtitle{font-family:var(--font-body);font-weight:900;text-transform:uppercase;margin-top:1.2rem;}
.cookie-service-list{margin:1rem 0 2rem;}
.cookie-service{border-bottom:1px solid rgba(232,232,232,.15);padding:.75rem 0;}
.cookie-service h4{margin:0 0 .25rem;color:var(--c-text);font-size:.95rem;text-transform:uppercase;}
.cookie-service p{margin:0;opacity:.75;font-size:.85rem;}

@media all and (max-width:580px){
  .textPage{padding:8rem 0 4rem;}
}

/* ==========================================================================
   Misc
   ========================================================================== */
.noscript-video-note{display:none;}