/* assets/css/workwithus.css
   Work with us + How to order
   Clean tray, three paths, then a clear step flow with one CTA row
*/

:root{
  --wIndigo: #1c2a3a;
  --wIvory: #f7f5f0;
  --wGold: #c8a45d;
  --wClay: #b56a4a;

  --wMuted: rgba(22,26,29,0.70);

  --wLine: rgba(28,42,58,0.12);
  --wLine2: rgba(28,42,58,0.18);

  --wShadow: 0 12px 28px rgba(16,22,28,0.10);
  --wShadow2: 0 18px 46px rgba(16,22,28,0.14);

  --wRadiusCard: 18px;
  --wRadiusTray: 10px;
}

.workSection{
  padding: 86px 0 78px 0;
  position: relative;
  overflow: hidden;
}

.workSection::before{
  content:"";
  position:absolute;
  inset:-160px;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(28,42,58,0.10), transparent 62%),
    radial-gradient(820px 520px at 86% 18%, rgba(200,164,93,0.10), transparent 60%),
    radial-gradient(820px 520px at 55% 92%, rgba(181,106,74,0.08), transparent 60%);
  pointer-events:none;
  z-index:0;
}

.workWrap{
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.workHeader{
  text-align: center;
  margin-bottom: 34px;
}

.workKicker{
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(28,42,58,0.72);
  margin-bottom: 10px;
}

.workTitle{
  margin: 0 0 10px 0;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 720;
  letter-spacing: -0.4px;
  color: var(--wIndigo);
  line-height: 1.12;
}

.workLead{
  margin: 0 auto;
  max-width: 74ch;
  font-size: 15.2px;
  line-height: 1.7;
  color: var(--wMuted);
}

/* Tray */
.workTray{
  border-radius: var(--wRadiusTray);
  background: rgba(247,245,240,0.82);
  border: 1px solid rgba(28,42,58,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 18px 50px rgba(16,22,28,0.08);
  padding: 22px;
}

/* Top grid */
.workGrid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.workCard{
  grid-column: span 4;
  border-radius: var(--wRadiusCard);
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--wLine);
  box-shadow: var(--wShadow);
  padding: 18px 18px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.workCard:hover{
  transform: translateY(-2px);
  border-color: var(--wLine2);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--wShadow2);
}

.workCardTop{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.workIcon{
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 14px 18px rgba(16,22,28,0.10));
  color: rgba(28,42,58,0.92);
}

.workCard.toneGold .workIcon{ color: rgba(200,164,93,0.96); }
.workCard.toneIndigo .workIcon{ color: rgba(28,42,58,0.92); }
.workCard.toneClay .workIcon{ color: rgba(181,106,74,0.92); }

.workCardTitle{
  font-size: 15.6px;
  font-weight: 720;
  color: rgba(28,42,58,0.92);
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.workCardLine{
  margin-top: 6px;
  font-size: 13.7px;
  line-height: 1.55;
  color: rgba(28,42,58,0.72);
}

.workPoints{
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
  color: rgba(28,42,58,0.72);
  font-size: 13.6px;
  line-height: 1.6;
}

.workPoints li{ margin: 0; }

/* Steps area */
.workStepsWrap{
  margin-top: 18px;
  border-radius: var(--wRadiusCard);
  border: 1px solid rgba(28,42,58,0.12);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 12px 26px rgba(16,22,28,0.08);
  padding: 18px;
}

.workStepsHeader{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.workStepsTitle{
  margin: 0;
  font-size: 16px;
  font-weight: 740;
  color: rgba(28,42,58,0.92);
}

.workStepsCtas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.workBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(28,42,58,0.14);
  background: rgba(255,255,255,0.84);
  color: rgba(28,42,58,0.88);
  font-weight: 650;
  font-size: 13.8px;
  box-shadow: 0 10px 22px rgba(16,22,28,0.08);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease;
  text-decoration: none;
  white-space: nowrap;
}

.workBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.94);
  border-color: rgba(28,42,58,0.20);
  box-shadow: 0 16px 36px rgba(16,22,28,0.12);
}

.workBtnPrimary{
  border-color: rgba(200,164,93,0.26);
  background: rgba(200,164,93,0.14);
  color: rgba(28,42,58,0.92);
}

.workBtnSoft{
  background: rgba(28,42,58,0.06);
  border-color: rgba(28,42,58,0.12);
}

.workArrow{ transform: translateY(1px); }

/* Steps grid */
.workStepsGrid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.workStep{
  grid-column: span 3;
  border-radius: 16px;
  border: 1px solid rgba(28,42,58,0.12);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 22px rgba(16,22,28,0.06);
  padding: 14px;
}

.workStepTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.workStepNum{
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(28,42,58,0.72);
}

.workStepIcon{
  font-size: 22px;
  color: rgba(28,42,58,0.90);
}

.workStepTitle{
  font-size: 14.2px;
  font-weight: 720;
  color: rgba(28,42,58,0.92);
  margin-bottom: 6px;
}

.workStepText{
  font-size: 13.4px;
  line-height: 1.62;
  color: rgba(28,42,58,0.72);
}

/* Note */
.workNote{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(28,42,58,0.12);
  background: rgba(247,245,240,0.70);
  padding: 14px;
  display: grid;
  gap: 6px;
}

.workNoteTitle{
  font-size: 13.8px;
  font-weight: 720;
  color: rgba(28,42,58,0.90);
}

.workNoteText{
  font-size: 13.4px;
  line-height: 1.65;
  color: rgba(28,42,58,0.72);
}

/* Responsive */
@media (max-width: 980px){
  .workSection{ padding: 68px 0 60px 0; }
  .workWrap{ padding: 0 16px; }
  .workTray{ padding: 18px; }
  .workGrid{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .workCard{ grid-column: span 8; }

  .workStepsHeader{
    flex-direction: column;
    align-items: flex-start;
  }

  .workStepsCtas{
    justify-content: flex-start;
  }

  .workStepsGrid{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .workStep{ grid-column: span 4; }
}

@media (max-width: 520px){
  .workSection{ padding: 58px 0 52px 0; }
  .workTray{ padding: 16px; }

  .workStepsGrid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .workStep{ grid-column: span 4; }

  .workBtn{ width: 100%; }
}