.process { padding: 72px 5% 100px; color: #0c0d0f; background: #f4f2ee; color-scheme: light; scroll-margin-top: -48px; }
.process-inner { max-width: 1720px; margin-inline: auto; }
.process-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.process-heading h2 { margin: 0; font-size: clamp(52px, 5.2vw, 100px); line-height: 1.04; letter-spacing: -.065em; font-weight: 600; }
.process-heading > p { flex: 0 0 300px; margin: 0; color: #767a80; font-size: 16px; line-height: 1.5; }
.process-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.process-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: clamp(340px, 28vw, 500px); padding: 28px; border-radius: 20px; }
.process-discovery, .process-launch { grid-column: span 7; background: #153442; color: #fff; }
.process-design, .process-build { grid-column: span 5; }
.process-design { background: #111; color: #fff; }
.process-build { background: #fff; }
.process-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.process-discovery::before, .process-launch::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #0003 0%, transparent 35%, #000a 100%); }
.process-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; opacity: .78; }
.process-copy { margin-top: 120px; }
.process-copy h3 { margin: 0 0 14px; font-size: clamp(36px, 3.4vw, 64px); line-height: 1.02; font-weight: 600; letter-spacing: -.065em; }
.process-copy p { max-width: 410px; margin: 0; font-size: 16px; line-height: 1.5; }
.process-build .process-copy p { color: #2a2927; }
.process-design .process-copy p { color: #ffffffb8; }
@media(max-width:1100px) {
  .process-heading { flex-direction: column; align-items: flex-start; gap: 24px; }
  .process-heading > p { flex-basis: auto; max-width: 490px; }
}
@media(max-width:700px) {
  .process { padding: 48px 4% 64px; scroll-margin-top: -24px; }
  .process-heading { margin-bottom: 28px; }
  .process-heading h2 { font-size: clamp(40px, 10.5vw, 64px); }
  .process-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .process-card { grid-column: 1; min-height: 360px; padding: 22px; border-radius: 16px; }
  .process-copy { margin-top: 100px; }
  .process-copy h3 { font-size: clamp(34px, 9vw, 46px); }
}