/* ============================================================
   PIXEL PERFECT CREATION — precision instrument
   ============================================================ */

:root{
  --bg:      #060607;
  --bg-2:    #0c0c0e;
  --bg-3:    #131316;
  --ink:     #F2F0EA;
  --mut:     #8b897f;
  --line:    rgba(242,240,234,.09);
  --red:     #FF2A1F;
  --cyan:    #21E6FF;
  --lime:    #C8FF2E;
  --amber:   #FFB02E;
  --disp:    "Archivo", sans-serif;
  --mono:    "Martian Mono", monospace;
  --easeOut: cubic-bezier(.16,1,.3,1);
  --snap:    cubic-bezier(.34,1.56,.5,1);
}

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

html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--disp);
  font-weight:420;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--red); color:#000; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a2a2e; border:3px solid var(--bg); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

.mono{
  font-family:var(--mono);
  font-weight:400;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- atmosphere ---------- */
.noise{
  position:fixed; inset:-50%; z-index:60; pointer-events:none;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045;
  animation:grain .9s steps(2) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,3%); }
  50%{ transform:translate(3%,-2%); } 75%{ transform:translate(-3%,-3%); } 100%{ transform:translate(2%,2%); }
}

/* ---------- THE pixel ---------- */
#pixel{
  position:fixed; left:0; top:0; z-index:55;
  width:10px; height:10px;
  background:var(--red);
  pointer-events:none;
  will-change:transform;
  opacity:0;
  box-shadow:0 0 14px 1px rgba(255,42,31,.55), 0 0 44px 4px rgba(255,42,31,.22);
  animation:pixelPulse 2.6s ease-in-out infinite;
}
@keyframes pixelPulse{
  0%,100%{ box-shadow:0 0 14px 1px rgba(255,42,31,.55), 0 0 44px 4px rgba(255,42,31,.22); }
  50%    { box-shadow:0 0 20px 2px rgba(255,42,31,.8),  0 0 64px 8px rgba(255,42,31,.3); }
}
#pixel.is-on{ opacity:1; }
.pixel__flash{
  position:absolute; inset:-14px;
  border:1px solid var(--red);
  opacity:0; transform:scale(.4);
}
#pixel.is-landing .pixel__flash{ animation:flashRing .7s var(--easeOut) forwards; }
@keyframes flashRing{
  0%{ opacity:1; transform:scale(.3); }
  100%{ opacity:0; transform:scale(2.4); }
}
.pixel-ghost{
  position:fixed; left:0; top:0; z-index:54;
  width:10px; height:10px; background:var(--red);
  pointer-events:none; opacity:0; will-change:transform;
}
#pixelGhost1.is-on{ opacity:.28; }
#pixelGhost2.is-on{ opacity:.12; }

/* dot anchors — the pixel completes these sentences */
.dot-anchor{
  display:inline-block;
  width:.16em; height:.16em;
  margin-left:.1em;
}
.dot-anchor--btn{ width:10px; height:10px; margin:0; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem,3vw,2.6rem);
  transition:background .4s, backdrop-filter .4s;
}
.nav.is-solid{ background:rgba(6,6,7,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav__logo{
  display:flex; align-items:center; gap:.55em;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; font-weight:500;
}
.nav__logo-sq{ width:9px; height:9px; background:var(--ink); transition:background .3s, transform .3s; }
.nav__logo:hover .nav__logo-sq{ background:var(--red); transform:rotate(90deg); }
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); transition:color .25s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__toggle{
  display:none;
  width:34px; height:32px; padding:0;
  border:1px solid var(--line); background:rgba(6,6,7,.55); color:var(--ink);
  align-items:center; justify-content:center; flex-direction:column; gap:6px;
  cursor:pointer;
}
.nav__toggle span{ width:16px; height:1px; background:currentColor; transition:transform .25s; }
.nav.is-menu-open .nav__toggle span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav.is-menu-open .nav__toggle span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.nav__cta{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); padding:.65em 1.3em;
  transition:background .25s, color .25s, border-color .25s;
}
.nav__cta:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.nav__logo{ white-space:nowrap; }
.nav__cta{ white-space:nowrap; }
.nav__cta-short{ display:none; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  height:100svh;
  overflow:hidden;
  cursor:crosshair;
  background:#050507;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background-image:url("../assets/hero/pixel-perfect-creation-hero.jpg");
  background-size:cover;
  background-position:center;
  opacity:.72;
  transform:scale(1.02);
}
.hero__glow{
  position:absolute; inset:0;
  z-index:1;
  background:
    radial-gradient(70% 62% at 50% 45%, rgba(6,6,7,.08), rgba(6,6,7,.48) 82%),
    linear-gradient(90deg, rgba(6,6,7,.34), rgba(6,6,7,.08) 38%, rgba(6,6,7,.42)),
    linear-gradient(180deg, rgba(6,6,7,.42) 0%, rgba(6,6,7,.08) 42%, rgba(6,6,7,.62) 100%);
}
.hero__desk{
  position:absolute; bottom:0; right:9vw; z-index:1;
  width:min(460px,38vw); height:auto;
  display:none;
  opacity:.85;
}
#heroCanvas{ z-index:2; }
.hero__grid{
  position:absolute; inset:0;
  z-index:2;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 75%);
}
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; }

.hero__cursor{
  position:absolute; width:20px; height:20px; z-index:3;
  offset-path:path("M -40 320 C 300 80, 700 620, 1100 260 C 1300 90, 1500 400, 1700 300");
  animation:cursorFly 17s linear infinite;
  opacity:.85;
}
@keyframes cursorFly{
  0%{ offset-distance:0%; opacity:0; }
  4%{ opacity:.85; }
  46%{ opacity:.85; }
  50%{ offset-distance:100%; opacity:0; }
  100%{ offset-distance:100%; opacity:0; }
}

.hero__meta{ position:absolute; z-index:4; color:var(--mut); }
.hero__meta--tl{ top:5.2rem; left:clamp(1.2rem,3vw,2.6rem); }
.hero__meta--tr{ top:5.2rem; right:clamp(1.2rem,3vw,2.6rem); text-align:right; }
.hero__meta--bl{ bottom:2rem; left:clamp(1.2rem,3vw,2.6rem); }
.hero__meta--br{ bottom:2rem; right:clamp(1.2rem,3vw,2.6rem); }
.hero__tagline{ color:var(--ink); opacity:0; transition:opacity 1.2s ease .2s; }
.hero__tagline.is-in{ opacity:1; }
.hero__scrollhint{ display:flex; align-items:center; gap:.6em; }
.hero__chev{ animation:chev 1.6s ease-in-out infinite; display:inline-block; }
@keyframes chev{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ---------- manifesto ---------- */
.mani{ height:260vh; position:relative; }
.mani__stage{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(1.4rem,8vw,12rem);
}
.mani__text{
  font-size:clamp(1.6rem,3.6vw,3.4rem);
  font-weight:640;
  line-height:1.28;
  letter-spacing:-.015em;
  max-width:34ch;
}
.mani__text .w{ opacity:.08; filter:blur(7px); transition:none; }
.mani__foot{
  display:flex; justify-content:space-between;
  color:var(--mut); margin-top:4rem;
  border-top:1px solid var(--line); padding-top:1.2rem;
}

/* ---------- zoom journey ---------- */
.zoom{ height:680vh; position:relative; }
.zoom__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  cursor:crosshair;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, var(--bg-2), var(--bg) 80%);
}
.scene{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  will-change:transform,opacity;
  visibility:hidden;
}
.scene__tag{
  position:absolute; top:5.4rem; left:clamp(1.2rem,3vw,2.6rem);
  display:flex; flex-direction:column; gap:.35em; color:var(--mut);
}
.scene__tag b{ color:var(--ink); font-weight:500; }
.scene__caption{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  color:var(--mut); white-space:nowrap;
}
.scene__caption em{ font-style:normal; color:var(--ink); }

.focal{ position:absolute; width:10px; height:10px; }

/* elements that snap into place when a scene becomes current */
.settle{
  opacity:0;
  transform:translateY(26px) scale(.96);
  filter:blur(9px);
}
.scene.is-live .settle,
.mock-static .settle{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .5s ease, transform .65s var(--snap), filter .6s ease;
}
.scene.is-live .settle{ transition-delay:calc(var(--d,0) * 70ms); }

/* --- scene 1 : browser --- */
.browser{
  width:min(880px,88vw);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.browser__bar{
  display:flex; align-items:center; gap:1rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--line);
}
.browser__dots{ display:flex; gap:.4rem; }
.browser__dots i{ width:9px; height:9px; border-radius:50%; background:#2c2c31; }
.browser__url{
  flex:1; text-align:center; color:var(--mut);
  border:1px solid var(--line); padding:.35em 1em; border-radius:2em;
  text-transform:lowercase; letter-spacing:.04em;
}
.browser__lock{ color:var(--lime); font-size:.6rem; }
.browser__body{ position:relative; padding:1.6rem 2rem 2rem; overflow:hidden; }

.mini-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.mini-nav__logo{ font-weight:800; letter-spacing:.2em; font-size:.8rem; }
.mini-nav__links{ display:flex; gap:.9rem; }
.mini-nav__links i{ width:34px; height:5px; background:#2c2c31; }
.mini-nav__bag{ color:var(--mut); font-size:.58rem; }

.mini-hero h3{
  font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:860; font-stretch:118%;
  line-height:.98; letter-spacing:-.01em;
}
.mini-hero p{ color:var(--mut); margin:.9rem 0 1.3rem; font-size:.58rem; }
.mini-cta{
  display:inline-flex; align-items:center; gap:.7em;
  background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.12em;
  padding:.9em 1.4em;
  position:relative;
}
.mini-cta .focal{ position:relative; display:inline-block; }
.mini-cards{ display:flex; gap:1rem; margin-top:2rem; }
.mini-card{ flex:1; display:flex; flex-direction:column; gap:.5rem; font-size:.52rem; color:var(--mut); }
.mini-card__img{ height:74px; border:1px solid var(--line); }
.mini-card__img--a{ background:linear-gradient(135deg,#1b2b33,#0e1418 60%),var(--bg-3); }
.mini-card__img--b{ background:linear-gradient(135deg,#2b2a1b,#14120e 60%),var(--bg-3); }
.mini-card__img--c{ background:linear-gradient(135deg,#1e1b2b,#0f0e14 60%),var(--bg-3); }
.mini-badge{
  position:absolute; top:1.4rem; right:2rem;
  background:var(--lime); color:#000; padding:.5em .8em; font-size:.55rem; font-weight:500;
  transform-origin:top right;
}
.mini-cursor{
  position:absolute; width:16px; height:16px; right:26%; top:18%;
  opacity:0; transition:opacity .4s .8s, transform 1.4s cubic-bezier(.3,.9,.3,1) .8s;
}
.scene.is-live .mini-cursor{
  opacity:1;
  transform:translate(-120px,150px);
}

/* --- scene 2 : dashboard --- */
.dash{
  width:min(880px,88vw);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  padding:1.4rem 1.6rem 1.6rem;
}
.dash__head{
  display:flex; justify-content:space-between; color:var(--mut);
  border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1.2rem;
}
.dash__head i.dash__live{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--lime); margin-right:.7em;
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.dash__kpis{ display:flex; gap:1rem; margin-bottom:1.2rem; }
.kpi{
  flex:1; border:1px solid var(--line); padding:.9rem 1rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.kpi span{ color:var(--mut); font-size:.55rem; }
.kpi b{ font-size:clamp(1.2rem,2.4vw,1.9rem); font-weight:820; font-stretch:115%; letter-spacing:-.02em; }
.kpi--lime{ color:var(--lime); } .kpi--cyan{ color:var(--cyan); } .kpi--amber{ color:var(--amber); }

.dash__chart{ position:relative; border:1px solid var(--line); }
.dash__chart svg{ width:100%; height:auto; }
.chart__grid line{ stroke:var(--line); stroke-width:1; }
.chart__area{ fill:rgba(33,230,255,.07); }
.chart__line{
  fill:none; stroke:var(--cyan); stroke-width:2;
  stroke-dasharray:1400; stroke-dashoffset:1400;
}
.scene.is-live .chart__line{ animation:draw 1.6s var(--easeOut) .25s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.chart__line--ghost{ stroke:#2c2c31; stroke-dasharray:4 6; stroke-width:1.4; }
.chart__note{
  position:absolute; right:3%; top:30%;
  color:var(--mut); font-size:.55rem;
}
.dash__bars{
  display:flex; align-items:flex-end; gap:.5rem; height:64px;
  margin-top:1.2rem; position:relative; padding-right:14rem;
}
.dash__bars i{
  flex:1; background:var(--bg-3); border-top:2px solid var(--amber);
  height:calc(var(--v) * 100%);
  transform:scaleY(0); transform-origin:bottom;
}
.scene.is-live .dash__bars i{ transition:transform .7s var(--snap); transform:scaleY(1); }
.scene.is-live .dash__bars i:nth-child(1){ transition-delay:.30s } .scene.is-live .dash__bars i:nth-child(2){ transition-delay:.36s }
.scene.is-live .dash__bars i:nth-child(3){ transition-delay:.42s } .scene.is-live .dash__bars i:nth-child(4){ transition-delay:.48s }
.scene.is-live .dash__bars i:nth-child(5){ transition-delay:.54s } .scene.is-live .dash__bars i:nth-child(6){ transition-delay:.60s }
.scene.is-live .dash__bars i:nth-child(7){ transition-delay:.66s } .scene.is-live .dash__bars i:nth-child(8){ transition-delay:.72s }
.dash__bars span{ position:absolute; right:0; bottom:0; color:var(--mut); font-size:.52rem; width:13rem; text-align:right; }
.focal--signal{ left:calc(65.6% - 5px); top:calc(39% - 5px); }

/* --- scene 3 : editor --- */
.editor{
  width:min(880px,88vw);
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  font-size:clamp(.62rem,1.25vw,.8rem);
  letter-spacing:.02em; text-transform:none;
}
.editor__tabs{ display:flex; border-bottom:1px solid var(--line); }
.editor__tabs span{ padding:.8em 1.4em; color:var(--mut); border-right:1px solid var(--line); font-size:.85em; }
.editor__tabs .is-on{ color:var(--ink); background:var(--bg-3); box-shadow:inset 0 2px 0 var(--cyan); }
.editor__body{ display:flex; }
.editor__lines{ flex:1; padding:1.4em 1.6em; line-height:2.05; overflow:hidden; }
.editor__lines p{ white-space:nowrap; position:relative; }
.editor__lines u{ text-decoration:none; color:#3a3a40; margin-right:1.6em; }
.c-mut{ color:#55544d; } .c-cyan{ color:var(--cyan); } .c-lime{ color:var(--lime); } .c-amber{ color:var(--amber); }
.editor__map{ width:52px; border-left:1px solid var(--line); padding:1.2em .8em; display:flex; flex-direction:column; gap:.6em; }
.editor__map i{ height:3px; background:#2c2c31; }
.editor__map i:nth-child(2){ width:70%; } .editor__map i:nth-child(3){ width:40%; }
.editor__map i:nth-child(4){ width:85%; } .editor__map i:nth-child(5){ width:55%; }
.editor__term{ border-top:1px solid var(--line); padding:1em 1.6em; background:#08080a; line-height:1.9; }
.focal--source{
  display:inline-block; position:relative; top:.15em; margin-left:.35em;
  width:.55em; height:1.1em;
}

/* --- scene 4 : void --- */
.scene--void{ background:transparent; }
.focal--void{ left:calc(50% - 5px); top:calc(44% - 5px); }
.void__ring{
  position:absolute; left:50%; top:44%;
  width:170px; height:170px; transform:translate(-50%,-50%);
  border:1px solid rgba(255,42,31,.25); border-radius:50%;
  animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.5; }
  50%{ transform:translate(-50%,-50%) scale(1.15); opacity:1; }
}
.void__text{
  margin-top:26vh;
  text-align:center;
  font-size:clamp(1.1rem,2.2vw,1.7rem);
  font-weight:480; line-height:1.55; color:var(--mut);
}
.void__text b{ color:var(--ink); font-weight:680; }
.void__sub{ margin-top:1.6rem; color:#55544d; }

/* ---------- services ---------- */
.services{ padding:20vh clamp(1.2rem,4vw,4rem) 14vh; position:relative; }
.services__head{ max-width:1200px; margin:0 auto 7rem; }
.services__kicker{ color:var(--red); display:block; margin-bottom:1.6rem; }
.services h2{
  font-size:clamp(2.6rem,7vw,6.5rem);
  font-weight:870; font-stretch:120%;
  text-transform:uppercase; letter-spacing:-.02em; line-height:.95;
}
.services__sub{ max-width:44ch; color:var(--mut); margin-top:1.8rem; font-size:1.05rem; }

.svc-list{ max-width:1200px; margin:0 auto; border-top:1px solid var(--line); }
.svc{
  position:relative;
  display:grid;
  grid-template-columns:5rem 1fr minmax(0,38%);
  align-items:baseline; gap:1.5rem;
  padding:1.5rem .8rem;
  border-bottom:1px solid var(--line);
  cursor:crosshair;
  overflow:hidden;
}
.svc::before{
  content:""; position:absolute; inset:0;
  background:var(--red);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .38s var(--easeOut);
}
.svc:hover::before{ transform:scaleY(1); }
.svc > *{ position:relative; z-index:1; transition:color .25s; }
.svc__no{ color:var(--mut); }
.svc__name{
  font-size:clamp(1.25rem,2.6vw,2.1rem);
  font-weight:790; font-stretch:112%;
  text-transform:uppercase; letter-spacing:-.01em;
  transition:transform .38s var(--easeOut), color .25s;
}
.svc:hover .svc__name{ transform:translateX(1.2rem); }
.svc__desc{ color:var(--mut); font-size:.6rem; text-align:right; }
.svc:hover .svc__no,
.svc:hover .svc__name,
.svc:hover .svc__desc{ color:#000; }
.svc::after{
  content:attr(data-tags);
  position:absolute; right:.8rem; top:.5rem; z-index:1;
  font-family:var(--mono); font-size:.52rem; letter-spacing:.1em;
  color:rgba(0,0,0,.55);
  opacity:0; transition:opacity .3s .05s;
}
.svc:hover::after{ opacity:1; }

/* ---------- portfolio ---------- */
.portfolio{
  position:relative;
  padding:14vh clamp(1.2rem,4vw,4rem) 18vh;
  background:
    radial-gradient(ellipse 80% 60% at 18% 8%, rgba(33,230,255,.08), transparent 58%),
    radial-gradient(ellipse 70% 50% at 82% 24%, rgba(255,176,46,.07), transparent 58%),
    var(--bg);
}
.portfolio__head{
  max-width:1200px;
  margin:0 auto 4.8rem;
}
.portfolio__kicker{
  color:var(--red);
  display:block;
  margin-bottom:1.4rem;
}
.portfolio h2{
  font-size:clamp(2.6rem,7vw,6.5rem);
  font-weight:870;
  font-stretch:120%;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.95;
}
.portfolio__sub{
  max-width:48ch;
  color:var(--mut);
  margin-top:1.8rem;
  font-size:1.05rem;
}
.portfolio__grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.work{
  min-width:0;
  border:1px solid var(--line);
  background:rgba(12,12,14,.72);
  overflow:hidden;
  transition:transform .32s var(--easeOut), border-color .32s, background .32s;
}
.work:hover{
  transform:translateY(-6px);
  border-color:rgba(242,240,234,.28);
  background:rgba(19,19,22,.88);
}
.work--wide{ grid-column:span 2; }
.work__media{
  display:block;
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#111;
}
.work__media::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:40%;
  background:linear-gradient(to top, rgba(6,6,7,.72), transparent);
  pointer-events:none;
}
.work__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  filter:saturate(.96) contrast(1.02);
  transition:transform .7s var(--easeOut), filter .32s;
}
.work:hover .work__media img{
  transform:scale(1.035);
  filter:saturate(1.05) contrast(1.05);
}
.work__body{ padding:1.15rem 1.1rem 1.25rem; }
.work__type{
  display:block;
  color:var(--red);
  font-size:.55rem;
  margin-bottom:.75rem;
}
.work h3{
  font-size:clamp(1.08rem,1.6vw,1.45rem);
  font-weight:780;
  font-stretch:112%;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:1.05;
}
.work p{
  color:var(--mut);
  margin-top:.75rem;
  font-size:.92rem;
  line-height:1.45;
}
.portfolio__apps{
  max-width:1200px;
  margin:1rem auto 0;
  display:grid;
  grid-template-columns:minmax(220px,.42fr) 1fr;
  gap:1rem;
  align-items:stretch;
  border:1px solid var(--line);
  background:rgba(242,240,234,.035);
  padding:1rem;
}
.portfolio__apps-copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:180px;
  padding:1rem;
  border-right:1px solid var(--line);
}
.portfolio__apps-kicker{
  color:var(--amber);
  font-size:.55rem;
}
.portfolio__apps h3{
  max-width:11ch;
  font-size:clamp(1.4rem,3vw,2.7rem);
  font-weight:840;
  font-stretch:118%;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:1;
}
.app-icons{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:.65rem;
  align-content:center;
}
.app-icons img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border:1px solid rgba(242,240,234,.12);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  transition:transform .25s var(--easeOut), border-color .25s;
}
.app-icons img:hover{
  transform:translateY(-4px);
  border-color:rgba(242,240,234,.34);
}

/* ---------- marquee ---------- */
.marquee{
  background:var(--lime); color:#000;
  transform:rotate(-1.6deg) scale(1.02);
  padding:.9rem 0; overflow:hidden;
  margin:6vh 0;
}
.marquee__inner{
  display:flex; white-space:nowrap; width:max-content;
  animation:marq 26s linear infinite;
  font-family:var(--mono); font-weight:500; font-size:.78rem; letter-spacing:.18em;
}
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- method panels (oneshot style) ---------- */
.panels{ height:480vh; position:relative; }
.panels__stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
.panel{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding:0 clamp(1.4rem,7vw,9rem);
  will-change:clip-path;
}
.panel + .panel{ clip-path:inset(100% 0 0 0); visibility:hidden; }
.panel--inherit{ background:radial-gradient(ellipse 100% 90% at 15% 85%, #101318, var(--bg) 70%); }
.panel--extract{ background:radial-gradient(ellipse 100% 90% at 85% 15%, #131610, var(--bg) 70%); --acc:var(--lime); }
.panel--govern { background:radial-gradient(ellipse 100% 90% at 50% 100%, #171310, var(--bg) 70%); --acc:var(--amber); }
.panel--prove  { background:radial-gradient(ellipse 100% 90% at 80% 80%, #101617, var(--bg) 70%); --acc:var(--cyan); }
.panel--inherit{ --acc:var(--cyan); }

.panel__num{
  position:absolute; right:clamp(.5rem,4vw,4rem); top:50%; transform:translateY(-50%);
  font-size:clamp(10rem,30vw,26rem); font-weight:900; font-stretch:62%;
  line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(242,240,234,.08);
  user-select:none;
}
.panel__inner{ max-width:620px; position:relative; z-index:2; }
.panel__kicker{ color:var(--acc); display:block; margin-bottom:1.4rem; }
.panel h3{
  font-size:clamp(3.4rem,9vw,8rem);
  font-weight:890; font-stretch:122%;
  letter-spacing:-.02em; line-height:.92;
  margin-bottom:1.6rem;
}
.panel p{ color:var(--mut); font-size:clamp(.95rem,1.4vw,1.15rem); max-width:52ch; }
.panel__tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.panel__tags span{
  border:1px solid var(--line); padding:.6em 1em; color:var(--mut); font-size:.58rem;
}
.panel__ascii{
  position:absolute; right:clamp(1rem,6vw,7rem); bottom:2.2rem; z-index:2;
  color:var(--acc); font-size:.62rem; line-height:1.9; letter-spacing:.06em;
  text-align:left; text-transform:none; opacity:.85;
}

.fly{ opacity:0; transform:translateY(46px); filter:blur(10px); }
.panel.is-live .fly{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .55s ease, transform .8s var(--easeOut), filter .7s ease;
  transition-delay:calc(var(--d,0) * 90ms);
}
.panel.is-live .panel__ascii{ transition-delay:.45s; }

/* ---------- healthcare compliance ---------- */
.hc{
  position:relative;
  padding:18vh clamp(1.2rem,4vw,4rem);
  background:radial-gradient(ellipse 80% 70% at 78% 30%, #0b1013, var(--bg) 72%);
  overflow:hidden;
}
.hc__pattern{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 36v12M36 42h12' stroke='%23F2F0EA' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
}
.hc__inner{
  position:relative;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,6vw,6rem); align-items:center;
}
.hc__kicker{ color:var(--cyan); display:block; margin-bottom:1.6rem; }
.hc h2{
  font-size:clamp(2.2rem,4.8vw,4.4rem);
  font-weight:870; font-stretch:118%;
  text-transform:uppercase; letter-spacing:-.02em; line-height:.98;
  margin-bottom:1.6rem;
}
.hc__copy p{ color:var(--mut); max-width:52ch; font-size:1.05rem; }
.hc__tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.2rem; }
.hc__tags span{ border:1px solid var(--line); padding:.6em 1em; color:var(--mut); font-size:.58rem; }

.hc__card{
  border:1px solid var(--line); background:var(--bg-2);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  font-size:.62rem;
}
.hc__card-head{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1rem 1.2rem; border-bottom:1px solid var(--line); color:var(--ink);
}
.hc__badge{ background:var(--lime); color:#000; padding:.45em .8em; font-weight:500; }
.hc__card ul{ padding:.6rem 0; }
.hc__card li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.72rem 1.2rem; color:var(--mut);
  border-bottom:1px dashed rgba(242,240,234,.06);
}
.hc__card li:last-child{ border-bottom:0; }
.hc__card b{ font-weight:500; letter-spacing:.1em; }
.hc__card .ok{ color:var(--lime); }
.hc__card .fix{ color:var(--cyan); }
.hc__card .warn{ color:var(--amber); }
.hc__card-foot{
  border-top:1px solid var(--line); padding:.9rem 1.2rem;
  color:#55544d; font-size:.52rem;
}

/* ---------- finale ---------- */
.finale{
  min-height:130vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:4rem 1.4rem;
  background:radial-gradient(ellipse 60% 45% at 50% 55%, #0d0d10, var(--bg) 75%);
}
.finale__kicker{ color:var(--mut); margin-bottom:2.4rem; }
.finale__slogan{
  font-size:clamp(2.2rem,6vw,5.8rem);
  font-weight:880; font-stretch:120%;
  text-transform:uppercase; letter-spacing:-.02em; line-height:.98;
}
.finale__sub{ margin-top:2.8rem; color:#55544d; }

/* ---------- contact ---------- */
.contact{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,7rem);
  max-width:1280px; margin:0 auto;
  padding:16vh clamp(1.2rem,4vw,4rem) 18vh;
}
.contact__kicker{ color:var(--red); display:block; margin-bottom:1.6rem; }
.contact h2{
  font-size:clamp(2.6rem,5.6vw,5.2rem);
  font-weight:870; font-stretch:120%;
  text-transform:uppercase; letter-spacing:-.02em; line-height:.95;
  margin-bottom:1.8rem;
}
.contact__left p{ color:var(--mut); max-width:38ch; font-size:1.05rem; }
.contact__meta{
  display:flex; flex-direction:column; gap:.9rem;
  margin-top:3.4rem; color:var(--mut);
}
.contact__meta a{ color:var(--ink); border-bottom:1px solid var(--line); width:fit-content; padding-bottom:.3em; transition:border-color .3s; }
.contact__meta a:hover{ border-color:var(--red); }

.contact__form{ display:flex; flex-direction:column; gap:1.6rem; }
.field{ display:flex; flex-direction:column; gap:.7rem; }
.field label{
  color:var(--ink); font-size:.64rem; font-weight:500;
  display:flex; align-items:center; gap:.7em;
}
.field label::before{
  content:""; width:6px; height:6px; background:var(--cyan); flex:none;
}
.field input, .field textarea{
  background:var(--bg-2); border:1px solid rgba(242,240,234,.16);
  color:var(--ink); font-family:var(--disp); font-size:1.05rem; font-weight:460;
  padding:.85em 1em; outline:none; border-radius:0; resize:vertical;
  transition:border-color .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder{ color:#55534c; }
.field input:focus, .field textarea:focus{ border-color:var(--cyan); background:var(--bg-3); }
.field input.is-bad, .field textarea.is-bad{ border-color:var(--red); }
#hpot{ position:absolute; left:-5000px; opacity:0; height:0; }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  border:1px solid var(--line); padding:.7em 1.1em;
  color:var(--mut); font-size:.6rem; letter-spacing:.1em;
  transition:all .22s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.submit{
  display:flex; align-items:center; gap:1em;
  background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.14em;
  padding:1.25em 1.6em; margin-top:.6rem;
  transition:background .25s, transform .15s;
  position:relative;
}
.submit:hover{ background:#fff; }
.submit:active{ transform:scale(.985); }
.submit.is-loading{ pointer-events:none; opacity:.85; }
.submit.is-loading::after{
  content:""; width:13px; height:13px; flex:none;
  border:2px solid var(--bg); border-top-color:transparent;
  border-radius:50%;
  animation:submit-spin .7s linear infinite;
}
@keyframes submit-spin{ to{ transform:rotate(360deg); } }
.form__ok{ color:var(--lime); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding:5rem clamp(1.2rem,4vw,4rem) 2rem; overflow:hidden; }
.footer__word{
  font-size:clamp(4rem,14.5vw,15rem);
  font-weight:900; font-stretch:125%;
  letter-spacing:-.03em; line-height:.85;
  text-align:center; white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(242,240,234,.14);
  user-select:none;
  margin-bottom:4rem;
}
.footer__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  color:var(--mut); border-top:1px solid var(--line); padding-top:1.6rem;
}
.footer__bar a:hover{ color:var(--ink); }

/* ---------- reveal — blur in on every entry, from either direction ---------- */
.rv{ opacity:0; transform:translateY(34px); filter:blur(10px); }
.rv.is-in{
  opacity:1; transform:none; filter:none;
  transition:opacity .75s ease, transform .95s var(--easeOut), filter .8s ease;
  transition-delay:calc(var(--d,0) * 90ms);
}
/* huge decorative pieces: skip the blur, keep the fade (GPU cost) */
.footer__word.rv, .finale__slogan.rv{ filter:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav__toggle{ display:flex; margin-left:auto; }
  .nav__links{
    display:none;
    position:absolute; top:calc(100% + 1px); left:0; right:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    background:rgba(6,6,7,.94); backdrop-filter:blur(14px);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .nav.is-menu-open .nav__links{ display:grid; }
  .nav__links a{
    padding:1rem clamp(1.2rem,4vw,2rem);
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    color:var(--ink);
  }
  .nav__links a:nth-child(even){ border-right:0; }
  .nav__links a:nth-last-child(-n+2){ border-bottom:0; }
  .svc{ grid-template-columns:3rem 1fr; }
  .svc__desc{ display:none; }
  .hc__inner{ grid-template-columns:1fr; }
  .portfolio__grid{ grid-template-columns:1fr 1fr; }
  .work--wide{ grid-column:span 2; }
  .portfolio__apps{ grid-template-columns:1fr; }
  .portfolio__apps-copy{
    min-height:0;
    border-right:0;
    border-bottom:1px solid var(--line);
    gap:1.4rem;
  }
  .portfolio__apps h3{ max-width:18ch; }
  .app-icons{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .contact{ grid-template-columns:1fr; }
  .scene__tag{ top:4.6rem; }
  .scene__caption{ white-space:normal; text-align:center; width:88vw; }
  .panel__ascii{ display:none; }
  .dash__bars{ padding-right:0; }
  .dash__bars span{ display:none; }
  .hero__meta--tr{ display:none; }
  .hero__desk{ width:62vw; right:6vw; opacity:.55; }
}

@media (max-width:620px){
  .hero__scrollhint{ display:none; }
  .portfolio{ padding-top:11vh; }
  .portfolio__grid{ grid-template-columns:1fr; }
  .work--wide{ grid-column:auto; }
  .work__body{ padding:1rem; }
  .app-icons{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* keep the fixed logo + CTA from colliding on small phones */
  .nav{ gap:.65rem; padding:1rem clamp(.9rem,4vw,1.4rem); }
  .nav__logo{ font-size:.62rem; letter-spacing:.09em; }
  .nav__cta{ font-size:.6rem; letter-spacing:.08em; padding:.55em 1em; }
}

@media (max-width:360px){
  .nav__logo{ font-size:.58rem; letter-spacing:.06em; gap:.4em; }
  .nav__cta-full{ display:none; }
  .nav__cta-short{ display:inline; }
}

@media (max-width:820px){
  .hero::before{ background-image:url("../assets/hero/pixel-perfect-creation-hero-mobile.jpg"); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .noise{ animation:none; }
  #pixel,.pixel-ghost{ display:none; }
  .mani{ height:auto; } .mani__stage{ position:static; height:auto; padding:20vh clamp(1.4rem,8vw,12rem); }
  .mani__text .w{ opacity:1; filter:none; }
  .zoom{ height:auto; }
  .zoom__stage{ position:static; height:auto; overflow:visible; }
  .scene{ position:static; visibility:visible !important; min-height:100vh; opacity:1 !important; transform:none !important; }
  .settle,.fly,.rv{ opacity:1; transform:none; filter:none; }
  .panels{ height:auto; } .panels__stage{ position:static; height:auto; }
  .panel{ position:static; min-height:100vh; clip-path:none !important; visibility:visible !important; }
}

.sr-only{
  position:absolute; width:1px; height:1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* measurement mode — neutralize entrance transforms while caching geometry */
.measuring .settle{ transform:none !important; transition:none !important; }