:root {
  --ink: #182c3c;
  --soft-ink: #526878;
  --pale: #edf4f8;
  --line: rgba(24,44,60,.16);
}
body { background: #fff; }
.eyebrow, .section-label, .step-tool, .section-no { color: #758fa3; }
.hero-visual { box-shadow: 0 30px 90px rgba(9,38,62,.2); }
.brief {
  padding: clamp(100px,14vw,180px) max(24px,calc((100vw - 1080px)/2));
  background: #fff;
}
.brief > .section-label { display: block; margin-bottom: 48px; text-align: center; }
.brief-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(30px,6vw,80px);
}
.brief-grid article {
  padding: clamp(30px,5vw,54px);
  border: 1px solid var(--line);
  background: #f5f9fb;
}
.brief-grid span {
  font-family: var(--serif);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7892a5;
}
.brief-grid h2 {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(1.7rem,3.3vw,2.8rem);
  font-weight: 400;
  line-height: 1.45;
}
.brief-grid p { margin-top: 26px; color: var(--soft-ink); }
.concept {
  color: #eaf3f8;
  background:
    radial-gradient(circle at 25% 20%, rgba(96,136,167,.25), transparent 36%),
    #102b42;
}
.concept .section-no { color: #a9c1d1; }
.concept .body-copy { color: #b9cbd7; }
.step-image { background: #edf4f8; }
.step-image.product-source { background: linear-gradient(145deg,#f8fafb,#e4edf2); }
.final {
  background:
    radial-gradient(circle at 50% 15%, rgba(117,155,184,.22), transparent 42%),
    #102b42;
}
.final .section-label { color: #bed0dc; }
.final img { width: min(820px,100%); margin-inline: auto; box-shadow: 0 30px 100px rgba(0,12,24,.42); }
@media (max-width: 800px) {
  .brief-grid { grid-template-columns: 1fr; }
}