/* Variant 10 — a light manufacturer profile with a restrained nod to vendista.ru. */
.mf-page {
  --mf-orange: #5aadab;
  --mf-yellow: #ffc100;
  --mf-paper: #f7f8fa;
  --mf-ink: #30323f;
  background: #fff;
  color: var(--mf-ink);
}
.mf-header {
  height: 78px;
  padding: 0 5vw;
  color: var(--mf-ink);
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  box-shadow: 0 5px 20px #30323f0a;
}
.mf-header > span { color: #8a8c96; }
.mf-header nav { font-weight: 600; }
.mf-header > button,
.mf-action {
  padding: 13px 20px;
  color: #fff;
  background: var(--mf-orange);
  border-radius: 7px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--mf-orange) 20%, transparent);
}
.mf-hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 1fr 260px;
  padding: 82px 5vw 0;
  background: #fff;
  color: var(--mf-ink);
}
.mf-title { position: relative; z-index: 3; }
.mf-title > span { color: var(--mf-orange); }
.mf-title h1 {
  margin-top: 34px;
  max-width: 850px;
  font-size: clamp(72px, 5.5vw, 94px);
  line-height: .98;
  letter-spacing: -.06em;
  text-transform: none;
}
.mf-title h1 i { color: var(--mf-orange); }
.mf-manifest {
  position: relative;
  z-index: 3;
  align-self: start;
  padding: 26px 0 0 38px;
  border-left: 3px solid var(--mf-orange);
}
.mf-manifest p {
  color: #5f6270;
  font-size: 17px;
  line-height: 1.65;
}
.mf-strengths {
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 4;
  align-self: center;
  justify-self: center;
  width: min(1080px, 84vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: var(--mf-ink);
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  box-shadow: 0 16px 45px #30323f16;
}
.mf-strengths > div {
  min-width: 0;
  padding: 22px 25px 24px;
  display: grid;
  gap: 4px;
  border-left: 1px solid #e6e8eb;
}
.mf-strengths > div:first-child { border-left: 0; }
.mf-strengths small {
  color: var(--mf-orange);
  font: 700 10px/1.25 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}
.mf-strengths strong {
  color: var(--mf-ink);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.mf-strengths span { color: #6f7280; font-size: 13px; }
.mf-stamp {
  position: absolute;
  z-index: 5;
  top: 115px;
  right: 5vw;
  width: auto;
  height: auto;
  padding: 13px 18px;
  display: block;
  color: var(--mf-ink);
  background: var(--mf-yellow);
  border-radius: 8px;
  transform: rotate(2deg);
  font: 800 11px/1.2 "IBM Plex Mono", monospace;
}
.mf-landscape {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  overflow: hidden;
  margin: 0 -5vw;
  min-height: 260px;
  background:
    radial-gradient(circle at 17% 76%, #d9eff0 0 34px, transparent 35px),
    radial-gradient(circle at 82% 65%, #d9eff0 0 51px, transparent 52px),
    linear-gradient(175deg, #fff 0 20%, #f7f8fa 20% 100%);
  border-radius: 48% 48% 0 0 / 28% 28% 0 0;
}
.mf-route {
  position: absolute;
  left: 13%;
  right: 10%;
  top: 55%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--mf-orange) 0 8px, transparent 8px 16px);
}
.mf-point {
  position: absolute;
  top: calc(55% - 25px);
  min-width: 108px;
  padding: 16px 14px;
  color: var(--mf-ink);
  background: #fff;
  border: 1px solid #cfd0d5;
  border-radius: 8px;
  box-shadow: 0 8px 20px #30323f10;
  font: 700 10px "IBM Plex Mono", monospace;
  font-style: normal;
  text-align: center;
}
.mf-point::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--mf-orange);
}
.mf-point-a { left: 13%; }
.mf-point-b { left: 37%; }
.mf-point-c { right: 32%; }
.mf-point-d { right: 10%; }
.mf-profile {
  padding: 110px 5vw;
  color: var(--mf-ink);
  background: var(--mf-paper);
  grid-template-columns: .3fr 1fr .8fr;
}
.mf-profile > aside { color: var(--mf-orange); }
.mf-profile h2 { font-size: 52px; }
.mf-profile > div > p { color: #616471; }
.mf-profile dl {
  padding: 22px 26px;
  background: #fff;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  box-shadow: 0 12px 30px #30323f0b;
}
.mf-profile dl > div { border-color: #e2e3e7; }
.mf-profile dl > div:last-child { border-bottom: 0; }
.mf-profile dt { color: #8b8e98; }
.mf-method {
  padding: 115px 5vw;
  color: var(--mf-ink);
  background: #fff;
}
.mf-method-head span { color: var(--mf-orange); }
.mf-method-head h2 { font-size: 56px; }
.mf-method ol {
  gap: 16px;
  border: 0;
}
.mf-method li,
.mf-method li:first-child {
  min-height: 300px;
  padding: 27px;
  color: var(--mf-ink);
  background: var(--mf-paper);
  border: 1px solid #e5e6e9;
  border-radius: 12px;
  box-shadow: 0 10px 25px #30323f09;
}
.mf-method li > b { color: var(--mf-orange); }
.mf-method li > div { margin-top: 65px; }
.mf-method li p { color: #686b77; }
.mf-ledger {
  padding: 105px 5vw;
  color: #fff;
  background: var(--mf-orange);
}
.mf-ledger-title span { color: #e6ffff; }
.mf-ledger-title h2 { font-size: 52px; }
.mf-ledger-grid {
  padding: 22px 28px;
  background: #fff;
  color: var(--mf-ink);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 16px 38px #174e4d2b;
}
.mf-ledger-grid > div { border-color: #dfe2e5; }
.mf-ledger-grid > div:nth-child(odd) { border-color: #dfe2e5; }
.mf-ledger-grid small { color: #8c8f98; }
.mf-ledger-grid b { color: var(--mf-ink); }
.mf-output {
  min-height: 680px;
  color: var(--mf-ink);
  background: var(--mf-paper);
  gap: 3vw;
  padding: 75px 5vw;
}
.mf-output-photo {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e5e8;
  border-radius: 14px;
  box-shadow: 0 18px 50px #30323f0c;
}
.mf-output-copy {
  align-self: center;
  padding: 50px 4vw;
  background: #fff;
  border-radius: 14px;
}
.mf-output-copy > span { color: var(--mf-orange); }
.mf-output-copy h2 { font-size: 52px; }
.mf-output-copy > p { color: #686b77; }
.mf-output-copy > div { border-color: #d7d9de; }
.mf-output-copy button { border-color: #d7d9de; color: var(--mf-ink); }
.mf-principles {
  gap: 16px;
  padding: 90px 5vw;
  color: var(--mf-ink);
  background: #fff;
}
.mf-principles > div,
.mf-principles > div:first-child {
  padding: 42px 34px;
  background: var(--mf-paper);
  border: 1px solid #e5e6e9;
  border-radius: 12px;
}
.mf-principles span { color: var(--mf-orange); }
.mf-principles p { color: #686b77; }
.mf-close {
  padding: 105px 5vw;
  color: var(--mf-ink);
  background:
    radial-gradient(circle at 88% 20%, #dceff0 0 85px, transparent 86px),
    var(--mf-paper);
}
.mf-close p { color: var(--mf-orange); }
.mf-close h2 { max-width: 800px; font-size: 58px; }
.mf-footer {
  color: #c9d9df;
  background: #04344a;
  border-color: #ffffff24;
}
.mf-footer button { color: #fff; }

@media (max-width: 1000px) {
  .mf-title h1 { font-size: 66px; }
  .mf-strengths { width: 90vw; }
  .mf-strengths > div { padding-inline: 18px; }
  .mf-point { min-width: 95px; }
  .mf-profile { grid-template-columns: .25fr 1fr; }
  .mf-profile dl { grid-column: 2; }
}

@media (max-width: 700px) {
  .mf-header { height: 68px; padding: 0 20px; }
  .mf-header > button { margin-left: auto; padding: 10px 12px; }
  .mf-hero {
    min-height: 820px;
    display: block;
    padding: 58px 20px 0;
  }
  .mf-title h1 { margin-top: 26px; font-size: 53px; line-height: .98; }
  .mf-manifest {
    margin-top: 42px;
    padding: 20px 0 0;
    border-top: 3px solid var(--mf-orange);
    border-left: 0;
  }
  .mf-manifest p { font-size: 16px; }
  .mf-strengths {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 24px;
    width: auto;
    margin: 0;
    grid-template-columns: 1fr 1fr;
    align-self: auto;
    justify-self: auto;
  }
  .mf-strengths > div {
    min-height: 92px;
    padding: 15px 17px 16px;
  }
  .mf-strengths > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #e6e8eb;
  }
  .mf-strengths > div:nth-child(4) { border-top: 1px solid #e6e8eb; }
  .mf-strengths strong { font-size: 28px; }
  .mf-strengths span { font-size: 11px; }
  .mf-stamp { display: none; }
  .mf-landscape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 300px;
    margin: 0;
    border-radius: 45% 45% 0 0 / 18% 18% 0 0;
  }
  .mf-route,
  .mf-point { display: none; }
  .mf-point-a { left: 5%; }
  .mf-point-b { left: 28%; }
  .mf-point-c { right: 26%; }
  .mf-point-d { right: 4%; }
  .mf-profile { display: block; padding: 75px 20px; }
  .mf-profile h2 { margin-top: 28px; font-size: 40px; }
  .mf-profile dl { margin-top: 42px; padding: 15px 20px; }
  .mf-method { padding: 75px 20px; }
  .mf-method-head { display: block; padding-bottom: 42px; }
  .mf-method-head h2 { margin-top: 22px; font-size: 42px; }
  .mf-method ol { display: block; }
  .mf-method li,
  .mf-method li:first-child { min-height: 0; margin-top: 12px; padding: 25px; }
  .mf-method li > div { margin-top: 32px; }
  .mf-ledger { display: block; padding: 75px 20px; }
  .mf-ledger-title h2 { font-size: 41px; }
  .mf-ledger-grid { margin-top: 40px; padding: 14px 18px; }
  .mf-output { display: block; min-height: 0; padding: 55px 20px; }
  .mf-output-copy { margin-top: 16px; padding: 42px 25px; }
  .mf-output-copy h2 { font-size: 41px; }
  .mf-principles { display: block; padding: 60px 20px; }
  .mf-principles > div,
  .mf-principles > div:first-child { margin-top: 12px; padding: 35px 28px; }
  .mf-close { padding: 75px 20px; }
  .mf-close h2 { font-size: 44px; }
}