*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#000000;
  --ink:#ffffff;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* Brand splash */
.splash{
  position:fixed;
  inset:0;
  z-index:120;
  background:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  cursor:none;
  transition:opacity .5s var(--ease),visibility .5s;
}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash-mark{
  width:min(46vw,420px);
  height:auto;
  opacity:0;
  transform:scale(.94);
  animation:splashIn 1s var(--ease) forwards .15s;
}
.splash-skip{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.34em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  opacity:0;
  animation:splashIn 1s var(--ease) forwards .9s;
}
@keyframes splashIn{to{opacity:1;transform:scale(1)}}
@media (max-width:640px){.splash-mark{width:72vw}}

html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-weight:900;
  font-style:italic;
  -webkit-font-smoothing:antialiased;
  text-transform:uppercase;
  letter-spacing:-.02em;
  overflow-x:hidden;
  height:100%;
  transition:background .35s var(--ease),color .35s var(--ease);
}
body.invert{background:var(--ink);color:var(--bg)}
body.invert .logo-img{filter:invert(1)}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  cursor:none;
}
a,button{cursor:none}

/* Camera cursor — wrapper follows mouse instantly, only inner SVG scales */
.cam-cursor{position:fixed;top:0;left:0;width:44px;height:33px;pointer-events:none;z-index:9999;color:var(--ink);transform:translate(-50%,-50%);transition:opacity .2s,color .2s;will-change:transform}
.cam-cursor svg{width:100%;height:100%;display:block;transform:scale(1);transition:transform .25s var(--ease)}
.cam-cursor.hover svg{transform:scale(1.25)}
.cam-cursor svg circle:nth-of-type(2){transition:stroke-width .3s var(--ease)}
.cam-cursor.hover svg circle:nth-of-type(2){stroke-width:2.4}
.cam-rec{position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity .25s}
.cam-cursor.hover .cam-rec{opacity:1;animation:recBlink 1s ease-in-out infinite}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.25}}
.cam-cursor.click{animation:shutter .18s ease-out}
@keyframes shutter{0%{opacity:.3}100%{opacity:1}}
body.invert .cam-cursor{color:var(--bg)}
body.invert .cam-rec{background:var(--bg)}

.cam-bracket{position:fixed;top:0;left:0;width:80px;height:60px;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:0;transition:opacity .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.cam-bracket.hover{opacity:1;width:130px;height:96px}
.cam-bracket .br{position:absolute;width:14px;height:14px;border:1.5px solid var(--ink)}
.cam-bracket .tl{top:0;left:0;border-right:none;border-bottom:none}
.cam-bracket .tr{top:0;right:0;border-left:none;border-bottom:none}
.cam-bracket .bl{bottom:0;left:0;border-right:none;border-top:none}
.cam-bracket .br2{bottom:0;right:0;border-left:none;border-top:none}
body.invert .cam-bracket .br{border-color:var(--bg)}

@media (max-width:768px){.cam-cursor,.cam-bracket{display:none}body{cursor:auto}a,button{cursor:pointer}}

a{color:inherit;text-decoration:none}
em{font-style:italic;font-weight:900}
i{font-style:normal}

/* ===== Wipe overlay (invert transition) ===== */
.wipe{
  position:fixed; inset:0;
  background:var(--ink);
  z-index:80;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left;
}
.wipe.fire{animation:wipeAcross .55s var(--ease) forwards}
@keyframes wipeAcross{
  0%{transform:scaleX(0);transform-origin:left}
  50%{transform:scaleX(1);transform-origin:left}
  50.001%{transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}
body.invert .wipe{background:var(--bg)}

/* ===== Top bar ===== */
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 32px;
  font-family:"JetBrains Mono",monospace;
  font-style:normal;
  font-weight:500;
  font-size:12px;
  letter-spacing:.2em;
  position:relative;
  z-index:5;
  gap:14px;
}
.top-links{
  display:flex;
  align-items:center;
  gap:10px;
}
/* Shared pill base — applies to BOTH WORK and RATE CARD */
.top-links .link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 16px;
  background:var(--ink);
  color:var(--bg);
  border:1.5px solid var(--ink);
  font-family:"Inter",sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:13px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background .25s,color .25s,transform .35s var(--ease);
  box-sizing:border-box;
}
.top-links .link:not(.hold-link):hover{
  background:var(--bg);
  color:var(--ink);
  transform:translateX(-3px);
}
body.invert .top-links .link{
  background:var(--bg);
  color:var(--ink);
  border-color:var(--bg);
}
body.invert .top-links .link:not(.hold-link):hover{
  background:var(--ink);
  color:var(--bg);
}
.mark{
  display:inline-flex;
  align-items:center;
  gap:12px;
  transition:transform .35s var(--ease);
}
.mark:hover{transform:translateX(4px)}
.logo-img{
  width:42px;
  height:42px;
  border-radius:8px;
  display:block;
  transition:filter .35s var(--ease),transform .4s var(--ease);
}
.mark:hover .logo-img{transform:rotate(-8deg) scale(1.08)}
.mark span{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-style:italic;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Hold-to-enter link */
/* hold-link only adds the hold-fill behaviour on top of the shared pill */
.hold-link{position:relative;overflow:hidden;isolation:isolate}
.hold-link:hover{transform:translateX(-4px)}
.link-fill{
  position:absolute;
  inset:0;
  background:var(--bg);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s linear;
  z-index:-1;
}
body.invert .link-fill{background:var(--ink)}
.hold-link.holding .link-fill{
  transform:scaleX(1);
  transition-duration:.85s;
}
.link-text{display:inline-flex;align-items:center;position:relative;height:1em;line-height:1;overflow:hidden;min-width:9em}
.lt-default,.lt-holding{display:flex;align-items:center;position:absolute;inset:0;transition:transform .35s var(--ease);white-space:nowrap;justify-content:center}
.lt-default{transform:translateY(0)}
.lt-holding{transform:translateY(110%)}
.hold-link.holding .lt-default{transform:translateY(-110%)}
.hold-link.holding .lt-holding{transform:translateY(0)}
.hold-link.holding{color:var(--ink)}
body.invert .hold-link.holding{color:var(--bg)}
.hold-link:hover{border-color:currentColor}

/* ===== Big hero text ===== */
.page{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:0 32px;
  position:relative;
  z-index:2;
}
.big{
  display:flex;
  flex-direction:column;
  font-size:clamp(80px,18vw,260px);
  line-height:.85;
  letter-spacing:-.045em;
  font-weight:900;
  user-select:none;
}
.big .row{
  display:block;
  white-space:nowrap;
  position:relative;
  transform-origin:left center;
  will-change:transform;
  transition:transform .12s linear;
}
.big .row:nth-child(3){font-size:.5em; font-weight:900; letter-spacing:-.02em; margin-top:.15em}
.big .row.italic{font-style:italic}
.big .kline{display:inline-block;min-height:.85em}
.big i{font-style:normal;display:inline-block;margin-left:-.05em}

/* Scramble glyph — slightly hollowed so the decode reads as noise */
.kx{display:inline-block;opacity:.32;transform:translateY(0)}
.row.italic .kx,.kline .kx{font-style:inherit}

@keyframes up{to{opacity:1;transform:translateY(0)}}

/* Letter rise-in (data-rise) */
.krise{display:inline-block;opacity:0;transform:translateY(115%);animation:krise .7s var(--ease) forwards}
@keyframes krise{to{opacity:1;transform:translateY(0)}}

/* Kinetic word marquee */
.kmarq{
  position:absolute;
  left:0;right:0;bottom:8%;
  overflow:hidden;
  pointer-events:none;
  border-top:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  padding:8px 0;
  opacity:.5;
}
.kmarq-track{
  display:flex;
  white-space:nowrap;
  gap:22px;
  align-items:center;
  font-family:"JetBrains Mono",monospace;
  font-style:normal;
  font-weight:700;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  animation:kmarq 22s linear infinite;
  will-change:transform;
}
.kmarq-track b{opacity:.4}
@keyframes kmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Hint line */
.hint{
  margin-top:24px;
  font-family:"JetBrains Mono",monospace;
  font-style:normal;
  font-weight:500;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0;
  animation:up 1s var(--ease) forwards 1.4s;
}
.hint em{font-family:"Inter",sans-serif;font-style:italic;font-weight:900;letter-spacing:0;text-transform:uppercase}
.hint .hint-l{cursor:none}

/* ===== Cinematic hero (no nav) ===== */
.cine{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:40px 24px 0;
}
/* Letterbox bars — cinematic frame */
.lb{
  position:fixed;
  left:0;right:0;
  height:clamp(28px,5vh,64px);
  background:#000;
  z-index:30;
  pointer-events:none;
  transform:scaleY(0);
}
.lb-top{top:0;transform-origin:top;animation:lbIn 1s var(--ease) forwards .15s}
.lb-bottom{bottom:0;transform-origin:bottom;animation:lbIn 1s var(--ease) forwards .15s}
.lb::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.14)}
.lb-top::after{bottom:0}
.lb-bottom::after{top:0}
@keyframes lbIn{to{transform:scaleY(1)}}

/* Soft center glow so the logo reads "lit" */
.cine-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 44%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%);
  z-index:0;
}

.cine-center{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:30px;
  text-align:center;
}
.cine-logo{
  width:min(58vw,560px);
  height:auto;
  display:block;
  border-radius:18px;
  opacity:0;
  transform:scale(1.07);
  filter:blur(6px);
  animation:cineIn 1.7s var(--ease) forwards .5s;
}
@keyframes cineIn{
  60%{filter:blur(0)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}
.cine-tag{
  font-family:"JetBrains Mono",monospace;
  font-weight:700;
  font-size:clamp(11px,1.3vw,15px);
  letter-spacing:.42em;
  text-transform:uppercase;
  opacity:0;
  animation:up 1.1s var(--ease) forwards 1.7s;
  visibility:hidden;
}
.cine-tag[data-boot]{visibility:visible}

/* Clients ride the bottom of the hero like film credits */
.cine-clients{
  position:relative;
  z-index:2;
  width:100%;
  padding:26px 0 calc(clamp(28px,5vh,64px) + 30px);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  opacity:0;
  animation:up 1.2s var(--ease) forwards 2.1s;
}
.cine-clients .clients-label{text-align:center}
.cine-clients:hover .clients-track{animation-play-state:paused}
@media (max-width:640px){
  .cine{padding:20px 16px 0}
  .cine-logo{width:78vw}
  .cine-tag{letter-spacing:.3em}
  .cine-clients{padding-bottom:calc(clamp(28px,5vh,64px) + 20px)}
}

/* ===== Selected clients ===== */
.clients{
  position:relative;
  z-index:5;
  border-top:2px solid var(--ink);
  padding:56px 0 60px;
  overflow:hidden;
}
.clients-head{
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
  padding:0 48px;
  margin-bottom:36px;
}
.clients-label{
  font-family:"JetBrains Mono",monospace;
  font-weight:700;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.clients-sub{
  font-family:"Inter",sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:14px;
  letter-spacing:0;
  opacity:.55;
  text-transform:none;
}
.clients-marq{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  gap:30px;
  width:max-content;
  animation:clientsRun 38s linear infinite;
  will-change:transform;
}
.clients:hover .clients-track{animation-play-state:paused}
.clients-track a{
  font-family:"Inter",sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:clamp(36px,5.5vw,76px);
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.45;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.clients-track a:hover{opacity:1;transform:translateY(-4px)}
.clients-track b{font-style:normal;font-weight:400;font-size:clamp(20px,3vw,42px);opacity:.3}
@keyframes clientsRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  .clients{padding:40px 0 44px}
  .clients-head{padding:0 20px;margin-bottom:24px;gap:10px}
  .clients-sub{font-size:12px}
}

/* ===== Site footer ===== */
.site-foot{
  position:relative;
  z-index:5;
  border-top:2px solid var(--ink);
  padding:90px 48px 40px;
  display:flex;
  flex-direction:column;
  gap:72px;
}
.foot-brand{
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  gap:56px;
  align-items:center;
}
.foot-logo{
  width:100%;
  max-width:340px;
  height:auto;
  display:block;
  border-radius:14px;
}
.foot-statement{
  font-family:"Inter",sans-serif;
  font-style:normal;
  font-weight:500;
  font-size:clamp(20px,2.3vw,30px);
  line-height:1.45;
  letter-spacing:-.01em;
  max-width:680px;
}
.foot-statement-em{display:block;margin:6px 0}
.foot-statement-em em{font-style:italic;font-weight:900}

.foot-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-h{
  font-family:"JetBrains Mono",monospace;
  font-weight:700;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.55;
  margin-bottom:8px;
}
.foot-col a{
  font-family:"Inter",sans-serif;
  font-style:italic;
  font-weight:900;
  font-size:clamp(16px,1.5vw,20px);
  letter-spacing:-.01em;
  text-transform:uppercase;
  width:fit-content;
  border-bottom:1.5px solid transparent;
  padding-bottom:2px;
  transition:border-color .3s,transform .3s var(--ease);
}
.foot-col a:hover{border-color:var(--ink);transform:translateX(4px)}
.foot-sub{
  font-family:"JetBrains Mono",monospace;
  font-weight:500;
  font-size:12px;
  line-height:1.65;
  letter-spacing:.06em;
  opacity:.7;
}

.foot-rule{height:1.5px;background:var(--ink);opacity:.25}

.foot-base{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-family:"JetBrains Mono",monospace;
  font-weight:600;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.foot-base-mid{opacity:.6}

/* ===== Mobile ===== */
@media (max-width:880px){
  .foot-brand{grid-template-columns:1fr;gap:32px}
  .foot-logo{max-width:260px}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media (max-width:640px){
  .top{padding:16px 20px;font-size:10px;letter-spacing:.15em}
  .mark span{font-size:11px}
  .logo-img{width:36px;height:36px}
  .page{padding:0 20px}
  .big{font-size:clamp(64px,22vw,160px)}
  .hint{font-size:9px;letter-spacing:.15em}
  .site-foot{padding:56px 20px 32px;gap:48px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-base{flex-direction:column;align-items:flex-start;gap:10px;font-size:10px}
}