/* Four connected stages with restrained surface depth. */
.how-we-work {
  padding: 112px 0 108px;
  background: radial-gradient(ellipse at 18% 16%, #17130f 0, transparent 48%), #080808;
  color: #f5f5f5;
}

.how-we-work > .container { text-align: left; }

.process-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 56px;
  margin-bottom: 58px;
}

.process-header > * { min-width: 0; }

.how-we-work .eyebrow {
  display: block;
  margin: 0 0 25px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #a8a8a8;
  font: 600 11px/1.5 Arial, sans-serif;
  letter-spacing: .16em;
}

.how-we-work .display-title {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.055em;
}

.process-header .section-lead {
  justify-self: end;
  margin: 0 0 4px;
  color: #d4d4d4;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.85;
  letter-spacing: -.025em;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 27px 24px 24px;
  border: 1px solid #2b2b2b;
  border-top-color: #4c4946;
  border-left-color: #353331;
  border-radius: 12px;
  background: radial-gradient(ellipse at 0 0, rgb(255 255 255 / 4%), transparent 62%), linear-gradient(145deg, #242220 0%, #171717 44%, #0f0f0f 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    inset 1px 0 0 rgb(255 255 255 / 3.5%),
    inset -1px -1px 0 rgb(0 0 0 / 34%),
    3px 4px 0 -1px #080808,
    3px 4px 0 rgb(255 255 255 / 5%),
    0 8px 13px rgb(0 0 0 / 32%),
    0 25px 42px rgb(0 0 0 / 26%);
}

.process-step-number {
  margin: 0 0 26px;
  color: #c8b8ab;
  font: 500 12px/1.5 Arial, sans-serif;
  letter-spacing: .01em;
}

.process-step h3 {
  margin: 0 0 17px;
  color: #f5f5f5;
  font-size: clamp(20px, 1.65vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.055em;
}

.process-step-copy {
  flex: 1;
  min-height: 90px;
  margin: 0;
  color: #d4d4d4;
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.85;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.process-step-visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 156px;
  max-width: 100%;
  height: 156px;
  margin: 22px 0 0;
}

.process-step-visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 16%)) drop-shadow(0 9px 8px rgb(0 0 0 / 28%));
}

@media (max-width: 1100px) {
  .process-header { gap: 36px; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .process-step h3 { font-size: 23px; }
  .process-step-copy { min-height: 58px; font-size: 15px; }
  .process-step-visual { width: 148px; height: 148px; }
}

@media (max-width: 900px) {
  .how-we-work { padding-block: 88px; }
  .process-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .process-header .section-lead { justify-self: start; font-size: 15px; }
}

@media (max-width: 760px) {
  .how-we-work { padding: 72px 0; }
  .how-we-work > .container { width: calc(100% - 40px); }
  .how-we-work .eyebrow { margin-bottom: 20px; font-size: 10px; }
  .how-we-work .display-title { font-size: clamp(31px, 8.1vw, 46px); line-height: 1.38; }
  .process-header { gap: 22px; margin-bottom: 34px; }
  .process-header .section-lead { font-size: 13px; line-height: 1.9; }
  .process-steps { gap: 20px; }
  .process-step {
    padding: 23px 20px 20px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), inset 1px 0 0 rgb(255 255 255 / 3%), inset -1px -1px 0 rgb(0 0 0 / 26%), 2px 3px 0 -1px #080808, 0 6px 9px rgb(0 0 0 / 26%), 0 17px 28px rgb(0 0 0 / 21%);
  }
  .process-step-number { margin-bottom: 20px; font-size: 11px; }
  .process-step h3 { margin-bottom: 13px; font-size: 21px; }
  .process-step-copy { font-size: 14px; line-height: 1.85; }
  .process-step-visual { width: 132px; height: 132px; margin-top: 20px; }
  .process-step-visual img { filter: drop-shadow(0 2px 1px rgb(0 0 0 / 12%)) drop-shadow(0 6px 6px rgb(0 0 0 / 22%)); }
}

@media (max-width: 640px) {
  .process-steps { grid-template-columns: 1fr; gap: 18px; }
  .process-step-copy { min-height: 0; max-width: 440px; }
}