/* ============================================================
   Shared mobile enhancements for the whole site.
   Loaded on every page (UA + /en/). Desktop is unchanged —
   everything meaningful lives inside the max-width breakpoint.
   ============================================================ */

.burger { display: none; }
.m-menu { display: none; }

/* Header contact block: two dial-able phones + messenger links (desktop & mobile) */
.phone a { text-decoration: none; color: inherit; }
.phone .num { display: block; }
.phone .num:hover { color: var(--gold-d); }
.phone .ch a:hover { text-decoration: underline; }

@media (max-width: 768px) {

  /* ---- Compact header bar: logo + lang + burger only ---- */
  header .hdr { gap: 14px; padding: 11px 18px; flex-wrap: nowrap; align-items: center; }
  header nav.main { display: none; }
  header .hdr-right { gap: 12px; align-items: center; margin-left: auto; }
  header .hdr-right .phone { display: none; }     /* moved into the dropdown */
  header .hdr-right .hdr-cta { display: none; }    /* moved into the dropdown */
  .brand-sub { display: none; }                    /* drop the long subtitle on small screens */
  .brand .logo { width: 40px; height: 40px; font-size: 15px; }
  .brand-name { font-size: 15px; }

  /* ---- Hamburger button ---- */
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 40px; padding: 0 10px;
    background: transparent; border: 1px solid #DBD2C3; border-radius: 3px; cursor: pointer;
  }
  .burger span { display: block; height: 2px; background: #15202C; border-radius: 2px; transition: transform .25s, opacity .2s; }
  header.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.nav-open .burger span:nth-child(2) { opacity: 0; }
  header.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- Dropdown menu ---- */
  .m-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #F6F2EC; border-top: 1px solid #E4DCCF; border-bottom: 1px solid #E4DCCF;
    box-shadow: 0 24px 40px -24px rgba(21,32,44,.5);
    flex-direction: column; padding: 6px 18px 18px;
  }
  header.nav-open .m-menu { display: flex; animation: fadeUp .2s ease; }
  .m-menu a { padding: 14px 4px; font-size: 16px; font-weight: 600; color: #15202C; text-decoration: none; border-bottom: 1px solid #ECE4D7; }
  .m-menu .m-phone { display: block; text-align: left; }
  .m-menu .m-phone .num { font-size: 17px; color: #15202C; font-family: 'Archivo', sans-serif; }
  .m-menu .m-phone .ch { font-size: 11px; color: #C6821F; font-weight: 600; }
  .m-menu .m-cta {
    margin-top: 14px; text-align: center; border-bottom: none;
    background: #E5A23C; color: #1C242E; font-weight: 700; font-size: 16px;
    padding: 15px; border-radius: 2px;
  }

  /* ---- Tighter vertical rhythm on the big sections ---- */
  .pad { padding-top: 56px !important; padding-bottom: 56px !important; }
  .final, .cta { padding-top: 52px !important; padding-bottom: 52px !important; }
  .hero, .hero-sec { padding-top: 44px !important; padding-bottom: 44px !important; }
  .langband { padding-top: 14px !important; padding-bottom: 14px !important; }
  #top .wrap { padding-top: 40px !important; padding-bottom: 48px !important; }

  /* ---- Home timeline: horizontal → clean vertical rail ---- */
  #process .tl { grid-template-columns: 1fr !important; gap: 0 !important; }
  #process .tl-step { padding: 0 0 26px 26px !important; }
  #process .tl-line { position: absolute; left: 5px; top: 4px; bottom: 0; width: 2px; height: auto !important; margin: 0 !important; }
  #process .tl-dot { left: 0 !important; top: 4px !important; }
  #process .tl-step:last-child .tl-line { display: none; }
}