@font-face {
  font-family: "Tilda Sans VF";
  src: url("../fonts/TildaSansVF.ttf") format("truetype-variations"),
       url("../fonts/TildaSansVF.ttf") format("truetype");
  font-weight: 250 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-text: #252525;
  --color-text-muted: #666666;
  --color-accent: #0d0dc0;
  --color-bg: #ffffff;
  --color-muted-bg: #f6f6f6;
  --color-border: #d8d8d8;
  --color-arrow-idle: #929396;

  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: "Inter Tight", -apple-system, sans-serif;

  --container-width: 1200px;
  --container-width-wide: clamp(1200px, 92vw, 1600px);
  --container-padding: 40px;

  /* Ceiling for any photo that is meant to fit on screen rather than fill
     the column: the gallery slider, the media rows, and the framed project
     blocks all measure against it, which is what keeps a photo the same
     size in a framed block as it is in the carousel. */
  --media-frame-height: min(72vh, 820px);

  /* The frame's width, derived from that height at 3:2 — the ratio most of
     the photography is shot at. Two stacked verticals are wider than one
     horizontal at equal height, so without a shared width the "pair" and
     "single" blocks would not line up with each other. */
  --media-frame-width: min(100%, calc(var(--media-frame-height) * 3 / 2));
}

/* Dark theme: manual toggle only (see .theme-toggle), remembered in
   localStorage — the site never switches on its own. Everything below
   already reads color through these variables, so redefining them here
   is enough to repaint the whole site, flip cards included. */
:root[data-theme="dark"] {
  --color-text: #ffffff;
  --color-text-muted: #9a9a9a;
  --color-accent: #0409ed;
  --color-bg: #000000;
  --color-muted-bg: #141414;
  --color-border: #2e2e2e;
  --color-arrow-idle: #6a6a6a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: var(--container-width-wide);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Blog articles (incl. the Figma-exact fallback templates and their
   1120px-based title line-wrap math in single.php) stay boxed at the
   original 1200px — every other page is free to breathe on wide screens. */
.single-post .container {
  max-width: var(--container-width);
}

.section-title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  text-transform: uppercase;
}

.slash {
  color: var(--color-accent);
}

.icon {
  flex-shrink: 0;
}

/* Custom cursor */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.25s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
}

.cursor--hover {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

@media (pointer: fine) {
  body {
    cursor: none;
  }

  a,
  button {
    cursor: none;
  }
}

@media (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* Home hero */

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: #818181;
  color: #fff;
  overflow: hidden;
}

.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.home-hero__video--mobile {
  display: none;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.home-hero__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  z-index: 100;
}

.home-hero__mark {
  display: block;
  line-height: 0;
}

.home-hero__mark img {
  display: block;
  width: 30px;
  height: auto;
}

.home-hero__nav {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
}

.home-hero__nav a {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.home-hero__nav a:hover {
  opacity: 1;
}

.home-hero__projects {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  transition: opacity 0.2s ease;
}

.home-hero__projects:hover {
  opacity: 0.8;
}

/* Same grouping trick as .header__actions, for the hero's own header row. */
.home-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.home-hero__bottom {
  margin-top: auto;
  padding-bottom: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.home-hero__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-hero__title {
  margin: 0;
  font-family: "Tilda Sans VF", "Inter Tight", -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 8vw, 80px);
  line-height: 1.2;
  white-space: nowrap;
}

.home-hero__title-break {
  display: none;
}

.home-hero__tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.2;
}

.home-hero__contact {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  transition: opacity 0.2s ease;
}

.home-hero__contact:hover {
  opacity: 0.8;
}

.home-hero .header__burger span {
  background: var(--color-bg);
}

.home-hero .header__burger.is-open span {
  background: var(--color-accent);
}

/* Header */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 32px 0;
  background: var(--color-bg);
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header__link {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
}

/* Groups Связаться + the theme toggle + the burger as a single flex item,
   so adding the toggle doesn't shift where header__row's own
   space-between puts Проекты / this cluster (the burger is display:none
   on desktop anyway, so this cluster is just Связаться + toggle there). */
.header__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Shared active-state dot (header link, filters) */

.dot {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header__nav-item {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  opacity: 0.6;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.header__nav-item:hover,
.header__link:hover {
  color: var(--color-accent);
  opacity: 1;
}

.header__nav-item--active {
  color: var(--color-accent);
  opacity: 1;
}

.header__nav-item--active .dot,
.header__link--active .dot,
.filter--active .dot {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.header__link--active {
  color: var(--color-accent);
}

/* Theme toggle (light/dark) */

.theme-toggle {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
}

.theme-toggle__track {
  position: relative;
  /* Flex, not block: a block track lets the thumb's top margin collapse
     through it, which pins the thumb to the top edge of the pill. */
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 0 3px;
  border-radius: 11px;
  background: var(--color-border);
  transition: background 0.2s ease;
}

.theme-toggle__thumb {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.theme-toggle__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  color: var(--color-arrow-idle);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.theme-toggle__icon--sun {
  opacity: 1;
}

html[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
}

html[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  color: var(--color-accent);
}

html[data-theme="dark"] .theme-toggle__track {
  background: var(--color-accent);
}

html[data-theme="dark"] .theme-toggle__thumb {
  transform: translateX(18px);
}

/* Burger */

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 21px;
  padding: 0;
  border: none;
  background: none;
}

.header__burger span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.header__burger.is-open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.header__burger.is-open span:nth-child(2) {
  opacity: 0;
}

.header__burger.is-open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Accent blue sits at roughly 2:1 against the dark theme's black page and
   the close cross all but vanished on it; the bars follow the text colour
   instead. Also covers .home-hero's bars, which are keyed to --color-bg
   and would otherwise turn black-on-dark-video once the theme flipped. */
html[data-theme="dark"] .header__burger span {
  background: var(--color-text);
}

/* Mobile menu overlay */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 120px var(--container-padding) 40px;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
}

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

.mobile-menu__item {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.mobile-menu__item--active {
  color: var(--color-accent);
  font-weight: 500;
}

.mobile-menu__item--active .dot {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.mobile-menu__item:hover {
  color: var(--color-accent);
}

.mobile-menu__item--accent {
  margin-top: 18px;
}

.mobile-menu__theme-toggle {
  margin-top: 18px;
}

/* Hero */

.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  padding-top: 110px;
}

.hero__mark img {
  width: 355px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 702px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  opacity: 0.6;
}

/* Projects */

.projects {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 60px;
}

/* The slider wrapper took the banner and pager out of .projects' flex flow,
   so it has to reproduce the 32px gap they used to get from the parent. */
.projects__slider {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.projects__banner {
  display: block;
  overflow: hidden;
}

/* Slides are toggled with the [hidden] attribute, which the display rule
   above would otherwise override. */
.projects__banner[hidden],
.projects__pager-link[hidden] {
  display: none;
}

.projects__banner img {
  width: 100%;
  height: 490px;
  object-fit: cover;
}

.projects__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Pager controls are <button>s (they page the slider rather than navigate),
   so the browser's button chrome has to be reset back to the link look. */
.projects__pager-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.projects__pager-link:hover {
  color: var(--color-accent);
}

/* The next-link's box already sits flush right; its text has to follow, or a
   title that wraps leaves the short last line ragged against the edge. */
.projects__pager-link--next {
  text-align: right;
}

/* Clients marquee */

.clients {
  margin-top: 120px;
}

/* Tracks .container's wide max-width — pinned to the old 1200px it sat
   200px inboard of every neighbouring section on a 1600px container, so
   "Наши клиенты" read as a misaligned heading. */
.clients__inner {
  max-width: var(--container-width-wide);
  margin: 0 auto;
}

.clients__title {
  padding: 0 var(--container-padding);
  margin-bottom: 32px;
}

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 90s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 90px;
  padding-right: 10px;
  flex-shrink: 0;
}

.marquee__item {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__sep {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text);
}

.marquee__sep--accent {
  color: var(--color-accent);
  opacity: 0.8;
  letter-spacing: 1px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Awards */

.awards {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.awards__title {
  align-self: stretch;
}

.awards__list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.award {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 0;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.award + .award {
  border-top: 1px solid var(--color-border);
}

.award__year {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.3;
}

.award__name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  white-space: nowrap;
}

.award__arrow {
  margin-left: auto;
  transition: transform 0.25s ease;
}

.award--accent {
  color: var(--color-accent);
}

.award:hover {
  color: var(--color-accent);
}

.award:hover .award__arrow {
  transform: translate(3px, -3px);
}

.award--hidden {
  display: none;
}

.awards__more {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-accent);
}

.awards__more .icon {
  transition: transform 0.25s ease;
}

.awards__more--expanded .icon {
  transform: rotate(180deg);
}


/* Principles */

.principles {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.principles__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.principles__nav {
  display: flex;
  gap: 16px;
}

.principles__arrow {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.principles__arrow:disabled {
  opacity: 0.3;
}

.principles__arrow:not(:disabled):hover {
  color: var(--color-accent);
}

.principles__viewport {
  overflow: hidden;
}

.principles__track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.principle {
  flex: 0 0 265px;
  height: 377px;
  perspective: 1400px;
}

.principle__rotor {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.principle.is-flipped .principle__rotor {
  transform: rotateY(180deg);
}

/* Hover/focus would latch the card open on touch, so it is pointer-only */
@media (hover: hover) {
  .principle:hover .principle__rotor,
  .principle:focus-within .principle__rotor {
    transform: rotateY(180deg);
  }
}

.principle__face {
  position: absolute;
  inset: 0;
  padding: 24px;
  background: var(--color-muted-bg);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.principle__face--front {
  transform: rotateY(0deg);
}

.principle__face--back {
  transform: rotateY(180deg);
}

.principle__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
}

.principle__back-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text);
  opacity: 0.6;
}

.principle__shape {
  position: absolute;
  left: 24px;
  top: 233px;
  width: 120px;
  height: 120px;
}

.principle__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
}

.principle__arrow--blue {
  color: var(--color-accent);
}

/* CTA / contact form */

.cta {
  margin-top: 120px;
  /* Keeps the "С чего начинается..." heading from landing under the sticky
     header on a fresh #contact navigation, before main.js's own centering
     (which accounts for the header precisely) has a chance to run. */
  scroll-margin-top: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 74px;
}

.cta__info {
  position: relative;
  flex: 0 0 518px;
  display: flex;
  flex-direction: column;
  gap: 92px;
}

.cta__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cta__subtitle {
  margin: 0;
  max-width: 406px;
  font-size: 20px;
  line-height: 1.3;
  opacity: 0.6;
}

.cta__phone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta__phone-label {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  opacity: 0.6;
}

.cta__phone-number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
}

.cta__squiggle {
  position: absolute;
  left: 255px;
  top: 135px;
  width: 270px;
  height: 238px;
  pointer-events: none;
  overflow: visible;
}

.cta__squiggle-reveal {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.cta__squiggle-arrow {
  stroke: #1515e0;
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.cta__squiggle.is-drawn .cta__squiggle-reveal {
  animation: draw-squiggle-arrow 1.25s ease-out forwards;
}

@keyframes draw-squiggle-arrow {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta__squiggle-reveal {
    stroke-dashoffset: 0;
    animation: none !important;
  }
}

.cta__form {
  flex: 0 0 550px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.form__fields {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form__row {
  display: flex;
  gap: 20px;
}

.form__row .form__field {
  flex: 1 1 0;
  min-width: 0;
}

.form__input {
  width: 100%;
  padding: 0 0 16px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
}

.form__input::placeholder {
  color: var(--color-text);
  opacity: 0.5;
}

.form__input:focus {
  border-color: var(--color-accent);
}

.form__consent {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.form__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form__checkbox-box {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 1px solid var(--color-accent);
  position: relative;
  transition: background 0.2s ease;
}

.form__checkbox:checked + .form__checkbox-box {
  background: var(--color-accent);
}

.form__consent-text {
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.5;
}

.form__consent-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.form__consent-link:hover {
  opacity: 0.7;
}

.form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.form__submit:hover {
  opacity: 0.9;
}

/* Shared button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.btn--accent:hover {
  opacity: 0.9;
}

/* Team */

.team {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.team__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.team__lead {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  text-align: justify;
}

.team__highlight {
  display: inline-block;
  padding: 2px 12px;
  background: var(--color-accent);
  color: #fff;
  transform: rotate(-2deg);
}

.team__cols {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.team__paragraphs {
  flex: 0 0 693px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team__paragraphs p {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  opacity: 0.6;
}

.team__vacancy {
  flex: 0 0 265px;
}

.team__departments {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.department {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.department__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.department__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  text-transform: uppercase;
}

.department__nav {
  display: flex;
  gap: 16px;
}

.department__arrow {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.department__arrow:disabled {
  opacity: 0.3;
}

.department__arrow:not(:disabled):hover {
  color: var(--color-accent);
}

.team__viewport {
  overflow: hidden;
}

.team__grid {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.member {
  flex: 0 0 calc((100% - 80px) / 5);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.member__photo {
  aspect-ratio: 360 / 445;
  overflow: hidden;
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member__name {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}

.member__role {
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.7;
}

/* Footer */

.footer {
  margin-top: 120px;
  padding: 40px 0 60px;
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.footer__nav {
  flex: 0 0 265px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 419px;
}

.footer__nav-item {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-accent);
  transition: opacity 0.2s ease;
}

.footer__nav-item:hover {
  opacity: 0.7;
}

.footer__contacts {
  flex: 0 0 451px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 419px;
}

.footer__coords {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__coord {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text);
}

.footer__socials {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 140px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.footer__social:hover {
  opacity: 0.7;
}

.footer__address {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__address-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
}

.footer__address-text {
  margin: 0;
  max-width: 375px;
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.6;
}

.footer__cta {
  flex: 0 0 364px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  min-height: 419px;
}

.footer__form-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__form-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
}

.form--compact {
  gap: 24px;
}

.form--compact .form__fields {
  gap: 16px;
}

.form--compact .form__input {
  font-size: 16px;
  padding-bottom: 16px;
}

.form--compact .form__consent-text {
  font-size: 14px;
  opacity: 0.6;
}

.form--compact .form__submit {
  padding: 14px 24px;
  font-size: 14px;
}

.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text);
}

.footer__legal-link {
  transition: opacity 0.2s ease;
}

.footer__legal-link:hover {
  opacity: 0.7;
}

/* Project detail page */

.project {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.project__pager {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.project__pager-link {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Long titles need a real column to wrap into instead of running past
     their natural (shrink-to-fit) width into the other link — that's what
     made two long titles collide on one line with no gap between them. */
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.project__pager-link--next {
  justify-content: flex-end;
  text-align: right;
}

.project__pager-link:hover {
  color: var(--color-accent);
}

/* Intro */

.project__intro {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 60px;
}

.project__intro-media {
  position: relative;
  flex: 0 0 487px;
  min-height: 392px;
  overflow: hidden;
}

.project__intro-media img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__intro-info {
  flex: 0 0 487px;
  /* Without this a flex item's automatic minimum size lets the params row
     (whose values are nowrap) push the column past its 487px basis, so the
     text column width — and the gap to the photo — drifted from project to
     project depending on how long "Площадь / Статус / Виды работ" were. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

/* Params spread across the fixed column instead of setting its width.
   Values are nowrap, and a few projects ("Технопарк IT-Крым", "Термальное
   спа гостиницы") have long enough ones to exceed 487px — those wrap onto a
   second row rather than widening the column. */
.project__params {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.param {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.param__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  opacity: 0.6;
}

.param__value {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-accent);
  white-space: nowrap;
}

.project__lead {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project__lead-title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
}

.project__lead-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  opacity: 0.6;
}

/* In the static layout .project__lead-text is itself a <p>; in WordPress the
   ACF description comes through wpautop, so it's a <div> wrapping <p>s whose
   default 16px margins pushed the visible text 16px in from the box. The box
   already aligns with the photo — these resets make the text itself do so. */

.project__lead-text > p {
  margin: 0 0 12px;
}

.project__lead-text > p:last-child {
  margin-bottom: 0;
}

.project__squiggle {
  position: absolute;
  right: -20px;
  bottom: -90px;
  width: 205px;
  height: auto;
  pointer-events: none;
}

/* Big slider */

.project__slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  margin-top: 60px;
}

.project__slider-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: var(--media-frame-height);
}

/* Vertical photos stay vertical, horizontal photos stay horizontal —
   each image sizes to its own orientation instead of a shared crop box. */
.project__slider-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--media-frame-height);
  object-fit: contain;
  margin: 0 auto;
}

.project__slider-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  padding: 0;
  border: none;
  background: none;
}

.project__slider-edge--prev {
  left: 0;
}

.project__slider-edge--next {
  right: 0;
}

/* Only the dots live here now; the arrows moved onto the photo itself. */
.project__slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Arrows flank the photo at its vertical midpoint. In the controls row
   below they drifted to the far corners of a 1600px container and read as
   unrelated to the image. z-index clears the invisible edge hit-zones,
   which span 30% of each side and are wired to the same prev/next. */
.project__slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.project__slider-arrow--prev {
  left: 0;
}

.project__slider-arrow--next {
  right: 0;
}

.project__slider-arrow:hover {
  color: var(--color-accent);
}

.project__dots {
  display: flex;
  gap: 10px;
}

.project__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s ease;
}

.project__dot--active {
  background: var(--color-accent);
}

/* Lightbox: full-resolution view of the current slide, proportions kept */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.92);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 8px;
  border: none;
  background: none;
  color: #fff;
}

.lightbox__close:hover {
  color: var(--color-accent);
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  border: none;
  background: none;
  color: #fff;
  transition: color 0.2s ease;
}

.lightbox__arrow:hover {
  color: var(--color-accent);
}

.lightbox__arrow--prev {
  left: 24px;
}

.lightbox__arrow--next {
  right: 24px;
}

@media (max-width: 600px) {
  .lightbox__close {
    top: 12px;
    right: 12px;
  }

  .lightbox__arrow--prev {
    left: 8px;
  }

  .lightbox__arrow--next {
    right: 8px;
  }
}

/* Body: media rows + text */

.project__body {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}

.project__media-row {
  display: grid;
  width: 100%;
  gap: 0;
  overflow: hidden;
}

.project__media-row img {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-ratio, 1);
  /* The cell ratio is fixed, so height tracks width — a full-bleed square
     row reached 1520px tall once the container grew past 1200px, well
     over any viewport. Same ceiling the gallery slider already uses, so a
     block always fits on screen; the ratio still drives shape below it. */
  max-height: var(--media-frame-height);
  object-fit: cover;
}

.project__media-row--count-1 {
  grid-template-columns: 1fr;
}

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

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

.project__media-row--count-4 {
  grid-template-columns: repeat(4, 1fr);
}

.project__media-row--ratio-square {
  --media-ratio: 1;
}

.project__media-row--ratio-horizontal {
  --media-ratio: 3 / 2;
}

.project__media-row--ratio-vertical {
  --media-ratio: 2 / 3;
}

/* Standalone photo blocks (ACF: "Одно фото во всю ширину", "Одно фото по
   ширине карусели", "Два вертикальных фото"). Unlike .project__media-row
   these never crop — each photo keeps its own proportions. */

.project__photo {
  margin: 0;
}

/* Fills the text column; height simply follows the photo's proportions. */
.project__photo--full img {
  width: 100%;
  height: auto;
}

/* Sized by the shared frame rather than the column width, so a photo here
   lands at the size the carousel would give it. Height is the usual limit;
   the width cap only bites on panoramas wider than 3:2. */
.project__photo--frame img {
  width: auto;
  height: auto;
  max-width: var(--media-frame-width);
  max-height: var(--media-frame-height);
  margin: 0 auto;
}

/* Two verticals sharing that same frame width, so this block and the single
   framed photo above occupy the same footprint on the page. */
.project__photo-pair {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: var(--media-frame-width);
  margin: 0 auto;
}

.project__photo-pair-item {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}

.project__photo-pair-item img {
  width: 100%;
  height: auto;
}

.project__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project__text-title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
}

.project__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  opacity: 0.6;
}

/* Video */

.project__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1120 / 631;
  overflow: hidden;
  margin-top: 60px;
}

.project__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.project__video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid #fff;
  color: #fff;
  transition: background 0.25s ease;
}

.project__video:hover .project__video-play {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Bounding-box-centered triangle reads as shifted left (its solid edge
   is left, point is right) — nudge right so it looks centered */
.project__video-play svg {
  margin-left: 3px;
}

/* Authors */

.authors {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 60px;
}

.authors__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Portfolio */

.portfolio {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 60px;
}

.portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}

.filter {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 0.6;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.filter:hover {
  color: var(--color-accent);
  opacity: 1;
}

.filter--active {
  opacity: 1;
  font-weight: 500;
  color: var(--color-accent);
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* Infinite scroll: more projects load as this sentinel enters view */

.portfolio__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-top: 40px;
}

.portfolio__loader[hidden] {
  display: none;
}

.portfolio__loader::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  opacity: 0;
  animation: portfolio-spin 0.8s linear infinite;
  transition: opacity 0.2s ease;
}

.portfolio__loader.is-loading::after {
  opacity: 1;
}

@keyframes portfolio-spin {
  to {
    transform: rotate(360deg);
  }
}

.portfolio__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-muted-bg);
  overflow: hidden;
}

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

.portfolio__item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.portfolio__item:hover .portfolio__item-overlay,
.portfolio__item:focus-visible .portfolio__item-overlay {
  opacity: 1;
}

.portfolio__item-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
}

.portfolio__item-desc {
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text);
  opacity: 0.5;
  text-wrap: balance;
}

/* Scroll to top */

.scroll-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.scroll-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  opacity: 0.9;
}

/* Services */

.services {
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.service-block {
  display: flex;
  justify-content: space-between;
  gap: 98px;
}

.service-block__intro {
  position: relative;
  flex: 0 0 428px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-block__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
}

.service-block__subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.6;
}

.service-block__steps {
  flex: 0 0 594px;
  display: flex;
  flex-direction: column;
}

.service-step {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.service-step:first-child {
  padding-top: 0;
  border-top: none;
}

.service-step + .service-step {
  margin-top: 16px;
}

.service-step__row {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.service-step__num {
  flex: 0 0 24px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
}

.service-step__title {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
}

.service-step__arrow {
  flex: 0 0 24px;
  color: var(--color-arrow-idle);
  transform: rotate(90deg);
  transition: transform 0.3s ease, color 0.2s ease;
}

.service-step--open .service-step__arrow {
  color: inherit;
  transform: rotate(-90deg);
}

.service-step--open .service-step__row {
  color: var(--color-accent);
}

/* Pointer-only: a tap latches :hover, leaving closed steps accented */
@media (hover: hover) {
  .service-step__row:hover {
    color: var(--color-accent);
  }
}

.service-step__desc {
  margin: 0 0 0 44px;
  max-width: 550px;
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.6;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, margin-top 0.35s ease;
}

.service-step--open .service-step__desc {
  max-height: 260px;
  margin-top: 16px;
}

/* Decorative scattered badges */

.service-badges {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110px;
}

.service-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 2px 14px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
  transform-origin: 50% 50%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.service-badges.is-animated .service-badge--1 {
  animation-name: fall-visualization;
}

.service-badges.is-animated .service-badge--2 {
  animation-name: fall-documentation;
}

.service-badges.is-animated .service-badge--3 {
  animation-name: fall-concept;
}

.service-badge--1 {
  left: 0;
  top: 52px;
  --duration: 1180ms;
  --delay: 520ms;
  z-index: 2;
}

.service-badge--2 {
  left: 68px;
  top: 0;
  --duration: 1250ms;
  --delay: 980ms;
  z-index: 3;
}

.service-badge--3 {
  left: 147px;
  top: 57px;
  --duration: 1120ms;
  --delay: 0ms;
  z-index: 1;
}

@keyframes fall-documentation {
  0% {
    opacity: 0;
    transform: translate(165px, -620px) rotate(-28deg);
  }
  10% {
    opacity: 1;
  }
  48% {
    transform: translate(72px, -170px) rotate(31deg);
  }
  68% {
    transform: translate(16px, 28px) rotate(9deg);
  }
  79% {
    transform: translate(2px, -22px) rotate(18deg);
  }
  90% {
    transform: translate(-3px, 8px) rotate(11deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(13deg);
  }
}

@keyframes fall-visualization {
  0% {
    opacity: 0;
    transform: translate(66px, -610px) rotate(24deg);
  }
  12% {
    opacity: 1;
  }
  46% {
    transform: translate(42px, -205px) rotate(-34deg);
  }
  67% {
    transform: translate(17px, 18px) rotate(-14deg);
  }
  79% {
    transform: translate(8px, -20px) rotate(-3deg);
  }
  91% {
    transform: translate(-2px, 7px) rotate(-11deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(-8deg);
  }
}

@keyframes fall-concept {
  0% {
    opacity: 0;
    transform: translate(-10px, -640px) rotate(33deg);
  }
  10% {
    opacity: 1;
  }
  44% {
    transform: translate(-34px, -250px) rotate(-38deg);
  }
  64% {
    transform: translate(-12px, -28px) rotate(-18deg);
  }
  77% {
    transform: translate(-6px, 20px) rotate(-8deg);
  }
  90% {
    transform: translate(4px, -8px) rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-badge {
    animation: none !important;
  }

  .service-badge--1 {
    transform: rotate(-8deg);
  }

  .service-badge--2 {
    transform: rotate(13deg);
  }

  .service-badge--3 {
    transform: rotate(0deg);
  }
}

/* Vacancies */

.vacancies {
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  gap: 98px;
}

.vacancies__intro {
  position: relative;
  flex: 0 0 231px;
}

.vacancies__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  text-transform: uppercase;
}

.vacancies__list {
  flex: 0 0 594px;
  display: flex;
  flex-direction: column;
}

.vacancy {
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.vacancy:first-child {
  padding-top: 0;
  border-top: none;
}

.vacancy + .vacancy {
  margin-top: 32px;
}

.vacancy__row {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.vacancy--open .vacancy__row {
  color: var(--color-accent);
}

@media (hover: hover) {
  .vacancy__row:hover {
    color: var(--color-accent);
  }
}

.vacancy__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
}

.vacancy__arrow {
  flex: 0 0 24px;
  color: var(--color-arrow-idle);
  transform: rotate(90deg);
  transition: transform 0.3s ease, color 0.2s ease;
}

.vacancy--open .vacancy__arrow {
  color: inherit;
  transform: rotate(-90deg);
}

.vacancy__body {
  overflow: hidden;
  max-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: max-height 0.35s ease, margin-top 0.35s ease;
}

.vacancy--open .vacancy__body {
  max-height: 900px;
  margin-top: 24px;
}

.vacancy__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vacancy__section-title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
}

.vacancy__list-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vacancy__list-items li {
  font-size: 16px;
  line-height: 1.3;
  opacity: 0.6;
}

.vacancy__list-items li::before {
  content: "— ";
}

.vacancy__contact {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
}

.vacancy__contact a {
  color: var(--color-accent);
}

/* Decorative vacancy badges */

.vacancy-badges {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 75px;
}

.vacancy-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 2px 14px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
  transform-origin: 50% 50%;
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.vacancy-badges.is-animated .vacancy-badge--1 {
  animation-name: fall-vacancy-1;
}

.vacancy-badges.is-animated .vacancy-badge--2 {
  animation-name: fall-vacancy-2;
}

.vacancy-badges.is-animated .vacancy-badge--3 {
  animation-name: fall-vacancy-3;
}

.vacancy-badge--1 {
  left: 0;
  top: 10px;
  --duration: 1180ms;
  --delay: 520ms;
  z-index: 1;
}

.vacancy-badge--2 {
  left: 60px;
  top: 0;
  --duration: 1250ms;
  --delay: 980ms;
  z-index: 2;
}

.vacancy-badge--3 {
  left: 171px;
  top: 34px;
  --duration: 1120ms;
  --delay: 0ms;
  z-index: 3;
}

@keyframes fall-vacancy-1 {
  0% {
    opacity: 0;
    transform: translate(66px, -610px) rotate(47deg);
  }
  12% {
    opacity: 1;
  }
  46% {
    transform: translate(42px, -205px) rotate(-11deg);
  }
  67% {
    transform: translate(17px, 18px) rotate(9deg);
  }
  79% {
    transform: translate(8px, -20px) rotate(20deg);
  }
  91% {
    transform: translate(-2px, 7px) rotate(12deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(15.3deg);
  }
}

@keyframes fall-vacancy-2 {
  0% {
    opacity: 0;
    transform: translate(165px, -620px) rotate(-37deg);
  }
  10% {
    opacity: 1;
  }
  48% {
    transform: translate(72px, -170px) rotate(22deg);
  }
  68% {
    transform: translate(16px, 28px) rotate(0deg);
  }
  79% {
    transform: translate(2px, -22px) rotate(9deg);
  }
  90% {
    transform: translate(-3px, 8px) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(4.3deg);
  }
}

@keyframes fall-vacancy-3 {
  0% {
    opacity: 0;
    transform: translate(-10px, -640px) rotate(31deg);
  }
  10% {
    opacity: 1;
  }
  44% {
    transform: translate(-34px, -250px) rotate(-40deg);
  }
  64% {
    transform: translate(-12px, -28px) rotate(-20deg);
  }
  77% {
    transform: translate(-6px, 20px) rotate(-10deg);
  }
  90% {
    transform: translate(4px, -8px) rotate(-17deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(-2.1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vacancy-badge {
    animation: none !important;
  }

  .vacancy-badge--1 {
    transform: rotate(15.3deg);
  }

  .vacancy-badge--2 {
    transform: rotate(4.3deg);
  }

  .vacancy-badge--3 {
    transform: rotate(-2.1deg);
  }
}

/* FAQ */

/* Plain text page (privacy policy etc.) rendered by page.php. Body copy is
   held to a comfortable measure rather than the full 1120px container, and
   numbered clause headings ("1. Общие положения") get the mono treatment. */

.text-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 60px;
}

.text-page__content {
  max-width: 800px;
  font-size: 16px;
  line-height: 1.6;
}

.text-page__content h2 {
  margin: 48px 0 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
}

.text-page__content h2:first-child {
  margin-top: 0;
}

.text-page__content h3 {
  margin: 32px 0 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
}

.text-page__content p {
  margin: 0 0 16px;
}

.text-page__content ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.text-page__content li {
  margin-bottom: 8px;
}

.text-page__content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 60px;
}

.faq__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  color: var(--color-accent);
}

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

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

.faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 28px 0;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .faq__q:hover {
    color: var(--color-accent);
  }
}

.faq__item--open > .faq__q {
  color: var(--color-accent);
}

.faq__icon {
  flex-shrink: 0;
  color: var(--color-arrow-idle);
  transition: transform 0.3s ease, color 0.2s ease;
}

.faq__item--open .faq__icon {
  transform: rotate(180deg);
  color: inherit;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item--open > .faq__a {
  grid-template-rows: 1fr;
}

.faq__a-inner {
  overflow: hidden;
}

.faq__a-inner p {
  margin: 0;
  padding: 0 0 16px;
  max-width: 1000px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  text-align: justify;
  opacity: 0.6;
}

.faq__a-inner p:last-child {
  padding-bottom: 28px;
}

/* Contacts */

.contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-top: 60px;
  padding-bottom: 40px;
}

.contacts__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 80px;
}

.contacts__title {
  margin: 0;
}

.contacts__coords {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contacts__phone {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-accent);
  transition: opacity 0.2s ease;
}

.contacts__phone:hover {
  opacity: 0.8;
}

.contacts__address {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text);
}

.contacts__emails {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contacts__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contacts__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 0.5;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.contacts__label:hover {
  opacity: 1;
}

.contacts__email {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.contacts__email:hover {
  color: var(--color-accent);
}

/* Media */

.media {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: 40px;
}

.media__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 370px;
  background: var(--color-muted-bg);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text);
  opacity: 0.5;
}

.media__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.media__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}

.media__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
}

/* Vertical divider between columns — skip the first card of every row */
.media-card:not(:nth-child(4n+1))::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-accent);
}

/* Horizontal divider between rows — first card of every row after the first,
   centered in the existing 40px row gap (20px to the date above, 20px to the
   image below), spanning all 4 columns */
.media-card:nth-child(4n+1):not(:first-child)::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: calc(400% + 120px);
  height: 1px;
  background: var(--color-accent);
}

.media-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 24px;
  background: var(--color-muted-bg);
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.media-card:hover .media-card__img {
  opacity: 0.85;
}

.media-card__title {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-accent);
}

.media-card__text {
  margin: 0 0 20px;
  flex: 1;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  text-align: justify;
  opacity: 0.6;
}

.media-card__date {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  opacity: 0.6;
}

/* Article — rebuilt 1:1 from Figma node 1:4 (exact px values from the design file) */

.article {
  padding-top: 40px;
}

.article__title {
  margin: 60px 0 32px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 72px;
  line-height: 1.19;
  color: var(--color-accent);
  overflow-wrap: break-word;
  word-break: break-word;
}

.article__title-line {
  display: block;
}

.article__title-line--2 {
  margin-left: 253px;
}

.article__meta {
  display: flex;
  gap: 20px;
  height: 448px;
  margin-bottom: 32px;
}

.article__meta-side {
  flex: 0 0 233px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article__date {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  opacity: 0.7;
}

.article__photo-small,
.article__photo-large {
  background: var(--color-muted-bg);
  overflow: hidden;
}

.article__photo-small {
  height: 281px;
}

.article__photo-large {
  flex: 1;
}

.article__photo-small img,
.article__photo-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lead: statement + callout/photo row, both indented to the 253px rail */

.article__lead {
  margin: 0 0 24px 253px;
}

.article__statement {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
  color: var(--color-text);
  text-align: justify;
}

.article__lead-row {
  display: flex;
  align-items: flex-start;
  gap: 37px;
}

.article__lead-row .article__side-text {
  flex: 0 0 356px;
}

.article__lead-row .article__ph {
  flex: 1;
  height: 232px;
}

/* Full-width mono paragraphs used between/inside sections */

.article__wide {
  margin: 0 0 80px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-text);
  text-align: justify;
}

.article__section .article__wide {
  margin-bottom: 32px;
}

.article__section .article__wide:last-child {
  margin-bottom: 0;
}

/* Small Inter Tight side text used in photo/text rows */

.article__side-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text);
  opacity: 0.7;
  text-align: justify;
}

.article__ph {
  background: var(--color-muted-bg);
  overflow: hidden;
}

.article__ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content-specific crop override: this lead photo is a near-square group
   shot (four people, faces in the top third) squeezed into a ~2:1 wide/short
   box — a centered crop cut through their heads. Bias to the top so faces
   stay in frame even though it costs legs at the bottom. */
.article__ph--top img {
  object-position: center top;
}

.article__section {
  margin-bottom: 80px;
}

.article__section-head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

.article__section-num {
  flex: 0 0 253px;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  color: var(--color-text);
}

.article__section-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 54px;
  line-height: 1.2;
  color: var(--color-accent);
}

.article__section-intro {
  margin: 0 0 32px 253px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--color-text);
  text-align: justify;
}

/* Opt-in alignment to the same 253px rail the section numbers occupy, for
   body copy that should read as part of a section rather than full-bleed
   (used by the Q&A interview and the section-scoped paragraphs). */

.article__rail {
  margin-left: 253px;
}

/* Interview question: sits on the rail, mono like a section intro but
   smaller — a question is not a section heading. */

.article__question {
  margin: 0 0 20px 253px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-text);
}

/* Photo/text rows. Column widths come from Figma, but heights flow from the
   content so longer copy pushes the layout down instead of overlapping it. */

.article__row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

/* Text column that stacks a two-up row above a full-width paragraph */
.article__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.article__col-top {
  display: flex;
  align-items: flex-start;
}

.article__row--s1 {
  gap: 25px;
}

.article__row--s1 .article__col {
  flex: 0 0 735px;
  gap: 20px;
}

.article__row--s1 .article__col-top {
  gap: 20px;
}

.article__ph--s1a { flex: 0 0 233px; height: 150px; }
.article__side-text--s1a { flex: 1; min-width: 0; }
.article__ph--s1b { flex: 0 0 358px; height: 320px; }

.article__row--s2 {
  gap: 20px;
}

.article__row--s2 .article__col {
  flex: 0 0 867px;
}

.article__row--s2 .article__col-top {
  gap: 24px;
}

/* Photo sits first in the DOM so it can float right on mobile */
.article__ph--s2 {
  order: 2;
  flex: 0 0 233px;
  height: 376px;
}

.article__side-text--s2a { flex: 0 0 484px; }
.article__side-text--s2b { flex: 1; min-width: 0; }

.article__wide--s2 {
  margin: 0;
}

/* Grid lets the photo sit between the two text columns on desktop while
   staying next to the paragraph it wraps on mobile (DOM order is the mobile
   one; grid-column/row place it for desktop). */

.article__grid--s3 {
  display: grid;
  grid-template-columns: 233px 360px 487px;
  gap: 32px 20px;
  margin-bottom: 32px;
}

.article__side-text--s3a { grid-column: 1; grid-row: 1; }
.article__ph--s3a { grid-column: 2; grid-row: 1; height: 262px; }
.article__side-text--s3b { grid-column: 3; grid-row: 1; }
.article__side-text--s3c { grid-column: 1 / -1; grid-row: 2; }

.article__row--s3b {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 32px;
}

.article__row--s3b .article__wide {
  flex: 0 0 738px;
  margin-bottom: 0;
}

.article__row--s3b .article__ph {
  flex: 0 0 360px;
  height: 303px;
}

/* Base spacing for any flexible-content block (".article-block") that
   doesn't set its own margin-bottom — restores the site-wide default that
   used to live in wp.css before it started conflicting with rules further
   down. Plain "text" blocks rely on this; every other type sets its own
   margin explicitly further below and wins on source order. */

.article-block {
  margin-bottom: 48px;
}

/* Flexible-content "Сетка (текст + фото)" block used by the article
   constructor — a generic 2-up grid standing in for the bespoke per-section
   Figma grids of the static markup (article__row--s1/s2, article__grid--s3). */

.article-block--mixed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 32px 20px;
  margin-bottom: 32px;
}

.article-block--mixed-grid-cols-2.article-block--mixed-grid-text_narrow {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.article-block--mixed-grid-cols-2.article-block--mixed-grid-text_wide {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* Three-column variant reproduces the narrow/medium/wide rhythm of the
   original section-3 grid (233 / 360 / 487px in the static markup). */

.article-block--mixed-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-block--mixed-grid-cols-3.article-block--mixed-grid-text_narrow {
  grid-template-columns: minmax(0, 233fr) minmax(0, 360fr) minmax(0, 487fr);
}

.article-block--mixed-grid-cols-3.article-block--mixed-grid-text_wide {
  grid-template-columns: minmax(0, 487fr) minmax(0, 360fr) minmax(0, 233fr);
}

.article-block__grid-cell--full {
  grid-column: 1 / -1;
}

.article-block__grid-cell--image {
  align-self: stretch;
  overflow: hidden;
  background: var(--color-muted-bg);
}

.article-block__grid-cell--image .article-block__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 320px;
  object-fit: cover;
}

/* "Утверждение + текст с фото" (lead_statement) — reproduces the opening
   .article__lead of "Сколько стоит дизайн интерьеров?" (statement, then a
   narrow text column beside a fixed-height photo) as a reusable block, but
   without that lead's 253px left indent (that indent is specific to sitting
   directly under the article title/meta, not to the composition itself). */

.article-block__lead-statement {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
  color: var(--color-text);
}

.article-block__lead-row {
  display: flex;
  align-items: flex-start;
  gap: 37px;
}

.article-block__lead-text {
  flex: 0 0 356px;
}

.article-block__lead-media {
  flex: 1;
  height: 232px;
  overflow: hidden;
}

.article-block__lead-media .article-block__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Текст и фотография" (text_image) — photo of a configurable width sits
   beside the text; photo width and text style are chosen per block. */

.article-block--text-image {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.article-block--text-image.is-image-left {
  flex-direction: row-reverse;
}

.article-block--text-image .article-block__media {
  flex: 0 0 auto;
}

.article-block--text-image .article__side-text,
.article-block--text-image .article__wide {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.article-block--photo-233 .article-block__media { flex-basis: 233px; }
.article-block--photo-360 .article-block__media { flex-basis: 360px; }
.article-block--photo-487 .article-block__media { flex-basis: 487px; }

.article-block--text-image .article-block__image {
  width: 100%;
  height: auto;
}

/* "Текст с обтеканием фотографии" (wrapped_image) — a floated photo the
   paragraph text wraps around. */

.article-block--wrapped {
  margin-bottom: 32px;
  overflow: hidden;
}

.article-block--wrapped .article-block__image {
  width: 360px;
  height: auto;
  margin-bottom: 12px;
}

.article-block--wrapped .article-block__image--left {
  float: left;
  margin-right: 24px;
}

.article-block--wrapped .article-block__image--right {
  float: right;
  margin-left: 24px;
}

/* "Две колонки текста" (two_columns) */

.article-block--columns {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
}

.article-block--columns .article__side-text {
  flex: 1;
  min-width: 0;
}

/* Standalone "Фотография" (image) */

.article-block--image {
  margin: 0 0 32px;
}

.article-block--image .article-block__image {
  width: 100%;
  height: auto;
}

/* "Фото сбоку + колонка" (aside_photo_stack) — reproduces the composition
   approved by the client in "Сколько стоит дизайн интерьеров?"
   (article__row--s1/s2) as a reusable block for other articles. */

.article-block--aside-stack {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}

.article-block__aside-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.article-block__aside-col-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.article-block__aside-top-text { flex: 1; min-width: 0; margin: 0; }
.article-block__aside-top-media { flex: 0 0 auto; height: 200px; }
.article-block--aside-stack .article-block__aside-bottom { margin: 0; }
.article-block__aside-media { flex: 0 0 auto; }
.article-block__aside-media .article-block__image,
.article-block__aside-top-media .article-block__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-block--aside-stack-narrow { gap: 25px; }
.article-block--aside-stack-narrow .article-block__aside-col { flex: 0 0 735px; }
.article-block--aside-stack-narrow .article-block__aside-top-media { flex-basis: 233px; height: 150px; }
.article-block--aside-stack-narrow .article-block__aside-media { flex-basis: 358px; height: 320px; }

.article-block--aside-stack-wide .article-block__aside-col { flex: 0 0 867px; }
.article-block--aside-stack-wide .article-block__aside-col-top { gap: 24px; }
.article-block--aside-stack-wide .article-block__aside-media { flex-basis: 233px; height: 376px; order: 2; }
.article-block--aside-stack-wide .article-block__aside-col-top > :first-child { flex: 0 0 484px; }

/* "Сетка 3 колонки + широкая строка" (split_grid_3col) — reproduces
   article__grid--s3 from the same reference article as a reusable block. */

.article-block--split-grid {
  display: grid;
  grid-template-columns: 233px 360px 487px;
  gap: 32px 20px;
  margin-bottom: 32px;
}

.article-block__grid-col1 { grid-column: 1; grid-row: 1; }
.article-block__grid-col2 { grid-column: 2; grid-row: 1; height: 262px; overflow: hidden; }
.article-block__grid-col2 .article-block__image { width: 100%; height: 100%; object-fit: cover; }
.article-block__grid-col3 { grid-column: 3; grid-row: 1; }
.article-block--split-grid .article-block__grid-full { grid-column: 1 / -1; grid-row: 2; margin: 0; }

.article .media__block {
  margin-top: 120px;
}

.article__more-title {
  margin: 0 0 40px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
}

/* Responsive */

@media (max-width: 900px) {
  .clients,
  .awards,
  .principles,
  .cta,
  .team,
  .footer {
    margin-top: 80px;
  }

  /* Services */
  .services {
    padding-top: 9px;
    gap: 80px;
  }

  .service-block {
    flex-direction: column;
    gap: 32px;
  }

  .service-block__intro,
  .service-block__steps {
    flex: 1 1 auto;
  }

  .service-block__intro {
    gap: 16px;
  }

  /* Description spans the full column instead of hanging off the step number */
  .service-step__desc {
    margin-left: 0;
    max-width: none;
    text-align: justify;
  }

  .service-badges {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    height: 85px;
    margin-top: 8px;
  }

  .service-badge {
    padding: 2px 12px;
    font-size: 20px;
  }

  .service-badge--1 {
    left: 0;
    top: 35px;
  }

  .service-badge--2 {
    left: 89px;
    top: 0;
  }

  .service-badge--3 {
    left: 137px;
    top: 56px;
  }

  /* Vacancies */
  .vacancies {
    flex-direction: column;
    gap: 32px;
  }

  .vacancies__intro,
  .vacancies__list {
    flex: 1 1 auto;
  }

  .vacancy-badges {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    height: 86px;
    margin-top: 32px;
  }

  .vacancy-badge {
    padding: 1px 4px;
    font-size: 20px;
  }

  .vacancy-badge--1 {
    left: 190px;
    top: 62px;
    transform: rotate(0deg);
  }

  .vacancy-badge--2 {
    left: 105px;
    top: 0;
    transform: rotate(15.6deg);
  }

  .vacancy-badge--3 {
    left: 0;
    top: 37px;
    transform: rotate(-8.7deg);
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .hero__mark {
    display: none;
  }

  /* Figma mobile puts the projects block between the hero heading and its text.
     Flattening .hero lets both become flex children of <main> so they can be reordered. */
  main:has(.hero) {
    display: flex;
    flex-direction: column;
  }

  .hero,
  .hero__content {
    display: contents;
  }

  /* .container styles are lost when the wrappers are flattened — reapply them */
  .hero__heading,
  .hero__text {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }

  .hero__heading {
    order: 1;
    padding-top: 8px;
  }

  /* Brand and slashes stay on one line above the description, as in the design.
     Explicit gaps replace the wide monospace spaces so the line fits 348px. */
  .hero__brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }

  .hero__brand .slash {
    font-size: 0.68em;
  }

  .hero__title {
    text-align: justify;
  }

  .projects {
    order: 2;
    padding-top: 80px;
  }

  .hero__text {
    order: 3;
    margin-top: 80px;
    gap: 12px;
  }

  .clients {
    order: 4;
  }

  .awards {
    order: 5;
  }

  .principles {
    order: 6;
  }

  .cta {
    order: 7;
  }

  .team {
    order: 8;
  }

  .header {
    padding: 24px 0;
  }

  .cta {
    scroll-margin-top: 96px;
  }

  .header__nav,
  .header__link--contact,
  .header__theme-toggle {
    display: none;
  }

  body.menu-open .header__link {
    display: none;
  }

  /* Hiding "Проекты" above leaves this cluster as the row's only in-flow
     child, and space-between then parks it at the LEFT edge — the close
     cross jumped across the header the moment the menu opened. An auto
     margin keeps it pinned right in both states. */
  .header__actions {
    margin-left: auto;
  }

  .header__burger {
    display: flex;
    margin-left: auto;
  }

  /* Home hero */
  .home-hero__nav,
  .home-hero__projects,
  .home-hero__contact {
    display: none;
  }

  .home-hero__video--desktop {
    display: none;
  }

  .home-hero__video--mobile {
    display: block;
  }

  .home-hero__title {
    font-size: clamp(36px, 11.5vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .home-hero__title-break {
    display: block;
  }

  /* Contacts */
  .contacts {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 9px;
  }

  .contacts__main {
    gap: 32px;
  }

  .contacts__coords {
    gap: 16px;
  }

  .contacts__item {
    gap: 6px;
  }

  .contacts__emails {
    gap: 24px;
  }

  /* Media */
  .media__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
  }

  /* Stacked columns break the nth(4n+1) row math for the desktop vertical
     divider, so swap it for a horizontal rule above each card instead */
  .media-card:not(:nth-child(4n+1))::before,
  .media-card:nth-child(4n+1):not(:first-child)::after {
    display: none;
  }

  .media-card:not(:first-child) {
    border-top: 1px solid var(--color-accent);
    padding-top: 20px;
  }

  .media__hero {
    height: 280px;
  }

  /* CTA stacks */
  /* Figma puts the contact line after the form, so .cta__info is flattened
     to let its children be reordered against .cta__form */
  .cta {
    position: relative;
    flex-direction: column;
    gap: 40px;
  }

  .cta__info {
    display: contents;
  }

  .cta__intro {
    order: 1;
  }

  .cta__form {
    order: 2;
    flex: 1 1 auto;
    width: 100%;
  }

  .cta__phone {
    order: 3;
  }

  /* Anchored to .cta now that .cta__info no longer generates a box */
  .cta__squiggle {
    left: auto;
    right: -10px;
    top: auto;
    bottom: -8px;
    width: 150px;
    height: 132px;
  }

  /* Team */
  .team__cols {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .team__paragraphs {
    flex: 1 1 auto;
  }

  .team__vacancy {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  .team__grid {
    gap: 16px;
  }

  .member {
    flex-basis: calc((100% - 16px) / 2);
  }

  /* Portfolio */
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .scroll-top {
    right: 28px;
    bottom: 28px;
    width: 48px;
    height: 48px;
  }

  /* Footer stacks */
  .footer__inner {
    flex-direction: column;
    gap: 48px;
  }

  .footer__nav,
  .footer__contacts,
  .footer__cta {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }

  /* Nav: two columns, filled top-to-bottom */
  .footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 20px;
    justify-content: start;
  }

  /* Address before socials on mobile */
  .footer__contacts {
    justify-content: flex-start;
    gap: 32px;
  }

  .footer__coords {
    order: 1;
  }

  .footer__address {
    order: 2;
  }

  .footer__socials {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
  }

  /* Legal left-aligned on mobile */
  .footer__legal {
    align-items: flex-start;
    text-align: left;
  }

  /* Project page */
  .project__intro {
    flex-direction: column;
    gap: 32px;
  }

  .project__intro-media,
  .project__intro-info {
    flex: 1 1 auto;
    width: 100%;
  }

  .project__intro-media {
    min-height: 0;
    aspect-ratio: 487 / 392;
  }

  .project__intro-media img {
    min-height: 0;
  }

  .project__squiggle {
    display: none;
  }

  /* Portfolio */
  .portfolio__filters {
    gap: 12px 20px;
  }

  .filter {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  :root {
    --container-padding: 16px;
  }

  .section-title {
    font-size: 32px;
  }

  .hero__title {
    font-size: 32px;
  }

  /* Two verticals side by side leave each photo about 150px wide on a
     phone, so they stack instead. */
  .project__photo-pair {
    flex-direction: column;
    gap: 16px;
  }

  .vacancies__title {
    font-size: 32px;
  }

  .home-hero__content {
    gap: 16px;
  }

  .article__title {
    font-size: 28px;
  }

  .article__statement {
    font-size: 18px;
  }

  /* CTA squiggle: smaller and clear of the phone number on narrow screens */
  /* Sized and placed so the arrow tip lands next to the phone number */
  .cta__squiggle {
    width: 135px;
    height: 119px;
    right: 8px;
    bottom: -7px;
  }

  .cta__intro {
    gap: 16px;
  }

  .cta__form {
    gap: 24px;
  }

  /* Contacts */
  .contacts__br {
    display: none;
  }

  .contacts__phone {
    font-size: 20px;
  }

  .contacts__address {
    font-size: 18px;
  }

  .contacts__label {
    font-size: 16px;
  }

  .contacts__email {
    font-size: 20px;
  }

  /* Media */
  .media__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .media__hero {
    height: 220px;
  }

  .text-page {
    padding-top: 9px;
    gap: 24px;
  }

  .text-page__title {
    font-size: 28px;
  }

  .text-page__content h2 {
    margin: 32px 0 12px;
    font-size: 20px;
  }

  .faq {
    padding-top: 9px;
    gap: 32px;
  }

  .faq__title {
    font-size: 32px;
  }

  /* First row has no rule above it in the design */
  .faq__item:first-child {
    border-top: none;
  }

  .faq__q {
    font-size: 18px;
    padding: 16px 0;
    gap: 16px;
    align-items: flex-start;
  }

  .faq__icon {
    width: 24px;
    height: 24px;
  }

  .faq__a-inner p:last-child {
    padding-bottom: 16px;
  }

  /* Match the 16px title-to-divider gap used by the FAQ/services accordions */
  .vacancy {
    padding-top: 16px;
  }

  .vacancy + .vacancy {
    margin-top: 16px;
  }

  .vacancy__title {
    font-size: 20px;
  }

  .projects__banner img {
    height: 327px;
  }

  .principles__track {
    gap: 16px;
  }

  .principle {
    flex-basis: 100%;
    height: 260px;
  }

  .projects__pager {
    align-items: flex-start;
    gap: 16px;
  }

  .projects__pager-link {
    flex-direction: column;
    gap: 12px;
  }

  .projects__pager-link--prev {
    max-width: 190px;
    align-items: flex-start;
  }

  .projects__pager-link--next {
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  /* Head sits bottom-aligned with the arrows; the title wraps onto two lines */
  .principles__head {
    align-items: flex-end;
  }

  .principles__head .section-title {
    max-width: 166px;
  }

  .principle__title {
    font-size: 20px;
  }

  /* Shape is pinned by top offset, which was sized for the taller desktop card */
  .principle__shape {
    top: 116px;
  }

  .award__year,
  .award__name {
    font-size: 16px;
  }

  /* Absolute centering made long names overlap the year on narrow screens */
  .award {
    gap: 12px;
  }

  .award__name {
    position: static;
    left: auto;
    transform: none;
    flex: 1;
    text-align: center;
    white-space: normal;
  }

  .team__lead {
    font-size: 25px;
  }

  .team__vacancy {
    align-self: stretch;
  }

  .member__name {
    font-size: 16px;
  }

  .member__role {
    font-size: 12px;
  }

  .department__nav {
    display: none;
  }

  .team__grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 169px;
    gap: 12px 10px;
    overflow-x: auto;
    transition: none;
  }

  .member__photo {
    width: 169px;
    aspect-ratio: 169 / 194;
  }

  /* Name and phone stay side by side on mobile, as in the design */
  .form__row {
    gap: 16px;
  }

  .cta__subtitle,
  .cta__phone-label {
    font-size: 18px;
  }

  .footer__nav-item {
    font-size: 24px;
  }

  .footer__social {
    font-size: 16px;
  }

  .vacancies {
    padding-top: 32px;
  }

  /* Project page */
  .project__pager {
    align-items: flex-start;
  }

  .project__pager-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
  }

  .project__pager-link--prev {
    max-width: 180px;
  }

  .project__pager-link--next {
    flex-direction: column-reverse;
    align-items: flex-end;
    text-align: right;
  }

  .project__intro-media {
    aspect-ratio: 348 / 392;
  }

  .project__slider-media {
    max-height: 55vh;
  }

  .project__slider-media img {
    max-height: 55vh;
  }

  .project__slider-arrow {
    color: var(--color-accent);
  }

  .project__intro-info {
    gap: 32px;
  }

  .project__params {
    flex-wrap: wrap;
    gap: 24px 40px;
  }

  .param {
    flex: 0 0 auto;
    min-width: 100px;
    gap: 16px;
  }

  .project__text {
    gap: 16px;
  }

  .authors__title {
    font-size: 24px;
  }

  .project__video-play {
    width: 44px;
    height: 44px;
    border-width: 1px;
  }

  .project__video-play svg {
    width: 14px;
    height: auto;
    margin-left: 1.5px;
  }

  /* Portfolio */
  .portfolio {
    padding-top: 32px;
  }

  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .portfolio__item-title {
    font-size: 16px;
  }

  .portfolio__item-desc {
    font-size: 14px;
  }

  /* Article — mobile frame is a single 348px column; every desktop
     absolute row collapses back into normal flow, with photos floated
     where the Figma frame wraps text around them. */

  .article {
    padding-top: 32px;
  }

  .article__title {
    margin: 32px 0 24px;
    /* This overrides an earlier .article__title{font-size:28px} rule inside
       this same media query (dead code duplicated from the static reference
       — same bug exists there) with 40px, which itself overflowed on real
       narrow phones for long single words like "производительность" with no
       break point. Clamp so it scales down before that happens, and add a
       word-break fallback as a safety net for any future long word/title. */
    font-size: clamp(24px, 9vw, 32px);
    text-align: justify;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .article__title-line {
    display: inline;
  }

  .article__title-line--2 {
    margin-left: 0;
  }

  .article__meta {
    height: auto;
    gap: 0;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .article__meta-side {
    flex: 0 0 auto;
  }

  /* Mobile frame keeps only the right-hand photo next to the date */
  .article__photo-small {
    display: none;
  }

  .article__photo-large {
    flex: 0 0 205px;
    height: 230px;
  }

  .article__lead {
    margin: 0 0 24px;
  }

  .article__statement {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.2;
    text-align: justify;
  }

  .article__lead-row {
    flex-direction: column;
    gap: 24px;
  }

  .article__lead-row .article__side-text,
  .article__lead-row .article__ph {
    flex: none;
  }

  .article__lead-row .article__ph {
    width: 100%;
    height: 180px;
  }

  .article__wide {
    font-size: 20px;
    line-height: 1.2;
    text-align: justify;
  }

  .article__section .article__wide {
    margin-bottom: 24px;
  }

  .article__side-text {
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
  }

  .article__section-head {
    margin-bottom: 24px;
  }

  .article__section-num {
    flex: 0 0 142px;
    font-size: 32px;
  }

  .article__section-title {
    font-size: 32px;
  }

  .article__section-intro {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 1.2;
    text-align: justify;
  }

  .article__rail {
    margin-left: 0;
  }

  .article__question {
    margin: 0 0 16px;
    font-size: 18px;
  }

  /* Desktop columns collapse into one; wrappers go transparent so the
     floats below sit in the row's own block context */
  .article__row {
    display: block;
    margin-bottom: 24px;
  }

  .article__col,
  .article__col-top {
    display: contents;
  }

  .article__grid--s3 {
    display: block;
    margin-bottom: 24px;
  }

  /* 1. Фрилансеры */
  .article__ph--s1a {
    float: left;
    width: 131px;
    height: 216px;
    margin-right: 10px;
  }

  .article__side-text--s1a {
    margin-bottom: 10px;
  }

  .article__side-text--s1b {
    clear: left;
  }

  .article__ph--s1b {
    clear: left;
    width: 100%;
    height: 230px;
    margin-top: 24px;
  }

  /* 2. Ремонтные компании */
  .article__row--s2 {
    margin-bottom: 16px;
  }

  .article__ph--s2 {
    float: right;
    width: 131px;
    height: 312px;
    margin-left: 12px;
  }

  .article__side-text--s2a {
    margin-bottom: 12px;
  }

  .article__side-text--s2b {
    clear: right;
    margin-bottom: 24px;
  }

  .article__wide--s2 {
    width: 100%;
    margin: 0;
  }

  /* 3. Бюро */
  .article__side-text--s3a {
    margin-bottom: 12px;
  }

  .article__ph--s3a {
    float: left;
    width: 133px;
    height: 216px;
    margin: 0 10px 0 0;
  }

  .article__row--s3b {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
  }

  .article__row--s3b .article__wide,
  .article__row--s3b .article__ph,
  .article__row--s3b > :nth-child(2) {
    flex: none;
  }

  .article__row--s3b .article__ph {
    width: 100%;
    height: 262px;
  }

  .article-block--mixed-grid,
  .article-block--mixed-grid-cols-2.article-block--mixed-grid-text_narrow,
  .article-block--mixed-grid-cols-2.article-block--mixed-grid-text_wide,
  .article-block--mixed-grid-cols-3,
  .article-block--mixed-grid-cols-3.article-block--mixed-grid-text_narrow,
  .article-block--mixed-grid-cols-3.article-block--mixed-grid-text_wide {
    grid-template-columns: 1fr;
  }

  .article-block__grid-cell--image .article-block__image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .article .media__block {
    margin-top: 80px;
  }

  .article__more-title {
    margin-bottom: 32px;
  }

  .article__boxes {
    grid-template-columns: 1fr;
  }

}

/* ==========================================================================
   Fluid layout above 1200px
   --------------------------------------------------------------------------
   The container grows past its original 1200px on wide screens, but the
   columns inside were authored as fixed pixel widths against the 1120px
   content box that 1200px produced. Left alone they stay put and the extra
   room collects as dead space in the middle of every space-between row.

   Every width below is the original pixel value expressed as a percentage
   of that 1120px reference, so each block renders identically at 1200px
   and scales proportionally above it. Nothing here applies below 1201px.

   Deliberately NOT fluid:
   - text measure caps (.cta__subtitle, .service-step__desc,
     .text-page__content, .faq__a-inner p) — line length must stay readable;
   - slider cards (.principle, .member) — a wider viewport should reveal
     more cards, not stretch them;
   - article templates — boxed at 1200px by .single-post .container to
     preserve the Figma-exact grid.
   ========================================================================== */

@media (min-width: 1201px) {
  :root {
    --content-width: calc(var(--container-width-wide) - 2 * var(--container-padding));
  }

  /* Bureau hero */
  .hero__mark {
    flex: 0 0 31.696%;
  }

  .hero__mark img {
    width: 100%;
  }

  .hero__content {
    max-width: 62.679%;
  }

  /* Projects banner: fixed 490px height would crop harder as it widens */
  .projects__banner img {
    height: auto;
    aspect-ratio: 1120 / 490;
  }

  /* Team */
  .team__paragraphs {
    flex: 0 0 61.875%;
  }

  .team__vacancy {
    flex: 0 0 23.661%;
  }

  /* CTA / contact form */
  .cta__info {
    flex: 0 0 46.25%;
  }

  .cta__form {
    flex: 0 0 49.107%;
  }

  /* .cta__squiggle is deliberately NOT scaled: the arrow points at the
     phone number, which is fixed-size text. Scaling the arrow with the
     column walked its tip 116px past the end of the number instead of
     the 25px the design puts there. Fixed left/width keeps it aimed. */

  /* Footer */
  .footer__nav {
    flex: 0 0 23.661%;
  }

  .footer__contacts {
    flex: 0 0 40.268%;
  }

  .footer__cta {
    flex: 0 0 32.5%;
  }

  /* Project page intro */
  .project__intro-media {
    flex: 0 0 43.482%;
    min-height: calc(var(--content-width) * 0.35);
  }

  .project__intro-info {
    flex: 0 0 43.482%;
  }

  /* Services */
  .service-block__intro {
    flex: 0 0 38.214%;
  }

  .service-block__steps {
    flex: 0 0 53.036%;
  }

  /* Vacancies */
  .vacancies__intro {
    flex: 0 0 20.625%;
  }

  .vacancies__list {
    flex: 0 0 53.036%;
  }
}