/* =========================================================
   TEGRA — variables
   ========================================================= */
:root {
  --color-red: #ff0c00;
  --color-red-dark: #b81b14;
  --color-black: #1a1a1a;
  --color-dark: #101010;
  --color-white: #ffffff;
  --color-bg: #f4f4f3;
  --color-bg-alt: #eceae7;
  --color-gray: #6f6f6f;
  --color-gray-light: #b9b9b7;
  --color-border: #d8d6d3;
  --color-placeholder: #cfcfcd;

  --font-display: "Actay Wide", sans-serif;
  --font-condensed: "Actay Condensed", sans-serif;
  --font-body: "Gilroy", sans-serif;

  --container-width: 1180px;
  --container-pad: 40px;

  --header-height: 112px;
}

/* =========================================================
   Base
   ========================================================= */
html{
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-display);
  color: var(--color-black);
  background: var(--color-white);
  font-size: 15px;

}

:lang(kk) body,
html[lang="kk"] body {
  --font-display: "Gilroy", sans-serif;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-red);
  color: var(--color-white);
  padding: 10px 16px;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* =========================================================
   Preloader
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.preloader__mark {
  width: 200px;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    transition: none;
  }
}

/* =========================================================
   Full-screen block sections
   Every major block occupies at least one full viewport height,
   with its content vertically centered and the divider button
   pinned to the bottom edge as a scroll cue. Page-by-page switching
   on desktop is handled by Pageable (see js/main.js).
   ========================================================= */
.hero,
.directions,
.project-block,
.priorities,
.approach,
.contact {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: var(--header-height);
  padding-block: 64px;
}

/* =========================================================
   Pageable (page-by-page switching, desktop >= 1024px only)
   body.pg-cover is set in js/main.js while Pageable is active.
   Pageable itself slides one tall container; here that container is
   pinned and the pages are stacked instead ("cover" transition): the
   next page slides up over the current one, which slightly recedes.
   The header is fixed, so every page reserves room for it at the top.
   ========================================================= */
body.pg-cover .site-header {
  position: fixed;
  left: 0;
  right: 0;
}

/* Pageable scrolls the wrapper (hiding its scrollbar by making it wider
   than the screen); with stacked pages nothing needs to scroll there. */
body.pg-cover .pg-wrapper {
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.pg-cover .pg-container {
  display: block !important;
  position: relative;
  height: 100vh !important;
  overflow: clip;
  transform: none !important;
}

body.pg-cover .pg-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  transform: translate3d(0, 100%, 0);
  transition: transform var(--pg-speed) var(--pg-ease);
  will-change: transform;
}

body.pg-cover .pg-page:not(.site-footer) {
  padding-top: calc(var(--header-height) + 64px);
  /* Content taller than a low screen scrolls inside the page */
  overflow-y: auto;
  scrollbar-width: none;
  justify-content: safe center;
}

body.pg-cover .pg-page:not(.site-footer)::-webkit-scrollbar {
  display: none;
}

body.pg-cover .pg-page.is-shown {
  transform: translate3d(0, 0, 0);
  /* White pages on white — the shadow marks the incoming edge. Only on
     shown pages, so the next one waiting below the screen casts none. */
  box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.08);
}

body.pg-cover .pg-page.is-covered {
  transform: translate3d(0, -8%, 0) scale(0.94);
  box-shadow: none;
}

/* Footer keeps its own height and slides up from the bottom edge,
   while the last block moves up by the same amount (is-lifted), so
   the footer sits under it instead of covering it. */
body.pg-cover .pg-page.site-footer {
  top: auto;
  bottom: 0;
  height: auto !important;
  box-shadow: none;
}

body.pg-cover .pg-page.is-lifted {
  transform: translate3d(0, calc(-1 * var(--pg-footer-height, 0px)), 0);
  box-shadow: none;
}

/* Right-side page dots */
.pg-pips ul li a,
.pg-pips ul li:hover a {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--color-black);
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.pg-pips ul li:hover a {
  opacity: 0.7;
}

.pg-pips ul li a.active,
.pg-pips ul li:hover a.active {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--color-red);
  opacity: 1;
  transform: scale(1.5);
}

.pg-vertical .pg-pips {
  right: 24px;
}

/* The footer isn't a full screen — no dot for it */
.pg-pips ul li:last-child {
  display: none;
}

/* Not in the mockup, and at these narrower desktop widths the dots sit
   on top of the page photos/text rather than clear of them — hide
   rather than fight for space that isn't there. */
@media screen and (min-width: 1024px) and (max-width: 1400px) {
  .pg-pips {
    display: none !important;
  }
}

/* =========================================================
   Section title (red banner)
   ========================================================= */
.section-title {
  background: var(--color-red);
  color: var(--color-white);
  text-align: center;
  font-size: 24px;
  padding: 16px 20px;
  margin-bottom: 48px;
}

/* =========================================================
   Section divider (chevron button, pinned to bottom of block)
   ========================================================= */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  border: 2px solid var(--color-black);
  color: var(--color-black);
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.section-divider img {
  width: 16px;
  height: 16px;
}

.section-divider:hover,
.section-divider:focus-visible {
  background: var(--color-black);
}

.section-divider:hover img,
.section-divider:focus-visible img {
  filter: invert(1);
}

/* =========================================================
   Screen-end bar (rule + mark, pinned as the last group in a
   full-screen block that's laid out with space-between)
   ========================================================= */
.screen-end {
  display: flex;
  align-items: center;
  gap: 24px;
}

.screen-end__rule {
  flex: 1;
  height: 2px;
  background: var(--color-black);
}

.screen-end__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  cursor: default;
}

.screen-end__mark img {
  width: 100%;
  height: 100%;
}

/* Interactive variant: a back-to-top control (red border, chevron).
   Stays faded out while the page is actively scrolling and fades
   back in once scrolling settles, so it reads as a deliberate cue
   rather than a static fixture on every screen. */
.screen-end__mark--active {
  border-radius: 8px;
  border: 3px solid var(--color-red);
  background: var(--color-white);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.screen-end__mark--active.is-idle {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .screen-end__mark--active {
    opacity: 1;
    transition: none;
  }
}

.screen-end__mark--active img {
  width: 18px;
  height: 18px;
}

/* =========================================================
   Photo placeholders
   Stand-ins for real photography — swap the files in /img
   once supplied, the markup and sizing stay the same.
   ========================================================= */
.photo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-placeholder);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.logo__image {
  height: 48px;
  width: auto;
}

.logo__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.01em;
  color: var(--color-red);
}

.logo__rule {
  width: 92px;
  height: 1px;
  margin-top: 6px;
  background: var(--color-black);
}

.logo__tagline {
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-black);
}

.logo--light .logo__rule {
  background: var(--color-white);
}

.logo--light .logo__tagline {
  color: var(--color-white);
}

.main-nav{
  margin-left: auto;
}
.main-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
}

.main-nav__list a {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--font-display);
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible,
.main-nav__list a.is-active {
  color: var(--color-red);
}

.lang-switch {
  position: relative;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.lang-switch__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.lang-switch__icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__icon {
  transform: rotate(0deg);
}

.lang-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 68px;
  /* background: var(--color-white);
  border: 1px solid var(--color-border); */
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); */
  z-index: 20;
}

.lang-switch__menu button {
  display: block;
  width: 100%;
  padding: 5px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-gray);
}

.lang-switch__menu button:hover {
  /* background: var(--color-bg); */
  color: var(--color-red);
}

.lang-switch__menu button.is-active {
  color: var(--color-red);
}

/* Mobile nav toggle is not used in this desktop build yet —
   a separate mobile layout will introduce it later. */
.nav-toggle {
  display: none;
}

/* =========================================================
   Hero
   ========================================================= */
.hero__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero__inner .hero__grid {
  margin-bottom: 54px;
}

.hero__inner .stats {
  margin-bottom: 100px;
}

.hero__grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
}

.hero__content {
  flex: 0 1 50%;
  padding-top: 8px;
}

.hero__media {
  flex: 1;
  aspect-ratio: 1.8 / 1;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  filter: grayscale(1);
  will-change: transform;
}

.hero__content {
  will-change: transform, opacity;
}

.hero__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.35;
  color: var(--color-black);
}

.stats {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* max-width: 190px; */
  width: 40%;
}

.stats__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 88px;
  color: var(--color-black);
  line-height: 1;
}

/* .stats__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 40%;
  width: 100%;
} */

.stats__label{
  margin-left: 0;
  min-height: 32px;
  display: inline-block;
  line-height: 1.4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-left: 40%;
}

.stats__label > span{
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 5px 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* An empty chip (e.g. a language's unused second stat line) would
   otherwise still render as a small padded box, reading as a stray
   gap in the middle of the caption. */
.stats__label > span:empty {
  display: none;
}

html:not(:lang(kk)) .stats__label--top {
  display: none !important;
}

html:has(:lang(kk)) .stats__label--top {
  margin-left: 0;
  white-space: nowrap;
  height: 34px;
}

/* Two chips in a stacked label must always sit one above the other —
   relying on them being too wide to fit on one line was fragile and
   broke for short words (e.g. the Kazakh "ірі жоба"). */
.stats__label--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* .stats__chip {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  padding: 3px 10px;
} */


/* =========================================================
   Directions
   ========================================================= */
.directions {
  background: var(--color-white);
}

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

.directions__inner .chip-title-wrap {
  margin-bottom: 64px;
}

.directions__inner .directions__grid {
  margin-bottom: 100px;
}

.chip-title-wrap {
  display: flex;
  justify-content: center;
}

.chip-title {
  display: inline-block;
  /* background: var(--color-red); */
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 5px 10px 0 0;
}
.chip-title > span{
  background-color: var(--color-red);
  line-height: 0.7em;
  padding: 5px 10px 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.chip-title--black {
  /* background: var(--color-black); */
  font-size: 28px;
  margin-top: 5px;
  padding: 5px 10px 0;
}

.chip-title--black-2 {
  margin-top: -5px;
}

.directions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
}

.direction-card {
  position: relative;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.direction-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-black);
}

.direction-card:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 0;
  left: -24px;
  width: 4px;
  background: var(--color-black);
}

.direction-card__icon {
  width: auto;
  /* Fixed height (not width) so icons with different intrinsic aspect
     ratios still reserve the same vertical space — otherwise the fixed
     gap below them makes each card's text start at a different height. */
  height: 90px;
}

.direction-card p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-black);
}

/* =========================================================
   Projects
   Each project block is its own full-screen section.
   ========================================================= */
.projects {
  background: var(--color-white);
}

.project-block {
  background: var(--color-white);
}

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

.project-block__inner .project-block__layout {
  margin-bottom: 90px;
}

.project-block:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.project-block__eyebrow {
  color: var(--color-red);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.project-block__title {
  font-size: 24px;
  margin-bottom: 24px;
  max-width: 40ch;
}

.project-block__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-block__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.project-block__list:not(.project-block__list--overlap) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 9px;
  height: 9px;
  background: var(--color-red);
}

.project-block__gallery {
  display: flex;
  flex-wrap: wrap;
}

.project-block__gallery img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  filter: grayscale(1);
  padding-bottom: 25px;
}

.project-block__gallery .col-1{
  width: 50%;
  padding-top: 50px;
  padding-right: 25px;
}
.project-block__gallery .col-2{
  width: 50%;
}

/* --- Featured layout: two-column text + split photo grid --- */
.project-block__layout {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.project-block__text {
  flex: 1;
}

.project-block__text .chip-title{
  font-size: 34px;
}

/* "Featured Projects" (EN) is long enough to wrap onto a second line
   within this column; the mockup keeps it on one line. Scoped to the
   red eyebrow chip only, so the black title chip below it still wraps
   normally (e.g. "Radio Communication" is meant to be two lines). */
.project-block__text .chip-title:not(.chip-title--black) {
  white-space: nowrap;
}

.project-block__text .chip-title {
  margin-bottom: 10px;
}

.project-block__list--overlap {
  margin-top: 32px;
  gap: 24px;
  margin-left: 15px;
}

.project-block__list--overlap li {
  padding-left: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-black);
}

.bullet-mark {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 22px;
  height: 22px;
  background: var(--color-red);
  z-index: 0;
  border-radius: 5px;
}

.bullet-text {
  position: relative;
  z-index: 1;
}

.project-block__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.project-block__photo--1 {
  height: 70%;
}

.project-block__photo--2 {
  height: 50%;
}

/* Mirrored layout: tall photo on the left, stacked pair on the right */
.project-block__gallery--reverse .project-block__photo--tall {
  grid-column: 1;
}

.project-block__gallery--reverse .project-block__photo--1,
.project-block__gallery--reverse .project-block__photo--2 {
  grid-column: 2;
}

.project-block-2 .project-block__gallery .col-1{
  padding-top: 0;
}
.project-block-2 .project-block__gallery .col-2{
  padding-top: 50px;
}
.project-block-2 .project-block__gallery .project-block__photo--1{
  height: 50%;
}

.project-block-3 .project-block__gallery .col-1{
  padding-top: 0;
}
.project-block-3 .project-block__gallery .col-2{
  padding-top: 50px;
}
.project-block-3 .project-block__gallery .project-block__photo--1{
  height: 60%;
}
.project-block-3 .project-block__gallery .project-block__photo--2{
  height: 50%;
}

.chip-title--black{
  background-color: transparent;
  margin-bottom: 0;
  padding: 0;
}

.chip-title--black > span{
  background-color: var(--color-dark);
  line-height: 1.35em;
  padding: 5px 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================
   Chip title — small variant (card/step subtitles)
   ========================================================= */
.chip-title--sm {
  font-size: 22px;
  margin-top: 0;
  text-transform: none;
}

/* =========================================================
   Priorities
   ========================================================= */
.priorities {
  background: var(--color-white);
}

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

.priorities__inner .chip-title-wrap {
  margin-bottom: 64px;
}

.priorities__inner .priorities__grid {
  margin-bottom: 100px;
}

.priorities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
}

.priority-card {
  border-left: 3px solid var(--color-red);
  padding-left: 20px;
}

.priority-card .chip-title {
  margin-bottom: 14px;
}

.priority-card p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-black);
}

/* =========================================================
   Approach
   ========================================================= */
.approach {
  background: var(--color-white);
}

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

.approach__inner .chip-title-wrap {
  margin-bottom: 64px;
}

.approach__inner .approach__steps {
  margin-bottom: 100px;
}

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

.approach-step {
  --step-color: var(--color-gray-light);
  --step-chip-bg: var(--color-gray-light);
  --step-text-color: var(--color-gray);
}

.approach-step__number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: var(--step-color);
  transition: color 0.3s ease;
}

.approach-step__rule {
  display: block;
  height: 3px;
  margin-top: 10px;
  margin-bottom: 20px;
  background: var(--step-color);
  transition: background-color 0.3s ease;
}

.approach-step .chip-title {
  background: transparent;
  margin-bottom: 14px;
  transition: background-color 0.3s ease;
  line-height: 1.5em;
  padding: 0;
}

.approach-step .chip-title > span{
  background-color: var(--step-chip-bg);
  line-height: 1.7em;
  padding: 5px;  
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.approach-step p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  color: var(--step-text-color);
  transition: color 0.3s ease;
}

/* Steps cycle through highlighted state automatically (js/main.js,
   every 2.4s, pausing on hover) instead of one or two steps being
   permanently singled out. Hovering a step highlights it (also set in
   js/main.js, so only one step is active at a time). :focus-within
   also highlights a step so keyboard users get the same cue when
   tabbing into it. */
.approach-step.is-active,
.approach-step:focus-within {
  --step-color: var(--color-red);
  --step-chip-bg: var(--color-black);
  --step-text-color: var(--color-black);
}

/* =========================================================
   Contact
   ========================================================= */
.contact {
  background: var(--color-white);
}

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

.contact__inner .contact__grid {
  margin-bottom: 100px;
}

.contact__grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 48px;
}

.contact__media,
.contact__info {
  flex: 1;
}

.contact__media {
  position: relative;
  overflow: hidden;
}

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

.contact__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.contact__info .chip-title {
  margin-bottom: 32px;
  margin-top: 0;
  padding-top: 0;
}

.contact__info address {
  margin-top: 20%;
  font-style: normal;
}

.contact__info address p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: var(--color-black);
  margin-bottom: 10px;
}

.contact__info a:hover {
  color: var(--color-red);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding-top: 36px;
  /* scroll-snap-align: end; */
}

.footer__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
}

.footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

.footer__phone img {
  width: 18px;
  height: auto;
}

.footer__nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 36px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  /* text-transform: uppercase; */
  letter-spacing: 0.03em;
  justify-content: flex-start;
}

.footer__nav a:hover,
.footer__nav a.is-active {
  color: var(--color-red);
}

.footer__bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  padding-block: 20px;
  font-size: 11px;
  color: var(--color-white);
}

.footer__bottom a:hover {
  color: var(--color-red);
}

/* =========================================================
   Scroll reveal animations
   Content in every full-screen block (besides the hero, which
   has its own parallax) fades/slides into place as that block
   becomes the active slide. The hidden starting state only
   applies once js/main.js confirms JS + IntersectionObserver
   are available and motion isn't reduced (.has-js-reveal on
   <html>) — without it, everything stays visible by default.
   ========================================================= */
/* html.has-js-reveal .directions .chip-title,
html.has-js-reveal .priorities .chip-title-wrap .chip-title,
html.has-js-reveal .approach .chip-title-wrap .chip-title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.has-js-reveal .direction-card,
html.has-js-reveal .priority-card,
html.has-js-reveal .approach-step {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.has-js-reveal .project-block__text {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.has-js-reveal .project-block__gallery {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.has-js-reveal .contact__media {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.has-js-reveal .contact__info {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
} */

/* Stagger grid items so they don't all land at once */
/* .direction-card:nth-child(2) { transition-delay: 0.12s; }
.direction-card:nth-child(3) { transition-delay: 0.24s; }

.priority-card:nth-child(2) { transition-delay: 0.08s; }
.priority-card:nth-child(3) { transition-delay: 0.16s; }
.priority-card:nth-child(4) { transition-delay: 0.24s; }
.priority-card:nth-child(5) { transition-delay: 0.32s; }
.priority-card:nth-child(6) { transition-delay: 0.4s; }

.approach-step:nth-child(2) { transition-delay: 0.12s; }
.approach-step:nth-child(3) { transition-delay: 0.24s; }
.approach-step:nth-child(4) { transition-delay: 0.36s; } */

/* Revealed state, scoped per block so re-entering a block replays it.
   Needs the same html.has-js-reveal prefix as the hidden-state rules
   above — otherwise it has lower specificity (one fewer type selector)
   and the opacity: 0 rule wins even after .in-view is added. */
/* html.has-js-reveal .directions.in-view .chip-title,
html.has-js-reveal .priorities.in-view .chip-title-wrap .chip-title,
html.has-js-reveal .approach.in-view .chip-title-wrap .chip-title,
html.has-js-reveal .directions.in-view .direction-card,
html.has-js-reveal .priorities.in-view .priority-card,
html.has-js-reveal .approach.in-view .approach-step,
html.has-js-reveal .project-block.in-view .project-block__text,
html.has-js-reveal .project-block.in-view .project-block__gallery,
html.has-js-reveal .contact.in-view .contact__media,
html.has-js-reveal .contact.in-view .contact__info {
  opacity: 1;
  transform: translate(0, 0);
} */



/* =========================================================
   Mobile Navigation Controls
   ========================================================= */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1001;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-black);
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: absolute;
  left: 0;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 10px; }
.nav-toggle__bar:nth-child(3) { top: 20px; }

/* Анимация превращения гамбургера в крестик (X) */
.site-header.is-menu-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.site-header.is-menu-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-menu-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

.mobile-lang-switch {
  display: none;
}

.mobile-menu{
  display: none;
}

/* Short laptop screens (1366x768, 1024x768): the full-screen blocks'
   generous vertical rhythm doesn't fit, cropping content that Pageable's
   page-by-page flipping then makes hard to reach by scrolling. Tighten
   the paddings/margins instead of relying on the internal-scroll
   fallback, so everything just fits. Scoped to the desktop width where
   Pageable is active (<1024px uses the separate mobile layout). */
@media screen and (min-width: 1024px) and (max-height: 820px) {
  .hero,
  .directions,
  .project-block,
  .priorities,
  .approach,
  .contact {
    padding-block: 32px;
  }

  .hero__inner .hero__grid {
    margin-bottom: 28px;
  }

  .hero__inner .stats {
    margin-bottom: 40px;
  }

  .stats__number {
    font-size: 64px;
  }

  .directions__inner .chip-title-wrap,
  .priorities__inner .chip-title-wrap,
  .approach__inner .chip-title-wrap {
    margin-bottom: 32px;
  }

  .directions__inner .directions__grid,
  .priorities__inner .priorities__grid,
  .approach__inner .approach__steps {
    margin-bottom: 40px;
  }

  .project-block__inner .project-block__layout {
    margin-bottom: 32px;
  }

  .contact__inner .contact__grid {
    margin-bottom: 40px;
  }
}

/* The Russian labels are long enough that the header nav wraps onto a
   second line in this narrow desktop range (just above the mobile
   breakpoint) — tighten the gap and type size so it keeps fitting on
   one line instead. */
@media screen and (min-width: 1024px) and (max-width: 1120px) {
  .site-header .main-nav__list {
    gap: 4px 18px;
    font-size: 13px;
  }
}

/* =========================================================
   Mobile Menu Screen Styles (< 1024px)
   ========================================================= */
@media screen and (max-width: 1023px) {
  .main-nav{
    display: none;
  }
  .nav-toggle {
    display: block; /* Показываем иконку гамбургера */
  }

  /* Скрываем десктопный язык в шапке */
  .header-inner > .lang-switch {
    display: none;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--color-white);
    z-index: 1000;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 100px 20px 40px;
  }

  /* Открытое состояние меню */
  .site-header.is-menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu .main-nav {
    display: block !important;
    margin-left: 0;
    width: 100%;
  }

  .mobile-menu .main-nav__list {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
  }

  .mobile-menu .main-nav__list a {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: none;
  }

  .mobile-menu .main-nav__list a.is-active {
    color: var(--color-red);
  }

  /* Нижний блок языков в мобильном меню */
  .mobile-lang-switch {
    position: static;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: auto;
    padding-bottom: 20px;
  }

  .mobile-lang-switch button {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-gray-light);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
  }

  .mobile-lang-switch button.is-active,
  .mobile-lang-switch button:hover {
    color: var(--color-red);
  }
}

/* =========================================================
   Approach — Десктоп (сетка в 4 колонки по умолчанию)
   ========================================================= */
.approach__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.approach-step {
  --step-color: var(--color-gray-light);
  --step-chip-bg: var(--color-gray-light);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Кнопка-стрелка на десктопе скрыта */
.approach-step__next {
  display: none;
}

/* =========================================================
   Approach — Мобильные устройства (горизонтальный скролл)
   ========================================================= */
@media screen and (max-width: 1023px) {
  /* 1. Выгоняем скролл-контейнер за пределы паддингов .container */
  .approach .container:has(.approach__steps) {
    padding-inline: 0 !important; /* Убираем боковые отступы у контейнера */
  }

  .approach__steps {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    
    /* Отступы по бокам, чтобы первая и последняя карточки не липли к краю экрана */
    padding-inline: 20px; 
    padding-bottom: 24px;

    /* Скрытие полосы прокрутки */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .approach__steps::-webkit-scrollbar {
    display: none;
  }

  .approach-step {
    /* 2. Настраиваем точную ширину карточки (ширина экрана минус отступы) */
    flex: 0 0 95vw;
    max-width: 95vw;
    
    /* Выравнивание карточки ровно по центру/краю при прилипании */
    scroll-snap-align: center;
    scroll-snap-stop: always;

    padding-inline: 20px; /* внутренний отступ текста внутри карточки */
    
    position: relative;
    padding-bottom: 56px;
  }

  .approach-step__next {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid var(--color-red);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .approach-step__next img {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
  }

  /* Убираем боковые паддинги у контейнера directions, чтобы слайды проходили от края до края */
  .directions .container:has(.directions__grid) {
    padding-inline: 0 !important;
  }

  .directions__grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-inline: 20px;
    padding-bottom: 24px;
    /* Скрываем полосу прокрутки */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 20px;
  }

  .directions__grid::-webkit-scrollbar {
    display: none;
  }

  .direction-card {
    /* Точная ширина карточки за вычетом боковых отступов */
    flex: 0 0 50%;
    max-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    position: relative;
    padding: 60px 10%;
  }

  /* Сбрасываем вертикальные разделительные линии разметки десктопа */
  /* .direction-card:not(:first-child)::after {
    display: none;
  } */

  /* Показываем красную кнопку-стрелку */
  .direction-card__next {
    position: absolute;
    right: 15px;
    bottom: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid var(--color-red);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .direction-card__next img {
    width: 16px;
    height: 16px;
    transform: rotate(90deg); /* Поворот шеврона вправо */
  }

  .direction-card__next:active {
    background: var(--color-red);
  }

  .direction-card__next:active img {
    filter: brightness(0) invert(1);
  }
}


@media screen and (max-width: 900px) {
  .hero__grid{
    flex-direction: column;
  }
  .hero__media img{
    height: 100%;
  }
  .stats{
    flex-wrap: wrap;
  }
  .priorities__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .direction-card{
    flex: 0 0 50%;
  }
  .direction-card:not(:first-child)::after{
    left: -10px;
  }
}

@media screen and (max-width: 600px) {
  .hero, .directions, .project-block, .priorities, .approach, .contact{
    min-height: auto;               /* Отключаем принудительную высоту во весь экран */
    padding-block: 44px;
  }
  .logo__image{
    max-width: 70%;
  }
  .main-nav{
    display: none;
  }
  .stats__item{
    margin-bottom: 40px;
  }
  .stats__number{
    font-size: 60px;
  }
  .stats__chip{
    font-size: 16px;
  }
  .direction-card{
    flex: 0 0 100%;
    padding: 60px 10%;
  }

  .chip-title{
    font-size: 28px;
  }
  .chip-title--black{
    font-size: 20px;
  }
  .hero__grid{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .hero__text{
    font-size: 20px;
  }
  .stats{
    flex-wrap: wrap;
  }
  .directions__grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .priorities__grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .approach__steps{
    grid-template-columns: repeat(1, 1fr);
  }
  .project-block__layout{
    flex-direction: column;
  }
  .contact__grid{
    flex-direction: column;
  }
  .site-footer .logo{
    width: 120px;
  }
  .footer__nav{
    display: none;
  }
  .project-block__gallery .col-1{
    padding-right: 15px;
  }
  .stats__label{
    margin-left: 20%;
    line-height: 1.4em;
  }
  .hero__inner .stats{
    margin-bottom: 50px;
  }

  .approach .approach__steps{
    margin-bottom: 0;
  }

  .approach-step__number{
    color: var(--color-red);
  }
  .approach-step__rule{
    background: var(--color-red);
  }
  .approach-step .chip-title > span{
    background-color: var(--color-black);
  }
  .approach-step p{
    color: var(--color-black);
  }
  .footer__phone{
    font-size: 14px;
  }

  .directions .directions__grid{
    margin-bottom: 0;
  }
  .screen-end{
    display: none;
  }

  .approach .chip-title,
  .directions .chip-title,
  .priorities .chip-title{
    text-align: center;
    padding: 0 5px 5px 0;
  }
  .contact .chip-title{
    margin: auto;
    margin-bottom: 32px;
  }
  .contact address{
    width: 100%;
  }
  .contact .contact__info{
    text-align: center;
  }
  .footer__bottom{
    flex-wrap: wrap;
  }
  .mobile-menu{
    display: block;
  }

  .lang-switch__menu{
    position: sticky;
  }
  .container{
    padding-inline: 30px;
  }
  .contact__info address p{
    font-size: 22px;
  }
  .contact__info address{
    margin-top: 10%;
  }
  
}

@media screen and (max-width: 400px) {
  .container{
    padding-inline: 20px;
  }
  .stats__item{
    width: 50%;
  }
  .hero__inner .stats{
    margin-bottom: 0px;
  }
  .chip-title{
    font-size: 20px;
  }
  .direction-card {
    flex: 0 0 100%;
  }
  .contact__info address p{
    font-size: 20px;
  }
  .contact__info address{
    margin-top: 10%;
  }
}