:root{
    --green:#ADD786;
    --dark:#290611;
    --white:#ffffff;
    --text-muted:#9c8f92;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:'Segoe UI',Arial,sans-serif;background:#eceae4;}
  .hw_container{max-width:auto;margin:0 auto;padding:0 20px;width:92.5%}

/* ===== HOW WE WORK ===== */
#how-we-work{
  position:relative;
  background:var(--dark);
  padding:0 0 90px;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(173,215,134,.06) 5px, transparent 1px),
    linear-gradient(90deg, rgba(173,215,134,.06) 5px, transparent 1px);
  background-size:34px 34px;
}

.hw-heading{ text-align:center; position:relative; z-index:3; margin-bottom:60px;}
.hw-heading .eyebrow{
  font-family:'Space Mono',monospace;
  font-size:.85rem;
  letter-spacing:.12em;
  color:var(--green);
  display:block;
  margin-bottom:10px;
}
.hw-heading .eyebrow::before{ content:"// "; opacity:.7; }
.hw-heading h2{
  font-family:'Playfair Display',serif;
  font-weight:900;
  font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--white);
  margin:0 0 8px;
}
.hw-heading p{
  color:var(--white);
  margin:0;
  font-size:.9rem;
  font-family:'Space Mono',monospace;
}
#how-we-work::before{
  content:"";
  position:absolute;
  inset:0;
  /* background:linear-gradient(30deg, rgba(41,6,17,.25), rgba(173,215,134,.10), */
  /* ); */
  /* mix-blend-mode:multiply; */
  pointer-events:none;
  z-index:3;
}
.schema-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  z-index:2;
  gap:1%;
}

.trace-svg{
  position:absolute;
  top:90px;
  left:0;
  width:100%;
  height:6px;
  z-index:1;
  overflow:visible;
}
.trace-svg path{
  fill:none;
  stroke:var(--green);
  stroke-width:2;
  stroke-dasharray:6 6;
  opacity:.6;
}
.trace-svg circle{
  fill:var(--green);
}

.module{
  position:relative;
  width:18.5%;
  z-index:2;
}

.module-label{
  font-family:'Space Mono',monospace;
  font-size:1rem;
  color:var(--green);
  letter-spacing:.05em;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
}
.module-label .idx{ opacity:.9; }
.module-label .coord{ opacity:.45; }

.module-frame{
  position:relative;
  aspect-ratio:1/1;
  padding:10px;
}
.module-frame::before,
.module-frame::after,
.module-corner-tl,
.module-corner-br{
  content:"";
  position:absolute;
  width:18px; height:18px;
  border-color:var(--green);
  border-style:solid;
  z-index:3;
}
.module-frame::before{ top:0; left:0; border-width:2px 0 0 2px; }
.module-frame::after{ bottom:0; right:0; border-width:0 2px 2px 0; }
.module-corner-tl{ top:0; right:0; border-width:2px 2px 0 0; }
.module-corner-br{ bottom:0; left:0; border-width:0 0 2px 2px; }

.module-photo{
  width:100%; height:100%;
  overflow:hidden;
  position:relative;
}
.module-photo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.3) contrast(1.05) brightness(.9);
  mix-blend-mode:luminosity;
  opacity:.9;
}
.module-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(173,215,134,.28), rgba(41,6,17,.35));
  mix-blend-mode:multiply;
}

.module-title{
  margin:14px 0 0;
  font-family:'Space Mono',monospace;
  font-size:1rem;
  font-weight:700;
  color:var(--white);
  line-height:1.4;
  text-align:left;
}
.module-title small{
  display:block;
  font-weight:400;
  color:var(--white);
  font-size:.7rem;
  margin-top:2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .schema-row{ flex-wrap:wrap; row-gap:50px; }
  .module{ width:31%; }
  .trace-svg{ display:none; }
}

@media (max-width: 640px){
  .schema-row{ flex-direction:column; align-items:stretch; }
  .module{ width:100%; max-width:320px; margin:0 auto 40px; }
  .module:last-child{ margin-bottom:0; }
  .module-frame{ aspect-ratio:1/1; }
}