/* ==========================================================================
   styles.css — стилі головної сторінки
   Mobile-first. Брейкпоїнти: 48em (768) / 62em (992) / 75em (1200)
   Усі десктопні значення точно збігаються з макетом на ширині 1440px.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-xs);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  color: var(--color-dark);
  background: var(--color-ivory);
}

.skip-link:focus {
  top: var(--space-xs);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 60; /* вище за .nav-backdrop, щоб панель меню була поверх затемнення */
  min-height: var(--header-height);
}

/* Підкладка шапки винесена в псевдоелемент: backdrop-filter на самій
   .header створив би containing block і зламав position: fixed у меню. */
.header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: rgba(33, 31, 18, 0.92);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity var(--transition);
}

.header.is-stuck {
  position: fixed;
}

.header.is-stuck::before {
  opacity: 1;
}

.header__container {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

/* --- Логотип: коричнева «плашка», що звисає з шапки --- */
.header__logo {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  width: 4.25rem;  /* 68px */
  align-self: flex-start;
  margin-top: -0.25rem; /* y = -4px у макеті */
}

.header__logo-plate {
  width: 100%;
  height: auto;
}

.header__logo-mark {
  position: absolute;
  top: 1.5rem; /* 20px від верху шапки + компенсація -4px */
  left: 50%;
  width: 2.6875rem; /* 43px */
  height: auto;
  transform: translateX(-50%);
}

/* --- Навігація --- */
.header__nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(22rem, 85vw);
  padding: var(--space-xl) var(--gutter);
  background-color: var(--color-dark);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition), visibility var(--transition);
}

.header__nav.is-open {
  visibility: visible;
  transform: translateX(0);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  width: 100%;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  font-family: var(--font-nav);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3714;
  letter-spacing: 0.0857em;
  text-transform: uppercase;
  color: var(--color-ivory);
  transition: color var(--transition);
}

.nav__link::after {
  position: absolute;
  bottom: 0.25rem;
  left: 0;
  width: 0;
  height: 1px;
  content: "";
  background-color: currentcolor;
  transition: width var(--transition);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

/* --- Підменю «Services» --- */
.nav__sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  list-style: none;
}

.nav__sub-link {
  display: block;
  font-family: var(--font-nav);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3714;
  letter-spacing: 0.0857em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.75;
  transition: opacity var(--transition);
}

.nav__sub-link:hover,
.nav__sub-link:focus-visible {
  opacity: 1;
}

/* У панелі меню (до 1200px) підпункти просто стоять під «Services». */
@media (max-width: 74.99em) {
  .nav__sub {
    align-items: center;
    margin-top: var(--space-3xs);
  }
}

.nav__item--cta {
  margin-top: var(--space-sm);
}

.header__cta {
  display: none;
}

/* --- Бургер --- */
.burger {
  position: relative;
  z-index: 70; /* поверх панелі меню — щоб лишався кнопкою «закрити» */
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.3125rem;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;
}

.burger__line {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-ivory);
  transition: transform var(--transition), opacity var(--transition);
}

.burger[aria-expanded="true"] .burger__line:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__line:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* Затемнення під відкритим меню */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background-color: rgba(13, 13, 13, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(46.6875rem, 100svh); /* 747px */
  overflow: hidden;
  color: var(--color-beige);
  background-color: var(--color-dark-soft);
}

.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Орнамент Vector 2 з макета. УВАГА: у самому SVG уже запечені
   opacity="0.4" і feGaussianBlur(54.15) — дублювати їх у CSS не можна,
   інакше орнамент стає практично невидимим. */
.hero__ornament {
  position: absolute;
  top: -123.5%;
  left: -88.94%;
  width: 160.07%; /* 2305px від 1440 */
  max-width: none;
  pointer-events: none;
}

.hero__container {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
}

.hero__content {
  display: flex;
  flex-direction: column;
  max-width: 37.125rem; /* 594px */
}

.hero__title {
  max-width: 34.25rem; /* 548px */
  color: var(--color-beige);
}

.hero__text {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-top: 1.375rem; /* 22px */
}

.hero__icon {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
}

.hero__lead {
  max-width: 33.125rem; /* 530px */
  line-height: 1.5;
  letter-spacing: -0.04em;
  color: var(--color-text-on-dark);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem; /* 36px */
  align-items: center;
  margin-top: var(--space-xs);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services {
  position: relative;
  min-height: 58.75rem; /* 940px */
  overflow: hidden;
  color: var(--color-ivory);
  background-color: var(--color-beige-deep);
}

/* Файл — уже готовий кадр (1440×940 = рівно видима область секції),
   вирізаний із рамки 1536×1024 у точці (−96, 0), як у макеті. */
.services__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}

.services__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Градієнтна «шторка», що затемнює ліву частину під текст */
.services__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 36, 25, 0.92) 0%, rgba(38, 36, 25, 0.55) 100%);
}

.services__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-block: var(--space-xl);
}

.services__head {
  display: flex;
  flex-direction: column;
}

.services__eyebrow {
  color: var(--color-cerise);
}

.services__title {
  max-width: 30.375rem; /* 486px */
  color: var(--color-ivory);
}

.services__lead {
  max-width: 23.8125rem; /* 381px */
  margin-top: var(--space-sm);
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--color-text-on-dark-strong);
}

.services__cards {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  padding: 3.125rem 1.25rem; /* 50px 20px */
  text-align: center;
  color: var(--color-dark);
  background-color: var(--color-beige);
  backdrop-filter: blur(15px);
}

.service-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  align-items: center;
}

.service-card__star {
  color: var(--color-olive);
}

.service-card__title {
  color: var(--color-dark);
}

.service-card__text {
  max-width: 21.875rem; /* 350px */
  line-height: 1.3;
}

/* ==========================================================================
   GALLERY / PORTFOLIO
   ========================================================================== */
.gallery {
  position: relative;
  padding-block: var(--space-xl);
  overflow: hidden;
  color: var(--color-ivory);
  background-color: var(--color-dark);
}

.gallery__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  text-align: center;
}

.gallery__eyebrow {
  color: var(--color-cerise);
}

.gallery__title {
  color: var(--color-ivory);
}

/* Слайдер на Swiper: ширина слайда й відступи задаються тут,
   у JS стоїть slidesPerView: 'auto'. */
.gallery__slider {
  margin-top: var(--space-lg);
}

.gallery__card {
  width: clamp(15rem, 27.7778vw, 25rem); /* 240 → 400px */
  height: auto;
  overflow: hidden;
}

.gallery__card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 400 / 556;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.gallery__card:hover img {
  transform: scale(1.04);
}

.gallery__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Розділювач притиснуто до низу секції — як у макеті (y = 1035 із 1058) */
.gallery__divider {
  position: absolute;
  bottom: 1.4375rem; /* 23px */
  left: 0;
  width: 100%;
  max-width: none;
  height: 1.4375rem;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   PROCESS / HOW IT WORKS
   ========================================================================== */
.process {
  position: relative;
  padding-block: var(--space-xl);
  overflow: hidden;
  color: var(--color-ivory);
  background-color: var(--color-dark);
}

/* opacity 0.1 уже всередині SVG — у CSS її не повторюємо */
.process__ornament {
  position: absolute;
  left: 50%;
  width: min(84.25rem, 94vw);
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.process__ornament--top {
  top: 3.675rem; /* y = 58.78 */
}

.process__ornament--bottom {
  top: 74.05rem; /* y = 1184.78 */
}

/* Мобільні смуги (Component 1–4 з [M] Main) показуються лише у своєму
   брейкпоїнті — див. блок ≤47.99em нижче. */
.process__ornament--m1,
.process__ornament--m2,
.process__ornament--m3,
.process__ornament--m4 {
  display: none;
}

.process__container {
  position: relative;
  z-index: 2;
}

.process__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.process__eyebrow {
  color: var(--color-cerise);
}

.process__title {
  max-width: 35.6875rem; /* 571px */
  color: var(--color-ivory);
}

.process__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: 3.5rem; /* 56px */
}

.step {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.step__media {
  position: relative;
}

.step__media img {
  width: 100%;
  aspect-ratio: 372 / 460;
  object-fit: cover;
}

/* Тонка риска 96px: у макеті вона центрована на внутрішній грані
   зображення й стоїть на висоті 24% від його верху. */
.step__media::after {
  position: absolute;
  top: 24%;
  display: none;
  width: 6rem; /* 96px */
  height: 1px;
  content: "";
  background-color: var(--color-ivory);
}

.step--image-first .step__media::after {
  right: -3rem;
}

.step--text-first .step__media::after {
  left: -3rem;
}

.step__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step__number {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: 0;
}

.step__title {
  margin-top: 1.5rem; /* 24px */
  color: var(--color-ivory);
}

.step__text {
  max-width: 17.5625rem; /* 281px */
  margin-top: var(--space-3xs);
  color: var(--color-ivory);
}



/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 57.4375rem; /* 919px */
  overflow: hidden;
  color: var(--color-beige);
  background-color: var(--color-black);
}

/* Роздільник із зірочкою на стику Process / About.
   У макеті він стоїть на y=5141, а межа секцій — на 5153.26, тобто елемент
   перетинає стик: 12.26px лежать на секції вище, решта — на знімку About.
   Блок має нульову висоту, тому не зсуває потік. */
.section-divider {
  position: relative;
  z-index: 4;
  height: 0;
}

.section-divider img {
  position: absolute;
  top: -0.76625rem; /* −12.26px */
  left: 0;
  width: 100%;
  max-width: none;
  /* Висота фіксована (23px у макеті), інакше на вузьких екранах
     пропорційне стиснення робить зірочку кількапіксельною. */
  height: 1.4375rem;
  object-fit: cover;
  object-position: center;
}

/* Фон — вузловий експорт із Figma (2160×1379 = 1440×919 при 1.5×),
   тобто вже точно та область, що видна в секції. Ніяких зсувів не треба. */
.about__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}

.about__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about__container {
  position: relative;
  z-index: 2;
  padding-block: var(--space-xl);
}

.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 29.375rem; /* 470px */
}

.about__title {
  color: var(--color-ivory);
}

.about__text {
  max-width: 24.5rem; /* 392px */
  margin-top: 1.75rem; /* 28px */
  color: var(--color-beige);
}

.about__content .btn {
  margin-top: var(--space-lg);
}

/* ==========================================================================
   ARTISTS
   ========================================================================== */
.artists {
  padding-block: var(--space-xl);
  background-color: var(--color-beige);
}

.artists__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.artists__head {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
  align-items: center;
  width: 100%;
  max-width: 44.375rem; /* 710px */
  text-align: center;
}

.artists__eyebrow {
  color: var(--color-wine);
}

.artists__title {
  color: var(--color-dark-warm);
}

.artists__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  width: 100%;
  margin-top: var(--space-lg);
}

/* position — база для розтягнутого посилання (див. .artist-card__btn::after) */
.artist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: center;
}

/* Контейнер 323×404 з внутрішнім padding 2px → саме зображення 319×400 */
.artist-card__media {
  width: 100%;
  padding: 2px;
  overflow: hidden;
}

.artist-card__media img {
  width: 100%;
  aspect-ratio: 319 / 400;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease-out);
}

.artist-card:hover .artist-card__media img {
  transform: scale(1.04);
}

.artist-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  align-items: center;
  text-align: center;
}

.artist-card__name {
  color: var(--color-dark);
}

.artist-card__role {
  max-width: 12.0625rem; /* 193px */
  color: var(--color-mute);
}

.artist-card__btn {
  min-height: 2.875rem; /* 46px */
  margin-top: 0.25rem; /* разом із gap картки дає 16px, як у макеті */
}

/* Клікабельна вся картка. Псевдоелемент на самій кнопці, а не обгортка <a>
   навколо картки: так у табі лишається один пункт замість дубля «картка +
   кнопка», а розмітка й доступне імʼя посилання не змінюються. */
.artist-card__btn::after {
  content: "";
  position: absolute;
  inset: 0;
}

.artists__more {
  margin-top: var(--space-lg);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  position: relative;
  min-height: 59.1875rem; /* 947px */
  padding-block: var(--space-xl);
  overflow: hidden;
  background-color: var(--color-beige);
}

.faq__bg,
.faq__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* М'яке світлове «полотно» під акордеоном.
   У Figma це прямокутники з blur(500px); у CSS той самий ефект дає
   радіальний градієнт — blur такого радіуса просто розсіяв би заливку. */
.faq__blob {
  position: absolute;
  pointer-events: none;
}

.faq__blob--a {
  top: 10.73%;
  left: 2.36%;
  width: 56.32%;
  height: 67.37%;
  background: radial-gradient(closest-side, rgba(240, 238, 231, 0.62), rgba(240, 238, 231, 0));
}

.faq__blob--b {
  top: 10.7%;
  left: 18.82%;
  width: 61.25%;
  height: 61.99%;
  background: radial-gradient(closest-side, rgba(240, 238, 231, 0.35), rgba(240, 238, 231, 0));
}

.faq__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.faq__eyebrow {
  line-height: 1; /* style_S46XWX — на відміну від інших заголовків секцій */
  color: var(--color-wine);
}

.faq__title {
  color: var(--color-dark);
}

.accordion {
  width: 100%;
  max-width: 53.4375rem; /* 855px */
  margin-top: var(--space-lg);
}

.accordion__item {
  border-bottom: 1px solid var(--color-line);
}

.accordion__item:first-child {
  border-bottom-color: var(--color-line-soft);
}

.accordion__heading {
  margin: 0;
}

.accordion__trigger {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-sm);
  text-align: left;
  transition: opacity var(--transition);
}

.accordion__trigger:hover {
  opacity: 0.7;
}

.accordion__question {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0;
  color: var(--color-dark-ink);
}

/* Іконка «плюс» — точний SVG з макета (Component 9, 40×40).
   У розгорнутому стані повертається на 45°, перетворюючись на «мінус». */
.accordion__icon {
  flex: 0 0 auto;
  width: 2.5rem;  /* 40px */
  height: 2.5rem;
  background: url("../images/svg/faq-toggle.svg") center / contain no-repeat;
  transition: transform var(--transition);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}

.accordion__panel {
  padding: 0 var(--space-sm) var(--space-xs);
}

.accordion__panel[hidden] {
  display: none;
}

.accordion__answer {
  max-width: 46rem;
  color: var(--color-dark-ink);
}

/* Відповідь — форматований текст: абзаци, списки, виділення.
   Маркери повертаємо явно, бо в global.css список скинутий глобально. */
.accordion__answer > * + * {
  margin-top: 0.75rem;
}

.accordion__answer ul {
  padding-left: 1.125rem;
  list-style: disc;
}

.accordion__answer li + li {
  margin-top: 0.25rem;
}

.accordion__answer strong {
  font-weight: 700;
  color: inherit;
}

/* ==========================================================================
   CTA / CONTACT FORM
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  background-color: var(--color-beige);
}

.cta__bg,
.cta__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* У макеті знімок відзеркалений по горизонталі */
.cta__bg img {
  transform: scaleX(-1);
}

.cta::after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: rgba(43, 40, 21, 0.15);
}

.cta__container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding-inline: 0;
}

.cta__panel {
  width: 100%;
  padding: var(--space-xl) var(--gutter);
  color: var(--color-ivory);
  background-color: var(--color-glass);
  backdrop-filter: blur(15px);
}

.cta__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs); /* 8px — відступ між скриптом і заголовком у макеті */
}

.cta__eyebrow {
  color: var(--color-cerise);
}

.cta__title {
  max-width: 40.625rem; /* 650px */
  color: var(--color-ivory);
}

/* --- Форма --- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.4375rem; /* 23px — крок рядків у макеті */
  max-width: 40.9375rem; /* 655px */
  margin-top: 3.125rem; /* 50px */
}

.form__row {
  display: grid;
  gap: 1.4375rem 0.75rem; /* 23px / 12px */
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
  border: none;
}

.field__label {
  font-size: var(--fs-small);
  line-height: 1.3;
  letter-spacing: -0.0286em;
  color: var(--color-ivory);
}

.field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field__control {
  width: 100%;
  min-height: 3rem; /* 48px */
  padding: 0.875rem 1rem; /* 14px 16px */
  font-size: 0.9875rem; /* ≈15.8px */
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--color-ivory);
  background-color: var(--color-field-bg);
  border: 1px solid transparent;
  border-radius: 0;
  transition: border-color var(--transition), background-color var(--transition);
  appearance: none;
}

.field__control::placeholder {
  color: var(--color-field-text);
}

.field__control:hover,
.field__control:focus {
  background-color: rgba(255, 254, 254, 0.16);
}

.field__control:focus {
  border-color: var(--color-border-gold);
  outline: none;
}

.field__wrap .field__control {
  padding-right: 2.75rem;
}

.field__control--area {
  height: 6.875rem; /* 110px */
  min-height: 6.875rem;
  padding: 0.6875rem 1rem;
  line-height: 1.5;
  resize: vertical;
}

.field__icon {
  position: absolute;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  color: var(--color-field-text);
  pointer-events: none;
}

/* Прибираємо нативну іконку календаря — використовуємо свою */
.field__wrap--date .field__control::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.field__control:invalid,
.field__control:not(:focus):placeholder-shown {
  color: var(--color-field-text);
}

.field__control option {
  color: var(--color-dark);
  background-color: var(--color-ivory);
}

/* --- Radio --- */
.field--radio {
  gap: var(--space-xs); /* 16px — layout_RLXAZX */
  padding: 0;
  margin: 0;
}

/* У макеті перемикачі стоять у стовпчик (layout_BJW0BO, gap 12) */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
  margin-top: 0.625rem; /* 10px */
}

.radio {
  display: inline-flex;
  gap: var(--space-3xs);
  align-items: center;
  cursor: pointer;
}

.radio__input {
  position: absolute;
  opacity: 0;
}

.radio__mark {
  position: relative;
  flex: 0 0 auto;
  width: 1rem; /* 16px */
  height: 1rem;
  background-color: #fff; /* у макеті коло суцільно біле */
  border-radius: 50%;
}

/* Вибір — темна крапка 10×10 у центрі (у макеті на (3, 3) від кола). */
.radio__input:checked + .radio__mark::after {
  position: absolute;
  inset: 3px;
  content: "";
  background-color: var(--color-dark);
  border-radius: 50%;
}

.radio__input:focus-visible + .radio__mark {
  outline: 2px solid var(--color-cerise);
  outline-offset: 2px;
}

.radio__text {
  font-size: 0.9875rem;
  letter-spacing: 0;
  color: var(--color-field-text);
}

/* --- Consent --- */
/* У макеті рядок згоди — 655×24 з align center. Padding 20 у Figma
   компенсований зсувом самого боксу на −20, тож чекбокс стоїть рівно на
   лівому краї форми, а до тексту від нього 12. */
.consent {
  display: flex;
  gap: var(--space-2xs); /* 12px */
  align-items: center;
  cursor: pointer;
}

.consent__input {
  position: absolute;
  opacity: 0;
}

/* Бокс 24×24 зі скругленням 4 — у макеті залитий айворі з галочкою.
   Незаповнений стан лишаємо обведеним, щоб згода не була проставлена
   наперед. */
.consent__mark {
  position: relative;
  flex: 0 0 auto;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  border: 1px solid var(--color-ivory);
  border-radius: 4px;
  transition: background-color var(--transition), border-color var(--transition);
}

.consent__input:checked + .consent__mark {
  background-color: var(--color-ivory);
  border-color: var(--color-ivory);
}

/* Галочка по центру боксу. Через поворот на 45° її оптичний центр вищий
   за геометричний, тому зсув по вертикалі трохи більший за половину. */
.consent__input:checked + .consent__mark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.375rem; /* 6px */
  height: 0.6875rem; /* 11px */
  content: "";
  border: solid var(--color-dark);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.consent__input:focus-visible + .consent__mark {
  outline: 2px solid var(--color-cerise);
  outline-offset: 2px;
}

.consent__text {
  color: var(--color-ivory);
}

.consent__text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* У макеті між чекбоксом згоди та кнопкою рівно 20px — тобто той самий
   крок, що й між рядками форми, без додаткового відступу. */
.cta__submit {
  margin-top: 0;
}

.form__status:empty {
  display: none;
}

.form__status {
  font-size: var(--fs-small);
  color: var(--color-ivory);
}

.form__status.is-error {
  color: var(--color-cerise);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  color: var(--color-ivory);
  background-color: var(--color-footer);
}

.footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-md);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 18.875rem; /* 302px */
}

.footer__logo {
  width: 11.125rem; /* 178px */
  height: auto;
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
}

.footer__contacts a,
.footer__region,
.footer__list a,
.footer__copy,
.footer__legal a {
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: -0.01em;
}

.footer__contacts a {
  transition: color var(--transition);
}

.footer__contacts a:hover,
.footer__list a:hover,
.footer__legal a:hover {
  color: var(--color-beige-deep);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
  align-items: center;
}

.footer__heading {
  color: var(--color-beige);
}

.footer__links-inner {
  display: flex;
  gap: 0.6875rem; /* 11px */
  align-items: center;
  justify-content: center;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 8.8125rem; /* 141px */
}

.footer__list li {
  display: flex;
  align-items: center;
  min-height: 2rem; /* 32px */
}

/* У макеті знімок 177px стоїть по центру контейнера 229×245 */
.footer__image {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 14.3125rem; /* 229px */
}

.footer__image img {
  width: 11.0625rem; /* 177px */
  aspect-ratio: 177 / 245;
  object-fit: cover;
}

/* Заливка fill_LZF466: поверх фото лежить затемнення rgba(33,31,18,.13) */
.footer__image {
  position: relative;
}

.footer__image::after {
  position: absolute;
  inset: 0;
  width: 11.0625rem;
  margin-inline: auto;
  content: "";
  background-color: rgba(33, 31, 18, 0.13);
  pointer-events: none;
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.socials {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.socials a {
  display: block;
  transition: opacity var(--transition), transform var(--transition);
}

.socials a:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

.socials img {
  width: 1.875rem; /* 30px */
  height: 1.875rem;
}

/* --- Нижня смуга --- */
.footer__bar {
  background-color: var(--color-footer);
}

.footer__bar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
  text-align: center;
  opacity: 0.6;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.footer__legal a {
  padding-bottom: 0.125rem;
  border-bottom: 1px solid currentcolor;
}

/* ==========================================================================
   BREAKPOINT: ≥ 48em (768px) — планшет
   ========================================================================== */
@media (min-width: 48em) {
  .services__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .step--text-first .step__media {
    order: 2;
  }

  .artists__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .footer__bar-inner {
    flex-direction: row;
    text-align: left;
  }
}

/* ==========================================================================
   BREAKPOINT: ≥ 62em (992px) — малий десктоп
   ========================================================================== */
@media (min-width: 62em) {
  .artists__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cta__container {
    padding-inline: 0;
  }

  .cta__panel {
    width: 50.9%; /* 733 / 1440 */
    min-width: 33.75rem;
    padding: 6.25rem 3.875rem 6.25rem 1rem; /* 100px 62px 100px 16px */
  }

  .footer__container {
    flex-direction: row;
    gap: var(--space-md);
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__social {
    gap: 5.4375rem; /* 87px */
    align-items: stretch;
    max-width: 14.3125rem; /* 228.95px */
  }

  .footer__social .socials {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   BREAKPOINT: ≥ 75em (1200px) — десктоп, точні значення макета
   ========================================================================== */
@media (min-width: 75em) {
  /* --- HEADER: повне горизонтальне меню з'являється лише тут.
     Нижче 1200px сім пунктів із padding 26px + кнопка CONTACT
     не вміщаються в рядок, тому лишається бургер. --- */
  .header {
    position: absolute;
  }

  .header__container {
    justify-content: flex-start;
  }

  .header__nav {
    position: static;
    flex: 1 1 auto;
    width: auto;
    padding: 0;
    background: none;
    visibility: visible;
    transform: none;
  }

  .nav {
    flex-direction: row;
    gap: 0;
    justify-content: center;
  }

  .nav__item {
    display: flex;
  }

  .nav__item--cta {
    display: none;
  }

  .nav__item--has-sub {
    position: relative;
  }

  /* Список послуг випадає під пунктом на ховері або коли фокус усередині —
     щоб відкривалося і з клавіатури. */
  .nav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    min-width: 14rem;
    padding: 1rem 1.5rem;
    visibility: hidden;
    background-color: rgba(33, 31, 18, 0.96);
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
    translate: -50% 0;
  }

  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub:focus-within .nav__sub {
    visibility: visible;
    opacity: 1;
  }

  .nav__link {
    padding: 1.5625rem 1.625rem; /* 25px 26px */
  }

  .nav__link::after {
    bottom: 1.25rem;
    left: 1.625rem;
  }

  .nav__link:hover::after,
  .nav__link.is-active::after {
    width: calc(100% - 3.25rem);
  }

  .header__cta {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .burger,
  .nav-backdrop {
    display: none;
  }

  /* На широких екранах герой тримає пропорцію макета (747/1440),
     інакше обмеження по висоті вьюпорта знову обрізало б знімок. */
  .hero {
    min-height: 46.6875rem;
  }

  /* --- HERO: контент зі зсувом 96px від краю вьюпорта --- */
  .hero__container {
    padding-inline: 6rem; /* 96px */
    padding-block: 12.125rem 0; /* 194px */
    align-self: flex-start;
  }

  /* Блок контенту в макеті 594×378: кнопки лежать на y = 326 від його верху */
  .hero__actions {
    margin-top: 2.5rem; /* 40px */
  }

  .hero {
    align-items: flex-start;
  }

  /* --- SERVICES: внутрішній відступ 60px, як у макеті --- */
  .services__container {
    padding-inline: 3.75rem; /* 60px */
    padding-block: 7.5rem;   /* 120px */
  }

  .services__scrim {
    background: linear-gradient(270deg, rgba(38, 36, 25, 0) 0%, rgba(38, 36, 25, 1) 100%);
    width: 57.92%; /* 834 / 1440 */
    inset: 0 auto 0 0;
  }

  .services__lead {
    margin-top: 1.5rem; /* 24px */
  }

  .services__cards {
    margin-top: 10.9375rem; /* 175px — відстань від тексту до карток */
  }

  /* --- PROCESS ---
     Контейнер 1200px по центру (осьова 720px). Зображення 372×460 і текстова
     колонка 281px зміщені до осьової рівно на ті значення, що в макеті. */
  .process {
    padding-block: 5.375rem 7.5rem; /* 86px / 120px */
  }

  .step {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    max-width: 75rem; /* 1200px */
    margin-inline: auto;
  }

  .step__media {
    width: 23.25rem; /* 372px */
  }

  .step__media::after {
    display: block;
  }

  .step__body {
    width: 17.5625rem; /* 281px */
    padding-top: 4.625rem; /* 74px нижче верхньої грані зображення */
  }

  .step__text {
    max-width: 15.625rem; /* 250px */
  }

  .step--image-first .step__media {
    justify-self: end;
    margin-right: 3rem; /* права грань зображення = осьова − 48px */
  }

  .step--image-first .step__body {
    justify-self: start;
    margin-left: 1.5625rem; /* текст починається на осьовій + 25px */
  }

  /* Перший крок у макеті зміщений окремо: текст 688–992 (304px) */
  .process__list > li:first-child .step__body {
    width: 19rem; /* 304px */
    margin-left: -1.9375rem;
  }

  .process__list > li:first-child .step__text {
    max-width: 13.625rem; /* 218px */
  }

  /* Ширина текстової колонки в макеті різна на кожному кроці, а спільна в
     них права (для text-first) або ліва (для image-first) грань. Тому
     задаємо ширину, а не відступ: крок 1 — 304 (688–992),
     крок 2 — 250 (423–673), крок 3 — 283 (745–1028), крок 4 — 281 (392–673). */
  .process__list > li:nth-child(2) .step__body {
    width: 15.625rem; /* 250px */
  }

  .process__list > li:nth-child(3) .step__body {
    width: 17.6875rem; /* 283px */
  }

  /* Вертикальний зсув текстової колонки від верхньої грані знімка теж
     різний: крок 1 — 93, крок 2 — 79, кроки 3 і 4 — 74. */
  .process__list > li:first-child .step__body {
    padding-top: 5.8125rem; /* 93px */
  }

  .process__list > li:nth-child(2) .step__body {
    padding-top: 4.9375rem; /* 79px */
  }

  /* На перших двох кроках від номера до заголовка 29px, на решті 24. */
  .process__list > li:first-child .step__title,
  .process__list > li:nth-child(2) .step__title {
    margin-top: 1.8125rem; /* 29px */
  }

  .step--text-first .step__media {
    justify-self: start;
    margin-left: 1.625rem; /* ліва грань зображення = осьова + 26px */
  }

  .step--text-first .step__body {
    justify-self: end;
    margin-right: 2.9375rem; /* текст закінчується на осьовій − 47px */
  }

  /* --- ABOUT: контент зі зсувом 103px --- */
  .about__container {
    padding-inline: 6.4375rem; /* 103px */
  }

  /* --- FAQ: скрипт-заголовок у макеті лежить поверх, тому відступи менші --- */
  .faq {
    padding-block: 5.5625rem 6.875rem; /* 89px / 110px */
  }

  .accordion__trigger {
    padding-block: var(--space-xs);
  }

  /* --- FOOTER: колонки з ширинами макета 302 / hug / 229 --- */
  .footer__container {
    padding-block: 6.9375rem 1.5rem; /* 111px / 24px */
  }

  .footer__brand {
    flex: 0 0 auto;
    width: 18.875rem; /* 302px */
  }

  .footer__social {
    flex: 0 0 auto;
    width: 14.3125rem; /* 228.95px */
  }
}

/* ==========================================================================
   МОБІЛЬНА ВЕРСІЯ — за макетом [M] Main (393px)
   Типографіка: Mobile/H1 42, H2 40, H3 38, H4 30, H5 20; script Italianno 40/0.6
   Бічні поля 16px. Усі значення нижче — з макета.
   ========================================================================== */
@media (max-width: 47.99em) {
  :root {
    --gutter: 1rem;              /* 16px */
    --slider-gap: 1rem;          /* 16px між слайдами */
    --fs-h1: 2.625rem;           /* 42 */
    --fs-h2: 2.5rem;             /* 40 */
    --fs-h3: 2.375rem;           /* 38 */
    --fs-h4: 1.875rem;           /* 30 */
    --fs-h5: 1.25rem;            /* 20 */
    --fs-script: 2.5rem;         /* 40 */
    --header-height: 4.3125rem;  /* логотип 69px */
  }

  .h1 { line-height: 1; }
  .h2 { line-height: 1; }
  .h3 { line-height: 1.1; }
  .h4 { line-height: 1.1; }
  .h5 { line-height: 1.1; }

  .script { letter-spacing: -0.016em; }

  /* --- Шапка: логотип 47.39×69 + текстова кнопка «Menu» --- */
  .header__logo {
    width: 2.9625rem; /* 47.39px */
    margin-top: 0;
  }

  .header__logo-mark {
    top: 1.125rem;
    width: 1.875rem;
  }

  .burger {
    width: auto;
    height: auto;
    padding: 0.5rem 0;
  }

  .burger__label {
    font-family: var(--font-nav);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.0857em;
    text-transform: uppercase;
    color: var(--color-ivory);
  }

  .burger__icon {
    display: none;
  }

  /* --- HERO 393×841 --- */
  .hero {
    align-items: stretch;
    min-height: 52.5625rem; /* 841px */
    background-color: #fff;
  }

  .hero__ornament {
    display: none;
  }

  .hero__container {
    display: flex;
    padding-block: 8.375rem 4.25rem; /* заголовок на y=134, кнопки на y=661 */
  }

  .hero__content {
    flex: 1;
    justify-content: flex-start;
    max-width: none;
  }

  .hero__title {
    max-width: none;
  }

  .hero__text {
    gap: 0.75rem; /* 12px */
    align-items: flex-start;
    margin-top: 0.875rem; /* 14px */
  }

  .hero__icon {
    width: 2.125rem; /* 34px */
    height: 2.125rem;
  }

  .hero__lead {
    max-width: none;
  }

  /* Блок кнопок у макеті 326px і стоїть несиметрично: 37 злiва, 30 справа.
     Симетричні поля давали 368 і розпирали контейнер до 368 замість 361. */
  .hero__actions {
    flex-direction: column;
    gap: 2.25rem; /* 36px */
    align-items: center;
    width: 20.375rem; /* 326px */
    margin-top: auto;
    margin-inline: 1.3125rem 0.875rem; /* 21px / 14px від контейнера */
  }

  .hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  /* --- SERVICES 393×1127 --- */
  .services {
    min-height: 70.4375rem; /* 1127px */
  }

  /* файли обрізані під видиму область — зсуви не потрібні */
  .services__bg {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .services__scrim {
    background: transparent;
  }

  .services__container {
    padding-block: 4.375rem 0; /* заголовок на y=70 */
  }

  .services__title {
    max-width: 19.625rem; /* 314px */
  }

  .services__lead {
    max-width: 16.625rem; /* 266px */
    margin-top: 1.5rem;   /* 24px */
  }

  /* ручний перенос із десктопного макета на мобільному не потрібен */
  .services__lead br {
    display: none;
  }

  .services__cards {
    gap: 1.25rem; /* 20px */
    margin-top: 6.375rem; /* 102px — картки стають на y=345, як у макеті */
    margin-inline: 0.4375rem; /* блок карток від краю 23px */
  }

  .service-card {
    gap: 0.875rem; /* 14px */
    padding: 1.25rem;
    background-color: #ded4ca; /* fill_LB8AML — мобільний відтінок картки */
  }

  .service-card__text {
    max-width: none;
  }

  /* --- PORTFOLIO 393×852 --- */
  .gallery {
    min-height: 53.25rem; /* 852px */
    padding-block: 4.375rem 0;
  }

  /* Рамка заголовка в макеті має фіксовану висоту 68 — від неї
     відраховується ряд слайдера (y=180) і кнопка (y=703). */
  .gallery__head {
    gap: 0;
    height: 4.25rem; /* 68px */
  }

  .gallery__slider {
    margin-top: 2.625rem; /* ряд на y=180 */
  }

  .gallery__card {
    width: 21.625rem; /* 346px */
  }

  .gallery__card img {
    aspect-ratio: 346 / 481;
  }

  .gallery__foot {
    margin-top: 2.625rem; /* кнопка на y=703 */
  }

  .gallery__divider {
    bottom: 0;
  }

  /* --- PROCESS: padding 90/16, gap 64 --- */
  .process {
    padding-block: 5.625rem;
  }

  /* Десктопна пара має пропорцію 1348×1184 — на вузькому екрані вона не
     працює, у макеті там свої чотири смуги. */
  .process__ornament--top,
  .process__ornament--bottom {
    display: none;
  }

  /* Component 1–4 з [M] Main / HOW it WORKS: 393×345 на y = 206, 535, 864,
     1193. Позиції фіксовані, як і решта мобільних величин макета — наша
     секція збігається з ним по висоті (1485px), тож смуги лягають на місце.
     opacity 0.1 уже всередині експорту, у CSS її не повторюємо. */
  .process__ornament--m1,
  .process__ornament--m2,
  .process__ornament--m3,
  .process__ornament--m4 {
    display: block;
    left: 0;
    width: 100%;
    height: auto;
    transform: none;
  }

  .process__ornament--m1 { top: 12.875rem; }  /* 206px */
  .process__ornament--m2 { top: 33.4375rem; } /* 535px */
  .process__ornament--m3 { top: 54rem; }      /* 864px */
  .process__ornament--m4 { top: 74.5625rem; } /* 1193px */

  /* Рамка заголовка в макеті — фіксовані 107px. */
  .process__head {
    gap: 0;
    height: 6.6875rem; /* 107px */
  }

  .process__title {
    max-width: none;
  }

  .process__list {
    gap: 2.625rem; /* 42px */
    margin-top: 4rem; /* 64px */
  }

  /* У макеті знімок завжди 173, текстова колонка завжди 172, крок 16.
     Тому для дзеркальних кроків колонки міняються місцями, інакше
     знімок отримував 172, а текст 173. */
  .step {
    grid-template-columns: 10.8125rem 1fr; /* знімок 173 + текст 172 */
    gap: 1rem;
    align-items: end; /* у макеті align-items: flex-end */
  }

  .step--text-first {
    grid-template-columns: 1fr 10.8125rem;
  }

  .step--text-first .step__media {
    order: 2;
  }

  /* Знімок тягнеться на всю висоту комірки — інакше в кроці з довшим
     текстом під ним лишалася порожня смуга. */
  .step__media {
    height: 100%;
  }

  .step__media img {
    aspect-ratio: 173 / 252;
    height: 100%;
  }

  .step__media::after {
    display: none;
  }

  /* Крок від номера до тексту — 32, а від заголовка до абзацу — 12.
     Спільний gap давав 32 в обох місцях, тому крок задано маргінами. */
  .step__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    width: auto;
    padding-top: 0;
  }

  .step--text-first .step__body {
    align-items: flex-end;
  }

  /* Заголовок і абзац у макеті займають усю ширину колонки (172) і
     центровані, а блок з номером тримається лівого (або правого) краю. */
  .step__title,
  .step__text {
    align-self: stretch;
    text-align: center;
  }

  /* Блок «номер + риска» у макеті — рівно 100px, риска добирає решту. */
  .step__number {
    display: flex;
    gap: 0.6875rem; /* 11px */
    align-items: center;
    width: 6.25rem; /* 100px */
    font-size: var(--fs-h2);
  }

  /* тонка риска стоїть поруч із номером */
  .step__number::before,
  .step__number::after {
    flex: 1;
    height: 1px;
    content: "";
    background-color: var(--color-ivory);
  }

  .step--image-first .step__number::after,
  .step--text-first .step__number::before {
    display: none;
  }

  .step__title {
    margin-top: 2rem; /* 32px від блоку з номером */
  }

  .step__text {
    max-width: none;
    margin-top: 0.75rem; /* 12px */
  }

  /* --- ABOUT 393×852 --- */
  .about {
    align-items: stretch;
    min-height: 53.25rem;
    background-color: var(--color-dark); /* #211F12 у мобільному макеті */
  }

  /* Файл уже обрізаний до видимої області секції (786×1702 = 393×851 при 2×),
     тому жодних зсувів — просто перекриваємо секцію. */
  .about__bg {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .about__container {
    display: flex;
    padding-block: 4.375rem; /* 70px згори і знизу */
  }

  .about__content {
    flex: 1;
    align-items: stretch;
    max-width: none;
  }

  /* У макеті по центру стояв лише заголовок, абзац був LEFT — за рішенням
     замовника центруємо обидва. */
  .about__title {
    text-align: center;
  }

  .about__text {
    max-width: none;
    margin-top: 1rem; /* 16px */
    text-align: center;
  }

  .about__content .btn {
    align-self: center;
    margin-top: auto; /* кнопка на y=730 із 852 */
  }

  /* --- ARTISTS: padding 70/16, gap 42 --- */
  .artists {
    padding-block: 4.375rem;
  }

  .artists__head {
    gap: 0;
    max-width: none;
  }

  .artists__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem; /* 20px по обох осях */
    margin-top: 2.625rem;
  }

  /* у макеті на мобільному показано 4 картки */
  .artist-card:nth-child(n + 5) {
    display: none;
  }

  .artist-card {
    gap: 0.5rem; /* 8px */
  }

  .artist-card__media img {
    aspect-ratio: 170 / 224;
  }

  .artist-card__body {
    gap: 0.5rem;
  }

  .artist-card__role {
    max-width: none;
  }

  /* картка 170px вузька — зменшуємо бічні поля, щоб напис лишався в один рядок
     і кнопка тримала висоту 46px із макета */
  .artist-card__btn {
    padding-inline: 0.5rem;
  }

  .artists__more {
    width: fit-content;
    min-height: 3.25rem; /* 52px */
    margin-top: 1.875rem;
  }

  /* --- FAQ 393×692 --- */
  .faq {
    min-height: 43.25rem; /* 692px */
    padding-block: 4.375rem 0;
    background-color: #fff;
  }

  .faq__bg {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* замість двох розмитих плям — світла панель на всю секцію */
  .faq__blob--a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(240, 238, 231, 0.72);
  }

  .faq__blob--b {
    display: none;
  }

  /* У макеті рамка тексту — 361px від краю 16, текст у ній центрований. */
  .faq__head {
    gap: 0;
    align-self: stretch;
    width: 100%;
  }

  .accordion {
    max-width: none;
    margin-top: 1.5rem; /* 24px */
  }

  .accordion__trigger {
    padding: 0.5rem 0 0.5rem 0.75rem; /* 8px 0, зсув 12px */
  }

  .accordion__question {
    font-size: var(--fs-h5); /* 20px */
    line-height: 1.1;
  }

  .accordion__panel {
    padding: 0 0 0.5rem 0.75rem;
  }

  /* --- CTA 393×1722 --- */


  .cta__bg {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* дзеркалення вже запечене у мобільний файл */
  .cta__bg img {
    transform: none;
  }

  .cta__container {
    justify-content: stretch;
  }

  .cta__panel {
    width: 100%;
    min-width: 0;
    padding: 4.375rem var(--gutter) 4.375rem;
    background-color: rgba(14, 14, 14, 0.7); /* fill_YH6B80 — мобільне скло */
  }

  .cta {
    background-color: #fff;
  }

  .cta__head {
    gap: 0.375rem;
  }

  .cta__title {
    max-width: 19.8125rem; /* 317px */
  }

  .form {
    gap: 1.5rem; /* 24px */
    max-width: none;
    margin-top: 2.625rem; /* 42px */
  }

  .form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .field__control {
    min-height: 2.75rem; /* 44px */
    padding: 0.5rem;
    font-size: var(--fs-small); /* 14px */
  }

  .field__wrap .field__control {
    padding-right: 2.25rem;
  }

  .field__control--area {
    height: 5.5rem;
    min-height: 5.5rem;
    padding: 0.5rem;
  }

  .field__icon {
    right: 0.5rem;
  }

  .radio__text,
  .consent__text {
    font-size: var(--fs-small);
  }

  .consent {
    padding-left: 0;
  }

  /* --- FOOTER: padding 60/16, gap 31 --- */
  .footer__container {
    gap: 3.25rem; /* 52px */
    padding-block: 3.75rem 0;
    text-align: center;
  }

  .footer__brand {
    gap: 1.5rem; /* 24px */
    align-items: center;
    max-width: none;
  }

  .footer__region {
    display: none; /* на мобільному в макеті стоїть повна адреса */
  }

  /* У макеті по центру стоїть тільки лого; телефон, e-mail і адреса
     займають усю ширину контейнера й вирівняні ліворуч (стиль text body
     має textAlignHorizontal: LEFT). */
  .footer__contacts,
  .footer__address {
    align-self: stretch;
    text-align: left;
  }

  .footer__address {
    line-height: 1.3;
  }

  .footer__links,
  .footer__social {
    gap: 1.5rem;
    align-items: stretch;
    max-width: none;
    text-align: left;
  }

  .footer__heading {
    text-align: left;
  }

  .footer__links-inner {
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    align-items: stretch;
  }

  .footer__image {
    display: none; /* у мобільному макеті знімка в підвалі немає */
  }

  .footer__list {
    display: contents; /* щоб упорядкувати всі 7 посилань одним стовпцем */
  }

  /* У макеті кожне посилання — комірка 32px з текстом по центру
     (textAlignVertical: CENTER), крок між ними 8. Разом крок 40. */
  .footer__list li {
    align-items: center;
    min-height: 2rem; /* 32px */
  }

  /* Порядок посилань як у мобільному макеті:
     Home, Bridal, Event, Destination, Pricing, Artists, Contact */
  .footer__list:first-of-type li:nth-child(1) { order: 1; }
  .footer__list:last-of-type li:nth-child(1)  { order: 2; }
  .footer__list:last-of-type li:nth-child(2)  { order: 3; }
  .footer__list:last-of-type li:nth-child(3)  { order: 4; }
  .footer__list:first-of-type li:nth-child(3) { order: 5; }
  .footer__list:first-of-type li:nth-child(2) { order: 6; }
  .footer__list:first-of-type li:nth-child(4) { order: 7; }

  /* Ряд іконок у макеті має padding 4px по вертикалі — разом 38px. */
  .socials {
    justify-content: flex-start;
    padding-block: 0.25rem;
  }

  /* Копірайт у макеті ліворуч, під ним рядок 361px із space-between:
     Terms ліворуч, Privacy праворуч. Крок 16. */
  .footer__bar-inner {
    gap: 1rem; /* 16px */
    align-items: stretch;
    /* 31px від блоку соцмереж (крок Footer у макеті) і 60px донизу */
    padding-block: 1.9375rem 3.75rem;
    text-align: left;
  }

  .footer__legal {
    gap: 1.25rem;
    justify-content: space-between;
  }

  /* --- Нижче 393px усе стискається пропорційно макету --- */
  .services,
  .about,
  .faq,
  .cta,
  .hero {
    overflow: hidden;
  }
}

/* Мобільний макет намальований на 393px, але реальні телефони бувають і
   360, і 412, і 430. Тому на всьому діапазоні до 480px масштабуємо
   пропорційно від макетної ширини — композиція всюди така сама, як у
   Figma, лише більша або менша. На 393px множник рівно 1. */
@media (max-width: 30rem) {
  html {
    font-size: calc(100vw / 24.5625);
  }
}