@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/lomonosov-assets/cormorant.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
.process-page {
  --process-ink: #202b39;
  --process-muted: #586575;
  --process-blue: #203e70;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 32px 112px;
  color: var(--process-ink);
}
.process-page * { box-sizing: border-box; }
.process-page figure { margin: 0; }
.process-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.process-page h1, .process-page h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  color: var(--process-ink);
}
.process-page p { line-height: 1.75; }
.process-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  min-height: 560px;
  background: #f5f7fa;
}
.process-hero-figure { height: 560px; overflow: hidden; }
.process-hero-figure img { object-fit: contain; object-position: center; }
.process-hero-copy { align-self: center; padding: 64px clamp(36px, 5vw, 90px); }
.process-kicker {
  margin: 0 0 24px;
  color: var(--process-blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.process-hero h1 { margin: 0 0 24px; font-size: clamp(54px, 5.4vw, 88px); line-height: .98; }
.process-hero-copy > p:last-child { max-width: 39ch; margin: 0; font-size: 16px; }
.process-craft {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(36px, 8vw, 130px);
  align-items: center;
  padding: 104px clamp(24px, 7vw, 106px);
  border-bottom: 1px solid #d9e0e8;
}
.process-craft-copy { max-width: 58ch; }
.process-page h2 { margin: 0 0 25px; font-size: clamp(38px, 4vw, 64px); line-height: 1.05; }
.process-craft p, .process-cobalt p, .process-detail p {
  margin: 0 0 18px;
  color: var(--process-muted);
  font-size: 16px;
}
.process-craft p:last-child, .process-cobalt p:last-child, .process-detail p:last-child { margin-bottom: 0; }
.process-craft figure { width: min(100%, 430px); justify-self: end; }
.process-craft img { height: auto; aspect-ratio: 1200 / 607; }
.process-page figcaption {
  padding-top: 13px;
  color: var(--process-muted);
  font-size: 11px;
  letter-spacing: .07em;
}
.process-cobalt {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  padding: 100px clamp(24px, 5vw, 76px);
}
.process-cobalt figure { max-width: 720px; }
.process-cobalt img { height: auto; aspect-ratio: 854 / 738; }
.process-cobalt-copy { max-width: 53ch; }
.process-detail {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  padding: 100px clamp(24px, 5vw, 76px);
  border-top: 1px solid #d9e0e8;
}
.process-detail-copy { max-width: 53ch; }
.process-detail figure { width: min(100%, 540px); justify-self: end; }
.process-detail img { height: auto; aspect-ratio: 564 / 683; }
@media (max-width: 767px) {
  .process-page { padding: 0 20px 72px; }
  .process-hero, .process-craft, .process-cobalt, .process-detail { grid-template-columns: 1fr; }
  .process-hero { display: flex; flex-direction: column; }
  .process-hero-figure { height: auto; aspect-ratio: 853 / 522; }
  .process-hero-copy { padding: 44px 24px 52px; }
  .process-hero h1 { font-size: clamp(49px, 13vw, 65px); }
  .process-hero-copy > p:last-child { font-size: 15px; }
  .process-craft, .process-cobalt, .process-detail { gap: 32px; padding: 72px 4px; }
  .process-craft figure, .process-detail figure { width: 100%; }
  .process-cobalt p, .process-craft p, .process-detail p { font-size: 15px; }
  .process-detail .process-detail-copy { order: 2; }
  .process-detail figure { order: 1; }
}