/* ==========================================================================
   Портфоліо — самостійна сторінка.
   Не залежить від styles.css / script.js головного сайту.

   Структура та компоненти  — редакційна розкладка проєктів: навбар поверх
     панелей, фулскрін-меню, dark-панель на 100dvh, біжучий рядок, сітка 2×N
     з карткою 4:3 та оверлеєм, фінальна контактна панель на 100dvh
     з портретом між рядками заголовка.
   Палітра                   — та сама, що на головній сторінці: #EEEEEE / #0A0A0A /
     #FFFFFF / акцент #F85533; темні панелі — #141414.
   Шрифти                    — Inter Tight (як на головній) для інтерфейсу
     та Alumni Sans для дисплейних заголовків.
   ========================================================================== */

:root {
  /* Палітра головної сторінки сайту */
  --bg: #eeeeee;
  --white: #ffffff;
  --ink: #0a0a0a;
  --accent: #f85533;
  --bar: #f4f3f0;

  /* Ролі на світлому */
  --ink-60: rgba(10, 10, 10, 0.58);
  --ink-40: rgba(10, 10, 10, 0.4);
  --line: rgba(10, 10, 10, 0.1);
  --line-2: rgba(10, 10, 10, 0.16);

  /* Ролі на темному */
  --on-dark: #f2f2f2;
  --on-dark-70: rgba(242, 242, 242, 0.7);
  --on-dark-50: rgba(242, 242, 242, 0.5);
  --on-dark-30: rgba(242, 242, 242, 0.3);
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Темні поверхні */
  --panel-dark: #141414;
  --track: #2a2a2a;

  --font-display: "Alumni Sans", "Oswald", "Arial Narrow", sans-serif;
  --font-head: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --r: 20px;
  --r-sm: 12px;
  --r-lg: 36px;
  --r-full: 999px;
  --inset: 10px;
  --gutter: 30px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.3s var(--ease);
  --t-med: 0.55s var(--ease);
  --t-slow: 0.85s var(--ease);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.display {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.82;
}

.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Плівкове зерно поверх усього — тактильність поверхонь */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. НАВБАР + ФУЛСКРІН-МЕНЮ
   ========================================================================== */

.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  width: 100%;
  padding: 40px 40px 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.navbar__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
}
.navbar a, .navbar button { pointer-events: auto; }

/* Перший екран несе власний знак і локацію — навбар зʼявляється після нього */
.navbar__grid > * {
  opacity: 1;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.at-intro .navbar__grid > * {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
body.menu-open .navbar__grid > * {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Над темною фінальною панеллю шапка світлішає */
.navbar { transition: color 0.4s var(--ease); }
body.nav-on-dark .navbar { color: var(--on-dark); }
body.menu-open .navbar { color: var(--on-dark); }

.navbar__brand { position: relative; display: block; width: max-content; }
.navbar__brand img { height: 30px; width: auto; transition: opacity 0.4s var(--ease); }
.navbar__brand img + img { position: absolute; inset: 0; }
.navbar__brand .brand--light { opacity: 0; }
body.nav-on-dark .navbar__brand .brand--light { opacity: 1; }
body.nav-on-dark .navbar__brand .brand--dark { opacity: 0; }
body.menu-open .navbar__brand .brand--light { opacity: 1; }
body.menu-open .navbar__brand .brand--dark { opacity: 0; }

/* Словесний знак — окремий фіксований шар.
   У першому екрані лежить велетнем на 8%, на скролі стискається
   в центральний слот навбара і лишається там до кінця сторінки. */
.intro-word {
  position: fixed;
  z-index: 49;
  inset: 48px 0 auto;
  width: clamp(114px, 10.7vw, 157px);
  margin-inline: auto;
  color: var(--ink);
  pointer-events: none;
  transition: color 0.4s var(--ease);
  will-change: transform, opacity;
}
.intro-word svg { display: block; width: 100%; height: auto; }
body.nav-on-dark .intro-word { color: var(--on-dark); }
body.menu-open .intro-word { visibility: hidden; }

.navbar__menu-btn {
  position: relative;
  justify-self: end;
  display: block;
  height: 1em;
  overflow: hidden;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.navbar__menu-btn span {
  display: block;
  transition: transform 0.5s var(--ease);
}
.navbar__menu-btn span + span { position: absolute; top: 100%; left: 0; }
body.menu-open .navbar__menu-btn span { transform: translateY(-100%); }

.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100vw;
  height: 100dvh;
  padding: var(--inset);
  background: var(--ink);
  overflow: hidden;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-io), visibility 0s linear 0.8s;
}
body.menu-open .nav-menu {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s var(--ease-io), visibility 0s linear 0s;
}

.nav-menu__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 120px var(--gutter) var(--gutter);
  border-radius: var(--r);
  background: var(--panel-dark);
  color: var(--on-dark);
  overflow: hidden;
}
.nav-menu__list { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-menu__divider { width: 100%; height: 1px; background: var(--on-dark-30); }
.nav-menu__row { width: 100%; overflow: hidden; }

.nav-menu__link {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 9vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: -0.15em;
  transform: translateY(105%);
  transition: transform 0.7s var(--ease), color 0.4s var(--ease);
}
body.menu-open .nav-menu__link { transform: translateY(0); }
.nav-menu__row:nth-child(2)  .nav-menu__link { transition-delay: 0.10s; }
.nav-menu__row:nth-child(4)  .nav-menu__link { transition-delay: 0.16s; }
.nav-menu__row:nth-child(6)  .nav-menu__link { transition-delay: 0.22s; }
.nav-menu__row:nth-child(8)  .nav-menu__link { transition-delay: 0.28s; }
.nav-menu__row:nth-child(10) .nav-menu__link { transition-delay: 0.34s; }
.nav-menu__link:hover { color: var(--accent); }
.nav-menu__link[aria-current="page"] { color: var(--accent); }

.nav-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--on-dark-30);
  font-size: 0.9375rem;
  color: var(--on-dark-50);
}
.nav-menu__foot a { transition: color 0.3s var(--ease); }
.nav-menu__foot a:hover { color: var(--on-dark); }
.nav-menu__socials { display: flex; gap: 1.5rem; }

/* ==========================================================================
   2. ІНТРО — два перші екрани за шаблоном, у чорному ключі
      A. знак, локація, колаж кейсів і велетенський словесний знак
      B. портрет, твердження змішаним набором, кнопка з підкресленням
   ========================================================================== */

.intro { position: relative; }

/* --- A. Перший екран ---------------------------------------------------- */
.intro-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
}

.intro-hero__mark {
  position: absolute;
  z-index: 3;
  inset: 1.5rem auto auto 1.5rem;
  display: block;
}
.intro-hero__mark img { width: 2.8rem; height: auto; }

.intro-hero__loc {
  position: absolute;
  z-index: 3;
  inset: 1.5rem 1.5rem auto auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--ink);
}
/* Глобус — SMIL-порт lottie-іконки шаблону: три меридіани пливуть від
   лівого краю до правого із кроком у третину циклу (1.5 с). */
.intro-hero__globe { display: flex; width: 1.35rem; color: var(--ink-40); }
.intro-hero__globe svg { width: 100%; height: auto; overflow: visible; }

/* Колаж медіа — розкладка шаблону: рамка 3:2 заввишки 38vh, підвішена
   за 40vh від низу першого екрана; кадри звисають за її межі різними
   пропорціями. Центрування — відступом, щоб не займати transform,
   яким рухає сцену анімація. */
.hero-media {
  position: absolute;
  z-index: 20;
  bottom: 40vh;
  left: 50%;
  margin-left: -28.5vh;
  height: 38vh;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.hero-media__item {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.07), 0 26px 50px -30px rgba(10, 10, 10, 0.45);
  will-change: transform;
}
.hero-media__item._1 { position: relative; z-index: 5; width: 96%; max-width: none; aspect-ratio: 16 / 10; }
.hero-media__item._2 { position: absolute; z-index: 6; width: 74%; aspect-ratio: 16 / 10; inset: -30% -26% auto auto; }
.hero-media__item._3 { position: absolute; z-index: 7; width: 78%; aspect-ratio: 16 / 9; inset: -18% auto auto -32%; }
.hero-media__item._4 { position: absolute; z-index: 8; width: 56%; aspect-ratio: 4 / 3; inset: auto auto -30% -24%; }
.hero-media__item._5 { position: absolute; z-index: 9; width: 46%; aspect-ratio: 4 / 3; inset: -32% 22% auto auto; }
.hero-media__item._6 { position: absolute; z-index: 10; width: 60%; aspect-ratio: 16 / 10; inset: auto -22% -28% auto; }

/* ==========================================================================
   3. WORK — світла панель робіт.
      Картка кейса, таби й кнопки повторюють мову головної сторінки:
      біла картка з 1px обведенням, медіа 16:11 з верхнім кропом,
      нижня смуга #F4F3F0 з номером, назвою, категорією та круглою CTA.
   ========================================================================== */

.work {
  width: 100%;
  min-height: 100dvh;
  padding: var(--inset);
}
.work__panel {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - var(--inset) * 2);
  padding: 14vh var(--gutter) clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
}

.cms-work { width: 100%; }

.cms-work__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.6rem);
}

/* Таби — як на головній */
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tab {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-60);
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--ink); border-color: var(--ink-40); }
.tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab:active { transform: scale(0.98); }

.cms-work__count {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}

.work-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px);
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-items: start;
  width: 100%;
}

.work-list {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Пагінація — шість кейсів на сторінку, решта за номерами */
.pager {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pager[hidden] { display: none; }
.pager__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pager__status {
  display: none;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
  padding: 0 0.5rem;
}
.pager__num,
.pager__step {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.55rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-60);
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast),
              border-color var(--t-fast), opacity var(--t-fast);
}
.pager__step { width: 2.6rem; padding: 0; }
.pager__step svg { display: block; }
.pager__num:hover,
.pager__step:not(:disabled):hover { color: var(--ink); border-color: var(--ink-40); }
.pager__num:active,
.pager__step:not(:disabled):active { transform: scale(0.98); }
.pager__num.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  cursor: default;
}
.pager__step:disabled { opacity: 0.3; cursor: default; }

.work-empty {
  grid-column: 1 / -1;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-60);
}
.work-empty[hidden] { display: none; }

/* Картка кейса */
.case {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1vw, 1rem);
  padding: clamp(0.7rem, 0.9vw, 0.95rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 55px -34px rgba(10, 10, 10, 0.28);
  color: inherit;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.case.is-hidden { display: none; }
.case:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -34px rgba(10, 10, 10, 0.36); }
.case:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.case__media {
  position: relative;
  display: block;
  border-radius: calc(var(--r-lg) - 12px);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #111;
}
.case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--t-slow);
}
.case:hover .case__media img { transform: scale(1.045); }

.case__bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0.7rem, 1.1vw, 1.05rem);
  padding: clamp(0.85rem, 1.4vw, 1.3rem) clamp(1rem, 1.6vw, 1.5rem);
  background: var(--bar);
  border-radius: calc(var(--r-lg) - 12px);
}
.case__id { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.case__num { flex: none; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink-40); }
.case__name {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.1;
  color: var(--ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case__cat {
  flex: 0 6 auto;
  min-width: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case__cta {
  margin-left: auto;
  flex: none;
  align-self: center;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: #fff;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding-left: 2px;
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.case__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: translateY(102%);
  transition: transform var(--t-med);
  z-index: 0;
}
.case__cta svg { position: relative; z-index: 1; transition: transform var(--t-fast); }
.case:hover .case__cta { transform: scale(1.06); }
.case:hover .case__cta::after { transform: translateY(0); }
.case:hover .case__cta svg { transform: translate(2px, -2px); }
.case:active .case__cta { transform: scale(0.96); }

@keyframes caseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.case.is-enter { animation: caseIn 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }

.case__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: linear-gradient(150deg, #1b1b1b, #2f2f2f);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  letter-spacing: -0.01em;
}
.case__fallback::before { content: ""; width: 9px; height: 9px; background: var(--accent); }

/* Персональна колонка */
.side {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: clamp(0.7rem, 0.9vw, 0.95rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 55px -34px rgba(10, 10, 10, 0.28);
}
.side > * { flex: 0 0 auto; }

.side__photo {
  border-radius: calc(var(--r-lg) - 12px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #111;
}
.side__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

.side__body { padding: 0 clamp(0.3rem, 0.7vw, 0.6rem); display: flex; flex-direction: column; gap: 1rem; }

.side__name {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.1;
  color: var(--ink);
}
.side__role {
  margin-top: 0.35rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--accent);
}
.side__text { font-size: 0.94rem; line-height: 1.55; color: var(--ink-60); }

.side__cta { display: flex; flex-direction: column; gap: 0.5rem; }

/* Кнопки — мова головної сторінки */
.btn {
  --bg-c: var(--ink);
  --fg-c: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
  padding: 0.8rem 0.85rem 0.8rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--fg-c);
  background: var(--bg-c);
  border-radius: var(--r-full);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(102%);
  transition: transform var(--t-med);
  z-index: 0;
}
.btn:hover { color: #fff; }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: scale(0.975); }
.btn__play {
  display: inline-grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  padding-left: 1px;
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.btn:hover .btn__play { background: rgba(255, 255, 255, 0.32); transform: scale(1.06); }
.btn--accent { --bg-c: var(--accent); --fg-c: #fff; }
.btn--accent::after { background: var(--ink); }

/* ==========================================================================
   4. КОНТАКТ — фінальна панель
   ========================================================================== */

.contact {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  padding: 90px var(--inset) var(--inset);
  overflow: hidden;
}
.contact__bg {
  position: absolute;
  inset: 90px var(--inset) var(--inset);
  z-index: 0;
  border-radius: var(--r);
  background: var(--panel-dark);
  transform-origin: 50% 50%;
  will-change: transform;
}
.contact__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 5vh 1fr 5vh;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  width: 100%;
  min-height: calc(100dvh - 90px - var(--inset));
  padding: 40px var(--gutter);
  color: var(--on-dark-50);
}
.contact__info { display: flex; align-items: flex-start; gap: 4px; }
.contact__info a { color: var(--on-dark); transition: color 0.3s var(--ease); }
.contact__info a:hover { color: var(--accent); }
.contact__info--end { justify-self: end; text-align: right; }

.contact__wrapper {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contact__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 11vw, 13rem);
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--on-dark);
  transition: opacity 0.25s ease;
}
/* Наведення на зону контакту: заголовок гасне, картка проявляється */
.contact__wrapper.is-active .contact__title { opacity: 0.25; }

/* Портрет-картка поверх заголовка, на всю зону — вона ж і є кнопкою */
.contact__figure {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__image {
  position: absolute;
  display: block;
  width: 18%;
  perspective: 200vw;
  perspective-origin: 50%;
  animation: contactFloat 6s ease-in-out infinite;
}
/* Повільне дихання картки */
@keyframes contactFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(3%) scale(0.98); }
}

/* Площина, яку JS нахиляє за мишею (rotateX/Y/Z у перспективі) */
.contact__ratio {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 140%;
  perspective: 200vw;
  perspective-origin: 50%;
  will-change: transform;
}
.contact__frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel-dark);
  opacity: 0.25;
  transition: opacity 0.25s ease;
  box-shadow: 0 36px 64px -16px rgba(0, 0, 0, 0.35), 0 12px 24px -12px rgba(0, 0, 0, 0.35);
  will-change: transform, opacity;
}
.contact__wrapper.is-active .contact__frame { opacity: 1; }
.contact__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(110%); }
.contact__outline {
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
/* Відблиск усередині картки — їде за мишею й обрізається рамкою */
.contact__glow-wrap {
  position: absolute;
  width: 20vw;
  height: 20vw;
  pointer-events: none;
  will-change: transform;
}
.contact__glow {
  position: absolute;
  inset: 0;
  filter: blur(15px);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 75%);
  transform: rotate(45deg) scale(1.2);
}

.contact__socials {
  grid-row: 3;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.contact__social {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--on-dark);
  transition: color 0.4s var(--ease);
}
.magnetic { display: block; will-change: transform; }
.contact__social::after {
  content: "";
  position: absolute;
  left: 1.25rem; right: 1.25rem; bottom: 0.6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.contact__social:hover { color: var(--accent); }
.contact__social:hover::after { transform: scaleX(1); }

.contact__legal { grid-row: 3; grid-column: 1; align-self: end; }
.contact__copy { grid-row: 3; grid-column: 3; align-self: end; justify-self: end; }
.contact__note-1 { grid-row: 1; grid-column: 1; }
.contact__note-2 { grid-row: 1; grid-column: 3; }

/* ==========================================================================
   5. КУРСОР "ПЕРЕЙТИ" — лише на пристроях з мишею
   ========================================================================== */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1;
  text-align: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  will-change: transform;
}
.cursor.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ==========================================================================
   6. РОЗКРИТТЯ ПРИ СКРОЛІ
   ========================================================================== */

body.anim [data-reveal] { opacity: 0; transform: translateY(46px); }
body.anim [data-mask] > img { transform: scale(1.09); }

/* ==========================================================================
   7. АДАПТИВ
   ========================================================================== */

/* Ноутбук */
@media (max-width: 1280px) {
  .work-layout { grid-template-columns: minmax(0, 1fr) clamp(250px, 26vw, 310px); }
  /* Картки вужчі за головну — категорія поступається назвою кейса */
  .case__cat { display: none; }
}

/* Короткі вікна — колонка має вміститись цілком */
@media (min-width: 1024px) and (max-height: 899px) {
  .side { gap: 0.7rem; }
  .side__photo { aspect-ratio: 4 / 5; }
  .side__body { gap: 0.7rem; }
}

/* Планшет */
@media (max-width: 1023px) {
  :root { --gutter: 20px; }

  .navbar { padding: 30px 20px 0; font-size: 16px; }
  .navbar__menu-btn { font-size: 16px; }
  .nav-menu__panel { padding: 100px 20px 20px; }

  .intro-hero__mark { inset: 1.25rem auto auto 1.25rem; }
  .intro-hero__mark img { width: 2.4rem; }
  .intro-hero__loc { inset: 1.25rem 1.25rem auto auto; font-size: 0.9375rem; }
  .hero-media { height: auto; width: 61vw; margin-left: -30.5vw; bottom: 34vh; }
  .intro-word { top: 40px; }

  .work__panel { padding: 14vh var(--gutter) clamp(2.5rem, 8vw, 4rem); }

  .work-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .work-list, .pager, .side { grid-column: 1; grid-row: auto; }
  .side {
    position: static;
    max-height: none;
    overflow: visible;
    order: -1;
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 1rem clamp(1rem, 3vw, 1.75rem);
    align-items: start;
  }
  .side__photo { grid-row: span 2; aspect-ratio: 3 / 4; }
  .side__body { padding: 0; }

  /* Одна колонка: кожен елемент отримує власний рядок, інакше верхні
     примітки лягають одна на одну. */
  .contact__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto auto;
    gap: 0.75rem;
    padding: 30px 20px;
  }
  .contact__note-1,
  .contact__note-2,
  .contact__legal,
  .contact__copy,
  .contact__socials {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }
  .contact__note-1 { grid-row: 1; }
  .contact__note-2 { grid-row: 2; }
  .contact__wrapper { grid-row: 3; grid-column: 1; padding-block: 2.5rem; }
  .contact__image { width: 26%; }
  .contact__socials { grid-row: 4; margin-top: 1rem; }
  .contact__legal { grid-row: 5; }
  .contact__copy { grid-row: 6; }
  .contact__info { justify-content: center; }
  .contact__info--end { justify-self: center; text-align: center; }
}

/* Мобільний */
@media (max-width: 767px) {
  :root { --r: 14px; }

  .hero-media { width: 64vw; margin-left: -32vw; bottom: 32vh; }
  .hero-media__item._1 { width: 100%; }
  .hero-media__item._2 { width: 70%; inset: -22% -16% auto auto; }
  .hero-media__item._3 { width: 74%; inset: -14% auto auto -20%; }
  .hero-media__item._4 { width: 54%; inset: auto auto -22% -14%; }
  .hero-media__item._5 { width: 46%; inset: -24% 14% auto auto; }
  .hero-media__item._6 { width: 58%; inset: auto -12% -20% auto; }

  .work__panel { padding: 12vh var(--gutter) clamp(2.5rem, 8vw, 4rem); }

  .cms-work__bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .tabs {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; scroll-snap-align: start; min-height: 44px; }

  .work-list { grid-template-columns: 1fr; gap: 16px; }

  /* Вузький екран: замість шести номерів — крок і позиція «01 / 06» */
  .pager { flex-wrap: nowrap; }
  .pager__pages { display: none; }
  .pager__status { display: inline-flex; align-items: center; }
  .pager__num, .pager__step { min-width: 44px; height: 44px; }
  .pager__step { width: 44px; }
  .case__cta { width: 44px; height: 44px; }

  .side { grid-template-columns: 1fr; gap: 1rem; }
  .side__photo { grid-row: auto; aspect-ratio: 4 / 5; }

  .contact { padding-top: 60px; }
  .contact__bg { inset: 60px var(--inset) var(--inset); }
  .contact__grid { min-height: calc(100dvh - 60px - var(--inset)); }
  .contact__image { width: 42%; }
  .contact__socials { flex-wrap: wrap; gap: 0.25rem; }
  .contact__social { min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   8. ЗМЕНШЕНИЙ РУХ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.anim [data-reveal] { opacity: 1; transform: none; }
  body.anim [data-mask] > img { transform: none; }
  .contact__image { animation: none; }
  .case.is-enter { animation: none; }
  .hero-media__item { transform: none; }
  .cursor { display: none; }
  .case__media img, .contact__frame, .nav-menu__link { transition: none; }
}