:root{
  --bg:        #05040a;
  --panel:     rgba(180,139,255,0.045);
  --line:      rgba(180,139,255,0.22);
  --line-soft: rgba(180,139,255,0.10);
  --violet:    #b48bff;
  --teal:      #7cf0d2;
  --ink:       #ede9f7;
  --ink-dim:   #8f89a8;
  --ink-body:  #b8b8c0;
  --fs-label:  0.875rem;
  --ls-label:  0.05em;
  --fs-body:   1.0625rem;
  --lh-body:   1.6;
  --fs-ui:     0.9375rem;
  --fs-subhead:1.1875rem;
  --fs-heading:clamp(2.25rem, 2.6vw, 2.5rem);
  --fs-hero:   clamp(2.75rem, 2.8vw, 3rem);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.25rem;
}

html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  overflow-x:clip;
}
body{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

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

.mono{ font-family:'IBM Plex Mono', monospace; }

.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }

.site-shell{
  position:relative;
  border:1px solid var(--line);
}

.stage{
  min-height:calc(100svh - 5.25rem);
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  padding:1.75rem clamp(1.5rem, 2.8vw, 2.5rem) 0.4rem;
}

.frame{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:none;
  min-height:0;
  flex:1;
  border:1px solid var(--line);
  border-radius:0;
  background:linear-gradient(180deg, rgba(180,139,255,0.04), rgba(124,240,210,0.02));
  overflow:visible;
}

.frame::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 38% 32% at 50% 40%, rgba(180,139,255,0.09), transparent 65%);
  pointer-events:none;
}

.frame-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.frame-bg picture{
  position:absolute;
  width:112%;
  height:112%;
  top:-6%;
  left:-6%;
  display:block;
}
.frame-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  filter:brightness(0.42) saturate(1.1);
  animation:bg-drift 28s ease-in-out infinite;
}
.frame-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,4,10,0.55) 0%, rgba(5,4,10,0.72) 100%);
}
@keyframes bg-drift{
  0%,100%{ transform:scale(1) translate(0,0); }
  50%{ transform:scale(1.05) translate(-1%, -0.8%); }
}

.corner{
  position:absolute;
  width:14px; height:14px;
  border:1px solid var(--violet);
  opacity:0.6;
  z-index:3;
  pointer-events:none;
}
.corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.site-chrome{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(5,4,10,0.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.4rem calc(clamp(1.5rem, 2.8vw, 2.5rem) + clamp(1.2rem, 3vw, 2.4rem));
  border:0;
}
.wordmark{
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark span{ color:var(--ink-dim); font-weight:400; margin-left:0.5rem; font-size:var(--fs-ui); }

.wordmark.fx-shimmer-boot.fx-ready:not(.fx-done),
.wordmark.fx-shimmer-boot.fx-ready:not(.fx-done) span{
  background-image:linear-gradient(90deg, #c084fc 0%, #5eead4 50%, #c084fc 100%);
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  animation:fx-shimmer-boot 1s ease 1;
}
@keyframes fx-shimmer-boot{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

nav.top-nav{
  display:flex;
  align-items:center;
  gap:0.45rem;
  font-size:var(--fs-ui);
  color:var(--ink-dim);
  letter-spacing:var(--ls-label);
}
nav.top-nav a{
  color:inherit;
  text-decoration:none;
}
.nav-link{
  position:relative;
  display:inline-block;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:1px;
  background:#5eead4;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 200ms ease-out;
  pointer-events:none;
}
.nav-link:hover,
.nav-link.is-active{ color:#5eead4; }
.nav-link:hover::after,
.nav-link.is-active::after{
  transform:scaleX(1);
}
.nav-sep{ opacity:0.45; }

.topbar-actions{
  display:flex;
  align-items:center;
  gap:0.8rem;
}
.cta-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  color:var(--bg);
  background:var(--teal);
  text-decoration:none;
  padding:0.55rem 0.85rem;
  border-radius:3px;
  letter-spacing:var(--ls-label);
  transition:none;
}
.cta-link:hover{ filter:brightness(1.08); }

.nav-burger{
  display:none;
  width:28px;
  height:18px;
  position:relative;
  cursor:pointer;
}
.nav-burger span{
  position:absolute;
  left:0; right:0;
  height:1px;
  background:var(--ink);
}
.nav-burger span:first-child{ top:4px; }
.nav-burger span:last-child{ bottom:4px; }

.mobile-nav{
  display:none;
  position:relative;
  z-index:2;
  flex-direction:column;
  gap:0.85rem;
  padding:0 calc(clamp(1.5rem, 2.8vw, 2.5rem) + clamp(1.2rem, 3vw, 2.4rem)) 1.2rem;
  border-bottom:1px solid var(--line-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
}
.mobile-nav a{
  color:var(--ink-dim);
  text-decoration:none;
  width:fit-content;
}
.mobile-nav a:hover{ color:var(--teal); }

.body-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(280px, 320px) 1fr minmax(260px, 300px);
  flex:1;
}

.sidebar,
.detail{
  display:flex;
  align-items:stretch;
  padding:1.6rem 1.5rem;
}
.sidebar{ border-right:1px solid var(--line-soft); }
.detail{
  align-items:flex-start;
  border-left:1px solid var(--line-soft);
}

.sidebar-panel,
.detail-panel{
  flex:1;
  width:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:0;
  background:none;
}
.sidebar-panel > .corner,
.detail-panel > .corner{
  display:none;
}
.detail-panel{
  flex:0 0 auto;
  height:auto;
}
.detail-intro{
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  width:100%;
}
.hud-box{
  border:1px solid var(--line);
  border-radius:0;
  box-sizing:border-box;
  padding:0.7rem 0.75rem;
}

.panel-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  margin-bottom:0.9rem;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  margin-bottom:2.2rem;
}
.tabs--lead{
  flex-direction:column;
  align-items:flex-start;
  gap:0.85rem;
  font-size:var(--fs-ui);
  letter-spacing:var(--ls-label);
  margin-bottom:2.6rem;
}
.sidebar-intro{
  margin-bottom:0;
}
.tabs a{
  color:inherit;
  text-decoration:none;
  font-size:inherit;
  font-weight:400;
  margin:0;
}
.tabs a:first-child{
  font-size:inherit;
  font-weight:400;
  margin:0;
}
.tabs .active,
.tabs a:hover{
  color:inherit;
  border-bottom:1px solid var(--violet);
  padding-bottom:2px;
}

.section-flag{
  display:flex;
  gap:0.7rem;
  margin:0;
}
.section-flag .bar{
  width:2px;
  background:var(--violet);
  box-shadow:0 0 8px 1px var(--violet);
}
.section-flag h2,
.sidebar-stack .label,
.detail-intro .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.detail-intro .label{
  margin-bottom:0.55rem;
}
.section-flag .active-status,
.active-status{
  display:flex;
  align-items:center;
  gap:0.4rem;
  margin-top:0.35rem;
  font-size:var(--fs-ui);
  color:var(--teal);
}
.active-status .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 6px 1px var(--teal);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; } 50%{ opacity:0.3; }
}

.sidebar-note,
.sidebar-clock{
  margin-top:0.45rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  letter-spacing:var(--ls-label);
  color:var(--ink-dim);
}
.sidebar-clock{
  margin-top:0.7rem;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.sidebar-stack{
  margin-bottom:0;
}
.sidebar-stack .label{
  margin-bottom:0.55rem;
}

.center{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(520px, 68svh, 880px);
  padding:0 0 2.4rem;
  overflow:visible;
}

.figure{
  position:relative;
  z-index:2;
  width:80%;
  height:80%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  transform-origin:50% 65%;
  overflow:visible;
  background:transparent;
  isolation:isolate;
  animation:figure-breathe 5.5s ease-in-out infinite;
}
@keyframes figure-breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.018); }
}
.figure picture{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  overflow:visible;
  background:transparent;
}
.figure-bloom,
.figure picture img{
  position:absolute;
  left:50%;
  top:50%;
  height:100%;
  width:auto;
  max-width:none;
  transform:translate(-50%, -50%);
  object-fit:contain;
  object-position:50% 15%;
  background:transparent;
  border:0;
}
.figure-bloom{
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(28px) saturate(1.35) brightness(1.18);
  opacity:0.5;
  animation:figure-glow 3.8s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
}
.figure picture img{
  z-index:1;
  display:block;
  filter:
    brightness(1.22) contrast(1.02) saturate(1.08);
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
}
@keyframes figure-glow{
  0%,100%{
    opacity:0.38;
    filter:blur(24px) saturate(1.25) brightness(1.1);
  }
  50%{
    opacity:0.62;
    filter:blur(34px) saturate(1.45) brightness(1.22);
  }
}

.particles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.eye-glow{
  position:absolute;
  z-index:4;
  top:33%;
  width:22px; height:22px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(228,180,255,0.95) 0%, rgba(180,139,255,0.55) 35%, rgba(180,139,255,0) 70%);
  filter:blur(3px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:eye-pulse 3.8s ease-in-out infinite;
}
.eye-glow-l{ left:44.5%; }
.eye-glow-r{ left:54.5%; animation-delay:0.35s; }
@keyframes eye-pulse{
  0%,100%{
    opacity:0.42;
    filter:blur(3px);
    transform:translate(-50%,-50%) scale(0.96);
  }
  50%{
    opacity:0.88;
    filter:blur(5px);
    transform:translate(-50%,-50%) scale(1.12);
  }
}
.particle{
  position:absolute;
  bottom:-5%;
  width:2px; height:2px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 5px 1px var(--teal);
  opacity:0;
  animation:rise linear infinite;
}
.particle::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:14px; height:14px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(124,240,210,0.35) 0%, rgba(124,240,210,0) 70%);
  filter:blur(1px);
  animation:trail-glow 2.6s ease-in-out infinite;
  pointer-events:none;
}
.particle.violet{ background:var(--violet); box-shadow:0 0 5px 1px var(--violet); }
.particle.violet::after{
  background:radial-gradient(circle, rgba(180,139,255,0.35) 0%, rgba(180,139,255,0) 70%);
}
@keyframes trail-glow{
  0%,100%{ opacity:0.4; transform:translate(-50%,-50%) scale(0.85); }
  50%{ opacity:0.85; transform:translate(-50%,-50%) scale(1.15); }
}
@keyframes rise{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:0.7; }
  90%{ opacity:0.4; }
  100%{ transform:translateY(-105%) translateX(var(--drift,15px)); opacity:0; }
}

.detail-project{ display:none; }
.detail.is-project .detail-intro{ display:none; }
.detail.is-project .detail-project{ display:block; }

.detail-intro-title{
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-hero);
  font-weight:700;
  line-height:1.15;
  margin:0 0 0.5rem;
}
@media (min-width:1025px){
  .stage .detail-intro-title{
    font-size:clamp(1.9rem, 2.5vw, 2.25rem);
  }
}
.hero-title-br{
  display:none;
}
.hero-copy-br{
  display:none;
}
.detail-intro-copy{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-body);
}

.detail-head{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  margin-bottom:0.75rem;
}
.detail-head .num{ color:var(--teal); }

.field{ margin-bottom:1.3rem; }
.field .label,
.mono-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--violet);
  margin-bottom:0.35rem;
}
.field .value{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-dim);
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.45rem;
  margin-top:0.4rem;
}
.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  padding:0.3rem 0.6rem;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--ink-dim);
}

.visuals{ margin-top:2rem; }
.visuals .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  color:var(--ink-dim);
  margin-bottom:0.6rem;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.thumbs{
  display:flex;
  gap:0.6rem;
}
.thumb{
  width:56px; height:56px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--line-soft);
  position:relative;
  flex-shrink:0;
  padding:0;
  background:none;
  cursor:pointer;
}
.thumb.active{ border-color:var(--violet); }
.thumb img,
.thumb picture{
  width:100%; height:100%;
}
.thumb img{
  object-fit:cover;
}
.thumb picture{ display:block; }
.thumb-num{
  position:absolute;
  bottom:2px; left:4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  color:var(--ink);
  text-shadow:0 1px 4px #05040a;
}

.detail-cta{
  display:inline-block;
  margin-top:1rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  color:var(--teal);
  text-decoration:none;
  letter-spacing:var(--ls-label);
}
.detail-cta:hover{ color:var(--ink); }
.detail-cta.is-soon{
  color:var(--ink-dim);
  pointer-events:none;
}

.site-footer{
  background:var(--bg);
  padding:0 clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.5rem);
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  color:var(--ink-dim);
}
.footer-panel{
  position:relative;
  overflow:visible;
  display:grid;
  gap:0.85rem;
  justify-items:start;
  padding:2.1rem clamp(1.2rem, 3vw, 2.4rem) 1.9rem;
  min-height:300px;
  background:#05040a;
}
.footer-panel:has(.footer-pulse){
  overflow:hidden;
  min-height:300px;
  background:radial-gradient(ellipse 72% 70% at 50% 46%, #1c1330 0%, #0a0712 46%, #060409 100%);
}
.footer-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.footer-bg picture{
  display:block;
  width:100%;
  height:100%;
}
.footer-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  transform:scaleX(-1);
  opacity:0.1;
  filter:brightness(0.38) saturate(0.85);
}
.footer-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,4,10,0.82) 0%, rgba(5,4,10,0.72) 48%, rgba(5,4,10,0.88) 100%),
    radial-gradient(ellipse 80% 55% at 50% 40%, rgba(5,4,10,0.2), rgba(5,4,10,0.62) 100%);
}
.footer-wave img{
  transform:none;
  opacity:0.09;
  filter:none;
  object-position:50% 58%;
}
.footer-wave::after{
  display:none;
}
.footer-pulse img{
  transform:none;
  opacity:0.07;
  filter:none;
  object-fit:cover;
  object-position:50% 50%;
}
.footer-pulse::before,
.footer-pulse::after{
  display:none;
}
.footer-panel > :not(.footer-bg):not(.corner){
  position:relative;
  z-index:1;
}
.footer-panel .wordmark,
.footer-panel p{
  text-shadow:0 1px 14px rgba(5,4,10,0.9);
}
.footer-tagline{
  margin:-0.15rem 0 0.15rem;
  font-family:'Inter', sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:0.01em;
  color:var(--ink-body);
}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0.85rem 1.2rem;
}
.footer-nav a{
  font-size:var(--fs-ui);
  color:rgba(237,233,247,0.78);
  text-decoration:none;
  text-shadow:0 1px 12px rgba(5,4,10,0.85);
}
.footer-nav a:hover{ color:var(--teal); }
.footer-mail{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  color:var(--teal);
  text-decoration:none;
  text-shadow:0 1px 12px rgba(5,4,10,0.85);
}
.footer-mail-icon{
  width:14px;
  height:14px;
  flex-shrink:0;
  color:var(--violet);
}
.footer-mail:hover{ color:var(--ink); }

.band{
  padding:0 clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.5rem);
  scroll-margin-top:5.25rem;
}

.panel{
  position:relative;
  max-width:none;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:0;
  background:linear-gradient(180deg, rgba(180,139,255,0.04), rgba(124,240,210,0.02));
  padding:clamp(1.6rem, 3vw, 3rem) clamp(1.2rem, 3vw, 2.4rem);
}

.band-head{
  max-width:640px;
  margin-bottom:2.4rem;
}
.band-head h2,
.about-copy h2,
.contact-copy h2{
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-heading);
  font-weight:700;
  line-height:1.15;
  margin:0.55rem 0 0.9rem;
}
.lead{
  color:var(--ink-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

#work.band{
  padding-left:clamp(1.5rem, 2.8vw, 2.5rem);
  padding-right:clamp(1.5rem, 2.8vw, 2.5rem);
}

.work-panel{
  max-width:none;
  width:100%;
  min-height:0;
  padding:clamp(1.6rem, 3vw, 3rem) clamp(1.2rem, 3vw, 2.4rem) clamp(2.4rem, 4vw, 3.6rem);
  background:radial-gradient(ellipse 72% 70% at 50% 46%, #1c1330 0%, #0a0712 46%, #060409 100%);
  overflow:visible;
}
.work-panel .band-head{
  position:relative;
  z-index:2;
  margin-bottom:1.6rem;
}

.work-list{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0.85rem;
  width:100%;
}
.work-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--line);
  border-radius:0;
  background:rgba(5,4,10,0.78);
  color:inherit;
  text-decoration:none;
  overflow:hidden;
}
.work-list .work-card{
  cursor:pointer;
  transition:border-color 0.2s ease, filter 0.2s ease;
}
.work-list .work-card:hover{
  border-color:rgba(124,240,210,0.5);
  filter:brightness(1.08);
}
.work-card-media{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#0a0712;
}
.work-card-media picture{
  display:block;
  width:100%;
  height:100%;
}
.work-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
  transform-origin:left top;
  display:block;
  transition:transform 250ms ease;
}
.work-list .work-card:nth-child(3) .work-card-media img{
  object-position:0% 0%;
  transform:scale(1.42);
}
.work-card:hover .work-card-media img{
  transform:scale(1.03);
}
.work-list .work-card:nth-child(3):hover .work-card-media img{
  transform:scale(1.48);
}
.work-card-body{
  display:grid;
  grid-template-columns:2.1rem minmax(0, 1fr) auto 1.1rem;
  align-items:center;
  gap:0.45rem 0.65rem;
  padding:0.75rem 0.8rem 0.8rem;
}
.work-card:hover .work-name,
.work-card:hover .work-arrow{ color:var(--teal); }

.work-soon{
  position:relative;
  z-index:2;
  margin-top:2.2rem;
}
.work-soon .mono-label{ margin-bottom:0.85rem; }
.work-soon-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 240px));
  gap:0.75rem;
}
.work-card--soon{
  opacity:0.7;
  pointer-events:none;
  cursor:default;
}
.work-card--soon .work-card-media img{
  transition:none;
}
.work-card--soon:hover .work-card-media img{ transform:none; }
.work-card--soon:hover .work-name,
.work-card--soon:hover .work-arrow{ color:inherit; }
.work-card--soon .work-card-body{
  grid-template-columns:2.1rem minmax(0, 1fr) auto;
  padding:0.55rem 0.65rem 0.6rem;
}
.work-card--soon .work-name{ font-size:var(--fs-subhead); }
.work-card--soon .work-cat{ font-size:var(--fs-ui); }
.work-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--violet);
}
.work-copy{
  display:flex;
  flex-direction:column;
  gap:0.18rem;
  min-width:0;
}
.work-name{
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-subhead);
  font-weight:700;
  line-height:1.25;
}
.work-cat{
  color:var(--ink-dim);
  font-size:var(--fs-ui);
  line-height:1.4;
}
.work-status{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  letter-spacing:var(--ls-label);
  text-transform:lowercase;
  white-space:nowrap;
}
.work-status.is-live{ color:var(--teal); }
.work-status.is-soon{ color:var(--ink-dim); }
.work-arrow{
  width:14px;
  height:14px;
  color:var(--ink-dim);
  justify-self:end;
}

.services-panel{
  position:relative;
  overflow:visible;
  background:radial-gradient(ellipse 72% 70% at 50% 46%, #1c1330 0%, #0a0712 46%, #060409 100%);
}
.services-panel > .band-head,
.services-panel > .service-grid{
  position:relative;
  z-index:1;
}
.services-panel .band-head h2{
  text-shadow:0 2px 22px rgba(5,4,10,0.9);
}
.services-panel .lead{
  color:var(--ink-body);
  text-shadow:0 1px 16px rgba(5,4,10,0.85);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.7rem;
}
.service-card{
  border:1px solid var(--line);
  border-radius:0;
  padding:1rem 0.85rem 1.1rem;
  background:rgba(5,4,10,0.72);
  min-height:100%;
  transition:border-color 0.2s ease;
}
.service-card:hover{
  border-color:rgba(180,139,255,0.55);
}
.service-icon{
  width:20px;
  height:20px;
  display:block;
  color:var(--violet);
  stroke-linejoin:round;
  transition:color 0.2s ease;
}
.service-card:hover .service-icon{
  color:var(--teal);
}
.service-card h3{
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-subhead);
  font-weight:700;
  margin:0.7rem 0 0.45rem;
  line-height:1.25;
}
.service-card p{
  color:var(--ink-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

.tools-panel{
  position:relative;
  overflow:visible;
  background:radial-gradient(ellipse 72% 70% at 50% 46%, #1c1330 0%, #0a0712 46%, #060409 100%);
}
.tools-panel > .band-head,
.tools-panel > .tools-groups{
  position:relative;
  z-index:1;
}
.tools-panel .band-head h2{
  text-shadow:0 2px 22px rgba(5,4,10,0.9);
}
.tools-panel .lead{
  color:var(--ink-body);
  text-shadow:0 1px 16px rgba(5,4,10,0.85);
}
.tools-groups{
  display:grid;
  gap:1.1rem;
}
.tool-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.7rem;
}
.tool-card{
  border:1px solid var(--line);
  border-radius:0;
  padding:1rem 0.85rem 1.05rem;
  background:rgba(5,4,10,0.72);
  min-height:100%;
  display:grid;
  align-content:start;
  gap:0.45rem;
  transition:border-color 0.2s ease;
}
.tool-card--featured{
  padding:1.5rem 1.3rem 1.55rem;
  min-height:10.5rem;
  gap:0.65rem;
}
.tool-card:hover{
  border-color:rgba(180,139,255,0.55);
}
.tool-icon{
  width:20px;
  height:20px;
  display:block;
  color:var(--violet);
  stroke-linejoin:round;
  stroke-linecap:round;
  transition:color 0.2s ease;
}
.tool-card--featured .tool-icon{
  width:30px;
  height:30px;
}
.tool-card:hover .tool-icon{
  color:var(--teal);
}
.tool-card h3{
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-subhead);
  font-weight:700;
  margin:0.25rem 0 0;
  line-height:1.25;
}
.tool-card p{
  color:var(--ink-body);
  font-size:var(--fs-ui);
  line-height:1.4;
}
.tools-tags .tag-row{
  margin-top:0;
}

.cta-band .cta-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.15rem;
  text-align:center;
  padding:clamp(2.2rem, 4.5vw, 3.4rem) 1.5rem;
  overflow:hidden;
  background:radial-gradient(ellipse 72% 70% at 50% 46%, #1c1330 0%, #0a0712 46%, #060409 100%);
}
.cta-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.cta-bg picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.cta-bg img{
  position:absolute;
  left:-30%;
  top:0;
  width:160%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  opacity:0.07;
}
.cta-band .cta-panel > :not(.cta-bg):not(.corner){
  position:relative;
  z-index:1;
}
.cta-band-copy{
  margin:0;
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-heading);
  font-weight:700;
  line-height:1.2;
  text-shadow:0 1px 18px rgba(5,4,10,0.88);
}
.cta-band .cta-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.contact-panel{
  position:relative;
  overflow:visible;
  display:block;
  min-height:0;
  background:radial-gradient(ellipse 72% 70% at 50% 46%, #1c1330 0%, #0a0712 46%, #060409 100%);
}
.contact-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(18rem, 28rem);
  justify-content:stretch;
  gap:clamp(1.8rem, 4vw, 3.2rem);
  align-items:start;
}
.contact-inner > .contact-box{
  position:relative;
  z-index:1;
}
.contact-box{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:1.5rem;
  min-height:0;
  padding:0.15rem 0;
  border:0;
  background:transparent;
}
.contact-copy h2{
  text-shadow:0 2px 22px rgba(5,4,10,0.9);
}
.contact-copy .lead{
  color:var(--ink-body);
  text-shadow:0 1px 16px rgba(5,4,10,0.85);
  max-width:26rem;
}
.contact-copy-top{
  display:flex;
  flex-direction:column;
  gap:0.85rem;
}
.contact-copy-foot{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.4rem;
}
.contact-note{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-body);
  text-shadow:0 1px 12px rgba(5,4,10,0.85);
}

.about-band{
  padding-top:clamp(1.5rem, 2.8vw, 2.5rem);
}

.about-shell{
  position:relative;
  max-width:none;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  justify-content:stretch;
  align-items:stretch;
  column-gap:clamp(1.2rem, 2.5vw, 2rem);
  row-gap:2rem;
  padding:clamp(3rem, 4.5vw, 4rem) clamp(1.2rem, 3vw, 2.4rem);
  border:1px solid var(--line);
  border-radius:0;
  background:radial-gradient(ellipse 72% 70% at 50% 46%, #1c1330 0%, #0a0712 46%, #060409 100%);
  overflow:visible;
}

.about-copy{
  grid-column:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  width:100%;
  max-width:none;
  justify-self:stretch;
  min-height:0;
}

.about-status-label,
.about-hud{
  font-family:'IBM Plex Mono', monospace;
  font-weight:400;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:#9b93b0;
}

.about-eyebrow{
  margin-bottom:0.85rem;
}

.about-status{
  display:flex;
  flex-direction:column;
  gap:0.45rem;
  margin-bottom:1.75rem;
}

.about-status-label{
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
}

.about-live{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  letter-spacing:var(--ls-label);
  color:#7cf0d2;
}

.about-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7cf0d2;
  box-shadow:0 0 7px 1px #7cf0d2;
}

.about-bio{
  display:grid;
  gap:1.4rem;
  width:100%;
  color:var(--ink-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.7rem;
  margin-top:0;
  width:100%;
}
.about-stats .hud-box{
  height:auto;
}
.about-stats .field{
  margin-bottom:0;
}

.about-copy-foot{
  margin-top:auto;
  width:100%;
}
.about-process{
  margin-top:1.4rem;
  width:100%;
}
.about-process > .mono-label{
  margin-bottom:0.7rem;
}
.about-steps{
  list-style:none;
  display:grid;
  gap:0.7rem;
}
.about-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0.15rem 0.7rem;
  align-items:start;
}
.about-step .mono-label{
  margin-bottom:0;
}
.about-step strong{
  display:block;
  font-weight:600;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
}
.about-step span{
  display:block;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-body);
}

.about-visual{
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  min-width:0;
  width:100%;
  max-width:none;
  height:auto;
  justify-self:stretch;
  min-height:0;
  padding-right:0;
}
.about-visual .sidebar-stack{
  margin-top:auto;
  width:100%;
}

.about-card{
  position:relative;
  isolation:isolate;
  z-index:1;
  height:auto;
  width:100%;
  max-width:100%;
  max-height:none;
  flex:none;
  aspect-ratio:4 / 5;
  margin:0;
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  background:#0a0a0f;
}

.about-card picture{
  display:block;
  width:100%;
  height:100%;
}
.about-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 12%;
  display:block;
}

.about-hud{
  position:absolute;
  top:0.9rem;
  right:0.9rem;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.3rem;
  font-size:var(--fs-label);
  padding:0.35rem 0.45rem;
  background:rgba(5,4,10,0.72);
  border:1px solid rgba(180,139,255,0.18);
  backdrop-filter:blur(10px);
  transform:scale(0.78);
  transform-origin:top right;
}

.about-hud-top{
  display:flex;
  align-items:center;
  gap:0.45rem;
}

.about-hud-slider{
  display:flex;
  align-items:center;
  gap:0.35rem;
  color:#8f89a8;
}

.about-hud-track{
  position:relative;
  display:block;
  width:52px;
  height:1px;
  background:rgba(220,210,255,0.28);
}

.about-hud-track i{
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ede9f7;
  transform:translate(-50%,-50%);
  box-shadow:0 0 6px rgba(180,139,255,0.7);
}

.about-hud-swatches{
  display:flex;
  gap:0.35rem;
}

.about-hud .swatch{
  width:11px;
  height:11px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(220,210,255,0.16);
}
.swatch-glass{ background:radial-gradient(circle at 30% 30%, #efe8ff, #7d6bb8 60%, #2a2240); }
.swatch-ice{ background:radial-gradient(circle at 30% 30%, #f4fbff, #9fd4e8 55%, #3d6a80); }
.swatch-copper{ background:radial-gradient(circle at 30% 30%, #f0d4c4, #b07a62 55%, #4a2c24); }
.swatch-void{ background:#16131c; }
.swatch.is-on{ box-shadow:0 0 0 1px rgba(237,233,247,0.85); }

.mail-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  color:var(--teal);
  text-decoration:none;
  text-shadow:0 1px 12px rgba(5,4,10,0.85);
}
.mail-link-icon{
  width:16px;
  height:16px;
  color:var(--violet);
  flex-shrink:0;
}
.mail-link:hover{ color:var(--ink); }

.contact-box.touch-form{
  gap:1.15rem;
  max-width:none;
  width:100%;
  justify-self:start;
  padding-top:calc(0.8125rem * 1.25 + 1.2rem + 12px);
}
.touch-fields{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.icon-field{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.4rem;
  width:100%;
  margin:0;
  padding:0 0 0.55rem;
  border:0;
  border-bottom:1px solid rgba(255,255,255,0.12);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.icon-field-head{
  display:flex;
  align-items:center;
  gap:0.55rem;
}
.icon-field svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:rgba(237,233,247,0.38);
}
.icon-field-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-dim);
}
.icon-field input,
.icon-field textarea{
  width:100%;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  padding:0 0 0 calc(16px + 0.55rem);
}
.icon-field input{
  height:1.45em;
  min-height:1.45em;
}
.icon-field textarea{
  min-height:3.4em;
  height:3.4em;
  resize:vertical;
}
.icon-field input::placeholder,
.icon-field textarea::placeholder{
  color:var(--ink-dim);
}
.icon-field input:focus,
.icon-field textarea:focus{
  outline:none;
}
.icon-field:focus-within{
  border-bottom-color:rgba(124,240,210,0.45);
}
.touch-send{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  width:100%;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  letter-spacing:var(--ls-label);
  color:var(--bg);
  background:var(--teal);
  border:0;
  border-radius:0;
  padding:0.55rem 0.9rem;
  cursor:pointer;
}
.touch-send svg{
  width:15px;
  height:15px;
}
.touch-send:hover{ filter:brightness(1.08); }

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view{
  opacity:1;
  transform:none;
}

.fx-shimmer.fx-ready{
  background-image:linear-gradient(90deg, #c084fc 0%, #5eead4 50%, #c084fc 100%);
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  animation:fx-shimmer 3s linear infinite;
}
@keyframes fx-shimmer{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

.fx-shimmer-once.fx-ready:not(.fx-done){
  background-image:linear-gradient(90deg, #c084fc 0%, #5eead4 50%, #c084fc 100%);
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  animation:fx-shimmer-once 1.5s ease 1;
}
@keyframes fx-shimmer-once{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

.fx-pulse-dot.fx-ready{
  animation:fx-pulse-dot 2s ease-in-out infinite;
}
@keyframes fx-pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.35; transform:scale(0.7); }
}

.fx-glitch-live.fx-ready{
  animation:fx-glitch-live 5s steps(1, end) infinite;
}
.work-card:nth-child(2) .fx-glitch-live.fx-ready{
  animation-duration:5.8s;
  animation-delay:1.1s;
}
.work-card:nth-child(3) .fx-glitch-live.fx-ready{
  animation-duration:5.4s;
  animation-delay:2.2s;
}
@keyframes fx-glitch-live{
  0%, 88%, 100%{
    text-shadow:none;
  }
  89%{
    text-shadow:2px 0 #c084fc, -2px 0 #5eead4;
  }
  90%{
    text-shadow:-2px 0 #f0abfc, 2px 0 #5eead4;
  }
  91%{
    text-shadow:1px 0 #5eead4, -1px 0 #c084fc;
  }
}

.fx-glitch.fx-ready{
  animation:fx-glitch 5s steps(1, end) infinite;
}
.fx-glitch.fx-ready:nth-of-type(2),
#system-clock.fx-glitch.fx-ready{
  animation-delay:0.8s;
  animation-duration:5.6s;
}
@keyframes fx-glitch{
  0%, 91%, 100%{
    text-shadow:none;
    transform:none;
  }
  92%{
    text-shadow:2px 0 #c084fc, -2px 0 #5eead4;
    transform:translateX(1px);
  }
  93%{
    text-shadow:-2px 0 #f0abfc, 2px 0 #5eead4;
    transform:translateX(-1px);
  }
  94%{
    text-shadow:1px 0 #5eead4, -1px 0 #c084fc;
    transform:none;
  }
}

.fx-typewriter{
  min-height:1em;
}
.fx-typewriter.fx-ready::after{
  content:'▋';
  margin-left:0.12em;
  color:var(--teal);
  animation:fx-caret 1s step-end infinite;
}
.fx-typewriter.fx-done::after{
  content:none;
}
@keyframes fx-caret{
  0%, 49%{ opacity:1; }
  50%, 100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .fx-shimmer,
  .fx-shimmer.fx-ready,
  .fx-shimmer-once,
  .fx-shimmer-once.fx-ready,
  .fx-shimmer-boot,
  .fx-shimmer-boot.fx-ready,
  .fx-shimmer-boot.fx-ready span{
    animation:none !important;
    animation-duration:0s !important;
    background:none;
    background-clip:border-box;
    -webkit-background-clip:border-box;
    color:inherit;
  }
  .fx-glitch,
  .fx-glitch.fx-ready,
  .fx-glitch-live,
  .fx-glitch-live.fx-ready{
    animation:none !important;
    animation-duration:0s !important;
    text-shadow:none;
    transform:none;
  }
  .fx-pulse-dot,
  .fx-pulse-dot.fx-ready{
    animation:none !important;
    opacity:1;
    transform:none;
  }
  .fx-typewriter.fx-ready::after{
    animation:none !important;
    animation-duration:0s !important;
    opacity:0;
  }
  .service-card,
  .service-icon,
  .tool-card,
  .tool-icon{
    transition:none;
  }
  .hero-scroll,
  .hero-scroll svg{
    animation:none !important;
  }
  .figure,
  .figure-bloom,
  .figure picture,
  .figure picture img,
  .eye-glow{
    animation:none !important;
  }
  .figure-bloom{
    opacity:0.48;
    filter:blur(28px) saturate(1.3) brightness(1.14);
  }
  .figure picture img{
    filter:
      brightness(1.22) contrast(1.02) saturate(1.08);
  }
  .eye-glow{
    opacity:0.7;
    filter:blur(3px);
    transform:translate(-50%,-50%);
  }
  .nav-link::after{
    transition:none;
  }
  .work-card-media img{
    transition:none;
  }
  .work-card:hover .work-card-media img{
    transform:none;
  }
  .work-list .work-card:nth-child(3) .work-card-media img,
  .work-list .work-card:nth-child(3):hover .work-card-media img{
    transform:scale(1.42);
  }
}

@media (min-width:1600px){
  .stage{
    min-height:calc(100svh - 5.75rem);
  }
  .stage .body-grid{
    grid-template-columns:minmax(340px, 428px) 1fr minmax(320px, 400px);
  }
}

@media (max-width:1280px) and (min-width:981px){
  .wordmark span{ display:none; }
}

@media (max-width:1100px){
  .service-grid{ grid-template-columns:repeat(3, 1fr); }
  .work-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tool-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:980px){
  .stage{
    min-height:0;
    padding:0.85rem 1rem 1rem;
  }
  .body-grid{ grid-template-columns:1fr; }
  .sidebar{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .detail{ border-left:none; border-top:1px solid var(--line-soft); }
  .center{ min-height:380px; order:-1; }
  nav.top-nav{ display:none; }
  .nav-burger{ display:block; }
  .nav-toggle:checked ~ .site-shell .mobile-nav{ display:flex; }
  .topbar{
    padding-left:calc(clamp(0.85rem, 4vw, 1.6rem) + clamp(1.2rem, 3vw, 2.4rem));
    padding-right:calc(clamp(0.85rem, 4vw, 1.6rem) + clamp(1.2rem, 3vw, 2.4rem));
  }
  .mobile-nav{
    padding-left:calc(clamp(0.85rem, 4vw, 1.6rem) + clamp(1.2rem, 3vw, 2.4rem));
    padding-right:calc(clamp(0.85rem, 4vw, 1.6rem) + clamp(1.2rem, 3vw, 2.4rem));
  }
  #work.band,
  #tools.band{
    padding-left:clamp(0.85rem, 4vw, 1.6rem);
    padding-right:clamp(0.85rem, 4vw, 1.6rem);
  }
  .about-band{
    padding-left:clamp(0.85rem, 4vw, 1.6rem);
    padding-right:clamp(0.85rem, 4vw, 1.6rem);
  }
  .work-list{
    max-width:none;
    grid-template-columns:1fr;
  }
  .work-grid,
  .contact-inner,
  .touch-form{
    grid-template-columns:1fr;
  }
  .touch-form{
    justify-self:stretch;
    max-width:none;
  }
  .contact-box.touch-form{
    padding-top:0.15rem;
  }
  .service-grid{ grid-template-columns:1fr; }
  .tool-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .topbar-actions .cta-link{ display:none; }
  .about-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .about-copy{
    grid-column:auto;
    grid-row:auto;
    display:flex;
    flex-direction:column;
    max-width:none;
  }
  .about-copy-foot{
    margin-top:1.4rem;
  }
  .about-visual{
    display:none;
  }
}

@media (min-width:768px) and (max-width:1024px){
  :root{
    --fs-label:  0.8125rem;
    --fs-body:   1rem;
    --fs-ui:     0.875rem;
    --fs-subhead:1.125rem;
    --fs-heading:clamp(1.55rem, 2vw, 1.8rem);
    --fs-hero:   clamp(1.3rem, 1.7vw, 1.55rem);
  }
  .detail-intro-title{
    font-size:var(--fs-hero);
    line-height:1.18;
  }
  .hero-title-br{
    display:block;
  }
  .hero-copy-br{
    display:block;
  }
  .stage .detail-intro-copy,
  .stage .sidebar-note,
  .stage .mary-widget-name,
  .stage .mary-widget-role{
    font-size:0.875rem;
  }
  .stage .detail-head,
  .stage .label,
  .stage .mono-label,
  .stage .sidebar-clock,
  .stage .section-flag h2{
    font-size:0.65rem;
  }
  .detail .detail-intro-copy,
  .detail .sidebar-note,
  .detail .active-status,
  .detail .mary-widget-name,
  .detail .mary-widget-role,
  .detail .mary-widget-book,
  .sidebar .detail-intro-copy{
    font-size:0.7rem;
  }
  .sidebar .detail-head,
  .sidebar-stack .label,
  .sidebar .tag{
    font-size:0.65rem;
  }
  .sidebar,
  .detail{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    padding:0.4rem 0.45rem;
    box-sizing:border-box;
  }
  .sidebar{
    padding-right:clamp(0.4rem, 1vw, 0.6rem);
  }
  .detail{
    padding-left:clamp(0.4rem, 1vw, 0.6rem);
  }
  .sidebar-panel{
    min-width:0;
    width:max-content;
    max-width:100%;
    overflow:hidden;
    gap:1.15rem;
    box-sizing:border-box;
    align-items:stretch;
  }
  .detail-panel{
    min-width:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
    gap:1.15rem;
    box-sizing:border-box;
    align-items:stretch;
  }
  .detail-intro{
    gap:1.15rem;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .stage .hud-box,
  .stage .mary-widget{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:0.55rem 0.65rem;
    overflow:hidden;
  }
  .stage .sidebar .hud-box{
    width:auto;
    max-width:100%;
    align-self:stretch;
    box-sizing:border-box;
    padding:0.55rem 0.65rem;
  }
  .detail .hud-box,
  .detail .mary-widget{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:0.55rem 0.65rem;
  }
  .detail .mary-widget-book{
    width:100%;
    box-sizing:border-box;
  }
  .detail .section-flag{
    gap:0.7rem;
  }
  .stage .tag{
    padding:0.16rem 0.3rem;
  }
  .stage .detail-intro-title,
  .stage .detail-intro-copy,
  .stage .detail-head,
  .stage .label,
  .stage .sidebar-note,
  .stage .sidebar-clock,
  .stage .mary-widget-name,
  .stage .mary-widget-role,
  .stage .active-status,
  .stage .section-flag,
  .stage .section-flag > div{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
    box-sizing:border-box;
  }
  .stage .section-flag{
    min-width:0;
  }
  .stage .section-flag > div{
    min-width:0;
    flex:1;
  }
  .sidebar .detail-head,
  .sidebar .detail-intro-title,
  .sidebar .detail-intro-copy,
  .sidebar .label,
  .sidebar .tag-row,
  .sidebar .tag{
    text-align:left;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }
  .sidebar .detail-intro-title,
  .sidebar .detail-intro-copy{
    width:100%;
  }
  .sidebar .tag-row{
    display:grid;
    grid-template-columns:max-content max-content;
    justify-content:start;
    justify-items:start;
    align-content:start;
    gap:0.35rem;
    max-width:100%;
    width:auto;
    margin-left:0;
    margin-right:0;
  }
  .sidebar .tag{
    flex:none;
    white-space:nowrap;
    padding:0.2rem 0.38rem;
    font-size:0.65rem;
    text-align:left;
  }
  .sidebar-stack .label{
    text-align:left;
    font-size:0.65rem;
  }
  .sidebar-intro,
  .sidebar-stack{
    width:auto;
    max-width:100%;
    padding-right:0;
    box-sizing:border-box;
  }
  .detail .hud-box,
  .detail .mary-widget,
  .detail .label,
  .detail .detail-intro-copy,
  .detail .sidebar-note,
  .detail .sidebar-clock,
  .detail .mary-widget-name,
  .detail .mary-widget-role,
  .detail .section-flag h2,
  .detail .active-status{
    text-align:left;
  }
  .detail .mary-widget-row{
    justify-content:flex-start;
  }
  .detail .mary-widget-book{
    width:100%;
    text-align:center;
  }
  .center{
    padding-left:0.35rem;
    min-height:min(52svh, 460px);
    overflow:visible;
  }
  .figure{
    width:82%;
    height:82%;
  }
  .figure-bloom,
  .figure picture img{
    height:100%;
    object-position:50% 12%;
  }
}

@media (min-width:981px) and (max-width:1024px){
  .stage .body-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.82fr);
  }
  .sidebar,
  .detail{
    width:100%;
    max-width:100%;
  }
  .sidebar-panel{
    width:max-content;
    max-width:100%;
  }
  .stage .sidebar .hud-box{
    width:auto;
    max-width:100%;
    align-self:stretch;
  }
  .detail .hud-box,
  .detail .mary-widget{
    width:100%;
    max-width:100%;
  }
}

@media (min-width:768px) and (max-width:980px){
  .sidebar-panel{
    width:max-content;
    max-width:100%;
  }
  .stage .sidebar .hud-box{
    width:auto;
    max-width:100%;
    align-self:stretch;
  }
  .stage .detail .hud-box,
  .stage .detail .mary-widget{
    width:100%;
    max-width:100%;
  }
}

@media (max-width:767px){
  :root{
    --fs-label:  0.75rem;
    --fs-body:   0.9375rem;
    --fs-ui:     0.8125rem;
    --fs-subhead:1.0625rem;
    --fs-heading:clamp(1.55rem, 5.4vw, 1.85rem);
    --fs-hero:   clamp(1.45rem, 6.2vw, 1.75rem);
  }
  .about-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    justify-items:stretch;
    padding:1.75rem clamp(1.2rem, 3vw, 2.4rem);
  }
  .about-copy{
    grid-column:auto;
    grid-row:auto;
    display:flex;
    flex-direction:column;
    order:1;
    max-width:none;
  }
  .about-copy-foot{
    margin-top:1.4rem;
  }
  .about-visual{
    display:none;
  }
  .detail-intro-title{
    font-size:var(--fs-hero);
    line-height:1.18;
  }
  .center{
    min-height:min(48svh, 360px);
    padding:0.35rem 0 0.5rem;
  }
  .figure{
    width:88%;
    height:88%;
    margin-top:0;
  }
  .figure-bloom,
  .figure picture img{
    height:100%;
    object-position:50% 12%;
  }
}

@media (max-width:640px){
  :root{
    --fs-label:  0.75rem;
    --fs-body:   0.9375rem;
    --fs-ui:     0.8125rem;
    --fs-subhead:1rem;
    --fs-heading:clamp(1.45rem, 5.8vw, 1.75rem);
    --fs-hero:   clamp(1.4rem, 6.4vw, 1.65rem);
  }
  .topbar{ padding-top:1.1rem; padding-bottom:1.1rem; }
  .wordmark span{ display:none; }
  .tool-grid--featured{ grid-template-columns:1fr; }
  .sidebar, .detail{ padding:1.2rem 1.1rem; }
  .center{
    min-height:min(46svh, 340px);
    padding:0.25rem 0 0.4rem;
  }
  .figure{
    width:90%;
    height:90%;
    margin-top:0;
  }
  .figure-bloom,
  .figure picture img{
    height:104%;
    object-position:50% 10%;
  }
  .detail-intro-title{
    font-size:var(--fs-hero);
  }
}

.mary-widget{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  margin-top:0;
  padding:0.7rem 0.75rem;
  border-radius:0;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(180,139,255,0.12), rgba(6,4,10,0.9) 48%);
  box-sizing:border-box;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:border-color 0.2s ease;
}
.mary-widget:hover{
  border-color:rgba(124,240,210,0.5);
}
.mary-widget .label{
  margin-bottom:0.55rem;
}

.mary-widget-row{
  display:flex;
  align-items:center;
  gap:0.55rem;
  margin-bottom:0.55rem;
}

.mary-widget-row picture{
  flex-shrink:0;
  display:block;
  width:36px;
  height:36px;
}
.mary-widget-avatar{
  width:36px;
  height:36px;
  border-radius:3px;
  object-fit:cover;
  object-position:50% 12%;
  border:1px solid var(--line);
  flex-shrink:0;
}

.mary-widget-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:var(--fs-ui);
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
}

.mary-widget-role{
  margin-top:0.1rem;
  font-size:var(--fs-ui);
  color:var(--ink-dim);
}

.mary-widget-book{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  font-weight:400;
  letter-spacing:var(--ls-label);
  color:var(--bg);
  background:var(--teal);
  text-decoration:none;
  padding:0.5rem 0.85rem;
  border-radius:3px;
}

.mary-widget-book:hover{ filter:brightness(1.08); }

.hero-scroll{
  position:absolute;
  left:50%;
  bottom:0.85rem;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.15rem;
  transform:translateX(-50%);
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--teal);
  text-decoration:none;
}
.hero-scroll svg{
  width:16px;
  height:16px;
  color:var(--violet);
  animation:hero-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-bounce{
  0%,100%{ transform:translateY(0); opacity:0.7; }
  50%{ transform:translateY(5px); opacity:1; }
}

body.case-page{
  padding:clamp(1.5rem, 2.8vw, 2.5rem);
}
.case-band{
  padding:clamp(1.2rem, 2.4vw, 2rem) 0 0;
}
.case-panel{
  max-width:none;
  width:100%;
  background:radial-gradient(ellipse 72% 70% at 50% 8%, #1c1330 0%, #0a0712 46%, #060409 100%);
}
.case-head{
  margin-bottom:1.6rem;
}
.case-head h1{
  font-family:'Unbounded', sans-serif;
  font-size:var(--fs-heading);
  font-weight:700;
  line-height:1.15;
  margin:0.45rem 0 0.75rem;
}
.case-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.65rem 1rem;
}
.case-cat{
  color:var(--ink-dim);
  font-size:var(--fs-ui);
}
.case-hero{
  margin:0 0 2.2rem;
  border:1px solid var(--line);
  overflow:hidden;
  background:#0a0712;
}
.case-hero picture,
.case-shots picture{
  display:block;
  width:100%;
}
.case-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:50% 20%;
}
.case-brief{
  margin-bottom:2.4rem;
}
.case-brief .mono-label,
.case-shots-wrap .mono-label{
  margin-bottom:1rem;
}
.case-facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.2rem 1.6rem;
}
.case-facts dt{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--violet);
  margin-bottom:0.45rem;
}
.case-facts dd{
  margin:0;
  color:var(--ink-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}
.case-shots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.85rem;
}
.case-shots figure{
  margin:0;
  border:1px solid var(--line);
  overflow:hidden;
  background:#0a0712;
}
.case-shots figure:first-child{
  grid-column:1 / -1;
}
.case-shots img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:50% 20%;
}
.case-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:2.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.case-back{
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-ui);
  letter-spacing:var(--ls-label);
  color:var(--ink-dim);
  text-decoration:none;
}
.case-back:hover{ color:var(--teal); }
.case-page .site-footer{
  margin-top:0;
  padding:0;
}

@media (max-width:980px){
  .case-facts{ grid-template-columns:1fr; }
  .case-shots{ grid-template-columns:1fr; }
  .case-shots figure:first-child{ grid-column:auto; }
}