/* =========================================================
   Гуляев Роман — портфолио
   Размеры в rem: 1rem = 10px макета. Корневой размер шрифта
   масштабируется от ширины окна, как автоскейл в Tilda:
   ≥1200 — макет 1200, 960–1199 — 960, 640–959 — 640,
   480–639 — 480, <480 — 320.
   ========================================================= */

:root {
  --ink: #3c0306;
  --paper: #fffff9;
  --card: #f1f1ec;
  --bar: #dfdfdb;
  --rule: #a9a9a9;
  --icon: #374957;

  --font: 'Inter', Arial, sans-serif;
  --font-head: 'Montserrat', Arial, sans-serif;

  --design: 120;   /* ширина макета / 10 */
  --cw: 100rem;    /* ширина контентной колонки */

  --ease: cubic-bezier(.4, 0, .2, 1);
}

html {
  font-size: calc(var(--vw, 100vw) / var(--design));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink) var(--paper);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.3rem;
  line-height: 1.55;
  letter-spacing: -.05rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.wrap {
  width: var(--cw);
  margin: 0 auto;
  position: relative;
}

section[id] { scroll-margin-top: 0; }

/* ---------- Скроллбар ---------- */
::-webkit-scrollbar { width: 19px; height: 19px; background-color: var(--paper); }
::-webkit-scrollbar-track { background-color: var(--paper); }
::-webkit-scrollbar-thumb {
  background-color: var(--ink);
  border-radius: 22px;
  border: 2px solid var(--paper);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #7a4b4e; }

/* ---------- Общие элементы ---------- */
.h2 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.06rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3rem;
  border: 1px solid transparent;
  font-size: 1.3rem;
  line-height: 1.55;
  letter-spacing: -.05rem;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--paper); border-color: var(--paper); }

.work__link,
.service__link,
.footer a,
.footer__up { transition: color .2s; }
.work__link:hover,
.service__link:hover { color: rgba(60, 3, 6, .59); }

/* ---------- Прелоадер ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.preloader__panel {
  position: fixed;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--paper);
  overflow: hidden;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.preloader__panel--top { top: 0; }
.preloader__panel--bottom { top: 50%; }
.preloader__seam {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform 1.1s var(--ease);
}
.preloader__panel--top .preloader__seam { bottom: 0; }
.preloader__panel--bottom .preloader__seam { top: 0; }
.preloader__content {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(20px, 6vw, 80px);
  pointer-events: none;
}
.preloader__name {
  margin-top: clamp(38px, 6vw, 56px);
  font-weight: 600;
  font-size: clamp(18px, 4vw, 30px);
  letter-spacing: -.6px;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease;
}
.preloader.is-grow .preloader__seam { transform: scaleX(1); }
.preloader.is-grow .preloader__name { opacity: 1; transform: none; }
.preloader.is-reveal .preloader__panel--top { transform: translateY(-100%); }
.preloader.is-reveal .preloader__panel--bottom { transform: translateY(100%); }
.preloader.is-reveal .preloader__content { opacity: 0; transition: opacity .3s ease; }
.preloader.is-done { display: none; }

/* ---------- Шапка (десктоп) ---------- */
.header {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 96.4rem;
  height: 5.75rem;
  padding: 0 1.4rem 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--ink);
  border-radius: 3rem;
  color: var(--paper);
}
.header a { text-decoration: none; }
.header__brand { justify-self: start; white-space: nowrap; }
.header__nav {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
}
.header__nav a,
.header__brand { transition: opacity .2s; }
.header__nav a:hover,
.header__brand:hover { opacity: .6; }
.header__btn {
  justify-self: end;
  width: 15.4rem;
  height: 4rem;
}

/* ---------- Шапка (планшет/мобильные) ---------- */
.mheader {
  display: none;
  position: fixed;
  z-index: 100;
  top: 5px;
  left: 10px;
  right: 10px;
  font-size: 14px;
  letter-spacing: -.3px;
}
.mheader__bar {
  position: relative;
  z-index: 2;
  height: 50px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: var(--paper);
  border-radius: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.mheader__brand { text-decoration: none; white-space: nowrap; }
.burger {
  position: relative;
  width: 22px;
  height: 14px;
  flex: 0 0 auto;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--paper);
  transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }
.mheader.is-open .burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.mheader.is-open .burger span:nth-child(2) { opacity: 0; }
.mheader.is-open .burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mmenu {
  position: absolute;
  top: 52px;
  left: 1px;
  right: 1px;
  padding: 26px 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility 0s .3s;
  max-height: calc(100vh - 70px);
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
}
.mheader.is-open .mmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s ease, transform .3s var(--ease);
}
.mmenu__nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mmenu__nav a {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
}
.mmenu__contacts {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.25;
}
.mmenu__label { opacity: .5; }
.mmenu__icons {
  margin-top: 28px;
  display: flex;
  gap: 10px;
}
.mmenu__icons a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
.mmenu__icons a:hover { opacity: .8; }
.mmenu__icons svg { width: 17px; height: 17px; fill: var(--ink); }
.mmenu__btn {
  margin-top: 34px;
  width: 250px;
  height: 50px;
  font-size: 14px;
  border-radius: 30px;
}

/* ---------- 1. Первый экран ---------- */
.hero { height: 58.6rem; overflow: hidden; }
.hero__wrap { height: 100%; }
.hero__name {
  position: absolute;
  z-index: 1;
  left: -.5rem;
  top: 12rem;
  font-family: var(--font-head);
  font-size: 14.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.3rem;
  white-space: nowrap;
}
.hero__chip {
  position: absolute;
  z-index: 3;
  left: 34.75rem;
  top: 14rem;
  height: 3.17rem;
  padding: 0 1.1rem 0 .5rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2.9rem;
  white-space: nowrap;
}
.hero__chip i {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--paper);
}
.hero__text {
  position: absolute;
  left: 0;
  top: 35.9rem;
  width: 29.2rem;
}
.hero__btn {
  position: absolute;
  left: 0;
  top: 42.9rem;
  width: 16.6rem;
  height: 5rem;
}
.hero__photo {
  position: absolute;
  z-index: 2;
  left: 60.67rem;
  top: 24.5rem;
  width: 24.9rem;
  height: 27.7rem;
  --bar1: .7rem;
  --bar2: 1.4rem;
}
.hero__photo picture {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2rem;
}
.hero__bar {
  position: absolute;
  left: 50%;
  height: 3rem;
  border-radius: 2rem;
  transform: translateX(-50%);
}
.hero__bar--1 { z-index: 1; width: 91.6%; bottom: calc(var(--bar1) * -1); background: var(--bar); }
.hero__bar--2 { z-index: 0; width: 82.7%; bottom: calc(var(--bar2) * -1); background: var(--card); }

/* ---------- 2. Мои работы ---------- */
.works { padding: 5rem 0; }
.works__grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.work {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1.4rem;
  background: var(--card);
  border-radius: 0 0 2rem 2rem;
}
.work > picture { display: block; }
.work__img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-radius: 0 0 2rem 2rem;
}
.work__title {
  margin-top: 1.5rem;
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.05rem;
}
.work__text {
  margin-top: .95rem;
  min-height: 4rem;
}
.work__link {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  min-height: 3.12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.work__link span { text-decoration: underline; text-underline-offset: .15em; }
.work__link img { width: 1.1rem; height: auto; transition: transform .2s; }
.work__link:hover img { transform: translateX(.3rem); }

/* ---------- 3. Преимущества ---------- */
.features { padding: 5rem 0 1rem; }
.features__grid {
  margin-top: 3.25rem;
  display: grid;
  grid-template-columns: 25.4rem 26.5rem 25.2rem;
  justify-content: space-between;
}
.feature {
  padding: 1.67rem 0 4.25rem;
  border-top: 1px solid var(--ink);
  line-height: 1.2;
}
.feature__num { display: block; padding-left: .1rem; font-size: 1.3rem; letter-spacing: 0; }
.feature__title,
.feature__text { padding-left: .2rem; }
.feature__title {
  margin-top: .6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.feature__text {
  margin-top: 1rem;
  font-size: 1.3rem;
  letter-spacing: 0;
}

/* ---------- 4. Услуги ---------- */
.services { padding: 5rem 0 3.1rem; }
.services__list { margin-top: 3.08rem; }
.service {
  display: grid;
  grid-template-columns: 36.5rem 23rem 40.5rem;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "main meta img"
    "link meta img";
  padding: 1.58rem 0 4.4rem;
  border-top: 1px solid var(--rule);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.service__main { grid-area: main; max-width: 31.6rem; }
.service__num { display: block; }
.service__title {
  margin-top: .45rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
}
.service__text { margin-top: 1rem; }
.service__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  gap: .93rem;
}
.service__link {
  grid-area: link;
  justify-self: start;
  margin-bottom: .4rem;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.service__pic { grid-area: img; display: block; }
.service__img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-radius: 2rem;
}

/* ---------- 5. Этапы работы ---------- */
.process { padding: 5rem 0 3.5rem; }
.process__wrap {
  display: grid;
  grid-template-columns: 1fr 57.2rem;
}
.process__sticky {
  position: sticky;
  top: 10rem;
}
.process__video {
  margin-top: 3rem;
  width: 32rem;
  height: 18rem;
  object-fit: cover;
  border-radius: 2rem;
  background: #000;
}
.process__list { margin-top: 7.08rem; }
.step {
  padding: 1.83rem 0 1.76rem;
  border-top: 1px solid var(--ink);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.step:first-child { padding-top: 0; border-top: 0; }
.step__num { display: block; }
.step__body {
  margin-top: .5rem;
  display: grid;
  grid-template-columns: 28.45rem 1fr;
}
.step__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- 6. Вопросы ---------- */
.faq { padding: 5rem 0 9.9rem; }
.faq__cols {
  margin-top: 3.08rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.faq__col { border-top: .15rem solid var(--ink); }
.qa { border-bottom: .15rem solid var(--ink); }
.qa__q {
  width: 100%;
  padding: 2.25rem 0 2.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.qa__q span { max-width: 40.6rem; }
.qa__q img {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  transition: transform .6s var(--ease);
}
.qa__q { transition: padding .6s var(--ease); }
.qa.is-open .qa__q { padding-bottom: 1rem; }
.qa.is-open .qa__q img { transform: rotate(135deg); }
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease);
}
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > p {
  min-height: 0;
  overflow: hidden;
  max-width: 44rem;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.qa__a > p::after { content: ""; display: block; height: 1.2rem; }

/* ---------- 7. Подвал ---------- */
.footer {
  margin-top: 0;
  background: var(--ink);
  color: var(--paper);
  height: 44.1rem;
  overflow: hidden;
  letter-spacing: -.05rem;
}
.footer__wrap { height: 100%; }
.footer__title {
  position: absolute;
  left: 0;
  top: 2rem;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.06rem;
}
.footer__col {
  position: absolute;
  top: 10.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .95rem;
  font-size: 1.3rem;
  line-height: 1.3rem;
}
.footer__col--write { left: 17rem; }
.footer__col--time { left: 42.5rem; }
.footer__label { opacity: .5; margin-bottom: .6rem; }
.footer a { text-underline-offset: .15em; }
.footer a:hover { color: rgba(255, 255, 249, .6); }
.footer__up {
  position: absolute;
  left: 0;
  top: 25.9rem;
  font-size: 1.3rem;
  line-height: 1.3rem;
}
.footer__photo {
  position: absolute;
  z-index: 1;
  left: 83.17rem;
  top: 16.33rem;
  width: 16.8rem;
  height: 18.9rem;
  object-fit: cover;
  border-radius: 1rem;
}
.footer__name {
  position: absolute;
  z-index: 2;
  left: -.8rem;
  top: 27.17rem;
  font-family: var(--font-head);
  font-size: 14rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.06rem;
  white-space: nowrap;
  filter: blur(.5rem);
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   Макет 960 (960–1199px)
   ========================================================= */
@media (max-width: 1199px) {
  :root { --design: 96; --cw: 94rem; }

  .header { display: none; }
  .mheader { display: block; }

  .hero { height: 57.8rem; }
  .hero__name { font-size: 13.3rem; left: .2rem; }
  .hero__chip { left: 33.3rem; top: 14.6rem; }
  .hero__text { top: 30.6rem; }
  .hero__btn { top: 37.6rem; }
  .hero__photo { left: 56.7rem; top: 23.7rem; }

  .work { padding-bottom: 1.4rem; }
  .work__img { height: 20rem; }
  .work__link { min-height: 5.1rem; }

  .features__grid { grid-template-columns: repeat(3, 28rem); }

  .service { grid-template-columns: minmax(0, 1fr) 19rem 44rem; }
  .service__img { height: 21.5rem; }

  .process__wrap { grid-template-columns: 1fr 55rem; }
  .step__body { grid-template-columns: 27.5rem 1fr; }

  .qa__q span { max-width: 38rem; }

  .footer { height: 43rem; }
  .footer__col--write { left: 16rem; }
  .footer__col--time { left: 40rem; }
  .footer__photo { left: 77.2rem; top: 15.7rem; }
  .footer__name { font-size: 13.1rem; left: -.5rem; top: 27.2rem; filter: blur(.4rem); }
}

/* =========================================================
   Макет 640 (640–959px) — планшет
   ========================================================= */
@media (max-width: 959px) {
  :root { --design: 64; --cw: 62rem; }

  .hero { height: 55.6rem; }
  .hero__name { font-size: 9rem; left: -.1rem; top: 17.3rem; }
  .hero__chip { left: 19.3rem; top: 17.9rem; }
  .hero__photo { left: 36.9rem; top: 25.1rem; width: 20.2rem; height: 22.5rem; --bar1: .54rem; --bar2: 1.14rem; }
  .hero__bar { height: 2.4rem; }

  .works__grid { grid-template-columns: repeat(2, 1fr); }

  .features__grid { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; }

  .service {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "main meta"
      "link link"
      "img img";
    column-gap: 3rem;
  }
  .service__main { max-width: 38rem; }
  .service__link { margin: 1.9rem 0 0; }
  .service__img { margin-top: 3rem; height: 30rem; }

  .process__wrap { display: block; }
  .process__video { display: none; }
  .process__sticky { position: static; }
  .process__list { margin-top: 3.26rem; }
  .step__body { grid-template-columns: 1fr 1fr; column-gap: 2rem; }

  .faq__cols { grid-template-columns: 1fr; gap: 0; }
  .faq__col { display: contents; }
  .faq__cols { border-top: .15rem solid var(--ink); display: flex; flex-direction: column; align-items: stretch; }
  .qa { order: var(--order); }
  .qa__q span { max-width: 52rem; }

  .footer { height: 39.9rem; }
  .footer__col--write { left: 16rem; }
  .footer__col--time { left: 32rem; }
  .footer__photo { left: 48.9rem; top: 19.2rem; width: 13.1rem; height: 14.8rem; }
  .footer__up { top: 27.9rem; }
  .footer__name { font-size: 8.7rem; left: -.4rem; top: 29.2rem; filter: blur(.3rem); }
}

/* =========================================================
   Макет 480 (480–639px)
   ========================================================= */
@media (max-width: 639px) {
  :root { --design: 48; --cw: 46rem; }

  .h2 { font-size: 2.4rem; }

  /* Первый экран — по центру */
  .hero { height: 73.5rem; }
  .hero__wrap { text-align: center; }
  .hero__chip { left: 50%; top: 10.6rem; transform: translateX(-50%); }
  .hero__name { left: 0; right: 0; top: 12.5rem; font-size: 6.7rem; }
  .hero__text { left: 50%; top: 22.9rem; transform: translateX(-50%); }
  .hero__btn { left: 50%; top: 30.2rem; transform: translateX(-50%); }
  .hero__photo { left: 50%; top: 38.5rem; width: 25.7rem; height: 28.6rem; transform: translateX(-50%); --bar1: .7rem; --bar2: 1.4rem; }
  .hero__bar { height: 3.1rem; }

  .works__grid { grid-template-columns: 1fr; margin-top: 2.9rem; }
  .work__img { height: 26.5rem; }
  .service__img { height: 22.5rem; }

  .footer { height: 34.3rem; }
  .footer__title { font-size: 2.4rem; top: 2rem; }
  .footer__col { top: 8.6rem; }
  .footer__col--write { left: 8rem; }
  .footer__col--time { left: 24rem; }
  .footer__photo { left: 35.9rem; top: 18.6rem; width: 10.1rem; height: 11.3rem; }
  .footer__up { top: 24.9rem; }
  .footer__name { font-size: 6.4rem; left: 0; top: 26.4rem; filter: blur(.3rem); }
}

/* =========================================================
   Макет 320 (<480px) — телефоны
   ========================================================= */
@media (max-width: 479px) {
  :root { --design: 32; --cw: 30rem; }

  .hero { height: 62.8rem; }
  .hero__chip { top: 8.96rem; }
  .hero__name { top: 11.6rem; font-size: 4.5rem; }
  .hero__text { top: 19.2rem; }
  .hero__btn { top: 26.2rem; }
  .hero__photo { top: 34.16rem; width: 20.2rem; height: 22.5rem; --bar1: .54rem; --bar2: 1.14rem; }
  .hero__bar { height: 2.4rem; }

  .work__img { height: 18.5rem; }
  .work__link { min-height: 5.1rem; }

  .features__title { max-width: 30rem; }
  .features__grid { grid-template-columns: 1fr; margin-top: 3.15rem; }
  .features { padding-bottom: 1rem; }
  .feature__text { max-width: 29.4rem; }
  .step { padding-left: .3rem; }
  .step__text { max-width: 29.4rem; }

  .services { padding-bottom: 2.9rem; }
  .services__list { margin-top: 2.9rem; }
  .service {
    display: flex;
    flex-direction: column;
    padding: 1.7rem 0 3rem;
  }
  .service__title { margin-top: .5rem; }
  .service__meta { margin-top: 1rem; gap: 1rem; }
  .service__link { margin-top: 2rem; align-self: flex-start; }
  .service__img { margin-top: 3rem; height: 15rem; }

  .step { padding: 1.8rem 0 1.7rem; }
  .step__body { display: block; margin-top: .6rem; }
  .step__text { margin-top: 1rem; }
  .process { padding-bottom: 5.3rem; }

  .faq__cols { margin-top: 2.9rem; }
  .qa__q { padding: 2.2rem 0 2rem; }
  .qa__q span { max-width: 21.7rem; }

  .footer { height: 31.6rem; }
  .footer__title { top: 1.97rem; }
  .footer__col { top: 8.54rem; gap: .95rem; }
  .footer__col--write { left: 0; }
  .footer__col--time { left: 16rem; width: 13.9rem; }
  .footer__col--time span:nth-child(2) { line-height: 1.3rem; }
  .footer__photo { left: 21.9rem; top: 19.5rem; width: 8.1rem; height: 9rem; }
  .footer__up { top: 24.5rem; }
  .footer__name { font-size: 4.2rem; top: 26.3rem; line-height: 1.14; filter: blur(.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}