
/* ==========================================================
   Homepage v2 additions
   Updated Maline Next preview + Maline Shop preview
   ========================================================== */

/* ---------- Maline Next ---------- */
.home-next-lab{
  position:relative;
  overflow:hidden;
  background:#101212;
  color:#f6f1e8;
  border-top:1px solid rgba(246,241,232,.12);
  border-bottom:1px solid rgba(246,241,232,.12);
}
.home-next-lab::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 83% 42%,rgba(49,95,92,.24),transparent 30%),
    linear-gradient(rgba(246,241,232,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(246,241,232,.028) 1px,transparent 1px);
  background-size:auto,4.6rem 4.6rem,4.6rem 4.6rem;
}
.home-next-lab-grid{
  position:relative;
  z-index:2;
  min-height:clamp(48rem,78vw,65rem);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(27rem,1.18fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:center;
  padding-top:clamp(5rem,9vw,9rem);
  padding-bottom:clamp(5rem,9vw,9rem);
}
.home-next-lab-copy{
  display:grid;
  gap:1.5rem;
  align-content:center;
}
.home-next-lab-copy .eyebrow{
  color:#c86443;
}
.home-next-lab-copy h2{
  max-width:9.5ch;
  font-size:clamp(4rem,7.4vw,7.8rem);
  line-height:.79;
  letter-spacing:-.065em;
}
.home-next-lab-copy>p:not(.eyebrow){
  max-width:38rem;
  color:rgba(246,241,232,.64);
  font-size:clamp(1rem,1.25vw,1.2rem);
  line-height:1.45;
}
.home-next-lab-copy .button{
  justify-self:start;
  margin-top:.35rem;
}
.home-next-lab-panel{
  position:relative;
  min-height:40rem;
  border:1px solid rgba(246,241,232,.18);
  background:rgba(16,18,18,.78);
  box-shadow:0 2rem 6rem rgba(0,0,0,.24);
  backdrop-filter:blur(9px);
}
.home-next-lab-panel-top{
  min-height:3.2rem;
  padding:0 .9rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  border-bottom:1px solid rgba(246,241,232,.14);
  color:rgba(246,241,232,.42);
  font:600 .57rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
}
.home-next-lab-panel-top>span:last-child{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.home-next-lab-panel-top i{
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  background:#c86443;
  box-shadow:0 0 0 .38rem rgba(200,100,67,.1);
}
.home-next-system-list{
  border-bottom:1px solid rgba(246,241,232,.14);
}
.home-next-system-list a{
  position:relative;
  min-height:4.65rem;
  padding:.75rem .85rem;
  display:grid;
  grid-template-columns:2rem minmax(0,1fr) minmax(9rem,.75fr) 1.4rem;
  gap:.8rem;
  align-items:center;
  border-bottom:1px solid rgba(246,241,232,.1);
  color:rgba(246,241,232,.72);
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  transition:color .25s;
}
.home-next-system-list a:last-child{
  border-bottom:0;
}
.home-next-system-list a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#f6f1e8;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .3s cubic-bezier(.2,.75,.2,1);
}
.home-next-system-list a:hover,
.home-next-system-list a:focus-visible{
  color:#11110f;
}
.home-next-system-list a:hover::before,
.home-next-system-list a:focus-visible::before{
  transform:scaleY(1);
}
.home-next-system-list span{
  font:600 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  opacity:.52;
}
.home-next-system-list strong{
  font-size:clamp(1.15rem,1.7vw,1.6rem);
  line-height:1;
  letter-spacing:-.035em;
}
.home-next-system-list small{
  font-size:.62rem;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.07em;
  opacity:.55;
}
.home-next-system-list b{
  justify-self:end;
  font-size:1rem;
  transition:transform .25s;
}
.home-next-system-list a:hover b,
.home-next-system-list a:focus-visible b{
  transform:translate(.15rem,-.15rem);
}
.home-next-core{
  position:relative;
  min-height:16.5rem;
  overflow:hidden;
}
.home-next-core::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(246,241,232,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(246,241,232,.025) 1px,transparent 1px);
  background-size:2.2rem 2.2rem;
}
.home-next-core strong{
  position:absolute;
  left:50%;
  top:50%;
  width:7rem;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  border:1px solid rgba(232,215,191,.6);
  background:rgba(49,95,92,.28);
  color:#e8d7bf;
  font:700 .65rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  z-index:3;
}
.home-next-core-node{
  position:absolute;
  z-index:3;
  padding:.42rem .52rem;
  border:1px solid rgba(246,241,232,.18);
  background:rgba(16,18,18,.86);
  color:rgba(246,241,232,.58);
  font:600 .5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.home-next-core-node--data{left:8%;top:16%}
.home-next-core-node--rules{right:8%;top:16%}
.home-next-core-node--infra{left:10%;bottom:15%}
.home-next-core-node--workflow{right:7%;bottom:15%}
.home-next-core i{
  position:absolute;
  left:50%;
  top:50%;
  width:29%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(49,95,92,.85),rgba(49,95,92,.08));
}
.home-next-core i:nth-of-type(1){transform:rotate(-152deg)}
.home-next-core i:nth-of-type(2){transform:rotate(-28deg)}
.home-next-core i:nth-of-type(3){transform:rotate(152deg)}
.home-next-core i:nth-of-type(4){transform:rotate(28deg)}
.home-next-lab-rail{
  position:relative;
  z-index:4;
  overflow:hidden;
  border-top:1px solid rgba(246,241,232,.14);
  background:#171919;
}
.home-next-lab-rail>div{
  width:max-content;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.72rem 0;
  animation:homeNextLabRail 30s linear infinite;
}
.home-next-lab-rail span{
  white-space:nowrap;
  font-size:clamp(1rem,2vw,1.55rem);
  font-weight:800;
  letter-spacing:-.025em;
}
.home-next-lab-rail b{
  color:#c86443;
}
@keyframes homeNextLabRail{
  to{transform:translateX(-50%)}
}

/* ---------- Maline Shop ---------- */
.home-shop-preview{
  position:relative;
  overflow:hidden;
  background:#e8d7bf;
  color:#11110f;
  border-bottom:1px solid rgba(17,17,15,.16);
}
.home-shop-preview::after{
  content:"SHOP";
  position:absolute;
  right:-.04em;
  bottom:-.12em;
  font-size:clamp(10rem,30vw,30rem);
  font-weight:900;
  line-height:.7;
  letter-spacing:-.09em;
  color:rgba(17,17,15,.035);
  pointer-events:none;
}
.home-shop-grid{
  position:relative;
  z-index:2;
  min-height:clamp(44rem,70vw,60rem);
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(28rem,1.22fr);
  gap:clamp(3rem,8vw,8rem);
  align-items:center;
  padding-top:clamp(5rem,9vw,9rem);
  padding-bottom:clamp(5rem,9vw,9rem);
}
.home-shop-copy{
  display:grid;
  gap:1.4rem;
  align-content:center;
}
.home-shop-copy h2{
  max-width:8.5ch;
  font-size:clamp(4rem,7vw,7.3rem);
  line-height:.81;
  letter-spacing:-.06em;
}
.home-shop-copy .body-xl{
  max-width:34rem;
}
.home-shop-charity{
  max-width:31rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(17,17,15,.18);
  color:rgba(17,17,15,.62);
  font-size:.88rem;
  line-height:1.45;
}
.home-shop-charity strong{
  color:#11110f;
}
.home-shop-copy .button{
  justify-self:start;
  margin-top:.35rem;
}
.home-shop-stage{
  position:relative;
  min-height:clamp(34rem,49vw,44rem);
  perspective:1200px;
}
.home-shop-card{
  position:absolute;
  width:min(36%,14.5rem);
  color:#11110f;
  text-decoration:none;
  background:#f6f1e8;
  border:1px solid rgba(17,17,15,.2);
  box-shadow:0 1.7rem 4rem rgba(17,17,15,.12);
  transition:transform .4s cubic-bezier(.2,.75,.2,1),box-shadow .4s;
}
.home-shop-card--tee{
  left:3%;
  top:13%;
  transform:rotate(-7deg) translateZ(30px);
  z-index:2;
}
.home-shop-card--tote{
  left:34%;
  top:4%;
  transform:rotate(3deg) translateZ(70px);
  z-index:4;
}
.home-shop-card--stickers{
  right:2%;
  top:18%;
  transform:rotate(8deg) translateZ(10px);
  z-index:1;
}
.home-shop-card:hover,
.home-shop-card:focus-visible{
  z-index:8;
  box-shadow:0 2.2rem 5rem rgba(17,17,15,.2);
}
.home-shop-card--tee:hover,
.home-shop-card--tee:focus-visible{
  transform:rotate(-2deg) translateY(-1rem) scale(1.035);
}
.home-shop-card--tote:hover,
.home-shop-card--tote:focus-visible{
  transform:rotate(0) translateY(-1rem) scale(1.035);
}
.home-shop-card--stickers:hover,
.home-shop-card--stickers:focus-visible{
  transform:rotate(2deg) translateY(-1rem) scale(1.035);
}
.home-shop-card-media{
  position:relative;
  aspect-ratio:4/5;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    var(--home-shop-image) center/cover no-repeat,
    #d6cdb5;
}
.home-shop-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none;
}
.home-shop-card-media span{
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:.8;
  font-weight:900;
  letter-spacing:-.07em;
  color:rgba(17,17,15,.13);
}
.home-shop-card-meta{
  min-height:4.3rem;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:1rem;
  padding:.75rem .8rem;
}
.home-shop-card-meta span{
  font-size:.57rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(17,17,15,.5);
}
.home-shop-card-meta strong{
  grid-column:1;
  font-size:1.1rem;
  line-height:1;
  letter-spacing:-.025em;
}
.home-shop-card-meta b{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  font-size:1rem;
}
.home-shop-stamp{
  position:absolute;
  right:8%;
  bottom:5%;
  z-index:7;
  width:9.5rem;
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid #11110f;
  background:#c86443;
  transform:rotate(-9deg);
  box-shadow:0 1.2rem 2.6rem rgba(17,17,15,.14);
}
.home-shop-stamp span,
.home-shop-stamp small{
  font-size:.5rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.home-shop-stamp strong{
  margin:.25rem 0;
  font-size:1.65rem;
  line-height:.8;
  letter-spacing:-.05em;
}

@media(max-width:1000px){
  .home-next-lab-grid,
  .home-shop-grid{
    grid-template-columns:1fr;
    min-height:0;
  }
  .home-next-lab-copy,
  .home-shop-copy{
    max-width:44rem;
  }
  .home-next-lab-panel{
    min-height:0;
  }
  .home-shop-stage{
    width:min(100%,46rem);
    justify-self:center;
  }
}
@media(max-width:700px){
  .home-next-lab-grid,
  .home-shop-grid{
    padding-top:4.5rem;
    padding-bottom:4.5rem;
    gap:3rem;
  }
  .home-next-lab-copy h2,
  .home-shop-copy h2{
    font-size:clamp(3.4rem,15vw,5.6rem);
  }
  .home-next-system-list a{
    grid-template-columns:2rem 1fr 1.3rem;
    min-height:4.4rem;
  }
  .home-next-system-list small{
    display:none;
  }
  .home-next-core{
    min-height:14rem;
  }
  .home-next-core strong{
    width:6.3rem;
  }
  .home-shop-stage{
    min-height:31rem;
  }
  .home-shop-card{
    width:41%;
  }
  .home-shop-card--tee{left:0}
  .home-shop-card--tote{left:30%}
  .home-shop-card--stickers{right:0}
  .home-shop-stamp{
    width:7.5rem;
    right:4%;
    bottom:0;
  }
}
@media(max-width:480px){
  .home-next-lab-panel-top{
    align-items:flex-start;
    padding-block:.75rem;
  }
  .home-next-lab-panel-top>span:last-child{
    display:none;
  }
  .home-next-system-list strong{
    font-size:1.12rem;
  }
  .home-next-core-node{
    font-size:.43rem;
  }
  .home-shop-stage{
    min-height:27rem;
    margin-inline:-.25rem;
  }
  .home-shop-card{
    width:43%;
  }
  .home-shop-card-meta{
    min-height:3.7rem;
    padding:.6rem;
  }
  .home-shop-card-meta strong{
    font-size:.9rem;
  }
  .home-shop-card-meta span{
    font-size:.5rem;
  }
}
@media(prefers-reduced-motion:reduce){
  .home-next-lab-rail>div{
    animation:none!important;
  }
  .home-next-system-list a,
  .home-shop-card{
    transition:none!important;
  }
}
/* ==========================================================
   Homepage stability pass / 2026-08-09
   ========================================================== */

/* The global stylesheet previously contained a corrupted Growth Outcomes rule.
   Keep this defensive override here as well so the homepage remains stable
   even if an older global CSS snapshot is served briefly by a CDN. */
.home-page .growth-outcomes{
  position:relative!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:normal!important;
  letter-spacing:normal!important;
  color:#11110f!important;
  pointer-events:auto!important;
  z-index:1;
}
.home-page .growth-outcomes::after{
  content:"M";
  position:absolute;
  right:-.04em;
  bottom:-.15em;
  font-size:clamp(13rem,34vw,34rem);
  font-weight:900;
  line-height:.72;
  letter-spacing:-.09em;
  color:rgba(17,17,15,.025);
  pointer-events:none;
}

/* Reduce the reveal travel on the homepage. The old 2rem motion made sections
   look as though they jumped position while loading on slower/new devices. */
.js .home-page .js-reveal{
  transform:translateY(.7rem);
}
.js .home-page .js-reveal.is-visible{
  transform:none;
}

/* Make each major homepage block establish its own stacking context.
   This prevents decorative/absolute elements from leaking visually into the
   following section. */
.home-page main > section{
  isolation:isolate;
}
.home-page .home-next-lab,
.home-page .home-shop-preview,
.home-page .client-logo-showcase,
.home-page .growth-outcomes,
.home-page .serving-markets{
  position:relative;
}

/* Product images: normal replaced elements are more reliable than a URL stored
   inside a CSS custom property. Fallback text remains beneath the image. */
.home-shop-card-media{
  background:#d6cdb5;
}
.home-shop-card-media .home-shop-card-fallback{
  position:relative;
  z-index:1;
}
.home-shop-card-media img{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Keep the shop collage inside its reserved stage at all common widths. */
.home-shop-stage{
  contain:layout paint;
}
@media(max-width:700px){
  .home-shop-stage{
    overflow:visible;
    contain:layout;
  }
  .home-shop-card{
    max-width:14rem;
  }
}

/* Avoid accidental clipping of focus/hover movement in the system panel. */
.home-next-lab-panel,
.home-next-system-list{
  overflow:visible;
}

.home-next-system-list a{
  overflow:hidden;
}


/* Homepage hero introduction — deliberately quieter than the moving wordmark. */
.home-page .hero-intro p{
  font-size:clamp(.68rem,.78vw,.80rem);
  line-height:1.44;
}
