/* WARPIX Studio 2026 palette and shared entrance experience */
:root{
  --warpix-ink:#101b17;
  --warpix-forest:#0f3328;
  --warpix-deep:#164637;
  --warpix-lime:#c8ff32;
  --warpix-ivory:#f3efe5;
  --warpix-paper:#faf8f2;
  --warpix-coral:#ff6542;
  --warpix-copy:#bac7c0;

  /* Pages with their own embedded design tokens */
  --black:#101b17;
  --black2:#0f3328;
  --white:#f3efe5;
  --accent:#c8ff32;
  --accent2:#ff6542;
  --green:#c8ff32;
  --border:rgba(243,239,229,.13);
  --muted:rgba(243,239,229,.62);
  --muted2:rgba(243,239,229,.24);
}

html{background:var(--warpix-ink)}
body{background-color:var(--warpix-ink)}
::selection{background:var(--warpix-lime);color:var(--warpix-ink)}

/* Main portfolio refinements */
.site-head{background:rgba(16,27,23,.88)}
.brand span{color:var(--warpix-lime)}
.nav-links>a:not(.nav-cta):after{background:var(--warpix-coral)}
.nav-cta:hover{border-color:var(--warpix-lime);background:var(--warpix-lime);color:var(--warpix-ink)}
.hero h1 em{color:var(--warpix-lime)}
.btn.primary{background:var(--warpix-lime);border-color:var(--warpix-lime);color:var(--warpix-ink)}
.btn.primary:hover{background:var(--warpix-coral);border-color:var(--warpix-coral)}
.signal-band{background:var(--warpix-forest)}
.signal-track i{color:var(--warpix-coral)}
.capability-wrap{background:linear-gradient(135deg,var(--warpix-forest),var(--warpix-deep) 58%,var(--warpix-forest))}
.project-media img,.visual-grid img{filter:saturate(.94) contrast(1.02)}
.project:hover .project-media img,.visual-grid figure:hover img{filter:saturate(1.08) contrast(1.02)}
.project-flagship .project-no,.service-no{color:var(--warpix-coral)}
.flagship-work .project-flagship{border-color:rgba(255,101,66,.55)}
.scroll-progress{background:linear-gradient(90deg,var(--warpix-coral),var(--warpix-lime))}

/* Warm editorial breaks keep the portfolio from feeling uniformly dark. */
.pricing-section,
#visuals{
  --ink:var(--warpix-ink);
  --muted:#5e6863;
  --copper:#c8422a;
  --line:rgba(16,27,23,.16);
  --line2:rgba(16,27,23,.08);
  background:var(--warpix-paper);
  color:var(--warpix-ink);
}
.pricing-section .lead,
#visuals .lead{color:#5e6863}
.pricing-section .eyebrow,
#visuals .eyebrow{color:var(--warpix-coral)}
.pricing-section .eyebrow{color:var(--copper)}
.pricing-section .section-head h2 em{color:var(--warpix-coral)}
.pricing-section .price-card{background:rgba(255,255,255,.42)}
.pricing-section .price-card:hover{background:#fff}
.pricing-section .price-card.featured{background:var(--warpix-lime)}
.pricing-section .price-card.featured:before{background:var(--warpix-coral)}
.pricing-section .price-card.featured .price-top span,
.pricing-section .price-card.featured .price-top small,
.pricing-section .price-card.featured .price-main small,
.pricing-section .price-card.featured>p,
.pricing-section .price-card.featured ul{color:rgba(16,27,23,.72)}
.pricing-section .price-card.featured .price-link{background:transparent;color:var(--warpix-ink);border-color:rgba(16,27,23,.25)}
.pricing-section .price-card.featured summary{color:var(--warpix-ink)}
.pricing-section .price-card summary:focus-visible,
.pricing-section .price-link:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.pricing-section .price-tags span{background:rgba(16,27,23,.055)}
.pricing-section .pricing-more a{color:var(--warpix-ink)}
#visuals .visual-grid figure{border-color:rgba(16,27,23,.13);background:var(--warpix-ivory)}

/* Standalone Work and Visuals pages */
body > nav{background:rgba(16,27,23,.94)}
.logo span{color:var(--warpix-lime)}
.nav-cta,.ticker{background:var(--warpix-lime);color:var(--warpix-ink)}
.ndot{background:var(--warpix-coral)}
#progress{background:linear-gradient(90deg,var(--warpix-coral),var(--warpix-lime))}
#cdot{background:var(--warpix-lime)}
#cring{border-color:rgba(200,255,50,.58)}
.hero-glow.g1{background:radial-gradient(circle,rgba(200,255,50,.105),transparent 62%)}
.hero-glow.g2{background:radial-gradient(circle,rgba(255,101,66,.075),transparent 60%)}
.mobile-menu{background:rgba(16,27,23,.985)}
body > #loader{display:none!important}

/* Compact service landing pages */
body > header.wrap.nav{border-color:rgba(243,239,229,.16)}
body > header.wrap.nav .brand span{color:var(--warpix-lime)}
body > main.wrap .eyebrow{color:var(--warpix-coral)}
body > main.wrap p{color:var(--warpix-copy)}
body > main.wrap .grid{background:rgba(243,239,229,.16)}
body > main.wrap .box{background:var(--warpix-forest)}
body > main.wrap .cta{background:var(--warpix-lime);color:var(--warpix-ink)}
body > main.wrap .links a{color:var(--warpix-lime)}

/* Shared WARPIX entrance */
body.warpix-intro-active{overflow:hidden}
#warpix-intro{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  color:var(--warpix-ivory);
  isolation:isolate;
  overflow:hidden;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.wp-intro__curtain{
  position:absolute;
  left:0;
  right:0;
  height:50.5%;
  z-index:-3;
  background:var(--warpix-ink);
  transition:transform .82s cubic-bezier(.76,0,.24,1);
}
.wp-intro__curtain--top{top:0;border-bottom:1px solid rgba(243,239,229,.1)}
.wp-intro__curtain--bottom{bottom:0}
#warpix-intro:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:linear-gradient(rgba(243,239,229,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(243,239,229,.055) 1px,transparent 1px);
  background-size:clamp(42px,5vw,74px) clamp(42px,5vw,74px);
  mask-image:radial-gradient(circle at center,#000,transparent 76%);
}
#warpix-intro:after{
  content:"";
  position:absolute;
  width:min(82vw,880px);
  aspect-ratio:1;
  border:1px solid rgba(200,255,50,.16);
  border-radius:50%;
  z-index:-1;
  transform:scale(.72);
  opacity:0;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .7s ease;
}
.wp-intro__top,
.wp-intro__bottom{
  position:absolute;
  left:clamp(18px,4vw,64px);
  right:clamp(18px,4vw,64px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:clamp(7px,.72vw,10px);
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(243,239,229,.58);
  opacity:0;
  transition:opacity .5s ease .2s;
}
.wp-intro__top{top:clamp(18px,4vw,42px)}
.wp-intro__bottom{bottom:clamp(20px,4vw,42px)}
.wp-intro__bottom span:last-child{color:var(--warpix-coral)}
.wp-intro__core{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.wp-intro__pixels{display:grid;grid-template-columns:repeat(5,12px);grid-template-rows:repeat(4,12px);gap:5px;height:63px}
.wp-intro__pixels i{display:block;background:var(--warpix-lime);opacity:0;transform:translateY(14px) scale(.25) rotate(18deg)}
.wp-intro__pixels i:nth-child(3n){background:var(--warpix-coral)}
.wp-intro__pixels .p1{grid-area:1/1}.wp-intro__pixels .p2{grid-area:2/1}.wp-intro__pixels .p3{grid-area:3/1}
.wp-intro__pixels .p4{grid-area:4/2}.wp-intro__pixels .p5{grid-area:3/3}.wp-intro__pixels .p6{grid-area:4/3}
.wp-intro__pixels .p7{grid-area:4/4}.wp-intro__pixels .p8{grid-area:1/5}.wp-intro__pixels .p9{grid-area:2/5}.wp-intro__pixels .p10{grid-area:3/5}
.wp-intro__wordmark{overflow:hidden;padding:.08em .12em}
.wp-intro__wordmark b{
  display:block;
  font-size:clamp(54px,10vw,142px);
  line-height:.76;
  letter-spacing:-.075em;
  transform:translateY(120%);
  transition:transform .9s cubic-bezier(.22,1,.36,1) .44s;
}
.wp-intro__wordmark b span{color:var(--warpix-lime)}
.wp-intro__studio{font-size:clamp(9px,1vw,13px);font-weight:800;letter-spacing:.58em;margin-right:-.58em;color:rgba(243,239,229,.7);opacity:0;transform:translateY(8px);transition:opacity .55s ease .92s,transform .55s ease .92s}
.wp-intro__progress{width:min(260px,52vw);height:2px;background:rgba(243,239,229,.13);overflow:hidden;margin-top:8px}
.wp-intro__progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--warpix-coral),var(--warpix-lime));transform:translateX(-102%);transition:transform 1.55s cubic-bezier(.65,0,.35,1) .35s}
.wp-intro__skip{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(48px,7vw,74px);border:0;background:none;color:rgba(243,239,229,.55);font:700 8px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;padding:9px;cursor:pointer}
.wp-intro__skip:hover,.wp-intro__skip:focus-visible{color:var(--warpix-lime);outline:1px solid rgba(200,255,50,.45);outline-offset:2px}
#warpix-intro.wp-intro--run:after{transform:scale(1);opacity:1}
#warpix-intro.wp-intro--run .wp-intro__top,
#warpix-intro.wp-intro--run .wp-intro__bottom{opacity:1}
#warpix-intro.wp-intro--run .wp-intro__pixels i{animation:wp-pixel-in .5s cubic-bezier(.22,1,.36,1) forwards}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(1){animation-delay:.08s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(2){animation-delay:.14s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(3){animation-delay:.2s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(4){animation-delay:.26s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(5){animation-delay:.32s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(6){animation-delay:.38s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(7){animation-delay:.44s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(8){animation-delay:.5s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(9){animation-delay:.56s}
#warpix-intro.wp-intro--run .wp-intro__pixels i:nth-child(10){animation-delay:.62s}
#warpix-intro.wp-intro--run .wp-intro__wordmark b{transform:translateY(0)}
#warpix-intro.wp-intro--run .wp-intro__studio{opacity:1;transform:none}
#warpix-intro.wp-intro--run .wp-intro__progress i{transform:translateX(0)}
#warpix-intro.wp-intro--exit .wp-intro__core,
#warpix-intro.wp-intro--exit .wp-intro__top,
#warpix-intro.wp-intro--exit .wp-intro__bottom,
#warpix-intro.wp-intro--exit .wp-intro__skip{opacity:0;transform:scale(.96);transition:opacity .22s ease,transform .35s ease}
#warpix-intro.wp-intro--exit .wp-intro__curtain--top{transform:translateY(-101%)}
#warpix-intro.wp-intro--exit .wp-intro__curtain--bottom{transform:translateY(101%)}
@keyframes wp-pixel-in{to{opacity:1;transform:none}}

@media(max-width:640px){
  .wp-intro__top span:last-child{display:none}
  .wp-intro__bottom{align-items:flex-end;gap:24px}
  .wp-intro__bottom span{max-width:46%;line-height:1.5}
  .wp-intro__skip{bottom:70px}
  .pricing-section .price-card.featured{margin-inline:-12px;padding-inline:12px}
}

@media(prefers-reduced-motion:reduce){
  #warpix-intro{transition:opacity .18s linear}
  #warpix-intro:after,.wp-intro__curtain,.wp-intro__wordmark b,.wp-intro__studio,.wp-intro__progress i{transition-duration:.01ms!important}
  #warpix-intro.wp-intro--run .wp-intro__pixels i{animation-duration:.01ms!important;animation-delay:0s!important}
}