/* =========================================================
   ДЕЛЮКС — inner pages
   ========================================================= */

/* ---------- page hero ---------- */
.page-hero {
  position: relative;
  padding: clamp(128px, 15vw, 200px) 0 clamp(52px, 7vw, 90px);
  background: var(--dark);
  color: var(--paper);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.8); }
.page-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,11,14,.92), rgba(10,11,14,.45));
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero .display { margin-top: 22px; max-width: 15ch; color: var(--paper); }
.page-hero .lead { margin-top: 24px; color: rgba(243,241,236,.72); }
.page-hero__meta {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243,241,236,.5);
}
.page-hero--light { background: var(--paper); color: var(--ink); }
.page-hero--light .display { color: var(--ink); }
.page-hero--light .lead { color: var(--steel); }
.page-hero--light .page-hero__meta { border-color: var(--line); color: var(--muted); }

/* ---------- breadcrumbs ---------- */
.crumbs {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,241,236,.42);
  margin-bottom: 18px;
}
.crumbs a:hover { color: var(--orange-2); }
.page-hero--light .crumbs { color: var(--muted); }

/* ---------- split blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.split--media-first .split__media { order: -1; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 3/4; }
.split__caption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.split__text .h2 { margin-top: 18px; }
.split__text .lead { margin-top: 20px; }
.split__text p + p { margin-top: 16px; }
.split__list { margin-top: 26px; border-top: 1px solid var(--line); }
.split__list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.split__list span { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }

/* ---------- feature cards ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.features--2 { grid-template-columns: 1fr 1fr; }
.feature {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 34px);
  transition: border-color .3s, transform .4s var(--ease);
}
.feature:hover { border-color: var(--orange); transform: translateY(-4px); }
.feature__num { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--orange-3); }
.feature h3 { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.feature p { margin-top: 10px; font-size: 14px; color: var(--steel); }

/* ---------- process ---------- */
.process { position: relative; margin-top: 24px; }
.process__line { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--line); }
.process__line span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease); }
.process.is-in .process__line span { transform: scaleX(1); }
.process__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: 26px; }
.step__num {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--orange-3);
  margin-bottom: 18px;
}
.step h3 { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.step p { margin-top: 8px; font-size: 13.5px; color: var(--steel); }

/* ---------- ZOK comparison ---------- */
.zok { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.zok__card { background: var(--dark-2); border: 1px solid var(--line-dark); padding: 26px; color: var(--paper); }
.zok__card--accent { border-color: var(--orange); }
.zok__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-2); }
.zok__card h3 { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
.zok__span { margin-top: 6px; font-family: var(--mono); font-size: 11px; color: rgba(243,241,236,.55); }
.zok__card ul { margin-top: 20px; border-top: 1px solid var(--line-dark); }
.zok__card li { padding: 9px 0; border-bottom: 1px solid var(--line-dark); font-size: 12.5px; color: rgba(243,241,236,.7); display: flex; justify-content: space-between; gap: 12px; }
.zok__card li span { color: rgba(243,241,236,.4); font-family: var(--mono); font-size: 9px; }

/* ---------- MSB schematic ---------- */
.msb { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.msb__draw { position: relative; background: var(--dark-2); border: 1px solid var(--line-dark); padding: 26px; }
.msb__text .lead { margin-top: 20px; }
.msb__text p + p { margin-top: 16px; }
.msb__draw svg { width: 100%; height: auto; }
.msb__draw .s-line { stroke: rgba(243,241,236,.42); stroke-width: 1.2; fill: none; }
.msb__draw .s-accent { stroke: var(--orange); stroke-width: 1.4; fill: none; }
.msb__draw .s-fill { fill: rgba(243,241,236,.05); }
.msb__draw text { fill: rgba(243,241,236,.55); font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.msb__draw .s-num { fill: var(--orange); font-size: 9px; }
.msb__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 20px; }
.msb__legend div { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: rgba(243,241,236,.5); }
.msb__legend b { color: var(--orange-2); font-weight: 400; margin-right: 6px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); }
.specs div { padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.specs span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,241,236,.4); margin-bottom: 5px; }
.specs strong { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--paper); }
.msb__text .specs { border-top-color: var(--line); }
.msb__text .specs div { border-bottom-color: var(--line); }
.msb__text .specs span { color: var(--muted); }
.msb__text .specs strong { color: var(--ink); }

/* ---------- portfolio ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.filter {
  padding: 9px 16px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.filter:hover { border-color: var(--orange); color: var(--orange-3); }
.filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.portfolio .project.is-hidden { display: none; }

/* ---------- about ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.numbers div { padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numbers strong { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.03em; }
.numbers span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.timeline { border-top: 1px solid var(--line); }
.timeline__row { display: grid; grid-template-columns: 120px 1fr; gap: 30px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.timeline__row span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--orange-3); }
.timeline__row p { font-size: 15px; color: var(--ink-2); max-width: 70ch; }

/* ---------- contacts ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.contact-info { border-top: 1px solid var(--line); }
.contact-info__row { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info__row span { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.contact-info__row p, .contact-info__row a { font-size: 15px; }
.contact-info__row a:hover { color: var(--orange-3); }
.form { background: #fff; border: 1px solid var(--line); padding: clamp(22px, 3vw, 40px); }
.form h3 { font-family: var(--display); font-weight: 650; font-size: 24px; letter-spacing: -.02em; }
.form p { margin-top: 8px; font-size: 13.5px; color: var(--steel); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: span 2; }
.field label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 13px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .3s, background .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); background: #fff; }
.field textarea { min-height: 110px; resize: vertical; }
.form__foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.form__note { font-size: 11px; color: var(--muted); max-width: 30ch; }
.form__ok { display: none; margin-top: 18px; padding: 14px 16px; border: 1px solid #A8C7A0; background: #F1F8EE; font-size: 13px; }
.form__error { display: none; margin-top: 18px; padding: 14px 16px; border: 1px solid #D9A6A0; background: #FBEFED; font-size: 13px; color: #7A2B22; }
.form.has-error .form__error { display: block; }
.form .field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form.is-sent .form__ok { display: block; }
.form.is-sent .form__grid, .form.is-sent .form__foot { display: none; }
.map-frame { margin-top: 18px; border: 1px solid var(--line); background: var(--paper-2); aspect-ratio: 16/8; display: grid; place-items: center; position: relative; overflow: hidden; }
.map-frame::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-frame p { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 0 18px; line-height: 1.8; }
.map-frame p b { display: block; color: var(--ink); font-family: var(--display); font-size: 18px; letter-spacing: -.01em; margin-bottom: 4px; line-height: 1.2; }

/* ---------- responsive pages ---------- */
@media (max-width: 1000px) {
  .features { grid-template-columns: 1fr 1fr; }
  .zok { grid-template-columns: 1fr; }
  .msb { grid-template-columns: 1fr; }
  .portfolio { grid-template-columns: 1fr 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
  .split__media--tall img { aspect-ratio: 4/3; }
  .contact-grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .features { grid-template-columns: 1fr; }
  .portfolio { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .timeline__row { grid-template-columns: 70px 1fr; gap: 18px; }
  .form__grid { grid-template-columns: 1fr; }
  .field--full { grid-column: span 1; }
  .specs { grid-template-columns: 1fr 1fr; }
  .contact-info__row { grid-template-columns: 76px 1fr; }
  .map-frame p b { font-size: 15px; }
}