/* ---------- Fonts (self-hosted Raleway, no external requests) ---------- */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --accent: #ff5a2e;
  --tri: #ffd45c; /* the warm yellow of the triangles: marquee, cursor, contact circle */
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='rgba(0,0,0,0.45)' stroke='rgba(0,0,0,0.5)' stroke-width='3'/%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%23ffd45c' stroke-width='1.4'/%3E%3Cpath d='M12.2 9.6Q11 8.9 11 10.3v7.4q0 1.4 1.2.7l6.3-3.7q1.2-.7 0-1.4z' fill='%23ffd45c'/%3E%3C/svg%3E") 14 14, auto;
  --cursor-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='rgba(0,0,0,0.45)' stroke='rgba(0,0,0,0.5)' stroke-width='3'/%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%23ffd45c' stroke-width='1.4'/%3E%3Cpath d='M12.2 9.6Q11 8.9 11 10.3v7.4q0 1.4 1.2.7l6.3-3.7q1.2-.7 0-1.4z' fill='%23ffd45c'/%3E%3C/svg%3E") 14 14, pointer;
  --cursor-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='rgba(0,0,0,0.45)' stroke='rgba(0,0,0,0.5)' stroke-width='3'/%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%23ffd45c' stroke-width='1'/%3E%3Cpath d='M12.2 9.6Q11 8.9 11 10.3v7.4q0 1.4 1.2.7l6.3-3.7q1.2-.7 0-1.4z' fill='%23ffd45c'/%3E%3C/svg%3E") 28 28, pointer; /* bigger over the videos */
  --cursor-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='rgba(0,0,0,0.45)' stroke='rgba(0,0,0,0.5)' stroke-width='3'/%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3Cpath d='M10.2 10.2 17.8 17.8M17.8 10.2 10.2 17.8' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 20 20, pointer; /* a white cross over the close button */
  --cursor-cta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='rgba(0,0,0,0.08)' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M12.2 9.6Q11 8.9 11 10.3v7.4q0 1.4 1.2.7l6.3-3.7q1.2-.7 0-1.4z' fill='%23000'/%3E%3C/svg%3E") 24 24, pointer; /* dark and bigger over the yellow button */
  --bg: #000000;
  --fg: #ffffff;
  --muted: #8c8c8c;
  --line: #262626;
  --nav-bg: rgba(205, 205, 205, 0.4);
  --cta-bg: var(--tri);
  --cta-fg: #000000;
  --tile-glow: rgba(255, 255, 255, 0.22);
  --font-display: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 3.4vw, 48px);
  --ease: cubic-bezier(0.35, 1, 0.6, 1);
  /* iOS-like motion: the system sheet curve, and a soft spring for presses */
  --ios: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-variant-numeric: lining-nums;
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.container { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.html-locked { overflow: hidden; }

/* both languages share one grid cell; the inactive one keeps its space */
.i18n { display: inline-grid; }
.i18n > * { grid-area: 1 / 1; }
html[lang="ru"] .i18n > [lang="en"],
html[lang="en"] .i18n > [lang="ru"] { visibility: hidden; }
[tabindex="-1"]:focus { outline: none; }

/* language change: copy cross-fades instead of jumping */
main, footer, .marquee, .nav { transition: opacity 0.18s ease; }
.is-switching main, .is-switching footer, .is-switching .marquee, .is-switching .nav { opacity: 0; }

/* tactile press feedback, like native apps */
.nav a, .lang button, .cat__btn, .card__btn, .cta, .sheet__close, .footer__links a {
  -webkit-tap-highlight-color: transparent;
}
/* press: quick and soft going in, a gentle spring coming back – like iOS */
.nav a:active, .lang button:active, .sheet__close:active { transform: scale(0.94); transition-duration: 0.1s; transition-timing-function: ease-out; }
.cat__btn:active, .card__btn:active { transform: scale(0.97); transition-duration: 0.12s; transition-timing-function: ease-out; }
.sheet__close { transition: opacity 0.2s, transform 0.45s var(--spring); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* fixed height: the strip is filled by JS, so reserve its line up front (no layout shift) */
.marquee__track { display: flex; align-items: center; width: max-content; height: 14px; animation: marquee 70s linear infinite; }
.marquee:hover .marquee__track,
.marquee.is-offscreen .marquee__track { animation-play-state: paused; }
/* moved by script (it can be dragged): no CSS animation, horizontal drags
   belong to the strip, vertical ones still scroll the page */
.marquee.is-draggable { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.marquee.is-draggable .marquee__track { animation: none; will-change: transform; }
.marquee.is-dragging { cursor: grabbing; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__item { display: flex; align-items: baseline; gap: 30px; padding-inline: 36px; white-space: nowrap; }
/* a quiet strip, like credits: small grey names, darker notes, slow */
.marquee__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(12px, 0.95vw, 14px); letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; color: #8c8c8c; }
.marquee__note { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #565656; }
.marquee__sep { flex: none; width: 10px; height: 10px; color: var(--tri); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Language switch ----------
   "RU / EN" in the site type, the current language white, the other grey.
   It has one fixed place just under the brand strip, lined up with the
   right edge of the videos, and scrolls away with the page. */
.masthead { position: relative; }
.lang {
  position: absolute; z-index: 5; top: 16px;
  /* the work grid is at most 1040px wide and centred: line up with its edge */
  right: calc(var(--gutter) + max(0px, (100% - 2 * var(--gutter) - 1040px) / 2));
  display: flex; align-items: center; gap: 2px;
}
.lang button {
  position: relative; padding: 8px 4px 8px calc(4px + 0.24em); border: 0; background: none; cursor: var(--cursor-link);
  font-family: var(--font-display); font-size: 12px; font-weight: 400; letter-spacing: 0.24em;
  color: #6f6f6f; transition: color 0.25s, transform 0.15s ease;
}
.lang button + button::before {
  content: "/"; position: absolute; left: -4px; color: #3d3d3d; letter-spacing: 0; pointer-events: none;
}
.lang button[aria-pressed="true"] { color: #fff; cursor: default; }
.lang button[aria-pressed="false"]:hover { color: #cfcfcf; }

/* ---------- Header ---------- */
.masthead { text-align: center; padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 64px); }
.masthead__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(26px, 7vw, 108px); line-height: 1; letter-spacing: 0.04em; padding-left: 0.04em;
}
.masthead__sub {
  margin: 20px 0 0; font-size: clamp(11px, 1vw, 14px); letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--muted); padding-left: 0.42em;
}
/* one plain line of what the studio does, and a quiet way to get in touch */
.masthead__offer {
  margin: 26px auto 0; max-width: 34em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5;
  color: #bdbdbd; text-wrap: balance;
}
.masthead__cta {
  background: none; border-width: 0 0 1px; border-style: solid; font-family: inherit; cursor: var(--cursor-link);
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 2px;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--tri);
  border-bottom: 1px solid rgba(255, 212, 92, 0.35); transition: border-color 0.3s var(--ease), color 0.3s;
}
.masthead__cta svg { width: 9px; height: 9px; transition: transform 0.3s var(--ease); }
.masthead__cta:hover { border-color: var(--tri); }
.masthead__cta:hover svg { transform: translateX(3px); }
/* "Discuss a project" at the top unfolds in place: the words lift away and
   three yellow buttons – mail, Telegram, WhatsApp – roll out one by one;
   a click anywhere else folds them back */
.hero-contact { position: relative; display: inline-flex; align-items: center; min-height: 56px; margin-top: 22px; }
.masthead__cta { transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), border-color 0.3s var(--ease), color 0.3s; }
.hero-contact.is-open .masthead__cta { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.hero-ways {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 16px; pointer-events: none;
}
.hero-ways a {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; padding: 0; border: 0;
  background: var(--tri); color: #000;
  opacity: 0; transform: translateY(8px) scale(0.4) rotate(-40deg);
  transition: opacity 0.25s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.hero-ways svg { width: 24px; height: 24px; }
.hero-contact.is-open .hero-ways { pointer-events: auto; }
.hero-contact.is-open .hero-ways > * { opacity: 1; transform: none; }
.hero-contact.is-open .hero-ways > :nth-child(2) { transition-delay: 0.06s; }
.hero-contact.is-open .hero-ways > :nth-child(3) { transition-delay: 0.12s; }
.hero-ways a:hover { box-shadow: 0 6px 20px rgba(255, 212, 92, 0.45); transform: translateY(-2px) scale(1.06); transition-delay: 0s; }


/* ---------- Category grid ---------- */
/* phones: one large tile per row (like TIHO); from 760px: two per row */
.cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  padding-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 760px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; } }
.cat { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity 0.4s var(--ease); }
@media (min-width: 760px) { .cat { gap: 20px; } }
@media (hover: hover) {
  .cats:hover .cat:not(:hover) { opacity: 0.45; }
}
.cat__btn, .card__btn {
  position: relative; width: 100%; border: 0; padding: 0; overflow: hidden;
  border-radius: 12px; background: #141414; cursor: var(--cursor-link);
  transition: box-shadow 0.5s var(--ios), transform 0.55s var(--spring);
}
@media (hover: hover) and (pointer: fine) {
  .cat__btn:hover, .card__btn:not(.is-playing):hover { transform: scale(1.012); }
  .cat__btn:hover:active, .card__btn:not(.is-playing):hover:active { transform: scale(0.97); transition-duration: 0.12s; }
}
.cat__btn { aspect-ratio: 4 / 3; border-radius: 12px; }
@media (min-width: 760px) {
  .cat__btn { border-radius: 12px; }
  /* odd last tile spans the full row at the same height */
  .cat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cat:last-child:nth-child(odd) .cat__btn { aspect-ratio: 8 / 3; }
}
/* desktop: three tiles in the first row, then two – less to scroll */
@media (min-width: 1100px) {
  /* a calmer size: the grid stays narrower than the page */
  .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px 24px; max-width: 1040px; margin-inline: auto; }
  .cat { grid-column: span 2; }
  .cat:nth-child(5n + 4), .cat:nth-child(5n + 5) { grid-column: span 3; }
  .cat:last-child:nth-child(odd) { grid-column: span 3; }
  /* wider tiles keep the height of the row above */
  .cat:nth-child(5n + 4) .cat__btn, .cat:nth-child(5n + 5) .cat__btn { aspect-ratio: 2 / 1; }
  /* four sections: two rows of two wide tiles */
  .cat:first-child:nth-last-child(4), .cat:first-child:nth-last-child(4) ~ .cat { grid-column: span 3; }
  .cat:first-child:nth-last-child(4) .cat__btn, .cat:first-child:nth-last-child(4) ~ .cat .cat__btn { aspect-ratio: 16 / 9; }
}
/* YouTube-like cards: thumbnails with a soft 12px rounding, no glow; on
   hover a quiet grey panel lights up behind the whole card (thumbnail
   and title together) */
.cat, .card { position: relative; isolation: isolate; }
.cat::before, .card::before {
  content: ""; position: absolute; inset: -8px; z-index: -1; border-radius: 18px;
  background: rgba(255, 255, 255, 0.07); opacity: 0; transform: scale(0.98);
  transition: opacity 0.3s var(--ios), transform 0.45s var(--ios); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .cat:hover::before, .card:hover::before { opacity: 1; transform: none; }
}
.cat__btn video, .cat__btn img, .card__btn video, .card__btn img, .card__btn iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
/* the previews run 2px past every edge of their rounded tile: no hairline
   of the tile (or of a video's own edge row) can peek through after
   sub-pixel rounding */
.cat__btn video, .cat__btn img, .card__btn video, .card__btn img {
  inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px);
}
.vignette { position: absolute; inset: 0; box-shadow: inset 0 0 clamp(40px, 6vw, 90px) clamp(12px, 2vw, 30px) rgba(0, 0, 0, 0.6); pointer-events: none; }
.cat__label {
  font-size: 13px; letter-spacing: 0.3em; line-height: 1.4; text-transform: uppercase;
  padding-left: 0.3em; text-align: center;
  color: #9a9a9a; transition: color 0.35s var(--ease);
}
.cat:hover .cat__label, .cat:focus-within .cat__label { color: #fff; }
@media (min-width: 760px) { .cat__label { font-size: clamp(14px, 1.2vw, 18px); letter-spacing: 0.32em; padding-left: 0.32em; } }

/* placeholder until preview loops are added */
.placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.placeholder__note {
  position: absolute; left: 12px; top: 10px; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #9a9a9a;
}
.meter { display: flex; align-items: flex-end; gap: clamp(4px, 0.6vw, 8px); height: clamp(32px, 4.4vw, 64px); }
.meter i {
  display: block; width: clamp(5px, 0.7vw, 10px); height: 100%; border-radius: 5px; background: rgba(255, 255, 255, 0.45);
  transform-origin: 50% 100%; animation: level 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.meter i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.9s; }
.meter i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.3s; }
.meter i:nth-child(4) { animation-delay: -0.2s; animation-duration: 1s; }
.meter i:nth-child(5) { animation-delay: -0.55s; animation-duration: 1.2s; }
@keyframes level { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

/* ---------- Category dialog ---------- */
.sheet {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--fg); overflow-y: auto;
}
.sheet::backdrop { background: var(--bg); }
/* opens like an iOS sheet: rises from below on the system curve; its
   cards follow one after another; closes by sliding back down */
.sheet[open] { animation: sheet-in 0.6s var(--ios); }
.sheet.is-closing { animation: sheet-out 0.34s cubic-bezier(0.4, 0, 0.8, 0.3) forwards; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14vh); } 40% { opacity: 1; } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(10vh); } }
.sheet[open] .card { animation: card-in 0.7s var(--ios) both; }
.sheet[open] .card:nth-child(2) { animation-delay: 0.05s; }
.sheet[open] .card:nth-child(3) { animation-delay: 0.1s; }
.sheet[open] .card:nth-child(4) { animation-delay: 0.15s; }
.sheet[open] .card:nth-child(n + 5) { animation-delay: 0.2s; }
@keyframes card-in { from { opacity: 0; transform: translateY(28px); } }
.sheet__head {
  position: sticky; top: 0; z-index: 1; background: var(--bg);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0 28px;
}
.sheet__title {
  margin: 0; font-weight: 500; font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.3em; text-transform: uppercase;
}
.sheet__close {
  flex: none; width: 60px; height: 60px; border: 1px solid var(--line); background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: var(--cursor-link);
}
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: 48px 32px; padding-bottom: 120px;
}
/* vertical videos: columns of a fixed share, centred, so a short row
   (two videos) sits in the middle instead of leaving room on the right */
.cards--vertical { --cols: 2; --gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px var(--gap); }
.cards--vertical .card { width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (min-width: 760px) { .cards--vertical { --cols: 4; --gap: 24px; row-gap: 48px; } }
.cards--vertical .card__btn { aspect-ratio: 9 / 16; }
.cards--vertical .card__play { width: 56px; height: 56px; }
.cards--vertical .card__caption { font-size: 12px; letter-spacing: 0.22em; padding-left: 0.22em; }
.card { display: flex; flex-direction: column; gap: 16px; }
.card__btn { aspect-ratio: 16 / 9; color: #fff; }
.card__play {
  position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease);
}
.card__btn:hover .card__play { transform: scale(1.06); }
.card__btn.is-playing { cursor: auto; }
/* dark, not white, while the player is still loading: the frame waits
   hidden over a slow dark shimmer and fades in once it has loaded */
.card__btn iframe { background: #111; color-scheme: dark; transition: opacity 0.5s var(--ease); }
.card__btn.is-loading iframe { opacity: 0; }
.card__btn.is-loading:not(.has-preview)::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, #111 30%, #1d1d1d 50%, #111 70%) 0 0 / 300% 100%;
  animation: card-shimmer 1.4s linear infinite;
}
@keyframes card-shimmer { to { background-position: -150% 0; } }
/* our own quiet loader while the player gets ready: the preview dims and
   a thin yellow arc turns where the play button was */
.card__btn video { transition: filter 0.5s var(--ios); }
.card__btn.is-loading video { filter: brightness(0.45) saturate(0.8); }
.card__btn.is-loading::after {
  content: ""; position: absolute; z-index: 3; left: 50%; top: 50%;
  width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
  border: 1.5px solid rgba(255, 212, 92, 0.18); border-top-color: var(--tri);
  animation: card-spin 0.9s linear infinite, card-loader-in 0.4s var(--ios) both;
}
@keyframes card-spin { to { transform: rotate(360deg); } }
@keyframes card-loader-in { from { opacity: 0; } }
/* names under the videos: the same type as the section labels */
.card__caption {
  font-family: var(--font-display); font-weight: 400; font-size: 13px; line-height: 1.4;
  letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; text-align: center;
  color: #9a9a9a; transition: color 0.35s var(--ease);
}
.card:hover .card__caption { color: #fff; }
.card__caption { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.card__role {
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; padding-left: 0;
  text-transform: none; color: var(--muted);
}
.cards--vertical .card__role { font-size: 11px; }
@media (min-width: 760px) { .card__caption { font-size: clamp(13px, 1vw, 15px); } }
.card__soon {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 13px;
}

/* the brand strip, after the contact button and before the footer: a
   middle voice – larger and lighter than the quiet strip, not shouting */
.marquee--loud { border-top: 1px solid var(--line); padding: 15px 0; }
.marquee--loud .marquee__track { height: 15px; animation-duration: 66s; }
.marquee--loud .marquee__item { gap: 30px; padding-inline: 36px; }
.marquee--loud .marquee__name { font-size: clamp(12px, 1vw, 15px); letter-spacing: 0.18em; color: #9e9e9e; }
.marquee--loud .marquee__note { font-size: 10.5px; color: #5c5c5c; }
.marquee--loud .marquee__sep { width: 10px; height: 10px; }

/* ---------- About ---------- */
.about { padding: clamp(56px, 6vw, 96px) 0 clamp(80px, 10vw, 140px); }
.eyebrow {
  margin: 0 0 10px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
/* phone: small photo beside the name, text below */
.about__inner {
  display: grid; grid-template-columns: 112px minmax(0, 1fr);
  grid-template-areas: "photo head" "body body"; column-gap: 20px; row-gap: 28px; align-items: center;
}
.about__photo {
  grid-area: photo; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; background: #1a1a1a;
}
.about__head { grid-area: head; }
.about__lead {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.25;
}
.about__body {
  grid-area: body; max-width: 560px;
  font-weight: 400; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; color: #c9c9c9;
}
.about__body > span { display: block; }
.about__body > span + span { margin-top: 0.9em; }
/* desktop: photo left, name and text to the right, centred against the photo */
@media (min-width: 760px) {
  .about__inner {
    max-width: 1080px; grid-template-columns: 340px minmax(0, 1fr);
    grid-template-areas: "photo head" "photo body"; grid-template-rows: auto auto;
    column-gap: clamp(48px, 6vw, 96px); row-gap: 24px; align-content: center;
  }
  .about__photo { border-radius: 14px; align-self: center; }
  .about__head { align-self: end; }
  .about__body { align-self: start; }
  .eyebrow { font-size: 12px; margin-bottom: 14px; }
}

/* line reveal on scroll (progressive enhancement) */
@supports (animation-timeline: view()) {
  .reveal > span { display: block; overflow: hidden; }
  .reveal > span > span {
    display: block; transform-origin: bottom left;
    animation: rise linear both; animation-timeline: view(); animation-range: entry 10% entry 90%;
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(70%) rotateX(20deg); } to { opacity: 1; transform: none; } }

/* ---------- Contact ---------- */
.contact {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  padding: 40px 0 clamp(96px, 12vw, 160px);
}
/* a small line above the button, then the button itself */
.contact__kicker {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.3em; padding-left: 0.3em;
  text-transform: uppercase; color: #9a9a9a; text-align: center;
  display: inline-flex; align-items: center; gap: 10px;
}
.contact__kicker svg { width: 9px; height: 9px; color: var(--tri); flex: none; }
/* a yellow capsule with the arrow in a black disc at its end. Now and then
   a thin glint runs across it; on computers it is pulled toward a nearby
   pointer like a magnet (--mx/--my are set by main.js) */
.contact__action { position: relative; }
.cta {
  --mx: 0px; --my: 0px; border: 0; font: inherit; cursor: var(--cursor-link);
  position: relative; display: inline-flex; align-items: center; gap: 16px; overflow: hidden;
  padding: 8px 8px 8px 26px; border-radius: 999px;
  background: var(--cta-bg); color: var(--cta-fg);
  transform: translate(var(--mx), var(--my));
  transition: transform 0.35s var(--ease), box-shadow 0.5s var(--ease);
}
.cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%);
  transform: translateX(-120%); animation: cta-glint 4.5s ease-in-out infinite;
}
.cta__text, .cta svg { position: relative; z-index: 1; }
.cta svg {
  flex: none; width: 46px; height: 46px; padding: 12px; border-radius: 50%;
  background: #000; color: var(--tri);
  transform: translate(calc(var(--mx) * 0.5), calc(var(--my) * 0.5));
  transition: transform 0.35s var(--ease);
}
.cta:hover { box-shadow: 0 10px 40px rgba(255, 212, 92, 0.3); }
.cta:hover svg { transform: translate(calc(var(--mx) * 0.5 + 2px), calc(var(--my) * 0.5 - 2px)) scale(1.08); }
.cta:active { transform: translate(var(--mx), var(--my)) scale(0.97); transition-duration: 0.12s; }
@media (max-width: 400px) {
  .cta { gap: 12px; padding: 6px 6px 6px 22px; }
  .cta svg { width: 40px; height: 40px; padding: 10px; }
  .cta__text { font-size: 15px; }
}
/* the small card that opens above the button: mail, Telegram, WhatsApp */
.contact-menu {
  position: absolute; z-index: 35; left: 50%; bottom: calc(100% + 14px);
  display: flex; gap: 6px; padding: 10px; border-radius: 22px;
  background: rgba(18, 18, 18, 0.96); border: 1px solid #2a2a2a; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  transform: translateX(-50%) translateY(10px) scale(0.9); transform-origin: 50% 100%;
  opacity: 0; transition: opacity 0.22s var(--ios), transform 0.5s var(--spring);
}
.contact-menu[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.contact-menu.is-open { opacity: 1; transform: translateX(-50%); }
.contact-menu::after { /* a little tail pointing at the button */
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border-right: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; transform: rotate(45deg);
}
.contact-menu a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 84px; padding: 12px 10px 10px;
  border-radius: 14px; font-size: 12px; letter-spacing: 0.06em; color: #d6d6d6; transition: background-color 0.2s, color 0.2s;
}
.contact-menu a:hover, .contact-menu a:focus-visible { background: #1f1f1f; color: #fff; }
.contact-menu__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--tri); color: #000; transition: transform 0.3s var(--ease);
}
.contact-menu__icon svg { width: 22px; height: 22px; }
.contact-menu a:hover .contact-menu__icon { transform: translateY(-2px) scale(1.06); }
.cta__text {
  font-family: var(--font-display); font-weight: 400; white-space: nowrap;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.15; letter-spacing: 0.01em;
}
@keyframes cta-glint {
  0%, 62% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
}

/* ---------- Footer ---------- */
.footer { padding-bottom: 150px; }
.footer__grid {
  padding: 40px 0 56px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; font-size: 16px;
}
.footer__links { display: flex; flex-direction: column; gap: 4px; }
.footer__links a:hover, .footer__mail:hover { color: var(--accent); }
.muted { color: var(--muted); }
.footer__word {
  font-family: var(--font-display); font-weight: 200; text-transform: uppercase;
  font-size: clamp(20px, 6.6vw, 98px); line-height: 1; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-align: center;
}

/* developer credit: quiet and grey, one link right under the copyright */
.footer__credit { display: inline-block; margin-top: 6px; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease); }
.footer__credit:hover { color: #fff; }

/* ---------- Bottom nav pill ---------- */
.nav {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px;
  /* see-through, with a light blur behind so the words stay readable over video */
  background: var(--nav-bg); color: #000;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  font-size: 17px; white-space: nowrap; transition: background-color 0.4s var(--ease);
}
.nav a { padding: 12px 16px; transition: opacity 0.2s, transform 0.15s ease; }
.nav a:hover { opacity: 0.6; }
/* phones: an even rhythm – no tall empty bands between blocks */
@media (max-width: 759px) {
  /* more air above the name: calmer, and the name stands out */
  .masthead { padding: 104px 0 36px; }
  .lang { top: 18px; }
  .about { padding: 48px 0 32px; }
  .contact { gap: 24px; padding: 24px 0 56px; }
  .footer { padding-bottom: 110px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 32px 0 36px; font-size: 15px; }
  .footer__mail, .footer__grid > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .nav { padding-left: 12px; font-size: 15px; bottom: 16px; }
  .nav a { padding: 12px 10px; }
}

@media (min-width: 760px) {
  .nav { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.4s var(--ease); }
  .nav.is-away { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }
}

/* ---------- Scroll trail (drawn by assets/js/trail.js) ---------- */
.trail { position: absolute; top: 0; left: 0; z-index: 30; pointer-events: none; overflow: visible; }

/* ---------- Cursor: a yellow play button – thin ring, small triangle (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  html { cursor: var(--cursor); }
  a, button, label, summary, [role="button"] { cursor: var(--cursor-link); }
  .cat__btn, .card__btn { cursor: var(--cursor-video); }
  .sheet__close, .sheet__close * { cursor: var(--cursor-close); }
  .cta, .cta * { cursor: var(--cursor-cta); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { overflow-x: auto; }
}

/* preview loops fade in over the poster once playback has started */
.cat__btn video { opacity: 0; transition: opacity 0.5s var(--ease); }
.cat__btn video.is-ready { opacity: 1; }