/* ══════════════════════════════════════════════════════════════════
   EUROGROUP ENGINEERING — слой доработки дизайна
   Мотив: язык исполнительной документации — оси, размерные линии,
   контрольные точки, отметки отклонений. Ничего декоративного:
   каждый элемент означает что-то реальное из работы технадзора.
   ══════════════════════════════════════════════════════════════ */

:root{
  --mark:#c1442e;                                    /* цвет предписания */
  --paper:color-mix(in srgb,#5980a6 9%,transparent); /* миллиметровка */
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth}
main{overflow-x:clip}

/* ─── 1. Пустые слоты получают чертёжную графику ─────────────────
   35 слотов были залиты плоским цветом — главная причина «пустоты».
   Теперь это разрез каркаса, планы с осями, фасады объектов.
   Ваши фотографии при загрузке лягут поверх. */
image-slot{
  --slot-bg:transparent;
  display:block;width:100%;height:100%;
  background-repeat:no-repeat;background-position:50% 50%;background-size:cover;
}
/* сюда подставляются 35 чертежей — см. eurogroup-engineering-v2.html */
image-slot[fit="contain"]{background-size:contain;background-color:var(--color-bg)}

/* синий дуотон снят с графики и переведён на реальные фото —
   иначе тональный фильтр съедал красные отметки */
.duotone::after{display:none}
image-slot img{filter:grayscale(1) contrast(1.05) sepia(.28) hue-rotate(168deg) saturate(1.7)}

/* ─── 2. Разделитель секции = размерная линия ────────────────────
   Была ровная линейка. Стала линия с засечками по краям —
   так на чертеже обозначают замер. */
main>section>div[style*="border-top"]:has(>h2){
  border-top:none !important;
  position:relative;
  padding-top:26px !important;
  align-items:center !important;
}
main>section>div[style*="border-top"]:has(>h2)::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--color-divider);
}
main>section>div[style*="border-top"]:has(>h2)::after{
  content:"";position:absolute;top:-5px;left:0;right:0;height:11px;
  border-left:1px solid var(--mark);border-right:1px solid var(--mark);
  pointer-events:none;
}

/* ─── 3. Номер секции = маркер строительной оси ──────────────────
   Нумерация 01/02/03 сама по себе читается как шаблон.
   Кружок оси — знак из вашей же документации. */
main>section>div[style*="border-top"]:has(>h2)>span:first-child{
  flex:none;width:38px !important;height:38px;border-radius:50% !important;
  border:1px solid var(--mark);color:var(--mark) !important;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px !important;letter-spacing:.04em !important;
  background:var(--color-bg);
  transition:background .3s var(--ease),color .3s var(--ease);
}
main>section>div[style*="border-top"]:has(>h2):hover>span:first-child{background:var(--mark);color:var(--color-bg) !important}

main>section>div[style*="border-top"]:has(>h2)>a{
  align-self:center;padding-bottom:2px;
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 25%,transparent);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
main>section>div[style*="border-top"]:has(>h2)>a:hover{border-color:var(--mark);color:var(--mark)}

/* ─── 4. Первый экран: ломаем симметрию ──────────────────────────
   Было 50/50 — две равные колонки. Стало: кадр шире текста,
   выходит за правый край страницы и свешивается вниз. */
main[data-screen-label]>section:first-of-type{position:relative;z-index:1;padding-top:48px !important}
main[data-screen-label]>section:first-of-type>*{position:relative;z-index:1}
main[data-screen-label]>section:first-of-type h1{hyphens:none;word-break:keep-all;overflow-wrap:normal}
main[data-screen-label]>section:first-of-type::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-24px;bottom:0;left:-50vw;right:-50vw;
  background-image:
    repeating-linear-gradient(to right,var(--paper) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to bottom,var(--paper) 0 1px,transparent 1px 40px);
  -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 20%,transparent 92%);
}
@media (min-width:1000px){
  main[data-screen-label]>section:first-of-type{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:48px !important;
    align-items:stretch !important;
  }
  main[data-screen-label]>section:first-of-type>figure{
    margin:0 !important;
    min-height:460px;
  }
}

/* ─── 5. Карточки: реакция на курсор ─────────────────────────────*/
.card.blueprint{
  transition:transform .32s var(--ease),border-color .32s var(--ease),
             box-shadow .32s var(--ease);
  background:color-mix(in srgb,var(--color-bg) 60%,transparent);
}
.card.blueprint:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--color-accent) 65%,transparent);
  box-shadow:0 14px 34px color-mix(in srgb,#1d1f20 11%,transparent);
}
.blueprint>.corner{transition:color .32s var(--ease)}
.card.blueprint:hover>.corner{color:var(--mark)}

/* «+» в списках услуг — контрольная засечка */
.card ul li>span:first-child{color:var(--mark) !important;font-weight:500}

/* ─── 6. Полоса цифр: показания, а не четыре равные ячейки ───────*/
main>section[style*="border-top"]>div>div>div:first-child{
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--color-text) !important;
  position:relative;display:inline-block;
}
main>section[style*="border-top"]>div>div>div:first-child::after{
  content:"";position:absolute;left:0;bottom:6px;width:100%;height:1px;
  background:color-mix(in srgb,var(--color-text) 18%,transparent);
}
main>section[style*="border-top"]>div>div:first-child>div:first-child{
  font-size:82px !important;color:var(--mark) !important;
}

/* ─── 7. Кнопки ──────────────────────────────────────────────────*/
.btn-primary{transition:transform .2s var(--ease),background .2s var(--ease)}
.btn-primary:hover{transform:translateY(-2px)}

/* ─── 8. Появление секций при прокрутке (без JS) ─────────────────*/
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    main>section{
      animation:ee-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 34%;
    }
    main[data-screen-label]>section:first-of-type{animation:none}
  }
}
@keyframes ee-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* ─── 9. Подвал: тонкая размерная сетка ──────────────────────────*/
footer{position:relative}
footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(to right,
    color-mix(in srgb,#f2f2f3 10%,transparent) 0 1px,transparent 1px 40px);
}

/* ─── 10. Мобильная адаптация ────────────────────────────────────
   В исходнике страница на экране 390 px разъезжалась до 906 px:
   все сетки были жёстко зафиксированы. */
html,body{max-width:100%;overflow-x:hidden}
@media (max-width:999px){
  main div[style*="grid-template-columns"],
  main dl[style*="grid-template-columns"],
  main section[style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr) !important;
  }
  main dl dd{margin:0 0 12px !important}
  .card ul li{grid-template-columns:14px minmax(0,1fr) !important}

  main>section[style*="border-top"]>div,
  main>section>div[style*="repeat(7"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  main[data-screen-label]>section:first-of-type h1{font-size:clamp(36px,9vw,58px) !important}
  main>section,header>div,footer>div{padding-left:20px !important;padding-right:20px !important}
  main>section>div[style*="border-top"]:has(>h2){flex-wrap:wrap;gap:12px !important}
  main>section>div[style*="border-top"]:has(>h2) h2{font-size:30px !important}
  main>section>div[style*="border-top"]:has(>h2)>a{margin-left:0 !important}
  .input,.btn{max-width:100%}
  header nav{width:100%;margin-left:0 !important;gap:12px !important;font-size:13px !important}
}
@media (max-width:560px){
  main>section[style*="border-top"]>div{grid-template-columns:minmax(0,1fr) !important}
  main>section[style*="border-top"]>div>div{
    border-left:none !important;padding-left:0 !important;
    border-top:1px solid var(--color-divider);padding-top:24px !important;
  }
}