/* ========================================================
   ВАЛДАЙСКИЙ ЖБК — design system
   Industrial × Swiss-modernist. Concrete as material.
   ======================================================== */

:root {
  /* palette */
  --ink:      #0C0D0E;
  --graphite: #1C1E21;
  --steel:    #4A4E54;
  --ash:      #8A8B86;
  --concrete: #C2BCB0;
  --bone:     #EFEAE0;
  --paper:    #F7F4EC;
  --rebar:    #D24B2F;
  --rebar-dk: #9E3620;
  --safety:   #F3C300;

  /* type */
  --display: "Unbounded", "Inter Tight", system-ui, sans-serif;
  --body:    "Manrope", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* space / grid */
  --gutter: clamp(16px, 2.2vw, 32px);
  --edge:   clamp(20px, 4vw, 64px);
  --col:    1fr;
  --line:   1px;
  --radius: 0;

  /* motion */
  --ease:    cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

body {
  font-family: var(--body);
  font-size: clamp(15px, 1vw + 10px, 17px);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(210,75,47,.04), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(12,13,14,.05), transparent 35%);
  overflow-x: hidden;
  min-height: 100vh;
}

/* concrete noise overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  z-index: 100;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.32 0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.45'/></svg>");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }

::selection { background: var(--rebar); color: var(--paper); }

/* ---------- typography ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .92;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--steel);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
}
.num {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ---------- layout shell ---------- */
.shell {
  padding-inline: var(--edge);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.rule {
  height: 1px;
  background: var(--ink);
  opacity: .18;
}

/* ---------- top bar ---------- */
.tickline {
  border-block: 1px solid rgba(12,13,14,.18);
  background: var(--bone);
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--steel);
  overflow: hidden;
  white-space: nowrap;
}
.tickline__inner {
  display: inline-flex;
  gap: 3rem;
  padding: .55rem 0;
  animation: tick 60s linear infinite;
}
.tickline__inner span {
  display: inline-flex;
  align-items: center;
  gap: .8em;
}
.tickline__inner span::before {
  content: "■";
  color: var(--rebar);
}
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid rgba(12,13,14,.12);
  backdrop-filter: blur(8px);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
}
.brand__mark {
  width: 40px; height: 40px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 25%;
  background: var(--rebar);
}
.brand__name { font-size: .95rem; }
.brand__name small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--steel);
  margin-top: .2em;
}

.nav__links {
  display: flex;
  gap: 1.6rem;
  font-family: var(--mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.nav__links a {
  position: relative;
  padding: .35rem 0;
  color: var(--graphite);
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--rebar);
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--rebar); }
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav__cta:hover { background: var(--rebar); transform: translateX(2px); }
.nav__cta svg { width: 14px; height: 14px; }

.nav__burger { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(2rem, 4vw, 4rem) clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}
.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--steel);
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.hero__meta span { display: block; line-height: 1.4; }
.hero__meta strong {
  color: var(--ink);
  font-weight: 500;
  display: block;
  font-size: .82rem;
  letter-spacing: .06em;
}

.hero__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.8vw + .8rem, 2.4rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 40ch;
  margin-block: clamp(1rem, 2vw, 1.8rem);
}
.hero__title br { display: inline; }
@media (max-width: 700px) { .hero__title br { display: none; } }
.hero__title .line {
  display: block;
  overflow: hidden;
}
.hero__title .line span {
  display: block;
  transform: translateY(110%);
  animation: rise 1.1s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) span { animation-delay: .05s; }
.hero__title .line:nth-child(2) span { animation-delay: .18s; }
.hero__title .line:nth-child(3) span { animation-delay: .31s; }
.hero__title .accent {
  color: var(--rebar);
  font-style: italic;
  font-weight: 400;
}
.hero__title .outline {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
  font-weight: 500;
}

@keyframes rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.hero__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.hero__lede {
  font-size: clamp(1.05rem, 1.2vw + .5rem, 1.35rem);
  line-height: 1.45;
  max-width: 44ch;
  color: var(--graphite);
  opacity: 0;
  animation: fade .9s var(--ease-out) .7s forwards;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  opacity: 0;
  animation: fade .9s var(--ease-out) .85s forwards;
}
.stat {
  border-top: 2px solid var(--ink);
  padding-top: .8rem;
}
.stat__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.stat__num i {
  color: var(--rebar);
  font-style: normal;
}
.stat__label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--steel);
  margin-top: .5rem;
  max-width: 20ch;
}

@keyframes fade { to { opacity: 1; } }

/* hero side illustration: stylised rebar grid */
.hero__art { display: none; }
@media (max-width: 900px) { .hero__art { display: none; } }

/* ---------- section heads ---------- */
.section {
  padding-block: clamp(4rem, 8vw, 8rem);
  position: relative;
}
.section--dark {
  background: var(--ink);
  color: var(--bone);
}
.section--dark .eyebrow { color: var(--concrete); }
.section--dark .rule { background: var(--bone); opacity: .2; }

.section__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 4rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(12,13,14,.15);
}
.section--dark .section__head { border-bottom-color: rgba(239,234,224,.18); }
.section__kicker .eyebrow { margin-bottom: .8rem; }
.section__kicker .index {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -.03em;
  line-height: 1;
}
.section__kicker .index i {
  color: var(--rebar);
  font-style: normal;
  font-weight: 400;
}
.section__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  letter-spacing: -.02em;
  line-height: 1.05;
  max-width: 34ch;
}

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 4rem);
}
.about__text p + p { margin-top: 1.2rem; }
.about__text p {
  font-size: clamp(1.02rem, .45vw + .9rem, 1.18rem);
  line-height: 1.6;
  color: var(--graphite);
}
.about__text .lead {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.5vw + .7rem, 1.75rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
}

.timeline {
  display: grid;
  gap: .1rem;
  background: rgba(12,13,14,.12);
  border: 1px solid rgba(12,13,14,.12);
}
.tl {
  background: var(--paper);
  padding: 1.2rem 1.3rem;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.tl:hover { background: var(--ink); color: var(--bone); }
.tl:hover .tl__year { color: var(--safety); }
.tl__year {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  color: var(--rebar);
  transition: color .35s var(--ease);
}
.tl__event {
  font-size: .98rem;
  line-height: 1.45;
}

/* ---------- products ---------- */
.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.cat-filters button {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .55rem .95rem;
  border: 1px solid rgba(12,13,14,.22);
  background: transparent;
  transition: all .25s var(--ease);
}
.cat-filters button:hover,
.cat-filters button.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1px;
  background: rgba(12,13,14,.12);
  border: 1px solid rgba(12,13,14,.12);
}
.product {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  transition: background .35s var(--ease), color .35s var(--ease);
  display: flex;
  flex-direction: column;
}
.product__toggle {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.4rem 1.3rem 1.2rem;
  text-align: left;
  width: 100%;
  min-height: 280px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  border: 0;
  transition: background .35s var(--ease);
}
.product__toggle:hover { background: rgba(12,13,14,.04); }
.product[open] .product__toggle,
.product.is-open .product__toggle { background: var(--ink); color: var(--bone); }

.product__sketch {
  width: 100%;
  height: 130px;
  object-fit: contain;
  object-position: center;
  background: var(--bone);
  padding: .4rem;
  mix-blend-mode: multiply;
  filter: grayscale(.3) contrast(1.1);
  transition: filter .35s var(--ease), background .35s var(--ease);
}
.product.is-open .product__sketch { background: var(--graphite); mix-blend-mode: screen; filter: invert(1) grayscale(1) contrast(1.15); }
.product__sketch--empty {
  width: 100%; height: 130px; background: var(--bone);
  background-image:
    linear-gradient(135deg, transparent 46%, var(--ash) 46% 54%, transparent 54%),
    linear-gradient(45deg,  transparent 46%, var(--ash) 46% 54%, transparent 54%);
  background-size: 18px 18px;
  opacity: .35;
}

.product__code {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--steel);
}
.product.is-open .product__code { color: var(--concrete); }
.product__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  flex-grow: 1;
}
.product__more {
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid rgba(12,13,14,.15);
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--rebar);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.product__more svg { width: 12px; height: 12px; transition: transform .35s var(--ease); }
.product.is-open .product__more { color: var(--safety); border-top-color: rgba(239,234,224,.2); }
.product.is-open .product__more svg { transform: rotate(180deg); }

.product__spec {
  background: var(--ink);
  color: var(--bone);
  padding: 1.2rem 1.3rem 1.5rem;
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--rebar);
}
.product__spec[hidden] { display: none; }

.spec__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.spec__table th,
.spec__table td {
  padding: .45rem .4rem;
  text-align: left;
  border-bottom: 1px solid rgba(239,234,224,.12);
  vertical-align: baseline;
}
.spec__table thead th {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--concrete);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  border-bottom: 1px solid rgba(239,234,224,.22);
}
.spec__table thead th small {
  display: block;
  color: var(--ash);
  text-transform: none;
  letter-spacing: .06em;
  font-size: .62rem;
  margin-top: .15rem;
}
.spec__table tbody th {
  font-family: var(--display);
  font-weight: 600;
  color: var(--safety);
  letter-spacing: -.005em;
  font-size: .88rem;
}
.spec__table tbody td { color: var(--bone); }
.spec__table tbody tr:last-child th,
.spec__table tbody tr:last-child td { border-bottom: 0; }

.spec__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(239,234,224,.18);
}
.spec__meta dt {
  font-family: var(--mono);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--concrete);
  margin-bottom: .25rem;
}
.spec__meta dd {
  font-family: var(--display);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: -.005em;
}

/* ---------- services split ---------- */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(239,234,224,.2);
  border: 1px solid rgba(239,234,224,.2);
}
.service {
  background: var(--ink);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 280px;
  position: relative;
  overflow: hidden;
  transition: background .4s var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  inset: auto -40% -40% auto;
  width: 80%; aspect-ratio: 1;
  background: var(--rebar);
  border-radius: 50%;
  transform: scale(0);
  transform-origin: bottom right;
  transition: transform .6s var(--ease);
  z-index: 0;
}
.service:hover::before { transform: scale(1); }
.service > * { position: relative; z-index: 1; }
.service__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.2rem;
  color: var(--rebar);
  letter-spacing: -.03em;
}
.service:hover .service__num { color: var(--ink); }
.service__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.service__text {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--concrete);
  margin-top: auto;
}
.service:hover .service__text { color: var(--ink); }

/* ---------- process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  counter-reset: step;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--ink);
  position: relative;
  counter-increment: step;
}
.step__num {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--rebar);
}
.step__num::before { content: "0" counter(step) " / 04"; }
.step h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.step p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--steel);
}

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.contact__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: .95;
  letter-spacing: -.04em;
  margin-bottom: 2rem;
}
.contact__title i {
  color: var(--rebar);
  font-style: normal;
}
.contact__meta {
  display: grid;
  gap: 1.2rem;
  border-top: 1px solid rgba(239,234,224,.2);
  padding-top: 1.5rem;
}
.contact__meta dt {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--concrete);
  margin-bottom: .3rem;
}
.contact__meta dd {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.contact__meta a:hover { color: var(--rebar); }

/* email CTA */
.contact__cta {
  background: var(--graphite);
  padding: clamp(1.8rem, 3vw, 2.8rem);
  border: 1px solid rgba(239,234,224,.12);
  display: grid;
  gap: 1.4rem;
  align-content: start;
}
.contact__cta-lede {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.2vw + .5rem, 1.35rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--paper);
}
.contact__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--rebar);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1vw + .4rem, 1.3rem);
  letter-spacing: -.005em;
  transition: background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.contact__cta-btn:hover {
  background: var(--safety);
  color: var(--ink);
  transform: translateX(4px);
}
.contact__cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.contact__cta-hint {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--concrete);
  line-height: 1.6;
}
.contact__cta-hint a {
  color: var(--paper);
  border-bottom: 1px solid rgba(239,234,224,.3);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.contact__cta-hint a:hover { color: var(--rebar); border-color: var(--rebar); }

/* (legacy form styles — kept for any stray references, hidden if not used) */
.form {
  background: var(--graphite);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(239,234,224,.12);
  display: grid;
  gap: 1rem;
}
.form__row {
  display: grid;
  gap: .35rem;
}
.form label {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--concrete);
}
.form input,
.form textarea,
.form select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(239,234,224,.28);
  color: var(--paper);
  font: inherit;
  font-family: var(--body);
  padding: .6rem 0;
  transition: border-color .25s var(--ease);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--rebar);
}
.form textarea { resize: vertical; min-height: 90px; }
.form__submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.4rem;
  background: var(--rebar);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: background .3s var(--ease), transform .3s var(--ease);
  margin-top: .6rem;
}
.form__submit:hover {
  background: var(--safety);
  color: var(--ink);
  transform: translateX(4px);
}
.form__submit svg { width: 14px; height: 14px; }
.form__hint {
  font-size: .78rem;
  color: var(--ash);
  line-height: 1.4;
}

/* ---------- footer ---------- */
.footer {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(3rem, 5vw, 5rem) var(--edge) 2rem;
  position: relative;
  overflow: hidden;
}
.footer__mono {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 9rem);
  line-height: .85;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239,234,224,.22);
  white-space: nowrap;
  pointer-events: none;
  margin-bottom: 2rem;
  max-width: 100%;
  text-align: center;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gutter);
  padding-top: 2rem;
  border-top: 1px solid rgba(239,234,224,.18);
}
.footer h5 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--concrete);
  margin-bottom: 1rem;
}
.footer ul { display: grid; gap: .45rem; font-size: .92rem; }
.footer a:hover { color: var(--rebar); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(239,234,224,.18);
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ash);
}

/* ---------- diagonal divider ---------- */
.diag {
  position: relative;
  height: 100px;
  background: var(--ink);
  overflow: hidden;
}
.diag::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 0;
  height: 140%;
  background: var(--paper);
  transform-origin: top left;
  transform: skewY(-3deg);
}

/* ---------- reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .12s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .19s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .26s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .33s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .40s; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    padding: .6rem;
  }
  .nav__burger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--ink);
  }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid rgba(12,13,14,.12);
    padding: 1rem var(--edge);
  }
  .nav.is-open .nav__links a {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(12,13,14,.08);
  }
  .services { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__body,
  .about,
  .contact,
  .section__head { grid-template-columns: 1fr; }
  .section__head { align-items: start; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  :root { --edge: 16px; --gutter: 14px; }

  /* nav: compact, single-line brand, hide "Заявка" CTA (burger menu has all links) */
  .nav__inner { padding-block: .7rem; gap: .8rem; }
  .brand__mark { width: 34px; height: 34px; font-size: .85rem; }
  .brand__name { font-size: .8rem; line-height: 1.05; }
  .brand__name small { font-size: .54rem; margin-top: .15rem; letter-spacing: .12em; }
  .nav__cta { display: none; }

  /* ticker: smaller text, faster cycle */
  .tickline__inner { padding: .45rem 0; gap: 2rem; animation-duration: 45s; }
  .tickline { font-size: .6rem; letter-spacing: .12em; }

  /* hero: tighter */
  .hero { padding-block: 1.5rem 2rem; }
  .hero__meta { flex-direction: column; gap: .5rem; align-items: flex-start; font-size: .6rem; margin-bottom: 1rem; }
  .hero__meta strong { font-size: .7rem; }
  .hero__title { font-size: 1.35rem; line-height: 1.25; margin-block: .8rem; }
  .hero__lede { font-size: .98rem; line-height: 1.45; max-width: 100%; }
  .hero__body { gap: 1.2rem; margin-top: 1.5rem; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .stat { padding-top: .5rem; }
  .stat__num { font-size: 1.55rem; }
  .stat__label { font-size: .55rem; letter-spacing: .1em; line-height: 1.25; }

  /* sections: smaller paddings + smaller heads */
  .section { padding-block: 2.5rem; }
  .section__head { gap: .8rem; padding-bottom: 1rem; margin-bottom: 1.5rem; }
  .section__kicker .index { font-size: 1.8rem; }
  .section__kicker .eyebrow { font-size: .62rem; letter-spacing: .14em; }
  .section__title { font-size: 1.15rem; line-height: 1.25; max-width: 100%; }

  /* about / process / steps */
  .about { gap: 1.5rem; }
  .about__text .lead { font-size: 1.1rem; line-height: 1.3; }
  .about__text p { font-size: .95rem; }
  .timeline { display: grid; }
  .tl { grid-template-columns: 70px 1fr; padding: .9rem 1rem; }
  .tl__year { font-size: 1.15rem; }
  .tl__event { font-size: .9rem; line-height: 1.4; }
  .process { grid-template-columns: 1fr; gap: 1.2rem; }
  .step h4 { font-size: 1.05rem; }
  .step p { font-size: .88rem; }

  /* services */
  .service { padding: 1.4rem 1.2rem; min-height: auto; }
  .service__num { font-size: 1.6rem; }
  .service__title { font-size: 1.15rem; }
  .service__text { font-size: .88rem; }

  /* catalog filters: compact pills, scroll horizontally if too many */
  .cat-filters {
    display: flex; flex-wrap: nowrap; gap: .35rem;
    overflow-x: auto; padding-bottom: .4rem;
    margin-bottom: 1.2rem;
    scrollbar-width: none;
  }
  .cat-filters::-webkit-scrollbar { display: none; }
  .cat-filters button {
    flex: 0 0 auto;
    padding: .45rem .7rem;
    font-size: .62rem; letter-spacing: .08em;
    white-space: nowrap;
  }

  /* products grid: one column, smaller cards */
  .products { grid-template-columns: 1fr; }
  .product__toggle { padding: 1.1rem 1rem .9rem; min-height: auto; gap: .5rem; }
  .product__sketch { height: 110px; }
  .product__title { font-size: .98rem; }
  .product__more { font-size: .6rem; padding-top: .5rem; }

  /* spec table: shrink columns + horizontal scroll fallback for huge numbers */
  .product__spec { padding: 1rem 1rem 1.2rem; }
  .spec__table { font-size: .68rem; }
  .spec__table th, .spec__table td { padding: .35rem .25rem; }
  .spec__table thead th { font-size: .55rem; letter-spacing: .08em; }
  .spec__table thead th small { font-size: .54rem; }
  .spec__table tbody th { font-size: .76rem; }
  .spec__meta { gap: .65rem; padding-top: .7rem; grid-template-columns: 1fr 1fr; }
  .spec__meta dd { font-size: .85rem; }

  /* contact */
  .contact { gap: 1.5rem; }
  .contact__title { font-size: 2rem; line-height: 1; margin-bottom: 1.3rem; }
  .contact__meta { gap: .9rem; padding-top: 1rem; }
  .contact__meta dd { font-size: 1.1rem; }
  .contact__cta { padding: 1.4rem 1.2rem; gap: 1rem; }
  .contact__cta-lede { font-size: 1rem; }
  .contact__cta-btn { padding: .9rem 1rem; font-size: 1rem; }
  .contact__cta-hint { font-size: .68rem; line-height: 1.7; }

  /* footer */
  .footer { padding: 2rem var(--edge) 1.5rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.5rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 2rem; padding-top: 1rem; font-size: .58rem; }

  /* diagonal divider — smaller */
  .diag { height: 60px; }
}

@media (max-width: 380px) {
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
  .stat__num { font-size: 1.35rem; }
  .stat__label { font-size: .5rem; }
  .spec__table { font-size: .62rem; }
  .spec__table th, .spec__table td { padding: .3rem .2rem; }
  .section__kicker .index { font-size: 1.5rem; }
  .section__title { font-size: 1.05rem; }
  .contact__title { font-size: 1.7rem; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tickline__inner { animation: none; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
}

/* On mobile / narrow tablets: disable reveal animations entirely.
   Reason: on slow connections with the dark catalog section + lazy-loaded
   sketches, cards stayed invisible (opacity:0) until IntersectionObserver
   fired — producing a "black screen" effect until the user tapped a filter. */
@media (max-width: 900px) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
}