@media (max-width: 992px){
  :root{ --section-pad: 56px; }
  .hero__grid{grid-template-columns:1fr; }
  .stats{grid-template-columns:repeat(2, 1fr)}
  .grid-3{grid-template-columns:repeat(2, 1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .nav__toggle{display:inline-flex}
  .nav__links{
    display:none;
    position:absolute;
    left:0; right:0;
    top:64px;
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:12px 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .nav__links.is-open{display:flex}
}
@media (max-width: 576px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}





@media (max-width: 992px){

  /* Make sure menu dropdown anchors correctly */
  .nav__inner{ position: relative; }

  .nav__links{
    top: calc(100% + 10px);   /* if you already have top:64px, replace it */
  }

  /* ✅ Mobile submenu should expand inline (not float over other items) */
  .nav__item.has-submenu{ width: 100%; }

  .nav__submenu{
    position: static !important;
    display: none;            /* hidden by default */
    width: 100%;
    margin-top: 6px;
    padding: 6px 0 0 12px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  /* When parent is open */
  .nav__item.has-submenu.is-open > .nav__submenu{
    display: block;
  }

  /* Make submenu links full width and easy to tap */
  .nav__submenu a{
    display: block;
    width: 100%;
    padding: 8px 0;
  }
}

@media (max-width: 992px){

  /* ✅ submenu: animated expand/collapse */
  .nav__submenu{
    position: static !important;
    width: 100%;
    margin-top: 6px;
    padding: 0 0 0 12px;

    /* animation setup */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .28s ease, opacity .2s ease, transform .2s ease;

    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav__item.has-submenu.is-open > .nav__submenu{
    max-height: 600px;     /* big enough for your submenu items */
    opacity: 1;
    transform: translateY(0);
    padding-top: 6px;
  }

  .nav__submenu a{
    display: block;
    width: 100%;
    padding: 8px 0;
  }

  /* ✅ caret rotation animation */
  .nav__parent .nav__caret{
    display: inline-block;
    transition: transform .2s ease;
  }

  /* rotate ONLY when that submenu is open */
  .nav__item.has-submenu.is-open > .nav__parent .nav__caret{
    transform: rotate(180deg);
  }

  /* for the nested Summit caret (▸) rotate to point down when open */
  .nav__submenu .nav__item.has-submenu.is-open > .nav__parent .nav__caret{
    transform: rotate(90deg);
  }
}