/* ============================================================================
   LAYOUT — nav, hero, section grids, footer
   ========================================================================= */

/* ---- top bar ------------------------------------------------------------ */
.topbar{
  position:sticky;top:0;z-index:var(--z-head);
  background:rgba(8,10,8,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line);
}
.topbar-in{
  max-width:var(--maxw);margin:0 auto;padding:var(--s3) var(--s6);
  display:flex;align-items:center;gap:var(--s6);
}
.logo{
  font-family:var(--font-display);font-size:13px;text-decoration:none;
  white-space:nowrap;letter-spacing:-.02em;
}
.logo b{color:var(--accent);font-weight:400;text-shadow:0 0 14px rgba(var(--glow),.6)}
.navlinks{display:flex;gap:var(--s6);margin-left:auto;align-items:center}
.navlinks a:not(.btn){
  position:relative;
  font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-dim);padding:var(--s1) 0;
  transition:color .2s;
}
.navlinks a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.9,.25,1.1);
}
.navlinks a:hover:not(.btn),.navlinks a.is-active{color:var(--ink)}
.navlinks a:hover:not(.btn)::after,.navlinks a.is-active::after{transform:scaleX(1)}
.navlinks a.btn{color:var(--accent-ink)}
@media(max-width:900px){.navlinks a:not(.btn):not(.pal-btn){display:none}}

/* Scroll progress, drawn as a charging bar across the bottom of the header. */
.progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  transform:scaleX(var(--p,0));transform-origin:left;
  background:linear-gradient(90deg,var(--gb1),var(--accent));
  box-shadow:0 0 12px rgba(var(--glow),.8);
}

/* ---- palette switcher --------------------------------------------------- */
.pal{display:flex;gap:var(--s2);align-items:center}
.pal-btn{
  width:18px;height:18px;padding:0;border:0;cursor:var(--cur-point) 10 0,pointer;
  background:var(--sw,#9bbc0f);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 1px var(--line);
  transition:transform .15s cubic-bezier(.2,.9,.25,1.4),box-shadow .2s;
}
.pal-btn:hover{transform:translateY(-2px) scale(1.08)}
.pal-btn[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 2px var(--ink),0 0 14px rgba(var(--glow),.7);
}

/* ---- hero ----------------------------------------------------------------
   Pure black, deliberately. The hero video is an opaque mp4 whose own
   background is #000, so anything painted behind it — an ambient glow, a
   lattice, even a slightly-off-black page colour — draws a visible rectangle
   around the footage. True black is what makes the video edgeless.          */
.hero{
  padding:var(--s32) 0 var(--s24);
  position:relative;overflow:hidden;
  background:#000;
  /* Above the page grain. The grain lifts black to about #090909, while the
     opaque video stays a true #000 — which drew exactly the rectangle this
     section is trying not to have. */
  z-index:2;
  border-bottom:1px solid var(--line);
}
/* No lattice, no ambient wash, no gradient: the hero is flat #000 by request,
   which is also what makes the opaque video sit edgeless on it. */
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s12);align-items:center}
@media(max-width:940px){
  .hero{padding:var(--s16) 0 var(--s16)}
  .hero-grid{grid-template-columns:1fr;gap:var(--s8)}
}
/* Press Start 2P is very wide — cap it far below a normal display size. */
.hero h1{font-size:clamp(17px,2.45vw,27px);line-height:1.55;margin-bottom:var(--s6);max-width:19ch}
.hero h1 em{
  font-style:normal;color:var(--accent);
  text-shadow:0 0 26px rgba(var(--glow),.55);
}
.hero-lede{font-size:17px;max-width:46ch;color:var(--ink-soft);margin-bottom:var(--s8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s4)}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);gap:var(--s6) var(--s12);margin-top:var(--s12);justify-content:start}
@media(max-width:520px){.hero-stats{grid-template-columns:1fr 1fr}}
.hero-stats b{display:block;font-family:var(--font-display);font-size:17px;color:var(--accent)}
.hero-stats .label{font-size:11px}

/* ---- hero artwork ------------------------------------------------------- */
.hero-art{display:flex;justify-content:center;align-items:center;perspective:900px}
.hero-art img,.hero-art video{
  width:100%;max-width:520px;height:auto;
  /* --rx/--ry are written by ui.js as the pointer moves. */
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--fy,0px));
  transition:transform .25s cubic-bezier(.2,.9,.25,1.1);
  will-change:transform;
}
/* The still is a transparent PNG, so a glow follows the artwork's silhouette
   and looks right. The video is an opaque rectangle, where the same glow would
   trace its bounding box — so it gets none. */
.hero-art img{filter:drop-shadow(0 0 70px rgba(var(--glow),.22)) drop-shadow(0 26px 30px rgba(0,0,0,.75))}
@media(max-width:940px){.hero-art img,.hero-art video{max-width:400px}}

/* ---- services: deliberately unequal, so it does not read as a stock
   four-across feature row ------------------------------------------------- */
.svc{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6)}
.svc > *:nth-child(1){grid-column:span 7}
.svc > *:nth-child(2){grid-column:span 5}
.svc > *:nth-child(3){grid-column:span 5}
.svc > *:nth-child(4){grid-column:span 7}
@media(max-width:860px){.svc > *{grid-column:1/-1!important}}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s8)}
@media(max-width:620px){.grid-2{grid-template-columns:1fr}}

/* ---- work rows ---------------------------------------------------------- */
.work-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:center;margin-bottom:var(--s24)}
.work-row:last-child{margin-bottom:0}
.work-row:nth-child(even) .work-media{order:-1}
@media(max-width:940px){
  .work-row{grid-template-columns:1fr;gap:var(--s8);margin-bottom:var(--s16)}
  .work-row:nth-child(even) .work-media{order:0}
}
.work-media{position:relative}
.work-media img{
  width:100%;
  box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.9);
  transition:transform .4s cubic-bezier(.2,.9,.25,1.1),box-shadow .4s;
}
.work-media:hover img{
  transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(var(--glow),.4),0 40px 70px -30px rgba(var(--glow),.25);
}
.work-row h3{font-size:17px;margin:var(--s3) 0 var(--s4);color:var(--ink)}
.work-row p{color:var(--ink-soft);font-size:15px;max-width:56ch}
.work-meta{display:grid;gap:var(--s2);margin-top:var(--s6);font-family:var(--font-ui);font-size:13px}
.work-meta div{display:flex;gap:var(--s4);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
.work-meta span:first-child{color:var(--ink-dim);min-width:92px}
.work-meta span:last-child{color:var(--ink-soft)}

/* ---- footer ------------------------------------------------------------- */
.footer{padding:var(--s16) 0;border-top:1px solid var(--line);background:var(--panel)}
.footer-in{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;justify-content:space-between}
.footer a{font-family:var(--font-ui);font-size:13px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;color:var(--ink-dim);transition:color .2s}
.footer a:hover{color:var(--accent)}

/* ---- reveal on scroll (no JS = always visible) -------------------------- */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.25,1.05);
  transition-delay:var(--rd,0ms);
}