/* custom.css — your own overrides.
   Loaded after site.css, so rules here win over the compiled styles.
   site.css is generated from Styles/*.scss; do not hand-edit it. Put custom CSS here instead. */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .emo-section{
   background-size: cover;
  }
  .emo span { white-space: normal; }
}
@media (max-width: 991px) {
  /* Mobile menu motion: the overlay slides + fades in, and the links/CTA
     stagger in just behind it. nav-closing plays the reverse on dismiss
     (JS holds the class until the out-animation ends). */
  @keyframes lexaMenuIn {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes lexaMenuOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-100%); }
  }
  @keyframes lexaMenuItemIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .site-header.nav-open {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    margin-bottom: 0;
    background: #fff;
    z-index: 200;
    overflow-y: auto;
    animation: lexaMenuIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .site-header.nav-open.nav-closing {
    animation: lexaMenuOut 0.26s cubic-bezier(0.4, 0, 0.7, 0.4) both;
  }
  .site-header.nav-open .container { height: 100%; }
  .site-header.nav-open .nav {
    position: relative;
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: 28px;
  }
.site-header.nav-open .brand {
    height: 87px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
  }
  .site-header.nav-open .nav-toggle {
    position: absolute;
    top: 13px;
    right: 0;
    border-radius: 50%;
  }
  .site-header.nav-open .nav-toggle svg { display: none; }
  .site-header.nav-open .nav-toggle::before,
  .site-header.nav-open .nav-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 1.6px;
    background: var(--ink);
  }
  .site-header.nav-open .nav-toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
  .site-header.nav-open .nav-toggle::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  /* Links → full-width, divided vertical list. */
  .site-header.nav-open .nav-links {
    display: flex;
    position: static;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 28px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
  }
  /* Dividers only between items — none above the first or below the last. */
  .site-header.nav-open .nav-links li + li { border-top: 1px solid var(--line); }
  /* Stagger each link in behind the overlay slide. */
  .site-header.nav-open .nav-links li {
    opacity: 0;
    animation: lexaMenuItemIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .site-header.nav-open .nav-links li:nth-child(1) { animation-delay: 0.10s; }
  .site-header.nav-open .nav-links li:nth-child(2) { animation-delay: 0.15s; }
  .site-header.nav-open .nav-links li:nth-child(3) { animation-delay: 0.20s; }
  .site-header.nav-open .nav-links li:nth-child(4) { animation-delay: 0.25s; }
  /* Don't re-run the stagger while closing — links just fade out with the overlay. */
  .site-header.nav-open.nav-closing .nav-links li { animation: none; opacity: 1; }
  .site-header.nav-open .nav-links a {
    padding: 1.1rem 0;
    border: 0;
    border-radius: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--heading);
  }
  /* Mark the current page in the mobile menu, like the desktop header does:
     just darker + bold, no accent colour. */
  .site-header.nav-open .nav-links a[aria-current="page"] {
    font-weight: 600;
    color: var(--heading);
  }

  /* CTA(s) pinned to the bottom, full width. */
  .site-header.nav-open .nav-actions {
    width: 100%;
    margin-top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  /* Stagger only the CTA — NOT the whole .nav-actions, since the close (X)
     button lives inside it and must keep its original placement. */
  .site-header.nav-open .nav-actions .btn {
    opacity: 0;
    animation: lexaMenuItemIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.30s both;
  }
  .site-header.nav-open.nav-closing .nav-actions .btn { animation: none; opacity: 1; }

  /* Honour reduced-motion: show the menu instantly, no slide or stagger. */
  @media (prefers-reduced-motion: reduce) {
    .site-header.nav-open,
    .site-header.nav-open.nav-closing,
    .site-header.nav-open .nav-links li,
    .site-header.nav-open .nav-actions .btn {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
  .site-header.nav-open .nav-actions .btn {
    display: inline-flex;
    width: 100%;
    height: 56px;
    justify-content: center;
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-news {
    grid-column: 2 / -1;
    border-left: 0;
    padding-left: 0;
  }
  .footer-news__form { max-width: none; }
  .emo-section {
 min-height: 360px;
}
.footer-top{
  padding-bottom: 32px;
}
}
@media (max-width: 680px) {
  .page-platform .law-card:not(:nth-last-child(-n + 2)) { border-bottom: 0; }
  .page-platform .law-card:not(:last-child) { border-bottom: 1px solid #ebedf3; }
}
@media (max-width:576px){
   .hero {
   padding-top: 150px;
   }
    .emo-section {
        min-height: 310px;
    }
    .site-footer {
        padding: 50px 20px 20px; 
    }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-grid > nav[aria-label="Useful links"] { order: 1; grid-column: auto; }
  .footer-grid > nav[aria-label="Our company"]  { order: 2; grid-column: auto; }
  .footer-grid > nav[aria-label="Follow us"]    { order: 3; grid-column: auto; }
  .footer-grid > .footer-contact                { order: 4; grid-column: auto; }
  .footer-grid > .footer-news                   { order: 5; grid-column: 1 / -1; }

  /* Undo site.css turning "Follow us" into a centered horizontal social strip;
     keep it a normal left-aligned vertical list like the other columns. */
  .footer-grid > nav[aria-label="Follow us"] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  }
  .footer-grid > nav[aria-label="Follow us"] .footer-col__title { flex: 0 0 auto; margin: 0 0 28px; }
  .footer-grid > nav[aria-label="Follow us"] .footer-link { padding: 6px 0;font-size: 15px; }

  /* ── Bottom bar (phone): legal links in a centered row on top, copyright centered below ── */
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer-bottom__links {
    order: 1; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center; gap: 8px 20px;
  }
  .footer-bottom__links a + a::before { display: none; }
  .footer-bottom__copy { order: 2; }
  .sec-panel__head {
    flex-wrap: wrap;
}
.faq-toggle {
    width: 28px;
    height: 28px;
}
}