/* =========================================================================
   MAOMAO — «Услуги» (services.html). Папка-табы как на главной, этапы работы
   на рваной бумаге + жёлтый стикер, галереи в белых карточках, FAQ макета.
   ========================================================================= */
.sv-title { font-size: var(--fs-90); line-height: .88; }

.sv-folder { padding-top: max(16px, calc(40 * var(--u))); }
@media (min-width: 1200px) { .sv-folder .folder { margin: 0 calc(58 * var(--u)) 0 calc(78 * var(--u)); } }
.sv-terms { margin: max(18px, calc(36 * var(--u))) 0 0; display: grid; gap: max(12px, calc(22 * var(--u))); }
.sv-terms dt { font-size: var(--fs-32); letter-spacing: -.03em; line-height: 1.1; }
.sv-terms dd { margin: max(4px, calc(10 * var(--u))) 0 0; max-width: 32em; font-size: var(--fs-22); font-weight: 500; line-height: 1.4; opacity: .8; }
.sv-folder .svc__actions { margin-top: max(22px, calc(44 * var(--u))); }

/* --------------------------------------------------------------- этапы */
.sv-process { margin-top: max(72px, calc(150 * var(--u))); }
.sv-process__title { margin: 0; }
.sv-steps {
  list-style: none;
  margin: max(32px, calc(70 * var(--u))) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: max(20px, calc(44 * var(--u))) max(16px, calc(40 * var(--u)));
}
.sv-step { --torn-pad: max(22px, calc(44 * var(--u))); }
.sv-step:nth-child(odd) { rotate: -.6deg; }
.sv-step:nth-child(even) { rotate: .7deg; }
.sv-step__n {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-90);
  line-height: .9;
  color: var(--olive);
  font-style: italic;
}
.sv-step__h { margin: max(10px, calc(18 * var(--u))) 0 0; font-size: var(--fs-32); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.sv-step p { margin: max(10px, calc(16 * var(--u))) 0 0; font-size: var(--fs-22); font-weight: 500; line-height: 1.45; }
.sv-note {
  position: relative;
  /* бумага в картинке занимает ≈10–92% по ширине и 15–90% по высоте: поля — в % от неё, чтобы текст не вылезал за стикер */
  padding: max(64px, calc(124 * var(--u))) 15% max(52px, 15%) 17%;
  background: url("../../img/ui/sticky-note.webp") center / 100% 100% no-repeat;
  rotate: 2.5deg;
  align-self: start;
  min-height: max(260px, calc(420 * var(--u)));
}
.sv-note__h { margin: 0; font-family: var(--f-display); font-size: var(--fs-42); line-height: 1; }
.sv-note p:not(.sv-note__h) { margin: max(12px, calc(20 * var(--u))) 0 0; font-size: var(--fs-22); font-weight: 500; line-height: 1.45; }
@media (max-width: 1199.98px) { .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .sv-steps { grid-template-columns: 1fr; }
  .sv-step, .sv-note { rotate: none !important; }
  .sv-step p, .sv-note p:not(.sv-note__h) { font-size: 15px; }
}

/* ------------------------------------------------------------ портфолио */
.sv-port {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: max(72px, calc(150 * var(--u)));
}
.sv-port__head .t-series-label { margin: 0; line-height: 1; }
.sv-port__title { margin: max(8px, calc(14 * var(--u))) 0 0; font-family: var(--f-display); font-size: var(--fs-60); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.sv-port__text { margin: max(14px, calc(26 * var(--u))) 0 0; max-width: 34em; font-size: var(--fs-22); font-weight: 500; line-height: 1.5; }
.sv-port__head .link-more { display: inline-block; margin-top: 18px; }
.sv-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(12px, calc(40 * var(--u))); }
.sv-gallery__item { display: block; padding: max(8px, calc(22 * var(--u))); background: var(--white); overflow: hidden; }
.sv-gallery__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease); }
.sv-gallery__item:hover img { transform: scale(1.035); }
.sv-gallery--shots .sv-gallery__item img { aspect-ratio: 9 / 16; object-fit: cover; border-radius: calc(11 * var(--u)); }
@media (min-width: 1000px) {
  .sv-port { grid-template-columns: calc(470 * var(--u)) minmax(0, 1fr); gap: calc(80 * var(--u)); align-items: start; }
  .sv-port__head { position: sticky; top: calc(var(--header-h) + 30px); }
  .sv-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-gallery--shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) { .sv-gallery, .sv-gallery--shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-port__text { font-size: 15px; } }

.sv-faq { margin-top: max(72px, calc(150 * var(--u))); }
.sv-faq { padding-bottom: max(72px, calc(150 * var(--u))); }
.sv-faq .faq-section__title { margin: 0; line-height: 1; }
.sv-faq .faq { margin-top: max(24px, calc(68.5 * var(--u))); }