/* ============================================================
   LUCAS RHYS / SITE STYLES
   Loaded by lucas-rhys-homepage.html (and its /work, /archive twins).
   Relative url()s in this file resolve from assets/css/.
   Sections (search for the banner name):
     DESIGN TOKENS · TYPE UTILITIES · APERTURE SHUTTER · PRELOADER ·
     ROUTE TRANSITION · NAV · HERO · TICKER · SECTION SHELL · LIGHT BAND ·
     FEATURED WORK · WORK OVERLAY · ARCHIVE OVERLAY · ABOUT · MUSIC ·
     FOOTER · KONAMI RHYTHM MODE · HOMEPAGE TEST V2
   ============================================================ */
/* ============================================================
   LUCAS RHYS — DESIGN TOKENS
   ============================================================ */
:root{
  /* TYPE SCALE: five sizes only. Labels are mono caps; everything else is Geist.
     Display moments (hero name, footer wordmark, easter egg) keep their own fluid size. */
  --fs-label:11px;
  --fs-body:14px;
  --fs-lead:18px;
  --fs-heading:clamp(20px,1.7vw,26px);
  --ls-label:.04em;
  --ls-display:-.04em;

  --ink:#191B19;
  --black:#191B19;
  --paper:#F4F7F7;
  --brand:#086755;
  --brand-bright:#086755;
  --sage:#D3DDD4;
  --taupe:#827D78;

  --font-display:'Geist', system-ui, sans-serif;
  --font-body:'Geist', system-ui, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, monospace;

  --r-card:16px;
  /* A wider editorial measure: use the page rather than floating a narrow
     column in the middle of it. */
  --gutter:clamp(16px, 2.2vw, 32px);
  --max-w:1280px;   /* content column 1216px at desktop, same as arqe.ai's wide container */
  /* Distance from the viewport edge to the content column, for full-bleed
     sections (hero) whose text should still line up with it. */
  --edge:max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter)));
  --hairline:rgba(130,125,120,.35);

  --ease-out:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none!important;} /* lets site-config.js hide empty links even where a class sets display */
html,body{background:var(--black);color:var(--paper);}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.45;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{letter-spacing:-.03em;}
body.standalone-view #pageBend,
body.standalone-view .preloader,
.preloader{display:none!important;}   /* preloader retired */
::selection{background:var(--brand);color:var(--paper);}

img,svg{display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
ul{list-style:none;}

/* Film grain across every surface. It moves in infrequent stepped shifts so
   the page feels alive without forcing a continuous full-screen repaint. */
body::after{
  content:"";
  position:fixed;inset:-50%;
  width:200%;height:200%;
  pointer-events:none;
  z-index:2000;
  opacity:.052;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 4s steps(2,end) infinite;
}
@keyframes grainShift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-1.6%,-1.2%,0)}
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-5%)}
  60%{transform:translate(-3%,-2%)}
  80%{transform:translate(4%,4%)}
}

/* ============================================================
   TYPE UTILITIES
   ============================================================ */
/* rotating mark: triangles sweep outside the viewBox mid-spin,
   and the arrows state is taller than the mark state */
.mark-anim{overflow:visible;}
.mark-anim path{will-change:transform;}

.tag{
  display:inline-flex;
  align-items:center;
  height:24px;
  font-size:var(--fs-label);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-label);
  font-weight:500;
  letter-spacing:.01em;
  border:1px solid currentColor;
  border-radius:6px;
  padding:0 10px;
  opacity:.7;
  white-space:nowrap;
}

/* ============================================================
   APERTURE SHUTTER — shared transition motif: two panels expand from
   the outer edges and close cleanly at centre. Used by the preloader,
   the menu, and the work overlay.
   ============================================================ */
.wipe-col{
  position:absolute;top:0;
  height:100.5%;
  width:50.3%;               /* slight overlap hides the centre seam */
  will-change:transform;
  z-index:1;
}
.wipe-col.l{left:0;}
.wipe-col.r{right:0;}
.wipe-col.l{transform-origin:0% 50%;}
.wipe-col.r{transform-origin:100% 50%;}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed;inset:0;
  z-index:3000;
}
.preloader .wipe-col{background:var(--brand);}
.pre-content{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:28px;
}
.preloader svg{width:64px;color:#191B19;}

/* ============================================================
   ROUTE TRANSITION — the same clean brand-colour reveal used on first load.
   Route arrivals skip the preloader below, so navigation is one movement
   instead of a black sweep followed by a second green reveal.
   ============================================================ */
.site-transition{position:fixed;inset:0;z-index:5000;pointer-events:none;}
.site-transition-panel{position:absolute;top:0;bottom:0;width:50.1%;background:var(--brand);will-change:transform;}
.site-transition-panel.left{left:0;transform:translateX(-101%);}
.site-transition-panel.right{right:0;transform:translateX(101%);}
html.route-transition-in .site-transition{pointer-events:auto;}
/* Arriving pages start hidden for a short fade-in (the green panel wipe is retired). */
html.route-transition-in body{opacity:0;}

/* ============================================================
   NAV — slim floating glass pill (per reference)
   ============================================================ */
/* fixed wrapper owns the 3D scene; the pill rotates inside it */
.nav-persp{
  position:fixed;
  top:20px;left:0;
  width:100%;
  z-index:1000;
  display:flex;justify-content:center;
  perspective:900px;
  perspective-origin:50% 0;
  pointer-events:none;
}
/* Keep the nav links interactive above fullscreen overlays without turning
   their full-width wrapper into an invisible click shield over archive UI. */
.nav-persp.overlay-active{z-index:1900;opacity:1!important;visibility:visible!important;pointer-events:none;}
.nav{
  position:relative;
  width:max-content;           /* pill hugs its contents */
  will-change:transform;
  pointer-events:auto;
}
.nav-inner{
  display:flex;
  align-items:center;
  gap:26px;
  height:50px;
  padding:0 10px 0 26px;
  overflow:hidden;      /* nothing escapes the pill, ever */
  border-radius:100px;
  background:rgba(244,247,247,.92);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 40px rgba(0,0,0,.35);
}
.nav-links{
  display:flex;align-items:center;gap:24px;white-space:nowrap;
  width:auto;
}
.nav-links.left{justify-content:flex-end;}
.nav-links.right{justify-content:flex-start;}
.nav-links a{
  font-size:var(--fs-body);font-weight:500;
  position:relative;padding:4px 0;
}
/* letter-roll hover (Aaron Iker): each character slides up one line
   with a stagger while its text-shadow twin rolls in from below.
   em-based so it works at any font size — including the CTA. */
.nav-links a{line-height:1;}
.nav-links a div{
  display:flex;
  overflow:hidden;
  text-shadow:0 1em 0 currentColor;
}
.nav-links a div span{
  display:block;
  backface-visibility:hidden;
  transform:translateY(0) translateZ(0);
  transition:transform .44s ease;
}
.nav-links a:hover div span{transform:translateY(-1em) translateZ(0);}
.nav-links a div span:nth-child(1){transition-delay:.03s;}
.nav-links a div span:nth-child(2){transition-delay:.06s;}
.nav-links a div span:nth-child(3){transition-delay:.09s;}
.nav-links a div span:nth-child(4){transition-delay:.12s;}
.nav-links a div span:nth-child(5){transition-delay:.15s;}
.nav-links a div span:nth-child(6){transition-delay:.18s;}
.nav-links a div span:nth-child(7){transition-delay:.21s;}
.nav-links a div span:nth-child(8){transition-delay:.24s;}
.nav-links a div span:nth-child(9){transition-delay:.27s;}
.nav-links a div span:nth-child(10){transition-delay:.3s;}
.nav-mark-wrap{display:flex;align-items:center;justify-content:center;padding:0 4px;}
.nav-mark{width:36px;color:var(--ink);}
/* NOTE: selector must out-rank ".nav-links a" (0,1,1), otherwise
   its "padding:4px 0" wins and strips the CTA's side padding */
.nav-links a.nav-cta{
  display:inline-flex;align-items:center;
  background:var(--ink);color:var(--paper);
  border-radius:100px;
  height:32px;
  padding:0 16px;
  font-size:var(--fs-body);font-weight:500;
  flex:none;
  transition:background-color .3s;
}
.nav-links a.nav-cta:hover{background:var(--brand);}
.menu-btn{display:none;font-size:var(--fs-body);font-weight:500;padding:8px 4px;color:var(--ink);}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-persp{top:12px;}
  .nav{width:calc(100% - 24px);}
  .nav-inner{justify-content:space-between;gap:16px;padding:0 7px 0 16px;}
  .menu-btn{display:block;}
}

/* mobile menu overlay */
.menu-overlay{
  position:fixed;inset:0;z-index:1850;   /* above the Work feed (1600) and the statement (1800), under the nav (1900), whose Menu button becomes Close */
  color:var(--paper);
  visibility:hidden;
}
.menu-overlay .wipe-col{background:var(--black);}  /* offset set by GSAP only */
.menu-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 28px;
}
.menu-overlay a{
  font-family:var(--font-display);
  font-size:var(--fs-heading);
  line-height:1.25;
  border-bottom:1px solid var(--hairline);
  padding:14px 0;
}
.menu-close{
  position:absolute;top:24px;right:24px;z-index:3;
  font-size:var(--fs-label);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:500;
  color:var(--paper);opacity:.7;padding:10px;
}

/* ============================================================
   HERO — understated: dithered fog, small centered copy,
   giant wordmark cropped at the bottom edge
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:#000;
}
#pageBend main{position:relative;}
/* The hero is the persistent backdrop; following sections pass over it. */
.hero{position:sticky;top:0;z-index:0;}
.marquee,
#pageBend main > section:not(.hero){position:relative;z-index:1;}
#gl{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.hero-center{
  position:relative;z-index:2;
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  gap:20px;
  padding:100px 24px 40px;
}
.hero-sentence{
  position:absolute;
  top:50%;
  right:var(--edge);
  left:var(--edge);
  width:auto;max-width:none;
  margin:0;
  transform:translateY(-50%);
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.05;
  letter-spacing:-.03em;
  white-space:nowrap;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.hero-sentence{z-index:2;}
.hero-name{
  position:absolute;
  right:var(--edge);
  bottom:clamp(12px,1.6vw,28px);
  left:var(--edge);
  font-family:var(--font-display);
  font-size:clamp(70px,18.5vw,330px);
  font-weight:400;
  line-height:.72;
  letter-spacing:var(--ls-display);
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--paper);
  opacity:1;
  pointer-events:auto;
  overflow:hidden;
}
.hero-name > span{display:inline;}
.hero-name .hero-name-inner{display:inline-block;white-space:nowrap;}
.hero-name .hero-name-exit{position:absolute;bottom:0;left:0;display:inline-block;white-space:nowrap;pointer-events:none;}
.hero-name .hero-name-word{display:inline-flex;overflow:hidden;line-height:.82;vertical-align:top;}
.hero-name .hero-name-char{display:block;will-change:transform;backface-visibility:hidden;text-shadow:0 1em 0 currentColor;}
.hero-name .hero-name-space{display:inline-block;width:.28em;}
@media (hover:hover){
  .hero-name .hero-name-word{
    transition:transform .52s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }
  .hero-name .hero-name-word:hover{transform:translateY(-.022em);}
}
.hero-sentence span{display:inline-block;will-change:transform;}
.hero-sentence .hero-sentence-left{margin-right:0;}
.hero-copy{
  font-family:var(--font-display);
  max-width:340px;
  font-size:var(--fs-body);
  line-height:1.65;
  text-wrap:balance;      /* even rag on every line */
  opacity:.9;
}
.hero-copy.dim{opacity:.5;margin-top:-4px;}
.hero-center > .hero-copy{position:relative;top:74px;}
.hero-links{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  margin:0;
  width:max-content;
}
.hero-links a{font-size:var(--fs-body);}
/* Monolog-style CTA: slightly rounded square, text + icon chip */
.sq-btn{
  display:inline-flex;align-items:center;gap:12px;
  border-radius:9px;
  padding:5px 6px 5px 16px;
  font-size:var(--fs-body);font-weight:500;
  background:var(--paper);color:var(--ink);
  transition:transform .3s var(--ease-out),background-color .28s ease,color .28s ease,border-color .28s ease;
}
.sq-btn .ic{
  width:26px;height:26px;
  border-radius:6px;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:background-color .3s;
}
.sq-btn .ic svg{width:6px;height:auto;}
/* label + arrow both use the letter-roll on hover */
.sq-btn .roll{
  display:flex;overflow:hidden;
  line-height:14px;
  text-shadow:0 14px 0 currentColor;
}
.sq-btn .roll span{
  display:block;backface-visibility:hidden;
  transform:translateY(0) translateZ(0);
  transition:transform .44s ease;
}
.sq-btn:hover .roll span{transform:translateY(-14px) translateZ(0);}
/* the arrow chip stays put — colour change only, no roll */
.sq-btn:hover{transform:scale(1.02);}
.sq-btn:hover .ic{background:var(--brand);}
/* ghost variant: outline on dark */
.sq-btn.ghost{
  background:transparent;color:var(--paper);
  border:1px solid rgba(244,247,247,.3);
  padding:4px 5px 4px 15px;
}
.sq-btn.ghost .ic{background:var(--paper);color:var(--ink);}
.sq-btn.ghost:hover{border-color:rgba(244,247,247,.6);}
.sq-btn.ghost:hover .ic{background:var(--brand);color:var(--paper);}
.hero-links .hero-work-cta:hover{background:var(--brand);color:var(--paper);}
.hero-links .hero-work-cta:hover .ic{background:var(--paper);color:var(--brand);}
.hero-links .hero-about-cta:hover{background:var(--brand);color:var(--paper);border-color:var(--brand);}
.hero-links .hero-about-cta:hover .ic{background:var(--paper);color:var(--brand);border-color:var(--paper);}
/* dark variant: for light bands */
.sq-btn.dark{background:var(--ink);color:var(--paper);}
.sq-btn.dark .ic{background:var(--paper);color:var(--ink);}
.sq-btn.dark:hover .ic{background:var(--brand);color:var(--paper);}
.link-underline{
  position:relative;font-weight:500;font-size:var(--fs-body);
  padding-bottom:2px;
}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1.5px;background:currentColor;
  transform:scaleX(1);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.link-underline:hover::after{transform:scaleX(0);transform-origin:right;}
@media (max-width:860px){
  .hero-copy{max-width:300px;font-size:var(--fs-body);}
}

/* ============================================================
   TICKER — flat, narrow, warm taupe. Sits flush between
   the black hero and the off-white work band.
   ============================================================ */
.marquee{
  background:var(--taupe);
  color:#191B19;
  overflow:hidden;
  padding:5.5px 0;
  margin:0;
}
.marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.marquee-item{
  display:flex;align-items:center;gap:.35em;
  font-family:var(--font-display);
  font-size:var(--fs-label);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-label);
  letter-spacing:.015em;
  text-transform:uppercase;
  white-space:nowrap;
  padding-right:2em;
}
.marquee-item svg{width:.3em;color:#191B19;flex:none;opacity:.9;}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--gutter);
}
.section + .section{margin-top:clamp(76px,9vw,132px);}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;
  margin-bottom:clamp(32px,4.5vw,56px);
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-heading);
  line-height:1.1;
  letter-spacing:-.03em;
}

/* ============================================================
   LIGHT BAND — off-white full-width selected-work section
   ============================================================ */
.light-band{
  background:var(--paper);
  color:var(--ink);
  padding:0 0 clamp(48px,6vw,80px);
}
.light-band + .section{margin-top:clamp(76px,9vw,132px);}
.light-band .work-desc{opacity:.6;}
.light-band .work-featured .work-cta{color:var(--ink);}
.light-band .work-featured .work-cta .ic{color:var(--ink);border:0;}
.light-band .work-featured .work-card:hover .work-cta{background:var(--ink);color:var(--paper);}
.light-band .work-featured .work-card:hover .work-cta .ic{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.light-band > .section:first-child{
  min-height:0;
  padding-block:clamp(32px,4vw,56px);
  display:grid;
  place-items:center;
}
.light-band > .section:first-child + .section{margin-top:0;}
.light-band > .section:first-child .section-head{margin:0;}
.light-band > .section:first-child .section-head{justify-content:center;text-align:center;}
.light-band > .section:first-child .section-head h2{
  font-size:var(--fs-heading);
  line-height:1.1;
}
.about-band{
  background:var(--paper);
  color:var(--ink);
  padding:clamp(56px,7vw,112px) 0;
}
.about-band .section{
  width:100%;
  max-width:var(--max-w);
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.about-band + .section{margin-top:clamp(76px,9vw,132px);}
/* Statement sits at heading size; a measure keeps the line length readable. */
.about-statement{
  max-width:26em;
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-heading);
  line-height:1.4;
  letter-spacing:-.02em;
  text-align:left;
}
/* Three short lines with the mark's pieces set inline, like a signature. */
.about-line{display:block;}
.about-mark{display:inline-block;width:1.1em;height:.5em;margin-left:.12em;vertical-align:.02em;color:var(--brand);}
.about-triangle{
  display:inline-block;
  width:.62em;
  height:.62em;
  margin:0 .08em;
  vertical-align:-.04em;
  color:var(--brand);
  overflow:visible;
}
.about-triangle path{
  transform-box:fill-box;
  transform-origin:center;
  /* Match the header mark's leading arrow orientation. */
  transform:rotate(0deg);
}
.about-statement .accent{color:var(--brand);}
.about-statement .italic{font-style:italic;letter-spacing:-.03em;}
@media (max-width:760px){
  .about-band{padding:clamp(48px,14vw,80px) 0;}
  .about-band .section{padding-left:18px;padding-right:18px;}
  .about-statement{max-width:none;font-size:var(--fs-heading);line-height:1.4;}
}
.music-band{background:var(--paper);color:var(--ink);padding:clamp(72px,9vw,128px) 0;}
.music-band .section-head h2{font-size:var(--fs-label);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-label);}
.music-band .track{border-color:rgba(25,27,25,.2);}
.music-band .track .tag{border-color:rgba(25,27,25,.25);}
.music-band .track .play{border-color:rgba(25,27,25,.25);}
.music-band .track .play svg{color:var(--ink);}
.music-studio{
  margin:clamp(44px,6vw,80px) 0 0;
}
.deck-visual{
  position:relative;
  aspect-ratio:3.36/1;
  overflow:hidden;
  background:transparent;
}
.deck-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none;filter:brightness(0);}
.deck-screen{
  position:absolute;
  top:16%;
  width:12.7%;
  height:22.5%;
  overflow:hidden;
  background:transparent;
  z-index:1;
}
.deck-screen.left{left:23.8%;}
.deck-screen.right{left:64.1%;}
.wave-scroll{
  position:absolute;
  top:29%;left:0;
  display:flex;
  width:200%;height:25%;
  animation:wave-scroll 16s linear infinite;
}
.deck-screen.right .wave-scroll{animation-direction:reverse;animation-duration:19s;}
.wave-scroll img{
  flex:0 0 50%;
  width:50%;height:100%;
  object-fit:fill;
  filter:brightness(0);
  opacity:.7;
}
@keyframes wave-scroll{to{transform:translateX(-50%);}}
.music-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(32px,6vw,112px);
  margin-bottom:clamp(32px,4vw,56px);
}
.music-intro .section-head{margin:0;}
.music-editorial{display:flex;justify-content:flex-end;margin:0;}
.music-portrait{margin:0;width:min(25vw,280px);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;}
.music-portrait img{
  display:block;width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:62% center;
  filter:grayscale(1) contrast(1.08);
}
.music-portrait figcaption{font-size:var(--fs-label);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-label);line-height:1.35;letter-spacing:.02em;opacity:.55;max-width:24ch;}
@media (max-width:720px){
  .music-intro{display:block;}
  .music-intro .section-head{margin-bottom:28px;}
  .music-portrait{width:min(52%,240px);}
}
@media (prefers-reduced-motion:reduce){.wave-scroll{animation:none;}}

/* ============================================================
   FEATURED WORK — a few static picks on the homepage. The full
   familytype-style infinite dual-column carousel only appears
   in the fullscreen overlay (opened via "View all work").
   ============================================================ */
.work-featured{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px,4.2vw,60px);
}
.work-featured .work-card{
  display:grid;
  grid-template-columns:minmax(0,.89fr) minmax(0,1fr);
  column-gap:0;
  align-items:stretch;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(244,247,247,.78)),
    #f3f2f0;
  border-radius:clamp(16px,1.6vw,20px);
  padding:clamp(10px,1vw,14px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);

  box-shadow:0 1px 0 rgba(255,255,255,.82) inset, 0 18px 48px rgba(25,27,25,.08);
  pointer-events:auto;
  position:relative;
  top:auto;
  transition:background-color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.work-featured .work-card:nth-child(1){z-index:1;}
.work-featured .work-card:nth-child(2){z-index:2;}
.work-featured .work-card:nth-child(3){z-index:3;}
.work-featured .work-media{
  grid-column:2;
  grid-row:1;
  aspect-ratio:4/3;
  border-radius:clamp(10px,1vw,12px);
  height:auto;
  width:100%;
  align-self:center;
}
.work-featured .work-copy{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  align-self:stretch;
  padding:clamp(24px,3vw,40px) clamp(16px,2.2vw,30px);
}
.work-featured .work-meta{
  display:block;
  margin-top:0;
  width:100%;
}
.work-featured .work-meta h3{
  font-size:var(--fs-lead);
  line-height:1;
  letter-spacing:-.03em;
}
.work-featured .work-tags{
  justify-content:flex-start;
  margin-top:10px;
}
.work-featured .work-desc{
  margin:10px 0 0;
  font-size:var(--fs-body);
  line-height:1.45;
  max-width:42ch;
  text-wrap:pretty;
}
.work-featured .work-card:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.89fr);}
.work-featured .work-card:nth-child(even) .work-media{grid-column:1;}
.work-featured .work-card:nth-child(even) .work-copy{grid-column:2;}
.work-featured .work-card.wide{grid-column:auto;}
.work-featured .work-card.wide .work-media{aspect-ratio:4/3;}
.work-featured .m-ink .glyph-mark{width:48%;}
.work-featured .work-cta{
  display:inline-flex;
  align-self:flex-start;
  flex:none;
  width:max-content;
  pointer-events:auto;
  justify-self:start;
  margin-top:10px;
  background:transparent;
  color:var(--ink);
  border:1px solid currentColor;
  border-radius:6px;
  padding:3px 4px 3px 10px;
  gap:8px;
  font-size:var(--fs-body);
}
.work-featured .work-cta .ic{
  width:18px;
  height:18px;
  border-radius:4px;
  background:transparent;
  color:var(--ink);
  border:1px solid currentColor;
}
.work-featured .work-cta .ic svg{width:4px;}
.work-featured .work-card:hover .work-cta{background:var(--ink);color:var(--paper);}
.work-featured .work-card:hover .work-cta .ic{background:var(--paper);color:var(--ink);border-color:var(--paper);}
@media (max-width:760px){
  .work-featured .work-card{display:block;position:relative;top:auto;}
  .work-featured .work-media,
  .work-featured .work-card.wide .work-media{aspect-ratio:16/9;height:auto;}
  .work-featured .work-copy{padding:20px 8px 8px;}
  .work-featured .work-meta{margin-top:10px;}
  .work-featured .work-desc{margin-top:10px;}
  .work-featured .work-cta{margin-top:10px;}
}

/* Dedicated Work is a vertically scrolling, counter-moving two-column feed. */
.work-col-track{
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:clamp(14px,1.4vw,28px);
  width:100%;
  min-width:0;
  will-change:transform;
}
.work-overlay-inner::before,
.work-overlay-inner::after{
  display:none;
}

/* ============================================================
   WORK OVERLAY — fullscreen, native vertical project feed.
   ============================================================ */
.work-overlay{
  position:fixed;inset:0;
  z-index:1600;
  color:var(--paper);
  visibility:hidden;
  overscroll-behavior:contain;
}
.work-overlay .wipe-col{background:#000;}  /* offset set by GSAP only */
.work-overlay-inner{
  position:relative;z-index:2;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  opacity:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  column-gap:clamp(14px,1.4vw,28px);
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(72px,8vh,112px) clamp(28px,3.2vw,64px) clamp(28px,3vh,48px);
  box-sizing:border-box;
  scrollbar-width:none;
}
.work-overlay-inner::-webkit-scrollbar{display:none;}
.work-overlay #overlayB{display:flex;}
.work-overlay .work-media{
  width:100%;height:100%;
  aspect-ratio:16/9;
  border:0;
}
.work-overlay .work-card{
  position:relative;
  --panel-inset:clamp(12px,1.2vw,20px);
  --panel-height:clamp(104px,9vw,148px);
  --panel-padding:var(--panel-inset);
  background:#000;
  border-radius:clamp(20px,2vw,32px);
  padding:0;
  overflow:hidden;
  /* Keep the animated information panel rigorously inside the image shape,
     including while a card is being tilted in 3D. */
  clip-path:inset(0 round clamp(20px,2vw,32px));
  contain:paint;
  isolation:isolate;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border:0;
  box-shadow:none;
  transition:transform .45s var(--ease-out);
}
.work-overlay .work-card .work-media{
  border-radius:inherit;
}
.work-hover-panel{
  position:absolute;right:var(--panel-inset);bottom:var(--panel-inset);left:var(--panel-inset);
  height:var(--panel-height);z-index:2;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.58);
  border-radius:clamp(10px,1vw,16px);
  background:rgba(244,247,247,.82);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset,0 12px 30px rgba(0,0,0,.16);
  color:var(--ink);
  transform:translateY(calc(100% + var(--panel-inset)));
  transition:transform .5s var(--ease-out);
  will-change:transform;
}
/* The content is static inside a clipped panel; the panel itself rises in as
   one piece, so no type can travel beyond the rounded frame. */
.work-hover-panel .work-desc{
  /* The tags occupy their own reserved column, preventing longer project
     context from ever travelling beneath the pills. */
  position:absolute;top:var(--panel-padding);right:calc(var(--panel-padding) + clamp(230px,35%,420px));left:var(--panel-padding);
  margin:0;color:var(--ink);max-width:52ch;
  font-size:var(--fs-body);line-height:1.24;
  opacity:1;
}
.work-hover-panel .work-meta{
  position:static;display:block;margin:0;padding:0;color:var(--ink);
}
.work-hover-panel .work-meta h3{
  position:absolute;bottom:var(--panel-padding);left:var(--panel-padding);
  font-size:var(--fs-body);line-height:1;margin:0;
  opacity:.55;
}
.work-hover-panel .work-tags{
  position:absolute;top:var(--panel-padding);right:var(--panel-padding);
  white-space:nowrap;
}
.work-overlay-cta{
  position:absolute;right:var(--panel-padding);bottom:var(--panel-padding);
  display:inline-flex;align-items:center;gap:7px;
  color:var(--ink);font-size:var(--fs-label);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:500;line-height:1;
  border:1px solid currentColor;border-radius:6px;
  padding:3px 4px 3px 10px;
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out);
  cursor:pointer;
}
.work-overlay-cta .ic{
  width:18px;height:18px;border:1px solid currentColor;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out);
}
.work-overlay-cta .ic svg{width:4px;height:auto;}
.work-overlay-cta:hover{background:#000;color:var(--paper);border-color:#000;}
.work-overlay-cta:hover .ic{background:var(--paper);color:#000;border-color:var(--paper);}
.work-overlay .work-media.has-thumbnail > img,
.work-overlay .work-media.has-thumbnail > video{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:center;
  background:#000;
  transform:scale(1);
  transform-origin:center;
  transition:transform .8s var(--ease-out);
}
.work-overlay .work-card:hover .work-media.has-thumbnail > img,
.work-overlay .work-card:hover .work-media.has-thumbnail > video{
  transform:scale(1);
}
/* The carousel uses deliberately cropped, edge-to-edge artwork in each
   4:3 frame. The image should always bleed to the card edge. */
.work-overlay .work-media.has-thumbnail > img,
.work-overlay .work-media.has-thumbnail > video{object-fit:cover !important;}
.work-overlay .work-card:hover .work-hover-panel,
.work-overlay .work-card:focus-visible .work-hover-panel{transform:translateY(0);}
@media (hover:none){
  .work-overlay .work-hover-panel{transform:translateY(0);}
}
@media (max-width:760px){
  .work-overlay-inner{grid-template-columns:1fr;padding:76px 16px 18px;}
  .work-col-track{gap:10px;}
  .work-overlay #overlayB{display:none;}
  .work-overlay .work-card{aspect-ratio:16/9;}
  .work-overlay .work-media{aspect-ratio:16/9;}
}
.work-overlay-close,
.archive-close{
  position:absolute;top:20px;right:20px;
  z-index:10;
  width:42px;height:42px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  pointer-events:auto;
  touch-action:manipulation;
  cursor:pointer;
  border-radius:50%;
  background:rgba(244,247,247,.92);color:var(--ink);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 28px rgba(0,0,0,.25);
  transition:background-color .3s,color .3s,transform .3s var(--ease-out);
}
.work-overlay-close svg,
.archive-close svg{display:block;width:14px;height:14px;}
.work-overlay-close path,
.archive-close path{stroke:currentColor;stroke-width:1.75;stroke-linecap:round;}
.work-overlay-close:hover,
.archive-close:hover{background:var(--brand);color:var(--paper);transform:rotate(90deg);}

/* ============================================================
   ARCHIVE OVERLAY — infinite 2D pannable field of single
   pieces (poster-wall reference). Drag or scroll to pan,
   wraps forever on both axes, click a piece to view large.
   ============================================================ */
.archive-overlay{
  position:fixed;inset:0;
  z-index:1600;
  color:var(--paper);
  visibility:hidden;
  overscroll-behavior:contain;
}
.archive-overlay .wipe-col{background:var(--black);}  /* offset set by GSAP only */
.archive-inner{
  position:relative;z-index:2;
  height:100%;
  overflow:hidden;
  background:#000000;
  opacity:0;
  cursor:grab;
  touch-action:none;
  user-select:none;
  isolation:isolate;
}
.archive-inner.dragging{cursor:grabbing;}
.archive-plane{
  position:absolute;top:0;left:0;
  z-index:1;
  will-change:transform;
}
.arch-set{
  position:absolute;top:0;left:0;
  display:grid;
  grid-template-columns:repeat(4, 240px);
  gap:192px;
  align-items:center;     /* centre varied portrait/landscape pieces within each row */
}
.arch-item{
  display:block;
  width:240px;
  aspect-ratio:3/4;            /* portrait by default */
  border-radius:2px;          /* contact-sheet, not card */
  overflow:hidden;
  padding:0;
  --cloud-x:0px;
  --cloud-y:0px;
  transform:translate3d(var(--cloud-x),var(--cloud-y),0);
  transition:transform .35s var(--ease-out);
}
/* Four columns: each following row inverts the landscape/portrait rhythm. */
.arch-item:nth-child(8n + 2),
.arch-item:nth-child(8n + 4),
.arch-item:nth-child(8n + 5),
.arch-item:nth-child(8n + 7){aspect-ratio:4/3;}
/* Asset-led proportions: archive uploads retain the shape they were made in. */
.arch-item.arch-ratio-4x3{aspect-ratio:4/3;}
.arch-item.arch-ratio-5x4{aspect-ratio:5/4;}
.arch-item.arch-ratio-1x1{aspect-ratio:1;}
.arch-item.arch-ratio-16x9{aspect-ratio:16/9;}
.arch-item.arch-ratio-9x16{aspect-ratio:9/16;}
.arch-item.arch-ratio-40x67{aspect-ratio:40/67;}
.arch-item.arch-ratio-224x241{aspect-ratio:224/241;}
.arch-item:hover{transform:translate3d(var(--cloud-x),var(--cloud-y),0) scale(1.04);}
.arch-item .fill{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:var(--fs-heading);
  text-align:center;
  padding:16px;
}
.arch-item svg{width:52%;}
.arch-item img,.arch-item video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink);}
.archive-plane{display:none!important;}
.archive-inner{overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none;}
.archive-inner::-webkit-scrollbar{display:none;}
.archive-columns{
  position:relative;z-index:1;
  display:flex;flex-direction:column;width:max-content;height:100%;min-height:100%;
  align-items:flex-start;
  gap:clamp(12px,1.15vw,22px);
  padding:0 clamp(12px,1.15vw,22px) 0 0;
}
.archive-column{
  flex:1 1 0;
  min-height:0;
  display:flex;flex-direction:row;justify-content:flex-start;
  gap:clamp(12px,1.15vw,22px);
  will-change:transform;
}
.archive-columns .arch-item{
  width:auto;max-width:none;
  height:100%;aspect-ratio:auto!important;
  flex:0 0 auto;
  overflow:visible;background:transparent;
}
.archive-columns .arch-item img,
.archive-columns .arch-item video{
  width:auto;height:100%;
  object-fit:initial;background:transparent;
}
.archive-columns .arch-item:hover{transform:scale(1.018);}

.arch-lightbox{
  position:fixed;inset:0;
  z-index:1800;
  width:100%;height:100%;
  background:rgba(5,5,5,.58);
  -webkit-backdrop-filter:blur(18px) saturate(.82);
  backdrop-filter:blur(18px) saturate(.82);
  display:none;
  cursor:zoom-out;
}
.arch-lightbox-stage{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}
.arch-lightbox-anchor{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
.arch-lightbox .box{
  position:relative;
  width:min(72vw, 460px);
  aspect-ratio:4/5;
  border-radius:4px;
  overflow:hidden;
  margin:0;
  flex:0 0 auto;
  transform-origin:center center;
}
.arch-lightbox .fill{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:72px;
  text-align:center;
  padding:32px;
}
.arch-lightbox svg{width:52%;}

/* Responsive pass: protect the page from horizontal overflow and keep the
   full-screen modes usable at compact widths. */
html,body{max-width:100%;overflow-x:clip;}
img,video,canvas,svg{max-width:100%;}
@media (max-width:760px){
  .nav-persp{top:max(10px,env(safe-area-inset-top));}
  .hero-center{padding-left:18px;padding-right:18px;}
  .hero-sentence{font-size:var(--fs-lead);white-space:normal;line-height:1.08;display:block;}
  .hero-links{top:calc(50% + 98px);}
  .hero-name{
    right:14px;bottom:16px;left:14px;
    font-size:clamp(52px,18.5vw,112px);
    line-height:.75;
    letter-spacing:var(--ls-display);
  }
  .hero-sentence span{display:block;}
  .hero-sentence .hero-sentence-left{margin-right:0;}
  .hero-sentence .hero-sentence-right{text-align:right;}
  .hero-center > .hero-copy{top:88px;}
  .hero-links{justify-content:center;}
  .work-overlay-inner{gap:10px;padding:76px 16px 18px;}
  .work-col-track{gap:10px;}
  .work-overlay .work-card{padding:0;border-radius:16px;}
  .work-overlay .work-media{aspect-ratio:16/9;}
  .work-overlay .work-card{--panel-inset:10px;--panel-height:96px;}
  .work-overlay .work-card::after{border-radius:10px;}
  .work-overlay .work-card .work-meta{margin:0;padding:0;}
  .work-overlay .work-meta h3{font-size:var(--fs-body);}
  .work-overlay .work-card .work-desc{margin:0;padding:0;font-size:var(--fs-body);line-height:1.4;}
  .work-overlay-close,.archive-close{top:70px;right:12px;width:38px;height:38px;}
  .archive-columns{gap:8px;padding:0;}
  .archive-column{gap:8px;}
  .arch-lightbox .box{width:min(88vw,460px);max-height:78svh;}
  .arch-lightbox .box img,.arch-lightbox .box video{max-height:78svh;object-fit:contain;}
  .footer-grid{gap:28px;}
}
@media (max-width:460px){
  .hero-links .sq-btn{font-size:var(--fs-body);padding-left:12px;}
}
.work-card{display:block;}
.work-media{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:4/3;
  border:0;
}
.work-media .media-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .8s var(--ease-out);
}
.work-media.has-thumbnail .media-inner{display:none;}
.work-media.has-thumbnail video,
.work-media.has-thumbnail img{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
}
.work-card:hover .media-inner{transform:scale(1.045);}
.work-media .big-glyph{
  font-family:var(--font-display);
  font-size:clamp(90px,14vw,220px);
  line-height:1;
  user-select:none;
}
.work-media .glyph-mark{width:34%;}
.work-meta{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;
  margin-top:18px;
}
.work-meta h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-lead);
  line-height:1.1;
}
.work-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.work-desc{
  margin-top:8px;
  font-size:var(--fs-body);
  line-height:1.55;
  opacity:.5;
  max-width:42ch;
}
/* card themes */
.m-sage{background:var(--sage);color:var(--ink);}
.m-paper{background:var(--paper);color:var(--ink);}
.m-ink{background:var(--ink);color:var(--paper);}
.m-brand{background:var(--brand);color:var(--paper);}
.work-foot{
  display:flex;justify-content:center;
  padding-top:clamp(48px,5vw,72px);
  margin-top:0;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-quote{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-label);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--ls-label);
  line-height:1.25;
  letter-spacing:-.03em;
  max-width:21ch;
}
.about-quote .hl{color:var(--brand-bright);}
.about-quote .hl-2{color:var(--sage);}
.about-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:48px;
  margin-top:clamp(32px,4vw,56px);
}
.about-note{max-width:420px;font-size:var(--fs-body);opacity:.55;}
@media (max-width:760px){.about-row{flex-direction:column;align-items:flex-start;}}

/* ============================================================
   MUSIC
   ============================================================ */
.track{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:clamp(16px,3vw,40px);
  padding:22px 0;
  border-top:1px solid var(--hairline);
  transition:padding-left .35s var(--ease-out);
  position:relative;
}
button.track{
  width:100%;
  background:none;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.mix-player{position:relative;}
.sc-widget{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
  border:0;
}
.track:last-of-type{border-bottom:1px solid var(--hairline);}
.mix-player:last-child .track{border-bottom:1px solid currentColor;}
.track:hover{padding-left:16px;}
.track::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--brand-bright);
  transform:translateY(-50%) scale(0);
  transition:transform .3s var(--ease-out);
}
.track:hover::before{transform:translateY(-50%) scale(1);}
.track h3{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-lead);
}
.track .tag{border-color:rgba(244,247,247,.3);}
.track .play{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(244,247,247,.3);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s,border-color .3s;
}
.track:hover .play{background:var(--sage);border-color:var(--sage);}
.track:hover .play svg{color:var(--ink);}
.track[aria-pressed="true"] .play{background:var(--brand);border-color:var(--brand);}
.track[aria-pressed="true"] .play svg{color:var(--paper);}
.track .play svg{width:11px;color:var(--paper);transition:color .3s;}
@media (max-width:640px){
  .track{grid-template-columns:1fr auto;}
  .track .tag{display:none;}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--brand);
  color:#191B19;
  margin-top:0;
  padding:clamp(72px,9vw,128px) 0 0;
}
.footer-grid{
  max-width:var(--max-w);margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1.2fr 1fr 1.2fr;   /* music column removed */
  gap:40px;
}
.footer-grid .mark{width:44px;color:#191B19;}
.footer-dpad{
  width:128px;
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center;
}
.footer-logo-mark{position:absolute;left:0;width:58px;height:auto;color:#191B19;transition:opacity .28s var(--ease-out),transform .32s var(--ease-out);pointer-events:none;}
.footer-dpad .dpad-art{position:absolute;inset:23px;width:calc(100% - 46px);height:calc(100% - 46px);pointer-events:none;opacity:0;transform:scale(.76);transition:opacity .26s var(--ease-out),transform .32s var(--ease-out);}
.footer-dpad:hover .footer-logo-mark,.footer-dpad:focus-within .footer-logo-mark{opacity:0;transform:scale(.72) rotate(-8deg);}
.footer-dpad:hover .dpad-art,.footer-dpad:focus-within .dpad-art{opacity:1;transform:scale(1);}
.footer-dpad .dpad-art [data-direction]{
  transform-box:fill-box;
  transform-origin:center;
  transition:fill .18s var(--ease-out),transform .16s var(--ease-out);
}
.footer-dpad button{
  appearance:none;
  border:0;padding:0;
  position:absolute;
  width:42%;height:42%;
  z-index:1;
  color:transparent;background:transparent;
  cursor:pointer;pointer-events:none;
  transition:transform .16s var(--ease-out);
}
.footer-dpad button:focus-visible{outline:1px solid var(--paper);outline-offset:2px;}
.footer-dpad button:active,.footer-dpad button.is-pressed{transform:scale(.92);}
.footer-dpad:hover button,.footer-dpad:focus-within button{pointer-events:auto;}
.footer-dpad button[data-direction="up"]{left:29%;top:4%;}
.footer-dpad button[data-direction="left"]{left:4%;top:29%;}
.footer-dpad button[data-direction="right"]{right:4%;top:29%;}
.footer-dpad button[data-direction="down"]{left:29%;bottom:4%;}
.footer-dpad:has(button[data-direction="up"]:hover) .dpad-art [data-direction="up"],
.footer-dpad:has(button[data-direction="up"]:focus-visible) .dpad-art [data-direction="up"],
.footer-dpad:has(button[data-direction="up"].is-pressed) .dpad-art [data-direction="up"],
.footer-dpad:has(button[data-direction="left"]:hover) .dpad-art [data-direction="left"],
.footer-dpad:has(button[data-direction="left"]:focus-visible) .dpad-art [data-direction="left"],
.footer-dpad:has(button[data-direction="left"].is-pressed) .dpad-art [data-direction="left"],
.footer-dpad:has(button[data-direction="right"]:hover) .dpad-art [data-direction="right"],
.footer-dpad:has(button[data-direction="right"]:focus-visible) .dpad-art [data-direction="right"],
.footer-dpad:has(button[data-direction="right"].is-pressed) .dpad-art [data-direction="right"],
.footer-dpad:has(button[data-direction="down"]:hover) .dpad-art [data-direction="down"],
.footer-dpad:has(button[data-direction="down"]:focus-visible) .dpad-art [data-direction="down"],
.footer-dpad:has(button[data-direction="down"].is-pressed) .dpad-art [data-direction="down"]{fill:var(--paper);}

/* Directional keyboard feedback */
.key-direction-cue{
  position:fixed;
  top:50%;
  left:50%;
  z-index:9000;
  display:grid;
  width:clamp(74px,8vw,118px);
  aspect-ratio:128 / 215;
  place-items:center;
  pointer-events:none;
  color:var(--brand);
  opacity:0;
  transform:translate(-50%,-50%) scale(.46);
  filter:drop-shadow(0 12px 26px rgba(2,103,85,.16));
}
.key-direction-cue svg{display:block;width:100%;height:100%;fill:currentColor;}
.key-direction-cue[data-direction="up"] svg{transform:rotate(-90deg);}
.key-direction-cue[data-direction="right"] svg{transform:rotate(0deg);}
.key-direction-cue[data-direction="down"] svg{transform:rotate(90deg);}
.key-direction-cue[data-direction="left"] svg{transform:rotate(180deg);}
.key-direction-cue.is-visible{animation:key-direction-cue .48s cubic-bezier(.16,.84,.31,1) forwards;}
@keyframes key-direction-cue{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.46);}
  32%{opacity:.9;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.78);}
}
/* ============================================================
   KONAMI RHYTHM MODE — a compact left/right arcade interlude.
   It is self-contained so the secret never re-colours or slows the site.
   ============================================================ */
.rhythm-game{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  padding:clamp(16px,3vw,48px);background:#191B19;
  --rhythm-energy:.12;
  --game-accent:var(--brand);
  color:var(--paper);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease-out),visibility 0s linear .3s;
  overflow:hidden;isolation:isolate;
}
.rhythm-game[data-combo-level="1"]{--game-accent:#00a68b;}
.rhythm-game[data-combo-level="2"]{--game-accent:#4582ff;}
.rhythm-game[data-combo-level="3"]{--game-accent:#9a5cff;}
.rhythm-game[data-combo-level="4"]{--game-accent:#df4f9f;}
.rhythm-game[data-combo-level="5"]{--game-accent:#ff784f;}
.rhythm-game[data-combo-level="6"]{--game-accent:#ffe052;}
body.rhythm-mode-active{overflow:hidden;}
.rhythm-game.is-active{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
.rhythm-game.is-intro .rhythm-shell{opacity:0;transform:scale(.94);}
.rhythm-shell{transition:opacity .42s var(--ease-out),transform .58s var(--ease-out);}
.rhythm-game::before,.rhythm-game::after{
  content:"";position:absolute;inset:-20%;pointer-events:none;z-index:-1;
}
.rhythm-game::before{
  background:
    radial-gradient(circle at 12% 8%,rgba(2,103,85,.2),transparent 30%),
    radial-gradient(circle at 88% 94%,rgba(2,103,85,.13),transparent 35%),
    radial-gradient(rgba(2,103,85,.55) 1.2px,transparent 1.8px);
  background-size:auto,auto,14px 14px;
  animation:rhythm-drift 17s ease-in-out infinite alternate;
}
.rhythm-game::after{background:linear-gradient(90deg,rgba(18,18,18,.5),transparent 28%,transparent 72%,rgba(18,18,18,.5));opacity:.9;}
@keyframes rhythm-drift{to{background-position:0 0,0 0,7px 10px;}}
.rhythm-logo-lines{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.24;mask-image:linear-gradient(transparent,black 7%,black 93%,transparent);}
.rhythm-logo-row{position:absolute;left:-44vw;display:flex;align-items:center;gap:clamp(18px,2.8vw,46px);width:max-content;color:var(--game-accent);will-change:transform;animation:rhythm-mark-drift var(--rhythm-duration) linear infinite alternate;}
.rhythm-logo-row:nth-child(1){top:4%;--rhythm-duration:20s;}
.rhythm-logo-row:nth-child(2){top:20%;--rhythm-duration:25s;animation-direction:alternate-reverse;}
.rhythm-logo-row:nth-child(3){top:36%;--rhythm-duration:22s;}
.rhythm-logo-row:nth-child(4){top:52%;--rhythm-duration:28s;animation-direction:alternate-reverse;}
.rhythm-logo-row:nth-child(5){top:68%;--rhythm-duration:24s;}
.rhythm-logo-row:nth-child(6){top:84%;--rhythm-duration:30s;animation-direction:alternate-reverse;}
.rhythm-logo-arrow{display:grid;place-items:center;opacity:.9;}
.rhythm-logo-arrow svg{width:clamp(38px,4.5vw,74px);height:clamp(64px,7.6vw,126px);fill:currentColor;}
.rhythm-logo-row.is-left .rhythm-logo-arrow svg{transform:rotate(180deg);}
@keyframes rhythm-mark-drift{to{transform:translateX(36vw);}}
.rhythm-shell{position:relative;z-index:1;width:min(940px,100%);display:grid;gap:clamp(14px,2vw,24px);}
.rhythm-unlock{position:absolute;inset:0;z-index:3;display:grid;place-items:center;overflow:hidden;isolation:isolate;pointer-events:none;background:#000;opacity:0;visibility:hidden;}
.rhythm-unlock::before,.rhythm-unlock::after{content:"";position:absolute;z-index:0;top:0;bottom:0;width:50.3%;background:#191B19;}
.rhythm-unlock::before{left:0;transform:translateX(-101%);}
.rhythm-unlock::after{right:0;transform:translateX(101%);}
.rhythm-unlock-mark{position:absolute;z-index:1;display:flex;gap:clamp(12px,2vw,32px);color:var(--brand);opacity:0;}
.rhythm-unlock-mark svg{width:clamp(60px,9vw,150px);height:clamp(102px,15vw,250px);fill:currentColor;filter:drop-shadow(0 0 30px rgba(2,103,85,.45));}
.rhythm-unlock-mark svg:first-child{transform:rotate(180deg);}
.rhythm-unlock-copy{position:relative;z-index:1;display:grid;gap:8px;text-align:center;text-transform:uppercase;opacity:0;}
.rhythm-unlock-copy small{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--brand);}
.rhythm-unlock-copy strong{font-family:var(--font-display);font-size:clamp(46px,10vw,150px);font-weight:400;letter-spacing:-.05em;line-height:.75;color:var(--paper);}
.rhythm-game.is-intro .rhythm-unlock{visibility:visible;opacity:1;}
.rhythm-game.is-intro .rhythm-unlock::before{animation:rhythm-enter-left 1.12s cubic-bezier(.16,1,.3,1) forwards;}
.rhythm-game.is-intro .rhythm-unlock::after{animation:rhythm-enter-right 1.12s cubic-bezier(.16,1,.3,1) forwards;}
.rhythm-game.is-intro .rhythm-unlock-mark{animation:rhythm-unlock-mark 1.04s cubic-bezier(.16,1,.3,1) .12s forwards;}
.rhythm-game.is-intro .rhythm-unlock-copy{animation:rhythm-unlock-copy .62s cubic-bezier(.16,1,.3,1) .42s forwards;}
@keyframes rhythm-enter-left{0%{transform:translateX(-101%)}46%{transform:translateX(0)}78%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes rhythm-enter-right{0%{transform:translateX(101%)}46%{transform:translateX(0)}78%{transform:translateX(0)}100%{transform:translateX(101%)}}
@keyframes rhythm-unlock-mark{0%{opacity:0;transform:scale(.42)}48%{opacity:1;transform:scale(1)}76%{opacity:1;transform:scale(1.14)}100%{opacity:0;transform:scale(1.65)}}
@keyframes rhythm-unlock-copy{0%{opacity:0;transform:translateY(24px) scale(.9)}42%{opacity:1;transform:translateY(0) scale(1)}72%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-12px) scale(1.06)}}
.rhythm-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.rhythm-kicker{color:var(--game-accent);}
.rhythm-score{display:flex;gap:18px;align-items:center;font-family:var(--font-mono);font-size:11px;}
.rhythm-score b{display:block;margin-top:3px;font-size:18px;line-height:1;color:var(--paper);letter-spacing:-.04em;}
.rhythm-exit{border:1px solid rgba(244,247,247,.42);border-radius:999px;background:transparent;color:inherit;padding:8px 12px;font:inherit;cursor:pointer;transition:background-color .2s,color .2s;}
.rhythm-exit:hover{background:var(--paper);color:var(--ink);}
.rhythm-stage{position:relative;height:min(64vh,660px);min-height:430px;overflow:hidden;border:1px solid rgba(244,247,247,.22);border-radius:clamp(18px,2vw,30px);background:linear-gradient(135deg,color-mix(in srgb,var(--game-accent) 22%,transparent),#191B19 44%,color-mix(in srgb,var(--game-accent) 12%,transparent));box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 72px color-mix(in srgb,var(--game-accent) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .34s ease,box-shadow .34s ease,background .34s ease;}
.rhythm-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(244,247,247,.07) 50%,transparent 50.2%);pointer-events:none;}
.rhythm-stage::after{content:"";position:absolute;inset:0;border:1px solid rgba(244,247,247,.7);border-radius:inherit;opacity:0;pointer-events:none;}
.rhythm-stage.is-impact::after{animation:rhythm-impact .42s ease-out;}
@keyframes rhythm-impact{0%{opacity:.72;transform:scale(.985)}100%{opacity:0;transform:scale(1.035)}}
.rhythm-stage.is-streak{border-color:color-mix(in srgb,var(--game-accent) 78%,#F4F7F7);box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 82px color-mix(in srgb,var(--game-accent) 46%,transparent),inset 0 0 34px color-mix(in srgb,var(--game-accent) 18%,transparent);}
.rhythm-stage.is-streak::before{background:linear-gradient(90deg,transparent 49.8%,color-mix(in srgb,var(--game-accent) 42%,transparent) 50%,transparent 50.2%);}
.rhythm-lane::before{content:"";position:absolute;z-index:1;top:-18%;left:50%;width:2px;height:46%;opacity:0;background:linear-gradient(transparent,var(--game-accent),#F4F7F7,var(--game-accent),transparent);box-shadow:0 0 13px var(--game-accent);transform:rotate(22deg) translateX(-50%);pointer-events:none;}
.rhythm-stage.is-streak .rhythm-lane::before{animation:rhythm-voltage .74s ease-in-out infinite;animation-delay:calc(var(--lane-index, 0) * -.11s);}
@keyframes rhythm-voltage{0%,100%{opacity:0;transform:rotate(22deg) translate(-50%,-12%)}35%{opacity:.76}62%{opacity:.14}76%{opacity:.58;transform:rotate(22deg) translate(-50%,108%)}}
.rhythm-spark{position:absolute;z-index:6;width:5px;height:5px;border-radius:999px;background:var(--paper);box-shadow:0 0 12px var(--brand);pointer-events:none;animation:rhythm-spark .44s cubic-bezier(.16,.84,.31,1) forwards;}
@keyframes rhythm-spark{to{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.15)}}
.rhythm-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);padding:0 clamp(16px,5vw,72px);}
.rhythm-lane{position:relative;border-right:1px solid rgba(244,247,247,.14);overflow:hidden;}
.rhythm-lane:first-child{border-left:1px solid rgba(244,247,247,.14);}
.rhythm-lane::after{content:"";position:absolute;right:0;bottom:20%;left:0;height:2px;background:#F4F7F7;box-shadow:0 0 18px rgba(244,247,247,.8);z-index:3;}
.rhythm-target{position:absolute;bottom:calc(20% - 34px);left:50%;z-index:4;width:64px;height:64px;transform:translateX(-50%);display:grid;place-items:center;border:1px solid rgba(244,247,247,.62);border-radius:18px;background:rgba(18,18,18,.86);box-shadow:0 9px 24px rgba(0,0,0,.32);transition:background-color .12s,transform .12s,color .12s;}
.rhythm-target svg,.rhythm-note svg{display:block;width:22px;height:38px;fill:currentColor;}
.rhythm-target[data-direction="up"] svg,.rhythm-note[data-direction="up"] svg{transform:rotate(-90deg);}
.rhythm-target[data-direction="right"] svg,.rhythm-note[data-direction="right"] svg{transform:rotate(0deg);}
.rhythm-target[data-direction="down"] svg,.rhythm-note[data-direction="down"] svg{transform:rotate(90deg);}
.rhythm-target[data-direction="left"] svg,.rhythm-note[data-direction="left"] svg{transform:rotate(180deg);}
.rhythm-target.is-hit{background:#F4F7F7;color:#191B19;transform:translateX(-50%) scale(.9);}
.rhythm-note{position:absolute;top:0;left:50%;z-index:2;width:52px;height:62px;display:grid;place-items:center;color:var(--game-accent);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--game-accent) 65%,transparent));will-change:transform;}
.rhythm-note svg{width:31px;height:51px;}
.rhythm-note.is-hit{color:#F4F7F7;filter:drop-shadow(0 0 18px #F4F7F7);}
.rhythm-note.is-missed{opacity:.16;}
.rhythm-feedback{position:absolute;top:calc(80% - 96px);left:50%;z-index:5;transform:translateX(-50%);font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--game-accent);opacity:0;pointer-events:none;}
.rhythm-feedback.is-visible{animation:rhythm-feedback .42s ease-out;}
@keyframes rhythm-feedback{0%{opacity:0;transform:translate(-50%,10px) scale(.86)}35%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-15px) scale(1.03)}}
.rhythm-instructions{text-align:center;color:rgba(244,247,247,.68);font-size:12px;letter-spacing:.02em;}
@media (max-width:600px){
  .rhythm-game{padding:10px;}.rhythm-stage{min-height:420px;height:68vh;border-radius:18px;}
  .rhythm-lanes{padding:0 10px;}.rhythm-target{width:50px;height:50px;border-radius:14px;}.rhythm-target svg{width:17px;height:29px;}
  .rhythm-note{width:42px;height:52px;}.rhythm-note svg{width:25px;height:41px;}.rhythm-score{gap:10px;}
}
@media (prefers-reduced-motion:reduce){.rhythm-game::before,.rhythm-logo-row,.rhythm-game.is-intro .rhythm-unlock::before,.rhythm-game.is-intro .rhythm-unlock::after,.rhythm-game.is-intro .rhythm-unlock-mark,.rhythm-game.is-intro .rhythm-unlock-copy{animation:none;}.rhythm-game{transition:none;}}
.footer-grid h4{font-size:var(--fs-body);font-weight:500;margin-bottom:16px;}
.footer-grid ul li{margin-bottom:8px;}
.footer-grid ul a{
  font-size:var(--fs-body);
  opacity:.6;transition:opacity .25s,color .25s;
}
.footer-grid ul a:hover{opacity:1;color:#191B19;}
.footer-quote{
  font-size:var(--fs-body);
  line-height:1.65;opacity:.6;
}
.footer-social{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;}
.footer-social h4{margin-bottom:16px;}
.footer-social ul{display:block;}
.footer-wordmark{
  max-width:var(--max-w);margin:0 auto;
  padding:clamp(56px,7vw,96px) var(--gutter) var(--gutter);
}
.footer-wordmark-stage{
  position:relative;
  aspect-ratio:1354/721;
  overflow:hidden;
}
.footer-wordmark-state{
  position:absolute;
  right:0;bottom:0;left:0;
  display:block;
  width:100%;height:auto;
}
.footer-wordmark-small{display:none;}
.footer-wordmark-big{
  opacity:1;
  transform-origin:50% 0%;
  will-change:transform;
}
.footer-wordmark-legacy{display:none;}
.footer-wordmark img{pointer-events:none;user-select:none;}
@media (prefers-reduced-motion:reduce){
  .footer-wordmark-stage{aspect-ratio:auto;}
  .footer-wordmark-big{position:static;opacity:1;}
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-social{justify-content:flex-start;}
}
/* Must stay after the 900px rule above, or phones get the lopsided two-column footer. */
@media (max-width:460px){
  .footer-grid{grid-template-columns:1fr;gap:24px;}
}

@media (prefers-reduced-motion:reduce){
  body::after{animation:none;}
}

/* ============================================================
   HOMEPAGE TEST V2 — editorial, image-led direction
   Enabled only with ?test=v2 so the current homepage is untouched.
   ============================================================ */
/* The concept section must stay out of the original homepage's layout. */
html:not(.homepage-test-v2) main > section.homepage-test-v2{display:none;}
html.homepage-test-v2{
  --font-display:'Geist',system-ui,sans-serif;
  --font-body:'Geist',system-ui,sans-serif;
}
.homepage-test-v2 body{background:#191B19;color:#f1f0ed;}
.homepage-test-v2 .preloader{display:none!important;}
.homepage-test-v2 #pageBend{background:#191B19;}
.homepage-test-v2 #pageBend main>:not(.homepage-test-v2),
.homepage-test-v2 #pageBend>footer{display:none!important;}
.homepage-test-v2 .nav{font-family:var(--font-body);}
.homepage-test-v2 .homepage-test-v2{display:block;position:relative;z-index:1;background:#191B19;min-height:100svh;padding:clamp(116px,13vw,188px) clamp(18px,2.6vw,50px) clamp(40px,5vw,96px);}
.test-v2-shell{width:min(100%,1800px);margin:0 auto;}
.test-v2-kicker{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:clamp(64px,9vw,160px);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:rgba(241,240,237,.58);}
.test-v2-kicker strong{font-weight:500;color:#f1f0ed;}
.test-v2-intro{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.45fr);gap:clamp(28px,6vw,110px);align-items:end;margin-bottom:clamp(70px,10vw,180px);}
.test-v2-title{max-width:13ch;font-size:clamp(40px,6vw,108px);line-height:.94;letter-spacing:-.075em;font-weight:500;}
.test-v2-title em{font-style:normal;color:#086755;}
.test-v2-copy{max-width:31ch;font-size:clamp(14px,1.2vw,18px);line-height:1.35;letter-spacing:-.035em;color:rgba(241,240,237,.68);padding-bottom:.3em;}
.test-v2-utility{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 14px;border-bottom:1px solid rgba(241,240,237,.24);font-size:11px;letter-spacing:.015em;text-transform:uppercase;color:rgba(241,240,237,.6);}
.test-v2-utility span:last-child{color:#f1f0ed;}
.test-v2-list{display:grid;gap:clamp(42px,6.5vw,112px);}
.test-v2-project{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:clamp(18px,2.6vw,50px);align-items:end;color:inherit;group:project;}
.test-v2-project:nth-child(even){grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);}
.test-v2-project:nth-child(even) .test-v2-media{order:2;}
.test-v2-project:nth-child(even) .test-v2-project-meta{order:1;}
.test-v2-media{display:block;overflow:hidden;background:#202020;aspect-ratio:16/10;}
.test-v2-media img,.test-v2-media video{width:100%;height:100%;display:block;object-fit:cover;transition:transform .9s var(--ease-out),filter .9s var(--ease-out);}
.test-v2-project:hover .test-v2-media img,.test-v2-project:hover .test-v2-media video{transform:scale(1.025);filter:contrast(1.05);}
.test-v2-project-meta{display:grid;gap:18px;padding:0 clamp(0px,1vw,18px) clamp(4px,.6vw,12px);}
.test-v2-index{font-size:11px;letter-spacing:.02em;color:#086755;}
.test-v2-project h2{font-size:clamp(28px,3.4vw,62px);font-weight:500;line-height:.95;letter-spacing:-.07em;}
.test-v2-project p{max-width:28ch;font-size:14px;line-height:1.35;letter-spacing:-.035em;color:rgba(241,240,237,.62);}
.test-v2-details{display:flex;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid rgba(241,240,237,.2);font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:rgba(241,240,237,.6);}
.test-v2-details span:last-child{color:#f1f0ed;transition:color .25s ease;}
.test-v2-project:hover .test-v2-details span:last-child{color:#086755;}
.test-v2-closing{margin-top:clamp(96px,14vw,240px);display:flex;justify-content:space-between;align-items:end;gap:24px;border-top:1px solid rgba(241,240,237,.24);padding-top:16px;font-size:clamp(18px,2.2vw,34px);font-weight:500;letter-spacing:-.06em;}
.test-v2-closing span{color:#086755;}
@media (max-width:700px){
  .homepage-test-v2 .homepage-test-v2{padding-top:104px;}
  .test-v2-kicker{margin-bottom:64px;}
  .test-v2-intro,.test-v2-project,.test-v2-project:nth-child(even){grid-template-columns:1fr;gap:22px;}
  .test-v2-project:nth-child(even) .test-v2-media,.test-v2-project:nth-child(even) .test-v2-project-meta{order:initial;}
  .test-v2-title{max-width:12ch;font-size:clamp(44px,13vw,74px);}
  .test-v2-copy{max-width:34ch;}
  .test-v2-project-meta{padding:0;gap:14px;}
  .test-v2-project h2{font-size:42px;}
  .test-v2-closing{margin-top:100px;}
}

/* The test follows the reference's 12-column publication rhythm: minimal
   information columns, a small sticky work bar, and deliberately unframed
   image strips rather than conventional project cards. */
.homepage-test-v2 .homepage-test-v2{padding:clamp(142px,16vh,210px) 0 0;}
.homepage-test-v2 .test-v2-shell{width:100%;margin:0;}
.homepage-test-v2 .test-v2-shell,.homepage-test-v2 .test-v2-shell *{font-family:var(--font-body);}
.homepage-test-v2 .test-v2-topline,.homepage-test-v2 .test-v2-info,.homepage-test-v2 .test-v2-worknav,.homepage-test-v2 .test-v2-project-copy{font-family:var(--font-mono)!important;letter-spacing:-.02em;}
.homepage-test-v2 .test-v2-topline,.homepage-test-v2 .test-v2-intro,.homepage-test-v2 .test-v2-info,.homepage-test-v2 .test-v2-worknav{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,1.8vw,28px);padding-inline:clamp(20px,3.2vw,50px);}
.homepage-test-v2 .test-v2-topline{align-items:center;font-size:11px;line-height:1.2;letter-spacing:.045em;text-transform:uppercase;color:rgba(241,240,237,.72);padding-bottom:clamp(48px,7vh,92px);}
.homepage-test-v2 .test-v2-topline span:first-child{grid-column:1/4;color:#f1f0ed;}
.homepage-test-v2 .test-v2-topline span:nth-child(2){grid-column:7/9;}
.homepage-test-v2 .test-v2-topline span:last-child{grid-column:11/13;text-align:right;}
.homepage-test-v2 .test-v2-intro{align-items:start;padding-bottom:clamp(64px,10vh,150px);}
.homepage-test-v2 .test-v2-intro p{margin:0;font-size:clamp(23px,2.25vw,36px);line-height:1.12;letter-spacing:-.02em;font-weight:400;}
.homepage-test-v2 .test-v2-intro p:first-child{grid-column:1/6;}
.homepage-test-v2 .test-v2-intro p:last-child{grid-column:7/12;}
.homepage-test-v2 .test-v2-intro a{display:inline;border-bottom:1px solid currentColor;padding-bottom:1px;}
.homepage-test-v2 .test-v2-info{padding-bottom:clamp(78px,12vh,170px);align-items:start;font-size:11px;line-height:1.55;letter-spacing:.045em;text-transform:uppercase;color:rgba(241,240,237,.7);}
.homepage-test-v2 .test-v2-info>div{display:grid;gap:18px;}
.homepage-test-v2 .test-v2-info>div:nth-child(1){grid-column:1/3;}
.homepage-test-v2 .test-v2-info>div:nth-child(2){grid-column:4/6;}
.homepage-test-v2 .test-v2-info>div:nth-child(3){grid-column:7/10;}
.homepage-test-v2 .test-v2-info>div:nth-child(4){grid-column:11/13;}
.homepage-test-v2 .test-v2-info small{font:inherit;color:#086755;}
.homepage-test-v2 .test-v2-info a{color:#f1f0ed;}
.homepage-test-v2 .test-v2-worknav{position:sticky;top:0;z-index:3;align-items:center;padding-top:18px;padding-bottom:18px;background:#191B19;border-block:1px solid rgba(241,240,237,.2);font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.05em;}
.homepage-test-v2 .test-v2-worknav span:first-child{grid-column:1/3;}
.homepage-test-v2 .test-v2-worknav span:nth-child(2){grid-column:7/10;color:rgba(241,240,237,.62);}
.homepage-test-v2 .test-v2-worknav span:last-child{grid-column:11/13;text-align:right;}
.homepage-test-v2 .test-v2-list{display:block;}
.homepage-test-v2 .test-v2-project{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);align-items:start;min-height:calc(100vh - 90px);padding:clamp(38px,5vh,78px) clamp(20px,3.2vw,50px) clamp(60px,9vh,138px);margin:0;border-bottom:1px solid rgba(241,240,237,.2);color:#f1f0ed;}
.homepage-test-v2 .test-v2-project-copy{position:sticky;top:94px;grid-column:1/4;display:grid;align-content:start;gap:18px;font-size:11px;line-height:1.4;letter-spacing:.025em;text-transform:uppercase;color:rgba(241,240,237,.65);}
.homepage-test-v2 .test-v2-project-copy h2{font-size:clamp(26px,3vw,52px);font-weight:400;line-height:.95;letter-spacing:-.02em;text-transform:none;color:#f1f0ed;}
.homepage-test-v2 .test-v2-project-copy p{max-width:25ch;}
.homepage-test-v2 .test-v2-project-copy a{width:max-content;margin-top:8px;border-bottom:1px solid currentColor;padding-bottom:2px;color:#086755;transition:color .2s ease;}
.homepage-test-v2 .test-v2-project-copy a:hover{color:#f1f0ed;}
.homepage-test-v2 .test-v2-strip{grid-column:5/13;display:flex;align-items:start;gap:clamp(14px,1.8vw,28px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:6px;cursor:grab;}
.homepage-test-v2 .test-v2-strip::-webkit-scrollbar{display:none;}
.homepage-test-v2 .test-v2-strip>*{flex:0 0 auto;width:min(75vw,940px);height:min(74vh,760px);display:block;object-fit:cover;background:#1d1d1d;}
.homepage-test-v2 .test-v2-strip>*:nth-child(2){width:min(42vw,560px);}
.homepage-test-v2 .test-v2-title,.homepage-test-v2 .test-v2-copy,.homepage-test-v2 .test-v2-utility,.homepage-test-v2 .test-v2-project-meta,.homepage-test-v2 .test-v2-index,.homepage-test-v2 .test-v2-details,.homepage-test-v2 .test-v2-closing{display:none;}

/* Keep the original contact footer as the closing moment for the editorial
   route. The old content remains hidden, but the footer is intentionally
   brought back after the new project listing. */
.homepage-test-v2 #pageBend>footer{
  display:block!important;
  position:relative;
  z-index:2;
  margin-top:0;
  max-height:100svh;
  overflow:hidden;
}
.homepage-test-v2 #pageBend>footer .footer-grid,
.homepage-test-v2 #pageBend>footer .footer-wordmark{max-width:none;}
.homepage-test-v2 #pageBend>footer .footer-grid{padding-inline:clamp(20px,3.2vw,50px);}
.homepage-test-v2 #pageBend>footer .footer-wordmark{padding-inline:clamp(20px,3.2vw,50px);}

/* The selected projects deliberately use the same quiet, image-led language
   as the reference: compact copy on the left and a continuous image strip
   rather than a reintroduction of the former card system. */
.homepage-test-v2 .test-v2-project:first-child{padding-top:clamp(58px,8vh,112px);}
.homepage-test-v2 .test-v2-strip{scroll-snap-type:x proximity;}
.homepage-test-v2 .test-v2-strip>*{scroll-snap-align:start;}
@media (max-width:800px){
  .homepage-test-v2 .test-v2-topline,.homepage-test-v2 .test-v2-intro,.homepage-test-v2 .test-v2-info,.homepage-test-v2 .test-v2-worknav,.homepage-test-v2 .test-v2-project{grid-template-columns:repeat(6,minmax(0,1fr));}
  .homepage-test-v2 .test-v2-topline span:first-child{grid-column:1/4;}.homepage-test-v2 .test-v2-topline span:nth-child(2){display:none;}.homepage-test-v2 .test-v2-topline span:last-child{grid-column:5/7;}
  .homepage-test-v2 .test-v2-intro{row-gap:28px;}.homepage-test-v2 .test-v2-intro p:first-child,.homepage-test-v2 .test-v2-intro p:last-child{grid-column:1/7;}
  .homepage-test-v2 .test-v2-intro p{font-size:clamp(25px,7vw,36px);}
  .homepage-test-v2 .test-v2-info{row-gap:34px;}.homepage-test-v2 .test-v2-info>div:nth-child(1),.homepage-test-v2 .test-v2-info>div:nth-child(2),.homepage-test-v2 .test-v2-info>div:nth-child(3),.homepage-test-v2 .test-v2-info>div:nth-child(4){grid-column:span 3;}
  .homepage-test-v2 .test-v2-worknav span:first-child{grid-column:1/3;}.homepage-test-v2 .test-v2-worknav span:nth-child(2){grid-column:3/5;}.homepage-test-v2 .test-v2-worknav span:last-child{grid-column:5/7;}
  .homepage-test-v2 .test-v2-project{min-height:auto;row-gap:24px;}.homepage-test-v2 .test-v2-project-copy{position:static;grid-column:1/7;}.homepage-test-v2 .test-v2-strip{grid-column:1/7;}.homepage-test-v2 .test-v2-strip>*{width:82vw;height:62vh;}.homepage-test-v2 .test-v2-strip>*:nth-child(2){width:58vw;}
}

/* ============================================================
   ABOUT PANEL / half-width sheet from the right (after bymonolog.com)
   ============================================================ */
.about-panel{position:fixed;inset:0;z-index:1950;pointer-events:none;}  /* above the nav, even on /work and /archive */
.about-panel.is-open{pointer-events:auto;}
.about-panel-scrim{
  position:absolute;inset:0;
  background:rgba(25,27,25,.55);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .5s var(--ease-out);
}
.about-panel.is-open .about-panel-scrim{opacity:1;}
.about-panel-sheet{
  position:absolute;top:0;right:0;bottom:0;
  width:min(720px,50vw);
  background:var(--paper);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  padding:0 clamp(18px,1.8vw,26px) clamp(32px,5vh,56px);
  transform:translateX(100%);visibility:hidden;
  transition:transform .75s cubic-bezier(.7,0,.2,1), visibility 0s linear .75s;
}
.about-panel.is-open .about-panel-sheet{
  transform:none;visibility:visible;
  transition:transform .75s cubic-bezier(.7,0,.2,1), visibility 0s;
}
html.about-open{overflow:hidden;}
.about-panel-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;background:var(--paper);
}
.about-panel-label{
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-label);
}
.about-panel-label::before{
  content:"";width:8px;height:8px;flex:none;background:var(--brand);
  clip-path:polygon(0 0,100% 100%,0 100%);   /* the left half of the mark */
}
.about-panel-close{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--paper);
  border-radius:6px;padding:6px 6px 6px 10px;
  font-size:var(--fs-body);font-weight:500;cursor:pointer;
}
.about-panel-close kbd{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  border:1px solid rgba(244,247,247,.3);border-radius:3px;padding:1px 4px;opacity:.7;
}
.about-panel-close:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.about-panel-intro{
  margin:clamp(48px,9vh,110px) 0 clamp(40px,7vh,88px);
  max-width:22em;
  font-size:var(--fs-heading);line-height:1.3;letter-spacing:-.02em;
}
.about-panel-meta{
  display:flex;justify-content:space-between;gap:16px;
  padding-bottom:10px;
  font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);opacity:.7;
}
.about-panel-media{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--ink);aspect-ratio:3/2;}
.about-panel-media img{width:100%;height:100%;object-fit:cover;}
.about-panel-media figcaption{
  position:absolute;left:20px;bottom:18px;right:20px;
  color:var(--paper);font-size:var(--fs-heading);line-height:1.1;letter-spacing:-.03em;font-style:italic;
}
.about-panel-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;
  padding:22px 0;border-top:1px solid var(--hairline);
}
.about-panel-media + .about-panel-row{margin-top:clamp(32px,5vh,56px);}
.about-panel-row .about-panel-label{align-self:start;padding-top:5px;}
.about-panel-list{list-style:none;margin:0;padding:0;}
.about-panel-list li{font-size:var(--fs-lead);font-weight:500;line-height:1.3;letter-spacing:-.02em;}
.about-panel-contact a{border-bottom:1px solid var(--hairline);transition:border-color .25s;}
.about-panel-contact a:hover{border-color:currentColor;}
.about-panel-principles > div{padding-bottom:14px;}
.about-panel-principles > div + div{padding-top:14px;border-top:1px solid var(--hairline);}
.about-panel-principles h4{margin:0 0 4px;font-size:var(--fs-body);font-weight:600;}
.about-panel-principles p{margin:0;font-size:var(--fs-body);line-height:1.45;opacity:.6;}
@media (max-width:760px){
  .about-panel-sheet{width:100vw;}
  .about-panel-row{grid-template-columns:1fr;gap:12px;}
}
@media (prefers-reduced-motion:reduce){
  .about-panel-sheet,.about-panel.is-open .about-panel-sheet,.about-panel-scrim{transition:none;}
}

/* ============================================================
   HERO TEST (?test=hero) / calmer layout: sentence and a small
   View Work link top-left, mono index top-right, the mark drawn
   from arrows in the middle, the name at the bottom as before.
   ============================================================ */
.hero-index{display:none;}
html.hero-test .hero-sentence{
  top:clamp(104px,15vh,150px);left:var(--edge);right:auto;
  transform:none;display:block;white-space:normal;
  max-width:15em;line-height:1.3;letter-spacing:-.02em;text-align:left;
}
html.hero-test .hero-sentence span{display:inline;}
html.hero-test .hero-sentence .hero-sentence-left::after{content:" ";}
html.hero-test .hero-links{
  top:calc(clamp(104px,15vh,150px) + 64px);left:var(--edge);
  transform:none;justify-content:flex-start;
}
html.hero-test .hero-about-cta{display:none;}
html.hero-test .hero-index{
  display:grid;gap:4px;justify-items:end;
  position:absolute;z-index:2;top:clamp(104px,15vh,150px);right:var(--edge);
  font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--paper);opacity:.6;pointer-events:none;
}
@media (max-width:760px){
  html.hero-test .hero-sentence{top:92px;left:18px;right:auto;max-width:12em;}
  html.hero-test .hero-sentence span{display:inline;}
  html.hero-test .hero-sentence .hero-sentence-right{text-align:left;}
  html.hero-test .hero-links{top:160px;left:18px;justify-content:flex-start;}
  html.hero-test .hero-index{top:96px;right:18px;}
}

/* ============================================================
   HERO EXPERIMENTS (?test=a / b / c)
   No full-screen hero: the page opens light and the work arrives
   inside the first screen. Everything below is scoped to .hero-v.
   ============================================================ */
.hv{display:none;}
html.hero-v body,html.hero-v #pageBend{background:var(--paper);}
html.hero-v .hero,
html.hero-v .marquee{display:none;}
html.hero-v .hv{background:var(--paper);color:var(--ink);position:relative;z-index:1;}
html.hero-v .about-band{padding:clamp(28px,4vw,56px) 0;}
html.hero-v .light-band > .section:first-child{padding-block:clamp(24px,3vw,40px);}

/* A / Wordmark: the stretched footer wordmark becomes the headline. */
html.hv-a .hv-block-a{display:block;padding-top:clamp(96px,12vh,128px);}
.hv-a-word{display:block;width:100%;height:clamp(180px,40vh,420px);object-fit:fill;}

/* B / Statement: one big sentence, a project film set inline like a word,
   and the logo (turning with the nav) standing in for a word. */
html.hv-b .hv-block-b{display:block;padding-top:clamp(120px,16vh,168px);}
.hv-b-head{
  margin:0;max-width:13em;
  font-size:clamp(44px,7vw,112px);font-weight:600;
  line-height:.94;letter-spacing:-.05em;
}
.hv-b-media{
  display:inline-block;position:relative;vertical-align:-.04em;
  width:1.7em;height:.74em;margin:0 .06em;
  border-radius:.12em;overflow:hidden;background:var(--sage);
}
.hv-b-item{position:absolute;inset:0;opacity:0;animation:hvCycle 10s infinite both;}
.hv-b-item:nth-child(2){animation-delay:2.5s;}
.hv-b-item:nth-child(3){animation-delay:5s;}
.hv-b-item:nth-child(4){animation-delay:7.5s;}
.hv-b-item video,.hv-b-item img{width:100%;height:100%;object-fit:cover;}
@keyframes hvCycle{0%{opacity:0}3%{opacity:1}25%{opacity:1}28%{opacity:0}100%{opacity:0}}
.hv-b-mark{display:inline-block;width:1.05em;height:.5em;vertical-align:.04em;color:var(--brand);overflow:visible;}
html.hv-b .about-band{padding-top:clamp(24px,3vw,40px);}
html.hv-b .about-band .about-statement{font-size:var(--fs-lead);line-height:1.45;}
@media (prefers-reduced-motion:reduce){.hv-b-item{animation:none;}.hv-b-item:first-child{opacity:1;}}

/* C / Strip: small intro, a tiny arrow-drawn logo, then every project
   in a horizontal strip straight away. */
html.hv-c .hv-block-c{display:block;padding-top:clamp(112px,14vh,150px);}
html.hv-c .about-band{display:none;}
.hv-c-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.hv-c-intro{margin:0;font-size:var(--fs-heading);line-height:1.4;letter-spacing:-.02em;}
.hv-c-intro span{display:block;}
.hv-c-intro .about-triangle{width:.62em;height:.62em;margin:0 .08em;vertical-align:-.04em;color:var(--brand);}
.hv-c-mark{width:168px;height:78px;flex:none;}
.hv-c-strip{
  display:flex;gap:clamp(12px,1.2vw,16px);
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-top:clamp(40px,6vh,72px);
  padding:0 var(--edge) 8px;scroll-padding-left:var(--edge);
}
.hv-c-strip::-webkit-scrollbar{display:none;}
.hv-c-card{flex:none;align-self:flex-start;width:clamp(240px,26vw,380px);scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;}
.hv-c-card:nth-child(3n+2){width:clamp(280px,34vw,500px);}   /* varied widths, like a contact sheet */
.hv-c-media{display:block;height:clamp(200px,20vw,290px);border-radius:12px;overflow:hidden;background:var(--sage);margin-bottom:10px;}
.hv-c-media video,.hv-c-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.hv-c-card:hover .hv-c-media video,.hv-c-card:hover .hv-c-media img{transform:scale(1.03);}
.hv-c-name{font-size:var(--fs-body);font-weight:500;}
.hv-c-meta{font-size:var(--fs-body);opacity:.5;}
@media (max-width:760px){
  .hv-a-word{height:22vh;}
  .hv-b-head{font-size:clamp(38px,11vw,56px);}
  .hv-c-top{flex-direction:column;align-items:flex-start;}
  .hv-c-mark{width:120px;height:56px;}
  .hv-c-card,.hv-c-card:nth-child(3n+2){width:74vw;}
  .hv-c-media{height:52vw;}
}

/* ============================================================
   NEW HOMEPAGE LAYOUT (?test=new) / the light, typographic homepage
   with the original nav pill and green footer. Scoped to .hv-n.
   ============================================================ */
html.hv-n .about-band{display:none;}
html.hv-n .hv-block-n{display:block;padding-top:clamp(128px,17vh,176px);}
html.hv-n .hv-block-n2{display:block;padding:clamp(110px,16vh,190px) 0;}
.nh-dim{opacity:.5;}
.nh-head{
  max-width:14em;margin:0;
  font-size:clamp(38px,6vw,92px);font-weight:600;
  line-height:.96;letter-spacing:-.05em;
}
.nh-head-mark{display:inline-block;width:1.05em;height:.5em;vertical-align:.05em;color:var(--brand);overflow:visible;}
.nh-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:clamp(40px,7vh,72px);max-width:760px;line-height:1.5;
}
.nh-cols p{margin:0;}
.nh-cols a{border-bottom:1px solid var(--hairline);transition:border-color .25s;}
.nh-cols a:hover{border-color:currentColor;}
/* "Selected Work" becomes a quiet left-aligned label with a hairline */
html.hv-n .light-band > .section:first-child{display:block;padding-block:clamp(64px,10vh,112px) 0;}
html.hv-n .light-band > .section:first-child .section-head{
  justify-content:flex-start;text-align:left;width:100%;margin-left:0;margin-right:0;
  padding-bottom:14px;margin-bottom:clamp(20px,3vw,32px);
  border-bottom:1px solid rgba(25,27,25,.14);
}
html.hv-n .light-band > .section:first-child .section-head h2{font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em;}
.nh-fill{
  max-width:22em;margin:0;
  font-size:clamp(28px,3.6vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.04em;
}
.nh-fill .w{opacity:.16;transition:opacity .35s;}
.nh-fill .w.on{opacity:1;}
@media (max-width:760px){
  .nh-cols{grid-template-columns:1fr 1fr;}
  .nh-cols p:first-child{grid-column:1 / -1;}
}
@media (prefers-reduced-motion:reduce){.nh-fill .w{opacity:1;}}

/* ============================================================
   NEW HOMEPAGE, DARK (?test=new) / after modilium.com in Lucas's
   branding: arrow-drawn mark hero with a small wordmark and tagline,
   a line of text + View All Work, the cards, Services, FAQ.
   These rules come last and override the earlier light ?test=new.
   ============================================================ */
html.hv-n .marquee,
html.hv-n .hero-index,
html.hv-n .hero-name,
html.hv-n .work-foot{display:none;}
.hv-n-hero{display:none;}
html.hv-n .hv-n-hero{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:absolute;z-index:2;top:45%;left:var(--edge);right:var(--edge);
  transform:translateY(-50%);pointer-events:none;color:var(--paper);
}
.hv-n-word{width:clamp(150px,15vw,230px);height:auto;}
.hv-n-tag{margin:0;text-align:right;font-size:var(--fs-lead);line-height:1.25;letter-spacing:-.02em;}
.hv-n-tag span{opacity:.5;}

/* everything after the hero sits on the same near-black */
html.hv-n .hv,
html.hv-n .light-band{background:var(--black);color:var(--paper);}
html.hv-n .hv-block-n,
html.hv-n .hv-block-svc,
html.hv-n .hv-block-faq{display:block;}

/* text below the hero */
html.hv-n .hv-block-n{padding:clamp(96px,14vh,160px) 0 clamp(24px,4vh,40px);}
.nh-lead-btn{margin-top:clamp(28px,4vh,40px);}

/* selected work label + dark cards (same layout and sizes) */
html.hv-n .light-band > .section:first-child .section-head{border-bottom-color:rgba(244,247,247,.14);}
html.hv-n .work-featured .work-card{
  background:#222522;border-color:rgba(244,247,247,.06);box-shadow:none;color:var(--paper);
}
html.hv-n .tag{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:12px;}
html.hv-n .light-band .work-featured .work-cta{color:var(--paper);}
html.hv-n .light-band .work-featured .work-cta .ic{color:var(--paper);}
html.hv-n .light-band .work-featured .work-card:hover .work-cta{background:var(--paper);color:var(--ink);}
html.hv-n .light-band .work-featured .work-card:hover .work-cta .ic{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* small section label with the green half-mark */
.nh-label{
  display:flex;align-items:center;gap:10px;margin:0 0 clamp(20px,3vw,32px);
  font-size:var(--fs-body);font-weight:500;
}
.nh-label::before{content:"";width:9px;height:9px;background:var(--brand);clip-path:polygon(0 0,100% 100%,0 100%);}
.nh-plus{position:relative;width:14px;height:14px;flex:none;justify-self:end;}
.nh-plus::before,.nh-plus::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;
  background:currentColor;transition:transform .35s var(--ease-out);
}
.nh-plus::after{transform:rotate(90deg);}
details.is-open > summary .nh-plus::before{transform:rotate(45deg);}
details.is-open > summary .nh-plus::after{transform:rotate(135deg);}
details > summary{list-style:none;cursor:pointer;}
details > summary::-webkit-details-marker{display:none;}

/* services: big rows, open to show what's included */
html.hv-n .hv-block-svc{padding:clamp(110px,16vh,180px) 0;}
.nh-svc{border-top:1px solid rgba(244,247,247,.14);}
.nh-svc:last-of-type{border-bottom:1px solid rgba(244,247,247,.14);}
.nh-svc > summary{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 24px;align-items:center;gap:24px;
  padding:clamp(20px,2.6vw,30px) 0;
}
.nh-svc-name{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1;transition:transform .45s var(--ease-out),color .3s;}
.nh-svc > summary:hover .nh-svc-name,.nh-svc.is-open .nh-svc-name{transform:translateX(12px);color:#12957A;}
.nh-svc-line{opacity:.6;}
.nh-svc-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 0 calc(50% + 12px);padding:0 0 clamp(22px,3vw,32px);
}
.nh-svc-tags li{border:1px solid rgba(244,247,247,.2);border-radius:6px;padding:4px 10px;font-size:13px;}

/* FAQ: accordion on the left, a small call-to-action card on the right */
html.hv-n .hv-block-faq{padding:0 0 clamp(110px,16vh,180px);}
.nh-faq-title{margin:0 0 clamp(28px,4vw,48px);font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1;}
.nh-faq{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(12px,1.4vw,20px);align-items:start;}
.nh-faq-list{display:grid;gap:8px;}
.nh-faq-item{background:#222522;border:1px solid rgba(244,247,247,.06);border-radius:12px;}
.nh-faq-item > summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-weight:500;}
.nh-faq-item > p{margin:0;padding:0 22px 22px;max-width:62ch;opacity:.65;line-height:1.55;}
.nh-faq-card{
  position:sticky;top:96px;
  background:#222522;border:1px solid rgba(244,247,247,.06);border-radius:12px;padding:clamp(20px,2vw,28px);
}
.nh-faq-mark{width:52px;height:auto;color:var(--brand);overflow:visible;margin-bottom:clamp(28px,4vw,48px);}
.nh-faq-card-title{margin:0;font-size:var(--fs-heading);font-weight:500;letter-spacing:-.03em;line-height:1.15;}
.nh-faq-card-copy{margin:10px 0 22px;opacity:.6;}

@media (max-width:760px){
  html.hv-n .hv-n-hero{top:auto;bottom:28px;transform:none;flex-direction:column;align-items:flex-start;}
  .hv-n-tag{text-align:left;}
  .nh-svc > summary{grid-template-columns:minmax(0,1fr) 24px;gap:8px;}
  .nh-svc-line{grid-column:1;grid-row:2;}
  .nh-svc .nh-plus{grid-column:2;grid-row:1;}
  .nh-svc-tags{margin-left:0;}
  .nh-faq{grid-template-columns:1fr;}
  .nh-faq-card{position:static;}
}

/* ---------- ?test=new refinements: OLED black, split sentence back, corner labels ---------- */
html.hv-n,html.hv-n body{background:#000;}
html.hv-n .hv,html.hv-n .light-band{background:#000;}
html.hv-n .work-featured .work-card,
.nh-faq-item,.nh-faq-card{background:#0D0E0D;border-color:rgba(244,247,247,.08);}
/* the sentence splits from the centre to the edges again (hero-test had moved it) */
html.hv-n .hero-sentence{
  display:flex;justify-content:space-between;
  top:50%;left:var(--edge);right:var(--edge);max-width:none;
  transform:translateY(-50%);white-space:nowrap;text-align:left;
}
html.hv-n .hero-sentence .hero-sentence-left::after{content:none;}
/* wordmark bottom-left, tagline bottom-right */
html.hv-n .hv-n-hero{top:auto;bottom:clamp(24px,5vh,48px);transform:none;align-items:flex-end;}
.hv-n-tag{font-size:var(--fs-body);line-height:1.4;}
/* smooth open/close: the height is animated in site.js; content eases in */
.nh-svc,.nh-faq-item{overflow:hidden;}
@media (max-width:760px){
  html.hv-n .hero-sentence{top:50%;left:18px;right:18px;display:block;white-space:normal;}
  html.hv-n .hero-sentence span{display:block;}
  html.hv-n .hero-sentence .hero-sentence-right{text-align:right;}
  html.hv-n .hv-n-hero{flex-direction:row;justify-content:space-between;left:18px;right:18px;bottom:24px;}
  html.hv-n .hv-n-word{width:120px;}
  .hv-n-tag{text-align:right;}
}

/* bottom-left name in the ?test=new hero: set in Geist to match the rest of the page */
html.hv-n .hv-n-word{
  width:auto;display:block;
  font-size:clamp(20px,1.8vw,28px);font-weight:600;letter-spacing:-.045em;line-height:1;
}
@media (max-width:760px){html.hv-n .hv-n-word{width:auto;font-size:18px;}}

/* ---------- footer: solid black on the green (no faded grey) ---------- */
footer{color:#000;}
.footer-grid h4,
.footer-grid ul a{color:#000;opacity:1;}
.footer-grid ul a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .25s;}
.footer-grid ul a:hover{color:#000;text-decoration-color:currentColor;}
.footer-logo-mark,
.footer-grid .mark{color:#000;}
.footer-wordmark img{filter:brightness(0);}   /* the wordmark SVG is #121212; this makes it true black */

/* About panel portrait: portrait frame, face kept in view */
.about-panel-media{aspect-ratio:4/5;width:min(100%,260px);}   /* small portrait, left-aligned */
.about-panel-media img{object-position:50% 30%;}
.about-panel-now{margin-left:6px;font-size:12px;color:var(--brand);}   /* "Current" next to the present studio */
/* "Available for freelance" in the About panel: green dot with a slow pulse */
.about-panel-status + span{margin-right:auto;}   /* status and location sit together on the left */
.about-panel-status{display:inline-flex;align-items:center;gap:8px;color:var(--brand);}
.about-panel-status i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--brand);}
.about-panel-status i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand);animation:aboutPulse 2.4s var(--ease-out) infinite;}
@keyframes aboutPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.about-panel-status i::after{animation:none;}}

/* Label markers use a single arrow from the logomark (the mark's "arrows" state),
   replacing the plain CSS triangles. The same arrow is used in every CTA chip. */
.nh-label::before,
.about-panel-label::before{
  width:6px;height:10px;clip-path:none;background:var(--brand);
  -webkit-mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 195.09 327.67%22%3E%3Cpath d=%22M 0,296.42 L 0,31.24 C 0,22.96 3.29,15.01 9.15,9.15 C 15.01,3.29 22.96,0 31.24,0 C 39.54,0 47.48,3.29 53.34,9.15 L 185.93,141.74 C 191.79,147.6 195.09,155.55 195.09,163.83 C 195.09,172.12 191.79,180.07 185.93,185.93 L 53.34,318.52 C 47.48,324.38 39.54,327.67 31.25,327.67 C 22.96,327.66 15.01,324.37 9.15,318.51 C 3.29,312.65 0,304.71 0,296.42%22/%3E%3C/svg%3E') center/contain no-repeat;
  mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 195.09 327.67%22%3E%3Cpath d=%22M 0,296.42 L 0,31.24 C 0,22.96 3.29,15.01 9.15,9.15 C 15.01,3.29 22.96,0 31.24,0 C 39.54,0 47.48,3.29 53.34,9.15 L 185.93,141.74 C 191.79,147.6 195.09,155.55 195.09,163.83 C 195.09,172.12 191.79,180.07 185.93,185.93 L 53.34,318.52 C 47.48,324.38 39.54,327.67 31.25,327.67 C 22.96,327.66 15.01,324.37 9.15,318.51 C 3.29,312.65 0,304.71 0,296.42%22/%3E%3C/svg%3E') center/contain no-repeat;
}

/* ---------- LOGO INTRO (fresh homepage load only; class set in the head script) ---------- */
html.intro .preloader{display:block!important;position:fixed;inset:0;z-index:3000;background:#000;}
html.intro .preloader .wipe-col{display:none;}
html.intro .preloader svg{width:clamp(56px,6vw,84px);color:var(--paper);opacity:0;overflow:visible;}   /* the triangles swing outside the viewBox mid-turn */
html.intro body{overflow:hidden;}

/* Work columns: inner wrapper that carries the automatic drift (see site.js) */
.work-col-drift{display:flex;flex-direction:column;align-items:start;gap:inherit;width:100%;min-width:0;will-change:transform;}
/* the frosted hover panel only blurs on the hovered card; 24 live blurs moving
   under the columns were the main cost during the entrance and drift */
.work-overlay .work-card:not(:hover):not(:focus-visible) .work-hover-panel{-webkit-backdrop-filter:none;backdrop-filter:none;}

/* hero "About Me" button: solid black so the arrow field does not show through */
.hero-links .hero-about-cta{background:#000;}

/* hero sentence ("Design that takes things / in the right direction"): larger */
html.hv-n .hero-sentence{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.035em;}
@media (max-width:760px){html.hv-n .hero-sentence{font-size:clamp(22px,6.4vw,30px);}}
/* split sentence runs to the screen edges (gutter), with the bottom name/tagline aligned to it */
@media (min-width:761px){html.hv-n .hero-sentence{left:var(--gutter);right:var(--gutter);}html.hv-n .hv-n-hero{left:var(--gutter);right:var(--gutter);}}

/* Work/Archive views: black from the first paint, homepage content hidden */
html.view-work,html.view-work body,html.view-archive,html.view-archive body{background:#000;}
html.view-work #pageBend,html.view-archive #pageBend{visibility:hidden;}

/* ---------- NOISE: subtle animated film grain over the whole site ----------
   Replaces the earlier soft-light grain, which disappeared on the OLED black
   (soft-light over pure black stays black). The grain is white specks on a
   transparent ground (only the brighter half of the noise shows), so the gaps
   between specks stay pure black. It jumps between 8 positions at ~12fps.
   Tweak strength with --noise-opacity. */
:root{--noise-opacity:.09;}
body::after{
  content:"";position:fixed;inset:-100%;width:300%;height:300%;
  pointer-events:none;z-index:2500;
  opacity:var(--noise-opacity);mix-blend-mode:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4 0 0 0 -2.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation:noiseShift .66s steps(1,end) infinite;
  will-change:transform;
}
@keyframes noiseShift{
  0%{transform:translate3d(0,0,0)}
  12.5%{transform:translate3d(-3%,2%,0)}
  25%{transform:translate3d(2%,-4%,0)}
  37.5%{transform:translate3d(-4%,-1%,0)}
  50%{transform:translate3d(3%,3%,0)}
  62.5%{transform:translate3d(-1%,4%,0)}
  75%{transform:translate3d(4%,-2%,0)}
  87.5%{transform:translate3d(-2%,-3%,0)}
  100%{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){body::after{animation:none;}}

/* homepage cards open their project from anywhere on the card */
.work-featured .work-card.is-clickable{cursor:pointer;}

/* card cursor: the floating "View project" pill (see CARD CURSOR in site.js) */
.card-cursor{position:fixed;left:0;top:0;z-index:1200;pointer-events:none;white-space:nowrap;transition:none;box-shadow:0 10px 30px rgba(0,0,0,.35);}
.card-cursor:hover{transform:none;}
/* with the pill active, the in-card button is hidden but stays reachable by keyboard */
.card-cursor-on .work-featured .work-card .work-cta{position:absolute;opacity:0;pointer-events:none;}
.card-cursor-on .work-featured .work-card .work-cta:focus-visible{position:static;opacity:1;pointer-events:auto;}
.card-cursor-on .work-featured .work-card.is-clickable{cursor:pointer;}
.card-cursor-on .work-featured .work-card.is-cursor{cursor:none;}
/* Work page: the cursor pill replaces the "Click to view project" button in the hover panel */
.card-cursor{z-index:2400;}
.card-cursor-on .work-overlay .work-overlay-cta{display:none;}
.card-cursor-on .work-overlay .work-card{cursor:pointer;}
.card-cursor-on .work-overlay .work-card.is-cursor{cursor:none;}

/* footer d-pad: centred on the logomark it replaces (logo centre is 29px in; pad centre is 64px) */
.footer-dpad .dpad-art,.footer-dpad button{translate:-35px 0;}

/* ============================================================
   RHYTHM GAME / ON BRAND
   The d-pad secret in the brand's own language: OLED black, paper
   white, one green, Geist, hairlines and the logomark arrows. No
   rainbow combo colours, glows, sparks or lightning. A streak is shown
   by the line turning green, not by the screen lighting up.
   (Overrides the original KONAMI RHYTHM MODE rules above.)
   ============================================================ */
.rhythm-game{background:#000;--game-accent:#12957A;font-family:var(--font-body);}
.rhythm-game[data-combo-level]{--game-accent:#12957A;}
.rhythm-game::before,.rhythm-game::after{content:none;display:none;}
/* the drifting rows of logo arrows stay, as a faint texture */
.rhythm-logo-lines{opacity:1;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);}
.rhythm-logo-row{color:rgba(244,247,247,.045);}
.rhythm-logo-arrow svg{width:clamp(22px,2.4vw,36px);height:clamp(36px,4vw,60px);}
.rhythm-shell{width:min(760px,100%);gap:clamp(16px,2vw,24px);}

/* top line: label with the green arrow, first-person subline, score, exit */
.rhythm-topline{align-items:flex-end;text-transform:none;letter-spacing:0;font-size:var(--fs-body);}
.rhythm-title p{margin:0;}
.rhythm-kicker{display:flex;align-items:center;gap:10px;color:var(--paper);font-weight:500;}
.rhythm-kicker::before{content:"";width:6px;height:10px;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 195.09 327.67'%3E%3Cpath d='M0 296.42V31.24C0 22.96 3.29 15.01 9.15 9.15 15.01 3.29 22.96 0 31.24 0c8.3 0 16.24 3.29 22.1 9.15l132.59 132.59c5.86 5.86 9.16 13.81 9.16 22.09s-3.3 16.24-9.16 22.1L53.34 318.52c-5.86 5.86-13.8 9.15-22.09 9.15s-16.24-3.3-22.1-9.16C3.29 312.65 0 304.71 0 296.42z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 195.09 327.67'%3E%3Cpath d='M0 296.42V31.24C0 22.96 3.29 15.01 9.15 9.15 15.01 3.29 22.96 0 31.24 0c8.3 0 16.24 3.29 22.1 9.15l132.59 132.59c5.86 5.86 9.16 13.81 9.16 22.09s-3.3 16.24-9.16 22.1L53.34 318.52c-5.86 5.86-13.8 9.15-22.09 9.15s-16.24-3.3-22.1-9.16C3.29 312.65 0 304.71 0 296.42z'/%3E%3C/svg%3E") center/contain no-repeat;}
.rhythm-sub{margin-top:6px!important;color:rgba(244,247,247,.5);}
.rhythm-score{font-family:var(--font-body);font-size:12px;gap:24px;color:rgba(244,247,247,.5);align-items:flex-end;}
.rhythm-score b{margin-top:4px;font-size:22px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--paper);}
.rhythm-exit{display:inline-flex;align-items:center;gap:8px;border-radius:9px;border:1px solid rgba(244,247,247,.3);padding:6px 6px 6px 12px;font:500 var(--fs-body)/1 var(--font-body);color:var(--paper);background:transparent;}
.rhythm-exit kbd{font:500 10px/1 var(--font-body);text-transform:lowercase;border:1px solid currentColor;border-radius:5px;padding:4px 5px;opacity:.6;}
.rhythm-exit:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* stage: flat black panel, hairline lanes, a thin line to hit */
.rhythm-stage,.rhythm-stage.is-streak{background:#000;border:1px solid rgba(244,247,247,.12);border-radius:12px;box-shadow:none;height:min(62vh,620px);}
.rhythm-stage::before,.rhythm-stage.is-streak::before,.rhythm-stage::after,.rhythm-lane::before{content:none;display:none;}
.rhythm-stage.is-streak .rhythm-lane::before{animation:none;}
.rhythm-lanes{padding:0 clamp(12px,4vw,56px);}
.rhythm-lane,.rhythm-lane:first-child{border-color:rgba(244,247,247,.07);}
.rhythm-lane::after{height:1px;background:rgba(244,247,247,.35);box-shadow:none;transition:background-color .3s;}
.rhythm-stage.is-streak .rhythm-lane::after{background:var(--game-accent);}
/* targets: quiet outlined arrows sitting on the line */
.rhythm-target{width:56px;height:56px;bottom:calc(20% - 28px);border-radius:12px;border:1px solid rgba(244,247,247,.14);background:#0D0E0D;box-shadow:none;color:rgba(244,247,247,.35);transition:background-color .12s,color .12s,border-color .12s,transform .12s;}
.rhythm-target svg{width:16px;height:27px;}
.rhythm-target.is-hit{background:var(--paper);color:#000;border-color:var(--paper);transform:translateX(-50%) scale(.92);}
.rhythm-stage.is-streak .rhythm-target.is-hit{background:var(--game-accent);color:#000;border-color:var(--game-accent);}
/* notes: solid white logomark arrows, no glow */
.rhythm-note{color:var(--paper);filter:none;width:44px;height:52px;}
.rhythm-note svg{width:22px;height:37px;}
.rhythm-stage.is-streak .rhythm-note{color:var(--game-accent);}
/* feedback: set in Geist, sentence case, green only when it's perfect */
.rhythm-feedback{top:calc(80% - 104px);font:500 clamp(20px,2vw,28px)/1 var(--font-body);letter-spacing:-.03em;text-transform:none;color:var(--paper);}
.rhythm-spark{display:none;}
.rhythm-instructions{font-size:12px;color:rgba(244,247,247,.45);letter-spacing:0;}
/* unlock: black, then your arrows scale in white and part, then the game */
.rhythm-unlock{background:#000;}
.rhythm-unlock::before,.rhythm-unlock::after{background:#000;}
.rhythm-unlock-mark{color:var(--paper);gap:clamp(10px,1.4vw,22px);}
.rhythm-unlock-mark svg{width:clamp(36px,4.6vw,72px);height:clamp(60px,7.7vw,120px);filter:none;}
.rhythm-unlock-mark svg:first-child{transform:rotate(180deg);}
@media (max-width:600px){
  .rhythm-stage,.rhythm-stage.is-streak{min-height:400px;height:64vh;}
  .rhythm-target{width:46px;height:46px;bottom:calc(20% - 23px);}
  .rhythm-topline{flex-direction:column;align-items:flex-start;}
}
.rhythm-feedback.is-perfect{color:var(--game-accent);}

/* footer wordmark stretches down from its top edge (scale set in JS) */
.footer-wordmark-big{transform-origin:50% 0%;transform:scale3d(1,.08,1);}
@media (prefers-reduced-motion:reduce){.footer-wordmark-big{transform:none;}}

/* ---------- footer d-pad: press feedback ---------- */
/* the pad rocks toward the pressed direction (values tweened in site.js) */
.footer-dpad .dpad-art{translate:calc(-35px + var(--nx,0px)) var(--ny,0px);scale:var(--ns,1);}
/* the pressed arm flashes paper white, briefly */
.footer-dpad .dpad-art [data-direction]{transition:fill .28s var(--ease-out);}
/* an arrow from the logomark flies out of the pad in that direction */
.dpad-shot{position:absolute;left:29px;top:50%;width:12px;height:20px;margin:-10px 0 0 -6px;color:#000;pointer-events:none;z-index:2;
  animation:dpadShot .5s var(--ease-out) forwards;}
.dpad-shot svg{display:block;width:100%;height:100%;fill:currentColor;}
.dpad-shot[data-direction="up"] svg{transform:rotate(-90deg);}
.dpad-shot[data-direction="down"] svg{transform:rotate(90deg);}
.dpad-shot[data-direction="left"] svg{transform:rotate(180deg);}
@keyframes dpadShot{
  0%{opacity:0;transform:translate(0,0) scale(.6);}
  25%{opacity:1;}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1);}
}
/* progress through the secret sequence: 8 small marks under the pad, only
   visible once you've started it right; they shake and clear on a wrong press */
.dpad-progress{position:absolute;left:29px;top:calc(50% + 50px);transform:translateX(-50%);display:flex;gap:4px;opacity:0;transition:opacity .3s var(--ease-out);pointer-events:none;}
.dpad-progress.is-visible{opacity:1;}
.dpad-progress i{width:5px;height:5px;border-radius:1px;background:rgba(0,0,0,.22);transition:background-color .15s,transform .2s var(--ease-out);}
.dpad-progress i.is-on{background:#000;transform:scale(1.15);}
.dpad-progress.is-complete i{background:var(--paper);}
.dpad-progress.is-reset{animation:dpadShake .35s var(--ease-out);}
@keyframes dpadShake{20%{transform:translateX(calc(-50% - 4px))}40%{transform:translateX(calc(-50% + 4px))}60%{transform:translateX(calc(-50% - 2px))}80%{transform:translateX(calc(-50% + 2px))}}
@media (prefers-reduced-motion:reduce){.dpad-shot{display:none;}}

/* ============================================================
   FOOTER CONTACT FORM / on the green, in black: an intro on the left,
   the form on the right, then a hairline and the existing links.
   Behaviour lives in assets/js/contact-form.js.
   ============================================================ */
.footer-form{
  max-width:var(--max-w);margin:0 auto clamp(64px,8vw,112px);padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);
  color:#000;
}
.footer-form + .footer-grid{padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(0,0,0,.18);}
.footer-form-title{margin:0;font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1;}
.footer-form-copy{margin:14px 0 0;max-width:32ch;font-size:var(--fs-body);line-height:1.5;opacity:.7;}
.contact-form{display:grid;gap:clamp(22px,2.6vw,32px);}
.contact-services{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.contact-services legend{width:100%;margin:0 0 12px;padding:0;font-size:12px;opacity:.65;}
.contact-services label{cursor:pointer;}
.contact-services input{position:absolute;opacity:0;pointer-events:none;}
.contact-services span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid rgba(0,0,0,.35);border-radius:9px;font-size:var(--fs-body);font-weight:500;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease-out);}
.contact-services label:hover span{border-color:#000;}
.contact-services input:checked + span{background:#000;color:var(--brand);border-color:#000;}
.contact-services input:focus-visible + span{outline:2px solid #000;outline-offset:2px;}
.contact-services label:active span{transform:scale(.96);}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);}
.contact-field{display:grid;gap:6px;}
.contact-field span{font-size:12px;opacity:.65;}
.contact-field input,.contact-field textarea{
  width:100%;margin:0;padding:10px 0 12px;border:0;border-bottom:1px solid rgba(0,0,0,.35);border-radius:0;background:transparent;
  font:400 var(--fs-lead)/1.35 var(--font-body);letter-spacing:-.02em;color:#000;outline:none;resize:none;transition:border-color .2s;
}
.contact-field textarea{min-height:48px;overflow:hidden;}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(0,0,0,.4);}
.contact-field input:focus,.contact-field textarea:focus{border-bottom-color:#000;}
.contact-field input:-webkit-autofill{-webkit-text-fill-color:#000;transition:background-color 9999s;}
.contact-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.contact-submit{border:0;cursor:pointer;}
.contact-submit:disabled{opacity:.5;cursor:default;}
.contact-status{margin:0;font-size:var(--fs-body);}
.contact-status[data-kind="error"]{font-weight:500;}
.contact-form.is-sent .contact-services,.contact-form.is-sent .contact-row,.contact-form.is-sent .contact-field,.contact-form.is-sent .contact-submit{display:none;}
.contact-form.is-sent .contact-status{font-size:var(--fs-lead);}
@media (max-width:760px){
  .footer-form{grid-template-columns:1fr;gap:28px;}
  .contact-row{grid-template-columns:1fr;}
}

/* dark CTAs in true black (was the #191B19 dark grey) */
.sq-btn.dark,.sq-btn .ic,.nav-links a.nav-cta,.card-cursor .ic{background:#000;}
.sq-btn.dark .ic{color:#000;}
.sq-btn.dark:hover .ic{color:var(--paper);}
/* "What do you need?" choices: black fill with white text when picked */
.contact-services input:checked + span{background:#000;color:var(--paper);border-color:#000;}
/* contact form sits on a taupe panel (#827D78) within the green footer */
.footer-form{background:#827D78;border-radius:12px;padding:clamp(28px,4vw,56px);
  max-width:calc(var(--max-w) - var(--gutter) * 2);margin-left:auto;margin-right:auto;}
@media (max-width:1280px){.footer-form{margin-left:var(--gutter);margin-right:var(--gutter);}}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(0,0,0,.55);}
.contact-field span,.contact-services legend{opacity:.75;}
.footer-form + .footer-grid{border-top:0;padding-top:0;}
/* "Start a project" is a full-width taupe band at the very top of the footer
   (no green above it); the green footer carries on underneath */
footer:has(.footer-form){padding-top:0;}
.footer-form{max-width:none;margin:0;border-radius:0;
  padding:clamp(64px,8vw,120px) var(--edge);}
@media (max-width:1280px){.footer-form{margin-left:0;margin-right:0;}}
.footer-form + .footer-grid{padding-top:clamp(72px,9vw,128px);}
/* Start a project band: paper white (#F4F7F7) instead of taupe */
.footer-form{background:var(--paper);}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(0,0,0,.4);}
.contact-field span,.contact-services legend{opacity:.6;}

/* phones: roomier nav pill */
@media (max-width:860px){
  .nav-inner{height:56px;padding:0 20px 0 22px;}
  .menu-btn{padding:10px 4px;}
}

/* card cursor: small lift on entry (driven by --pill-y in site.js) */
.card-cursor{translate:0 var(--pill-y,0px);}

/* Work hover panel: matches the homepage card hierarchy
   (title, then tags, then a quieter description). */
.work-overlay .work-card .work-hover-panel{
  height:auto;min-height:var(--panel-height);
  padding:var(--panel-padding);
  display:flex;flex-direction:column;align-items:flex-start;
}
.work-overlay .work-card .work-hover-panel .work-meta{display:block;width:100%;}
.work-overlay .work-card .work-hover-panel .work-meta h3{
  position:static;margin:0;
  font-size:var(--fs-lead);font-weight:500;line-height:1;letter-spacing:-.03em;
  opacity:1;
}
.work-overlay .work-card .work-hover-panel .work-tags{
  position:static;margin-top:10px;justify-content:flex-start;white-space:normal;
}
.work-overlay .work-card .work-hover-panel .work-desc{
  position:static;margin:10px 0 0;
  padding-right:clamp(180px,24%,230px);
  max-width:calc(42ch + 230px);
  font-size:var(--fs-body);line-height:1.45;opacity:.6;
  text-wrap:pretty;
}
@media (max-width:760px){
  .work-overlay .work-card .work-hover-panel .work-meta h3{font-size:var(--fs-lead);}
  /* phones: title and tags only, so the panel never smothers the image */
  .work-overlay .work-card .work-hover-panel{min-height:0;}
  .work-overlay .work-card .work-hover-panel .work-desc{display:none;}
  .work-overlay .work-card .work-hover-panel .work-overlay-cta{position:static;margin-top:12px;}
}

/* Work page: progressive edge blur (top and bottom) */
.edge-blur{position:absolute;left:0;right:0;height:100px;z-index:3;pointer-events:none;}
.edge-blur--top{top:0;}
.edge-blur--bottom{bottom:0;}
.edge-blur > div{position:absolute;inset:0;pointer-events:none;}
@media (max-width:760px){ .edge-blur{height:72px;} }

/* ============================================================
   CONTACT MODAL / "Start a project" as a centred popup
   (opened by any #contact link; see assets/js/contact-form.js)
   ============================================================ */
.contact-modal{
  position:fixed;inset:0;z-index:3000;
  display:grid;place-items:center;padding:16px;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .45s;
}
.contact-modal.is-open{visibility:visible;pointer-events:auto;transition:none;}
.contact-modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.64);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s var(--ease-out);
}
.contact-modal.is-open .contact-modal-backdrop{opacity:1;}
.contact-modal-panel{
  position:relative;width:min(720px,100%);max-height:calc(100svh - 32px);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);color:#000;border-radius:16px;outline:none;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  opacity:0;transform:translateY(22px) scale(.98);
  transition:opacity .35s var(--ease-out),transform .55s var(--ease-out);
}
.contact-modal.is-open .contact-modal-panel{opacity:1;transform:none;}
.contact-modal .footer-form{
  display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,36px);
  max-width:none;margin:0;border-radius:0;background:transparent;
  padding:clamp(28px,4vw,48px);
}
.contact-modal .footer-form-title{font-size:clamp(28px,3vw,40px);padding-right:48px;}
.contact-modal-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:38px;height:38px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#000;border:1px solid rgba(0,0,0,.2);cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease-out);
}
.contact-modal-close svg{width:16px;height:16px;}
.contact-modal-close:hover{background:#000;color:var(--paper);border-color:#000;}
.contact-modal-close:active{transform:scale(.94);}
html.contact-open,html.contact-open body{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  .contact-modal-panel{transform:none;transition:opacity .2s;}
}

/* ============================================================
   HERO REEL / snapshot frame between the sentence halves
   (replaces the hero CTAs; behaviour in site.js "HERO REEL")
   ============================================================ */
.hero-reel{
  position:relative;display:block;
  width:clamp(132px,11.5vw,200px);aspect-ratio:4/5;
  border-radius:10px;overflow:hidden;background:#000;
  cursor:pointer;
  transition:transform .5s var(--ease-out);
}
.hero-reel img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;opacity:0;
}
.hero-reel img.is-on{opacity:1;}
.hero-reel:hover{transform:scale(1.03);}
.hero-links:has(.hero-reel){will-change:clip-path,transform;}
@media (max-width:760px){
  .hero-reel{width:108px;}
  .hero-links:has(.hero-reel){top:calc(50% + 120px);}
}

/* hero reel: the pill cursor reads "View work" over it */
.card-cursor-on .hero-reel.is-cursor{cursor:none;}
.hero-reel{transition:none;}
.hero-reel img{transition:transform .6s var(--ease-out);}
.hero-reel:hover{transform:none;}
.hero-reel:hover img{transform:scale(1.04);}

/* hero reel: images sit at their own final size, centred in the frame,
   both fill the frame so no square image corners ever show */
.hero-reel{will-change:width,height;}
.hero-reel img{
  inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;opacity:1;transition:none;
}
.hero-reel:hover img{transform:none;}
.hero-reel{width:clamp(170px,15vw,260px);}
@media (max-width:760px){
  .hero-reel{width:132px;}
  .hero-links:has(.hero-reel){top:calc(50% + 150px);}
}

/* ============================================================
   HERO LOGOS / particle logo morph between the sentence halves
   (assets/js/hero-logos.js; replaces the snapshot reel)
   ============================================================ */
.hero-logos{display:block;position:relative;width:clamp(300px,30vw,460px);aspect-ratio:25/16;cursor:pointer;}
.hero-logos canvas{display:block;width:100%;height:100%;max-width:none;}
.card-cursor-on .hero-logos.is-cursor{cursor:none;}
@media (max-width:760px){
  .hero-logos{width:min(78vw,300px);}
  .hero-links:has(.hero-logos){top:calc(50% + 150px);}
}

/* hero particles: WebGL field across the whole hero (assets/js/hero-particles.js);
   .hero-logos is now just the transparent hit area / logo box in the centre */
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.hero-logos{width:clamp(320px,36vw,560px);}
@media (max-width:760px){ .hero-logos{width:min(80vw,300px);} }

/* ============================================================
   ABOUT PANEL / open as smoothly as the "Start a project" popup:
   fast-out easing (no slow ease-in at the start), the sheet glides in
   with a light fade, its content settles in just after, and the page
   behind no longer reflows (no overflow toggle; Lenis is stopped instead).
   ============================================================ */
html.about-open{overflow:visible;}
.about-panel-scrim{transition:opacity .4s var(--ease-out);}
.about-panel-sheet{
  will-change:transform;contain:layout paint;
  transform:translate3d(100%,0,0);opacity:.6;
  transition:transform .6s var(--ease-out), opacity .35s var(--ease-out), visibility 0s linear .6s;
}
.about-panel.is-open .about-panel-sheet{
  transform:translate3d(0,0,0);opacity:1;
  transition:transform .6s var(--ease-out), opacity .35s var(--ease-out), visibility 0s;
}
.about-panel-sheet > *:not(.about-panel-head){
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.about-panel.is-open .about-panel-sheet > *:not(.about-panel-head){
  opacity:1;transform:none;
  transition:opacity .55s var(--ease-out) .18s, transform .7s var(--ease-out) .18s;
}
@media (prefers-reduced-motion:reduce){
  .about-panel-sheet,.about-panel.is-open .about-panel-sheet,
  .about-panel-sheet > *,.about-panel.is-open .about-panel-sheet > *{transition:none;transform:none;opacity:1;}
}
@media (hover:none),(max-width:860px){ html.about-open{overflow:hidden;} }

/* About panel: education (year, then course with the school beneath in grey) */
.about-panel-edu{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.about-panel-edu li{display:grid;grid-template-columns:4.5em 1fr;gap:16px;align-items:baseline;
  font-size:var(--fs-lead);font-weight:500;line-height:1.3;letter-spacing:-.02em;}
.about-panel-year{opacity:.45;font-variant-numeric:tabular-nums;}
.about-panel-edu em{display:block;font-style:normal;opacity:.45;}

/* ============================================================
   ABOUT PAGE (about/index.html) + WORK AS HOMEPAGE
   ============================================================ */
/* Work is home: no close button */
html.view-work .work-overlay-close{display:none;}
/* the About page shows the intro statement, the about content, services,
   FAQ and the footer; the hero and homepage work blocks are hidden */
.about-page{display:none;}
html.view-about .hero,
html.view-about .marquee,
html.view-about .about-band,
html.view-about #work,
html.view-about .homepage-test-v2,
html.view-about .hv-block-a,
html.view-about .hv-block-b,
html.view-about .hv-block-c{display:none !important;}
html.view-about .hv-block-n{padding-top:clamp(140px,20vh,220px);}
html.view-about .nh-lead-btn{display:none;}
html.view-about .about-page{display:block;position:relative;z-index:1;color:var(--paper);background:#000;
  padding:clamp(48px,8vh,96px) 0 clamp(72px,10vh,120px);}
.about-page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);align-items:start;}
.about-page-side{position:sticky;top:110px;display:grid;gap:16px;}
.about-page .about-panel-media{width:100%;max-width:360px;}
.about-page .about-panel-meta{flex-direction:column;gap:6px;padding:0;}
.about-page .about-panel-intro{margin:0 0 clamp(40px,6vh,72px);max-width:24em;}
.about-page .about-panel-media + .about-panel-row{margin-top:0;}
.about-page .about-panel-row{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);padding:26px 0;}
.about-page .about-panel-principles p,.about-page .about-panel-year,.about-page .about-panel-edu em{opacity:.55;}
@media (max-width:860px){
  .about-page-grid{grid-template-columns:1fr;}
  .about-page-side{position:static;}
  .about-page .about-panel-media{max-width:240px;}
  .about-page .about-panel-row{grid-template-columns:1fr;}
}
/* panel: link through to the full page */
.about-panel-more{margin-top:28px;}

/* ============================================================
   WORK FILTER (floating, bottom centre) + FEATURED TAB
   ============================================================ */
.work-filter{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:20;
  transform:translateX(-50%);
  display:flex;gap:2px;padding:4px;
  border-radius:12px;
  background:rgba(244,247,247,.86);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 30px rgba(0,0,0,.35);
  max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none;
}
.work-filter::-webkit-scrollbar{display:none;}
.work-filter button{
  flex:0 0 auto;border:0;background:transparent;color:var(--ink);cursor:pointer;
  font:500 var(--fs-body)/1 var(--font-body);letter-spacing:-.01em;
  padding:9px 13px;border-radius:9px;
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out),transform .2s var(--ease-out);
}
.work-filter button sup{font-size:.7em;opacity:.5;margin-left:1px;vertical-align:super;}
.work-filter button:hover{background:rgba(0,0,0,.07);}
.work-filter button[aria-pressed="true"]{background:#000;color:var(--paper);}
.work-filter button:active{transform:scale(.95);}
.work-filter button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* the filter only belongs to the Work page */
html:not(.view-work) .work-filter{display:none;}
/* first load: the bar rises in after the intro */
html.intro .work-filter{opacity:0;transform:translate(-50%,16px);}
.work-filter{transition:opacity .6s var(--ease-out) .3s,transform .7s var(--ease-out) .3s;}

.work-feature-tab{
  position:absolute;top:var(--panel-inset,14px);right:var(--panel-inset,14px);z-index:3;
  padding:6px 10px;border-radius:7px;
  background:rgba(244,247,247,.86);color:var(--ink);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font:500 12px/1 var(--font-body);letter-spacing:0;
  pointer-events:none;
}
@media (max-width:760px){
  .work-filter button{padding:8px 11px;}
  .work-feature-tab{padding:5px 8px;font-size:11px;}
}
@media (max-width:760px){ .work-filter button{padding:8px 9px;font-size:13px;} .work-filter button sup{display:none;} }

/* Work hover panel scales with the card: on smaller windows the type steps
   down and the description runs the full width of the panel */
.work-overlay .work-card{container-type:inline-size;}
.work-overlay .work-card .work-hover-panel{padding:clamp(10px,2.6cqw,var(--panel-padding));}
.work-overlay .work-card .work-hover-panel .work-meta h3{font-size:clamp(14px,3cqw,var(--fs-lead));}
.work-overlay .work-card .work-hover-panel .work-tags{margin-top:clamp(6px,1.4cqw,10px);}
.work-overlay .work-card .work-hover-panel .work-tags .tag{font-size:clamp(10px,1.9cqw,12px);}
.work-overlay .work-card .work-hover-panel .work-desc{
  padding-right:0;max-width:none;
  margin-top:clamp(6px,1.4cqw,10px);
  font-size:clamp(12px,2.2cqw,var(--fs-body));line-height:1.4;
}

/* Work on phones / touch: no info panel, just a small name pill bottom left
   (same style as the Featured tab); tapping the card opens the project */
.work-name-pill{display:none;}
@media (hover:none),(max-width:760px){
  .work-overlay .work-card .work-hover-panel{display:none !important;}
  .work-name-pill{
    display:block;position:absolute;left:var(--panel-inset,10px);bottom:var(--panel-inset,10px);z-index:3;
    padding:6px 10px;border-radius:7px;
    background:rgba(244,247,247,.86);color:var(--ink);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    font:500 12px/1 var(--font-body);letter-spacing:0;pointer-events:none;
  }
}
/* hover panel tags match the Featured tab: same size, radius and type */
.work-overlay .work-card .work-hover-panel .work-tags{gap:4px;}
.work-overlay .work-card .work-hover-panel .work-tags .tag{
  height:auto;padding:6px 10px;border:0;border-radius:7px;
  background:rgba(0,0,0,.07);color:var(--ink);
  font:500 12px/1 var(--font-body);letter-spacing:0;text-transform:none;
}

/* card tabs top right: Featured + filter categories, same pill style */
.work-card-tabs{position:absolute;top:var(--panel-inset,14px);right:var(--panel-inset,14px);z-index:3;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:70%;pointer-events:none;}
.work-card-tabs .work-feature-tab{position:static;}
.work-card-tabs .work-feature-tab.is-featured{background:#000;color:var(--paper);}

/* filter: projects outside the chosen category grey out and darken */
.work-overlay .work-card .work-media{transition:filter .6s var(--ease-out),opacity .6s var(--ease-out);}
.work-overlay .work-card.is-dimmed .work-media{filter:grayscale(1) brightness(.35);}
.work-overlay .work-card.is-dimmed .work-card-tabs,.work-overlay .work-card.is-dimmed .work-name-pill{opacity:.35;}
.work-card-tabs,.work-name-pill{transition:opacity .6s var(--ease-out);}
/* Archive tiles: rounded corners like the Work page cards */
.archive-columns .arch-item{border-radius:clamp(14px,1.4vw,24px);overflow:hidden;}
.archive-columns .arch-item img,
.archive-columns .arch-item video{border-radius:inherit;}
/* filter: dimmed projects fade further back */
.work-overlay .work-card.is-dimmed .work-media{filter:grayscale(1) brightness(.3);opacity:.4;}
.work-overlay .work-card.is-dimmed .work-card-tabs,.work-overlay .work-card.is-dimmed .work-name-pill{opacity:.2;}
/* filter bar: dark theme */
.work-filter{
  background:rgba(14,14,14,.78);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 12px 30px rgba(0,0,0,.45);
}
.work-filter button{color:var(--paper);}
.work-filter button:hover{background:rgba(255,255,255,.08);}
.work-filter button[aria-pressed="true"]{background:var(--paper);color:#000;}

/* categories live top right of the white hover panel on desktop; the
   thumbnail itself only carries the Featured tab */
.work-panel-cats{position:absolute;top:var(--panel-padding);right:var(--panel-padding);
  display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:50%;}
.work-overlay .work-card .work-hover-panel .work-panel-cats .tag{
  padding:6px 10px;border:0;border-radius:7px;background:rgba(0,0,0,.07);color:var(--ink);
  font:500 12px/1 var(--font-body);letter-spacing:0;text-transform:none;}
@media (hover:hover) and (min-width:761px){
  .work-card-tabs .work-feature-tab.is-cat{display:none;}
}
/* the old tag row under the title is replaced by the categories top right */
.work-overlay .work-card .work-hover-panel .work-meta .work-tags{display:none;}
.work-overlay .work-card .work-hover-panel{min-height:0;}
.work-overlay .work-card .work-hover-panel .work-meta h3{padding-right:52%;min-height:26px;display:flex;align-items:center;}
/* panel category tags: outlined, not filled */
.work-overlay .work-card .work-hover-panel .work-panel-cats .tag{background:transparent;border:1px solid rgba(0,0,0,.4);padding:5px 9px;}

/* ============================================================
   PROJECT TRANSITION (Work card -> case study)
   ============================================================ */
.case-expand{position:fixed;z-index:4000;overflow:hidden;pointer-events:none;background:#000;}
.case-expand img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;}
.case-expand-shade{position:fixed;inset:0;z-index:3999;background:#000;opacity:0;pointer-events:none;}
/* arrival: a full-screen copy of the thumbnail (set by the head script on
   each case page) lifts away like a curtain while the intro rises in */
html.case-entering::after{
  content:"";position:fixed;inset:0;z-index:5000;pointer-events:none;
  background:#000 var(--case-enter-img) center/cover no-repeat;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s cubic-bezier(.76,0,.24,1);
}
html.case-entering.case-reveal::after{clip-path:inset(0 0 100% 0);}
html.case-entering .cs-intro{opacity:0;transform:translateY(56px);}
html.case-entering.case-reveal .cs-intro{opacity:1;transform:none;
  transition:opacity .8s var(--ease-out) .4s, transform 1.2s var(--ease-out) .35s;}
/* hidden hover panel sat exactly on the card's bottom edge, so its top
   border showed as a thin white line: park it fully clear of the card */
.work-overlay .work-card .work-hover-panel{transform:translateY(calc(100% + var(--panel-inset) + 8px));}
.work-overlay .work-card:hover .work-hover-panel,
.work-overlay .work-card:focus-visible .work-hover-panel{transform:translateY(0);}
/* filter: greyed-out projects also blur */
.work-overlay .work-card.is-dimmed .work-media{filter:grayscale(1) brightness(.3) blur(8px);transform:scale(1.06);}
.work-overlay .work-card .work-media{transition:filter .6s var(--ease-out),opacity .6s var(--ease-out),transform .6s var(--ease-out);}
/* Archive spacing matches the Work page */
.archive-columns{gap:clamp(14px,1.4vw,28px);padding:0 clamp(14px,1.4vw,28px) 0 0;}
.archive-column{gap:clamp(14px,1.4vw,28px);}
@media (max-width:760px){ .archive-columns,.archive-column{gap:10px;} .archive-columns{padding:0;} }

/* project arrival is now a rise-in (no full-screen image curtain) */
html.case-entering::after{content:none;}
html.case-entering .cs-media{opacity:0;transform:translateY(40px);}
html.case-entering .case-film{opacity:0;transform:translate(-50%,24px);}
html.case-entering .nav-persp{opacity:0;}
html.case-entering.case-reveal .cs-media{opacity:1;transform:none;transition:opacity .9s var(--ease-out) .5s, transform 1.2s var(--ease-out) .45s;}
html.case-entering.case-reveal .case-film{opacity:1;transform:translateX(-50%);transition:opacity .8s var(--ease-out) .8s, transform 1s var(--ease-out) .8s;}
html.case-entering.case-reveal .nav-persp{opacity:1;transition:opacity .6s var(--ease-out) .1s;}
html.case-entering .cs-intro{opacity:0;transform:translateY(56px);}
html.case-entering.case-reveal .cs-intro{opacity:1;transform:none;transition:opacity .8s var(--ease-out) .15s, transform 1.2s var(--ease-out) .1s;}
/* the nav stays put across the page change */
html.case-entering .nav-persp,html.case-entering.case-reveal .nav-persp{opacity:1 !important;transition:none !important;}
/* arriving pages hide everything but the nav (it stays visible throughout) */
html.route-transition-in body{opacity:1;}
html.route-transition-in body > *:not(.nav-persp):not(script):not(.site-transition){opacity:0;}

/* About: "Outside work, I'm usually on my bike or mixing music" */
.about-panel-outside{margin:calc(-1 * clamp(20px,4vh,56px)) 0 clamp(40px,7vh,88px);max-width:28em;
  font-size:var(--fs-lead);line-height:1.4;letter-spacing:-.02em;}
.about-panel-outside > span{opacity:.5;}
.about-ico{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;margin:0 .08em;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.about-page .about-panel-outside{margin:calc(-1 * clamp(16px,3vh,40px)) 0 clamp(40px,6vh,72px);}

/* ============================================================
   ABOUT: subtle hover + interaction layer (panel and page)
   ============================================================ */
:root{--arrow-mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 195.09 327.67%22%3E%3Cpath d=%22M 0,296.42 L 0,31.24 C 0,22.96 3.29,15.01 9.15,9.15 C 15.01,3.29 22.96,0 31.24,0 C 39.54,0 47.48,3.29 53.34,9.15 L 185.93,141.74 C 191.79,147.6 195.09,155.55 195.09,163.83 C 195.09,172.12 191.79,180.07 185.93,185.93 L 53.34,318.52 C 47.48,324.38 39.54,327.67 31.25,327.67 C 22.96,327.66 15.01,324.37 9.15,318.51 C 3.29,312.65 0,304.71 0,296.42%22/%3E%3C/svg%3E');}
/* row labels: the green arrow nudges forward when its row is hovered */
.about-panel-label::before{transition:transform .45s var(--ease-out);}
.about-panel-row:hover .about-panel-label::before{transform:translateX(3px);}
/* lists: hovering one item lifts it, the rest step back, and a small
   green arrow slides in beside it */
.about-panel-list li,.about-panel-edu li{position:relative;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);}
.about-panel-list:hover li,.about-panel-edu:hover li{opacity:.38;}
.about-panel-list li:hover,.about-panel-edu li:hover{opacity:1;transform:translateX(14px);}
.about-panel-list li::before,.about-panel-edu li::before{
  content:"";position:absolute;left:-14px;top:50%;width:5px;height:9px;margin-top:-4.5px;
  background:var(--brand);-webkit-mask:var(--arrow-mask) center/contain no-repeat;mask:var(--arrow-mask) center/contain no-repeat;
  opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease-out),transform .45s var(--ease-out);
}
.about-panel-edu li::before{top:.65em;}
.about-panel-list li:hover::before,.about-panel-edu li:hover::before{opacity:1;transform:none;}
.about-panel-contact li:hover{transform:none;}
.about-panel-contact li::before{display:none;}
/* approach: the hovered principle brightens, its copy comes forward */
.about-panel-principles > div{transition:opacity .35s var(--ease-out);}
.about-panel-principles:hover > div{opacity:.45;}
.about-panel-principles > div:hover{opacity:1;}
.about-panel-principles h4{transition:transform .45s var(--ease-out);}
.about-panel-principles > div:hover h4{transform:translateX(4px);}
.about-panel-principles p{transition:opacity .35s var(--ease-out);}
.about-panel-principles > div:hover p{opacity:.85;}
/* email: underline draws in from the left */
.about-panel-contact a{border-bottom:0;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;
  transition:background-size .5s var(--ease-out);padding-bottom:2px;}
.about-panel-contact a:hover{background-size:100% 1px;}
/* portrait: a gentle tilt toward the cursor (about-tilt in site.js / case-study.js) */
.about-panel-media{transition:transform .6s var(--ease-out);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));}
.about-panel-media img{transition:transform 1.2s var(--ease-out);}
.about-panel-media:hover img{transform:scale(1.04);}
/* outside work: the bike rolls, the record spins */
.about-hobby{font-weight:inherit;cursor:default;}
.about-hobby .about-ico{transition:transform .5s var(--ease-out);}
.about-hobby.is-bike:hover .about-ico{transform:translateX(4px);}
.about-hobby .wheel,.about-hobby .disc{transform-box:fill-box;transform-origin:center;}
.about-hobby.is-bike:hover .wheel{animation:aboutSpin .9s linear infinite;}
.about-hobby.is-music:hover .disc{animation:aboutSpin 1.8s linear infinite;}
@keyframes aboutSpin{to{transform:rotate(360deg);}}
/* about page: rows ease up as they scroll in */
.about-page .about-panel-row.is-hidden{opacity:0;transform:translateY(22px);}
.about-page .about-panel-row{transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);}
@media (prefers-reduced-motion:reduce){
  .about-hobby:hover .wheel,.about-hobby:hover .disc{animation:none;}
  .about-page .about-panel-row.is-hidden{opacity:1;transform:none;}
}

.about-panel-media{transform:none;}
.about-panel .about-panel-media,.about-page .about-panel-media{perspective:900px;}
.about-panel-media img,.about-panel-media:hover img{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(calc(var(--s,1) * 1.03));transition:transform .7s var(--ease-out);}

/* subtle stagger: panel blocks settle in one after another on open */
.about-panel.is-open .about-panel-sheet > *:not(.about-panel-head){
  transition:opacity .6s var(--ease-out) calc(.16s + var(--i,0) * .055s), transform .8s var(--ease-out) calc(.16s + var(--i,0) * .055s);
}
.about-panel-sheet > *:not(.about-panel-head){transform:translate3d(0,10px,0);}
/* about page: first blocks rise in on load, a beat apart */
.about-stagger{opacity:0;transform:translateY(18px);}
.about-stagger:not(.is-in){transition:none !important;}   /* hide instantly, never fade down first */
.about-page .about-panel-row.about-stagger.is-in{transition-delay:var(--d,0s);}
.about-stagger.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-out) var(--d,0s), transform 1s var(--ease-out) var(--d,0s);}
/* About page statement: lines rise in from behind a mask */
.nh-static .w{opacity:1 !important;}
.ab-ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.ab-ln-i{display:block;transform:translateY(105%);opacity:0;}
.ab-in .ab-ln-i{transform:none;opacity:1;transition:transform 1.05s var(--ease-out) var(--d,0s), opacity .7s var(--ease-out) var(--d,0s);}
@media (prefers-reduced-motion:reduce){.ab-ln-i{transform:none;opacity:1;}}
/* about page rows revealing together on scroll step in a touch apart */
.about-page .about-panel-row:nth-child(2n){transition-delay:.06s;}
@media (prefers-reduced-motion:reduce){.about-stagger{opacity:1;transform:none;}}

/* columns in motion (into / back from a project): GPU layers only */
html.work-moving .edge-blur{opacity:0;transition:opacity .2s;}
.edge-blur{transition:opacity .4s var(--ease-out);}
html.work-moving #overlayA,html.work-moving #overlayB{will-change:translate;}
html.work-moving .work-overlay .work-card{transition:none !important;}
html.work-moving .work-overlay .work-hover-panel{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
html.work-moving .work-card-tabs .work-feature-tab,html.work-moving .work-name-pill{-webkit-backdrop-filter:none;backdrop-filter:none;}

/* private projects: lock tab (same spot/style as Featured) */
.work-card-tabs .work-feature-tab.is-lock{display:inline-flex !important;align-items:center;justify-content:center;padding:5px 7px;}
.work-feature-tab.is-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;}
/* coming soon: the cursor CTA turns frosted, no arrow chip */
.card-cursor.is-soon{background:rgba(244,247,247,.18);color:var(--paper);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 10px 30px rgba(0,0,0,.25);padding-right:16px;}
.card-cursor.is-soon .ic{display:none;}
.work-overlay .work-card[data-soon]{cursor:default;}

/* bike link (Instagram): underline draws in on hover */
a.about-hobby{cursor:pointer;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:1px;transition:background-size .5s var(--ease-out);}
a.about-hobby:hover{background-size:calc(100% - 1.2em) 1px;}

/* coming-soon flag on the thumbnail (frosted, same spot as Featured) */
.work-card-tabs .work-feature-tab.is-soon{display:inline-flex !important;background:rgba(244,247,247,.18);color:var(--paper);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;}
/* the intro text is staggered by case-study.js, so the container itself shows at once */
html.case-entering .cs-intro,html.case-entering.case-reveal .cs-intro{opacity:1;transform:none;transition:none;}
html.case-entering.case-reveal .cs-media{transition-delay:.25s,.2s;}
/* all top-right card tabs (Featured, lock, categories) share the frosted
   glass look of the Coming soon flag */
.work-card-tabs .work-feature-tab,
.work-card-tabs .work-feature-tab.is-featured,
.work-card-tabs .work-feature-tab.is-cat,
.work-card-tabs .work-feature-tab.is-lock{
  background:rgba(244,247,247,.18);color:var(--paper);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
}
/* arrow-key cue: a black squircle with the white arrow centred inside */
.key-direction-cue{
  width:clamp(84px,8vw,120px);aspect-ratio:1;
  background:#000;color:var(--paper);
  border-radius:28%;
  filter:none;box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset;
}
.key-direction-cue svg{width:22%;height:auto;margin:0;}
.key-direction-cue{box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.16) inset;}
/* cue: pops in, holds at full strength, then fades */
.key-direction-cue.is-visible{animation:key-direction-cue-hold .95s cubic-bezier(.16,.84,.31,1) forwards;}
@keyframes key-direction-cue-hold{
  0%{opacity:0;transform:translate(-50%,-44%) scale(.6);}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  70%{opacity:1;transform:translate(-50%,-51%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-56%) scale(.86);}
}
/* Coming soon flag: solid black */
.work-card-tabs .work-feature-tab.is-soon{background:#000;color:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;}

/* ---------- design pass (Oct 2026) ---------- */
/* Top-right tabs (Featured, lock, categories): dark frosted glass, so they
   read on cream and white images as well as dark ones */
.work-card-tabs .work-feature-tab,
.work-card-tabs .work-feature-tab.is-featured,
.work-card-tabs .work-feature-tab.is-cat,
.work-card-tabs .work-feature-tab.is-lock{
  background:rgba(0,0,0,.42);color:var(--paper);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
}
/* About page: tighten the empty band between Contact and Services */
html.view-about .hv-block-svc{padding-top:clamp(36px,4.5vw,64px);}
/* Section labels: one style everywhere, small mono capitals (as on the
   About page rows), keeping each label's own green marker */
.nh-label{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-label);}
/* footer column headings: same mono capitals as the section labels */
.footer-grid h4{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-label);}
/* Near-black thumbnails (marked data-dark in the HTML) get a hairline of
   white so they don't melt into the black page. Mark new ones the same way. */
.work-card[data-dark] .work-media::after,
.arch-item[data-dark]::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(244,247,247,.14);
}
.arch-item[data-dark]{position:relative;}
/* About: agencies and clients link out; a quiet underline draws in on hover */
a.about-link{color:inherit;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:1px;transition:background-size .5s var(--ease-out);}
a.about-link:hover{background-size:100% 1px;}

/* ---------- Work statement: the sentence on the edges above the work ---------- */
.work-statement{display:none;}
html.view-work .work-statement{display:block;margin:0;}
.work-statement span{
  position:fixed;z-index:1800;top:45px;margin-top:-.62em;   /* above the Work layer (1600), below the nav (1900) */
  font-size:var(--fs-body);font-weight:500;line-height:1.25;letter-spacing:-.01em;
  color:var(--paper);white-space:nowrap;pointer-events:none;
}
.work-statement .ws-l{left:clamp(28px,3.2vw,64px);}
.work-statement .ws-r{right:clamp(28px,3.2vw,64px);}
/* during the first-load intro it plays above the black loader screen */
.work-statement.is-intro span{z-index:3100;will-change:transform,opacity;}
/* narrower screens: the nav pill fills the middle, so the line drops just
   below it and the work starts a little lower to make room */
@media (max-width:1000px){
  /* a soft black header band, so the moving cards pass under the nav and the line */
  html.view-work .work-statement::before{content:"";position:fixed;left:0;right:0;top:0;height:128px;z-index:1790;pointer-events:none;
    background:linear-gradient(#000 0,#000 62%,rgba(0,0,0,0) 100%);}
  .work-statement span{top:92px;margin-top:0;}
  .work-statement .ws-l{left:clamp(16px,3.2vw,40px);}
  .work-statement .ws-r{right:clamp(16px,3.2vw,40px);}
  html.view-work .work-overlay-inner{padding-top:124px;}
}
@media (max-width:760px){
  .work-statement span{top:80px;font-size:13px;}
  html.view-work .work-statement::before{height:136px;background:linear-gradient(#000 0,#000 72%,rgba(0,0,0,0) 100%);}
  html.view-work .work-overlay-inner{padding-top:108px;}
}

/* ---------- NOISE v2: fine flickering film grain (Oct 2026) ----------
   A hand-made 4-frame GIF of pure black/white pixel noise (assets/grain.gif,
   480px tile shown at 240px, so each speck is half a pixel), repeated over the
   whole screen. The GIF flickers fresh grain on its own, so nothing moves.
   Tweak strength with --noise-opacity. */
:root{--noise-opacity:.05;}
body::after{
  inset:0;width:100%;height:100%;
  background-image:url("../grain.gif");background-size:240px 240px;background-repeat:repeat;
  animation:none;transform:none;will-change:auto;
}
@media (prefers-reduced-motion:reduce){body::after{background-image:url("../grain-static.png");}}

/* ---------- smoothness pass ---------- */
/* intro: the loader's black is its own layer so it fades on the GPU */
.pre-bg{position:absolute;inset:0;z-index:0;background:#000;will-change:opacity;}
/* intro: the nav moves and opens without its frosted-glass blur (re-blurring
   every frame was the main cost); the blur returns when it settles */
.nav-inner.nav-intro{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(244,247,247,.97);will-change:transform,opacity,clip-path;}
.work-statement.is-intro span{will-change:transform,opacity;}
/* grain: one still noise tile that jumps to a new offset ~10 times a second.
   Moving a layer is free for the GPU, where an animated GIF repaints the
   whole screen on every frame. Random noise at a new offset reads as fresh grain. */
body::after{
  inset:-240px;width:auto;height:auto;
  background-image:url("../grain-static.png");background-size:240px 240px;
  animation:grainJump .8s steps(1,end) infinite;will-change:transform;
}
@keyframes grainJump{
  0%{transform:translate3d(0,0,0)}
  12.5%{transform:translate3d(-73px,41px,0)}
  25%{transform:translate3d(118px,-97px,0)}
  37.5%{transform:translate3d(-151px,-12px,0)}
  50%{transform:translate3d(37px,163px,0)}
  62.5%{transform:translate3d(-196px,88px,0)}
  75%{transform:translate3d(84px,-178px,0)}
  87.5%{transform:translate3d(-29px,-131px,0)}
  100%{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){body::after{animation:none;}}
/* intro: the Work cards stay hidden until they rise in from below */
html.intro .work-overlay .work-card{opacity:0;}

/* Work statement: a touch larger and more refined. Medium weight, tighter tracking for display size, proper kerning and
   ligatures, and greyscale antialiasing so white-on-black reads crisp rather
   than bold. The vertical offset keeps it centred on the nav pill. */
.work-statement span{
  font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.022em;margin-top:-.6em;
  font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
@media (max-width:1000px){ .work-statement span{margin-top:0;} }
@media (max-width:760px){ .work-statement span{font-size:14.5px;letter-spacing:-.015em;} }


/* ---------- Work statement: the nav's letter roll on hover ----------
   Each letter slides up one line while its text-shadow twin rolls in from
   below. Line box matches the statement's 1.2 line-height so nothing clips. */
.work-statement .ws-l,.work-statement .ws-r{pointer-events:auto;cursor:default;}
.work-statement.is-intro .ws-l,.work-statement.is-intro .ws-r{pointer-events:none;}
.work-statement .ws-roll{display:flex;overflow:hidden;font-style:normal;line-height:1.2;height:1.2em;clip-path:inset(0);text-shadow:0 1.2em 0 currentColor;}
.work-statement .ws-roll i{display:block;font-style:normal;white-space:pre;backface-visibility:hidden;transform:translateY(0) translateZ(0);transition:transform .44s ease;}
@media (hover:hover){
  .work-statement .ws-l:hover .ws-roll i,.work-statement .ws-r:hover .ws-roll i{transform:translateY(-1.2em) translateZ(0);}
}

/* text for search engines, AI models and screen readers, not shown */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- GPU diet (Oct 2026) ----------
   Scrolling the Work feed overloaded the graphics card (300 layers, 34 live
   background blurs over moving films), which made the page and even the app
   around it flicker. Rules: no backdrop blur over moving content, no
   permanent will-change on tall columns or on every card's panel. */
.work-col-track,.work-col-drift{will-change:auto;}
.work-hover-panel{will-change:auto;}
.work-overlay .work-card:hover .work-hover-panel{will-change:transform;}
/* edges: a soft fade to black instead of 16 stacked blurs */
.edge-blur > div{display:none;}
.edge-blur--top{background:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.5) 45%,rgba(0,0,0,0));}
.edge-blur--bottom{background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.5) 45%,rgba(0,0,0,0));}
/* nav pill, card tabs, panels and pills: solid colours, no live blur */
.nav-inner{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(244,247,247,.97);}
.work-hover-panel,.work-overlay .work-card .work-hover-panel{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(244,247,247,.96);}
.work-card-tabs .work-feature-tab,
.work-card-tabs .work-feature-tab.is-featured,
.work-card-tabs .work-feature-tab.is-cat,
.work-card-tabs .work-feature-tab.is-lock{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,11,10,.66);}
.work-card-tabs .work-feature-tab.is-soon{background:#000;}
.work-name-pill{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(244,247,247,.95);}
.card-cursor.is-soon{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,22,20,.86);}
/* rolling letters (nav, statement, buttons): flat 2D at rest, so each letter
   isn't its own GPU layer; they only lift while hovered */
.nav-links a div span,.work-statement .ws-roll i,.sq-btn .roll span{backface-visibility:visible;transform:translateY(0);}
/* full-screen blurs only exist while their panel is open */
.about-panel:not(.is-open) .about-panel-scrim,
.contact-modal:not(.is-open) .contact-modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;}

/* ---------- Work feed: one spacing everywhere ----------
   The margin at the sides of the feed matches the gap between the cards
   (between the columns and between cards in a column), and the statement
   lines up with the outer edges of the cards. */
:root{--feed-gap:clamp(14px,1.4vw,28px);}
@media (max-width:760px){:root{--feed-gap:10px;}}
.work-overlay-inner{padding-left:var(--feed-gap);padding-right:var(--feed-gap);column-gap:var(--feed-gap);}
.work-col-track{gap:var(--feed-gap);}
/* the statement sits in from the cards' edges by twice the gap */
.work-statement .ws-l{left:calc(var(--feed-gap) * 2);}
.work-statement .ws-r{right:calc(var(--feed-gap) * 2);}

/* ============================================================
   DIRECTION STUDY IN A WINDOW: the game never takes over the
   screen. A floating XP-style window (.lr-gamewin) on any page,
   or a desktop window on the Archive (.is-windowed either way).
   ============================================================ */
.rhythm-game.is-windowed{position:absolute;inset:0;z-index:auto;padding:12px 14px 8px;place-items:stretch;}
.rhythm-game.is-windowed .rhythm-shell{width:100%;height:100%;display:flex;flex-direction:column;gap:10px;}
.rhythm-game.is-windowed .rhythm-stage{flex:1;height:auto;min-height:0;border-radius:14px;}
.rhythm-game.is-windowed .rhythm-instructions{margin:0;}
.rhythm-game.is-windowed .rhythm-lanes{padding:0 clamp(8px,4%,40px);}
.rhythm-game.is-windowed .rhythm-unlock-mark svg{width:64px;height:108px;}
.rhythm-game.is-windowed .rhythm-logo-arrow svg{width:34px;height:58px;}
.rhythm-game.is-windowed .rhythm-target{width:54px;height:54px;border-radius:15px;bottom:calc(20% - 28px);}
.lr-gamewin{position:fixed;left:50%;top:50%;z-index:10000;display:none;flex-direction:column;width:min(780px,calc(100vw - 24px));height:min(600px,calc(100vh - 110px));
  transform:translate(-50%,-50%);border-radius:8px 8px 0 0;overflow:hidden;background:#191B19;
  box-shadow:0 0 0 1px #04392F,inset 0 0 0 3px #0B7A63,0 30px 90px rgba(0,0,0,.7);}
.lr-gamewin.is-open{display:flex;animation:lrGameIn .28s cubic-bezier(.22,1,.36,1);}
@keyframes lrGameIn{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
.lr-gamewin-bar{flex:none;display:flex;align-items:center;height:30px;padding:0 5px 0 10px;cursor:grab;touch-action:none;user-select:none;
  background:linear-gradient(180deg,#5ED3B1 0%,#22AC88 10%,#12957A 45%,#0E8A70 85%,#0B7A63 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);}
.lr-gamewin-title{flex:1;color:#fff;font:700 13px/1 Tahoma,var(--font-body);text-shadow:1px 1px 0 rgba(0,0,0,.45);}
.lr-gamewin-x{width:21px;height:21px;padding:0;border:0;border-radius:3px;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(180deg,#F08A6C,#D8492A 55%,#B5361C);box-shadow:inset 0 0 0 1px #fff,inset 0 1px 0 1px rgba(255,255,255,.35);}
.lr-gamewin-x svg{width:9px;height:9px;stroke:#fff;stroke-width:1.4;fill:none;}
.lr-gamewin-x:hover{filter:brightness(1.12);}
.lr-gamewin-body{position:relative;flex:1;min-height:0;margin:0 3px 3px;}
@media (max-width:760px){.lr-gamewin{width:calc(100vw - 16px);height:calc(100vh - 100px);}}

/* the Work statement leaves as the project cards come in (site.js: the
   intro timeline, or enterColumns), then stays hidden */
.work-statement.is-gone .ws-l,.work-statement.is-gone .ws-r{visibility:hidden;pointer-events:none;}

/* mobile menu: bigger, display-size links and a larger Close */
.menu-overlay a{font-size:clamp(36px,10.5vw,52px);font-weight:500;line-height:1.05;letter-spacing:-.035em;padding:18px 0 16px;}
.menu-close{font-size:13px;opacity:.8;top:20px;right:18px;padding:12px;}

/* ============================================================
   MOBILE NAV: lined up with the work, and nothing slides under it
   ============================================================ */
@media (max-width:860px){
  /* the pill's edges line up with the project cards (the feed gap) */
  .nav{width:calc(100% - var(--feed-gap) * 2);}
}
@media (max-width:760px){
  .nav-persp{top:max(var(--feed-gap),env(safe-area-inset-top));}
  /* a black band behind the pill that fades out below it, so pages scroll
     out of sight under the nav instead of showing through it */
  .nav-persp::before{content:"";position:absolute;left:0;right:0;top:-80px;bottom:-30px;z-index:-1;pointer-events:none;
    background:linear-gradient(#000 0,#000 calc(100% - 40px),rgba(0,0,0,0) 100%);}
  .menu-close{display:none;}   /* the nav's Menu button turns into Close */
}

/* MOBILE RECON: bigger tap areas on the nav, no keyboard hint on touch */
@media (max-width:760px){
  .nav-links a,.nav-mark-wrap{position:relative;}
  .nav-links.right a::after,.nav-links.left a::after,.nav-mark-wrap::after{content:"";position:absolute;inset:-14px -12px;}
}
@media (pointer:coarse){
  .rhythm-exit kbd{display:none;}
  .rhythm-exit{padding-right:12px;}
}

/* MOBILE NAV: a smaller pill, in height and width */
@media (max-width:860px){
  .nav{width:min(calc(100% - var(--feed-gap) * 2),248px);}
  .nav-inner{height:42px;padding:0 14px 0 16px;gap:12px;}
  .nav-mark{width:28px;}
  .nav-links a{font-size:15px;}
}
@media (max-width:760px){
  .nav-persp{top:max(calc(var(--feed-gap) + 2px),env(safe-area-inset-top));}
  .nav-persp::before{top:-80px;bottom:-24px;}
}

/* KEYBOARD FOCUS: a visible ring for keyboard users on anything without its own focus style
   (:where keeps specificity at zero, so the specific rules above still win). */
:where(a,button,summary,[role="button"],input,textarea,select):focus-visible{outline:2px solid var(--paper);outline-offset:3px;}
:where(.light-band,.contact-modal,.footer-form) :where(a,button,input,textarea,select):focus-visible{outline-color:var(--brand);}

/* HAMBURGER MENU (Oct 2026): the nav's Menu word is now a three-line icon that turns into a cross when the menu is open.
   Black band behind the mobile nav removed (undo: delete the ::before rule below). Menu overlay is pure black. */
.menu-overlay{background:#000;}
.menu-overlay .wipe-col{background:#000;}
.menu-icon{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;}
.menu-icon line{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease-out),opacity .2s;}
.menu-btn.is-open .menu-icon line:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-btn.is-open .menu-icon line:nth-child(2){opacity:0;}
.menu-btn.is-open .menu-icon line:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
@media (max-width:860px){
  .menu-btn{position:relative;display:grid;place-items:center;width:28px;height:28px;padding:0;}
  .menu-btn::after{content:"";position:absolute;inset:-8px;}   /* 44px tap target */
}
@media (max-width:760px){
  .nav-persp::before{display:none;}
}

/* Black band behind the nav on phones and tablets also off: the Work statement's fixed header band (undo: delete this rule). */
@media (max-width:1000px){
  html.view-work .work-statement::before{display:none;}
}

/* Work feed starts just under the nav pill on phones and tablets (undo: delete this block). */
@media (max-width:1000px){
  html.view-work .work-overlay-inner{padding-top:calc(max(var(--feed-gap),env(safe-area-inset-top)) + 56px + var(--feed-gap));}
}
@media (max-width:760px){
  html.view-work .work-overlay-inner{padding-top:calc(max(calc(var(--feed-gap) + 2px),env(safe-area-inset-top)) + 42px + var(--feed-gap));}
}

/* OPEN MENU ALL BLACK: while the mobile menu is open the film grain (a white speckle layer over everything, z 2500)
   is off and the nav pill drops its light fill, so nothing reads grey. Undo: delete this block. */
html:has(#menuBtn.is-open) body::after{display:none;}
html:has(#menuBtn.is-open) .nav-inner{background:#000;border-color:transparent;box-shadow:none;color:var(--paper);}
html:has(#menuBtn.is-open) .nav-inner .nav-mark,html:has(#menuBtn.is-open) .menu-btn{color:var(--paper);}