* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  ::selection { background: #E9A23B; color: #0c0d0f; }
  @keyframes mc-spark { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes mc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  [data-sec] { scroll-margin-top: 84px; }
  .mc-card:hover { border-color: #4a5059 !important; transform: translateY(-4px); }
  .mc-card:hover .mc-ic { color: #F4B95E !important; border-color: #6a5326 !important; }
  .mc-port:hover .mc-port-img { transform: scale(1.05); }
  .mc-port:hover { border-color: #4a5059 !important; }
  .mc-navlink:hover { color: #ffffff !important; }
  .mc-navlink:hover .mc-navdot { width: 100% !important; }
  .mc-btn-primary:hover { background: #F4B95E !important; box-shadow: 0 10px 30px rgba(233,162,59,.4) !important; }
  .mc-btn-ghost:hover { border-color: #6a7079 !important; color: #fff !important; }
  .mc-wa:hover { border-color: #25D366 !important; color: #25D366 !important; background: rgba(37,211,102,.10) !important; }
  .mc-step:hover { background: #1b1e23 !important; border-color: #383d45 !important; }
  img, svg, video { max-width: 100%; height: auto; }
  /* h1: колонка героя = 647px при 1180, слово "МЕТАЛЛОКОНСТРУКЦИИ" не влезало в 68.2px и рвалось.
     Тянем кегль за шириной колонки (57.5vw - 59px), пока сетка двухколоночная. */
  .mc-h1 { font-size: clamp(46px, calc(5.4vw - 6px), 60px) !important; }
  @media (max-width: 1040px) {
    .mc-desknav, .mc-deskcta { display: none !important; }
    .mc-burger { display: flex !important; }
    .mc-hero-grid { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
    .mc-hero-grid .mc-hero-visual { max-width: 360px; width: 100%; margin: 0 auto; }
    .mc-contact-grid { grid-template-columns: minmax(0,1fr) !important; padding: 40px 26px !important; gap: 36px !important; }
    .mc-h1 { font-size: 59.4px !important; }
  }
  @media (max-width: 1000px) {
    .mc-serv-grid, .mc-port-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .mc-proc-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .mc-why-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  }
  @media (max-width: 768px) {
    .mc-h1 { font-size: 55px !important; }
    .mc-sec-h2, .mc-contact-h2 { font-size: 37.4px !important; }
    #top { padding: 116px 20px 64px !important; }
    #uslugi, #portfolio, #faq { padding: 66px 20px !important; }
    #process { padding: 62px 20px !important; }
    #contact { padding: 0 20px 66px !important; }
    .mc-why-sec { padding: 58px 20px !important; }
  }
  @media (max-width: 640px) {
    .mc-proc-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  }
  @media (max-width: 560px) {
    .mc-serv-grid, .mc-port-grid, .mc-proc-grid, .mc-why-grid { grid-template-columns: minmax(0,1fr) !important; }
    .mc-h1 { font-size: clamp(24.2px, 8vw, 41.8px) !important; line-height: 1.12 !important; }
    .mc-sec-h2, .mc-contact-h2 { font-size: 30.8px !important; }
    #top { padding: 104px 16px 52px !important; }
    #uslugi, #portfolio, #faq { padding: 54px 16px !important; }
    #process { padding: 50px 16px !important; }
    #contact { padding: 0 16px 56px !important; }
    .mc-why-sec { padding: 50px 16px !important; }
    .mc-contact-grid { padding: 26px 18px !important; gap: 28px !important; }
    .mc-form { padding: 22px 18px !important; }
    .mc-hero-stat { gap: 22px 26px !important; }
  }

/* ── header scroll state (was inline-bound in the bundle) ── */
#mc-header.is-scrolled { background: rgba(12,13,15,0.92) !important; border-bottom-color: #23272d !important; box-shadow: 0 10px 34px rgba(0,0,0,0.5) !important; }

/* ── FAQ accordion ── */
.mc-faq-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
.mc-faq.is-open .mc-faq-body { max-height: 600px; opacity: 1; }
.mc-faq.is-open .mc-faq-sign { transform: rotate(45deg); color: #E9A23B; }
.mc-faq-q:hover span:first-child { color: #E9A23B; }

/* ── длинный текст (KZ/RU) не выходит за рамки ── */
.mc-h1, .mc-sec-h2, .mc-contact-h2, h1, h2, h3, h4 { overflow-wrap: anywhere; }
p, span, a, label, li, .mc-faq-q span, .mc-port span, .mc-card p, .mc-step p { overflow-wrap: break-word; }
/* grid/flex-элементам разрешаем сжиматься ниже min-content,
   иначе длинное слово (КОНСТРУКЦИЯЛАР) распирает колонку и текст вылезает */
.mc-hero-grid > div, .mc-card, .mc-step, .mc-port, .mc-why-grid > div,
.mc-serv-grid > *, .mc-proc-grid > *, .mc-contact-grid > * { min-width: 0; }

/* ── Портфолио: раскрытие карточки по клику ── */
.mc-port-grid { align-items: start; }
.mc-port-head { -webkit-user-select: none; user-select: none; }
.mc-port-head:hover span:first-child { color: #E9A23B; }
.mc-port-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease; }
.mc-port.is-open { border-color: #4a5059 !important; }
.mc-port.is-open .mc-port-body { max-height: 640px; opacity: 1; }
.mc-port.is-open .mc-port-sign { transform: rotate(45deg); color: #E9A23B; }

/* ── Услуги: раскрытие карточки по клику ── */
.mc-serv-grid { align-items: start; }
.mc-card { position: relative; -webkit-user-select: none; user-select: none; }
.mc-card::after { content: '+'; position: absolute; top: 28px; right: 26px; font-size: 24.2px; font-weight: 300; line-height: 1; color: #6a7079; transition: transform .25s, color .25s; }
.mc-card.is-open::after { transform: rotate(45deg); color: #E9A23B; }
.mc-card-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease; }
.mc-card.is-open .mc-card-body { max-height: 360px; opacity: 1; }

/* ── Крупнее текст описаний — удобнее читать пожилым ── */
/* Описания услуг, шагов процесса, портфолио, преимуществ */
.mc-card p,
.mc-card-body p,
.mc-step p,
.mc-port-body p,
.mc-why-grid p {
  font-size: 18.15px !important;
  line-height: 1.7 !important;
  color: #b6bcc4 !important;
}
/* Ответы в FAQ */
.mc-faq-body p {
  font-size: 18.7px !important;
  line-height: 1.7 !important;
  color: #b6bcc4 !important;
}
/* Вводный текст под заголовком «Услуги» */
#uslugi > div > p {
  font-size: 18.7px !important;
  line-height: 1.65 !important;
  color: #aab0b8 !important;
}
/* Описание в первом экране и в блоке контактов
   (форма-дисклеймер .mc-form p сюда не попадает) */
#top p,
.mc-contact-grid > div > p {
  font-size: 20.9px !important;
  line-height: 1.65 !important;
  color: #bcc2c9 !important;
}
/* Описание в подвале */
footer p {
  font-size: 15.95px !important;
  line-height: 1.6 !important;
}
/* На маленьких экранах — те же увеличенные размеры */
@media (max-width: 560px) {
  .mc-card p,
  .mc-card-body p,
  .mc-step p,
  .mc-port-body p,
  .mc-why-grid p,
  #uslugi > div > p { font-size: 17.6px !important; }
  .mc-faq-body p { font-size: 18.15px !important; }
  #top p,
  .mc-contact-grid > div > p { font-size: 19.25px !important; }
}