/* Mobile-first adjustments */
@media (max-width: 1024px){
  .section-logo_grid .grid{grid-template-columns:repeat(4,1fr)}
  .section-stats .stats-grid{grid-template-columns:repeat(2,1fr)}
  .projects-mosaic{grid-template-columns:1fr;grid-template-areas:'intro' 'p1' 'p2' 'outro'}
  .site-footer .cols{grid-template-columns:1fr}
  .cta-banner {display:none;}
  .section-hero.hero-scroll{position:relative;}

  .site-content {
    padding-bottom:initial;
  }

  .section-logo_grid .container {
    padding-inline:0px !important;
  }
  .section-logo_grid .logo-headline {
    padding-inline:var(--gutter);
  }
  .section-projects, .section-cta {
    margin-inline:0;
    padding-bottom:0;
  }

  .footer-bottom .fb-inner {
    grid-template-columns: 1fr;
}
.section:nth-child(3).section-content {
    border-top-right-radius: 1.5em;
    border-top-left-radius: 1.5em;
    border-bottom-right-radius: 0em;
    border-bottom-left-radius: 0em;
}


}
@media (max-width: 640px){
  :root{ --gutter: 1.75em;}
  .section{padding:56px 0}
  h1{font-size:clamp(30px,8vw,38px)}
  .section-services .grid,
  .section-content .grid{grid-template-columns:1fr !important}
  .section-hero .hero-content h1 {
    font-size: 2em;
}


.section-contact_page {
  padding-block:6em 0;
}
}

@media (max-width: 1600px){
  .cta-banner h2 {
    font-size:7em;
  }
}

@media (max-width: 1280px){
  .cta-banner h2 {
    font-size:6em;
  }
}
.site-footer .footer-top .grid, .site-footer .footer-bottom .fb-inner {
    max-width: calc(var(--container) - 4em);
    margin: 0 auto;
}

/* ===============================
   Logo carousel (responsive)
   =============================== */
.section-logo_grid {
  --logo-gap: clamp(2rem, 4vw, 5rem);
  --logo-h: clamp(32px, 3.2vw, 28px);
}

/* Desktop: keep your current grid */
@media (min-width: 1024px) {
  .section-logo_grid .logos-grid {
    display: grid;
    gap: 1.25rem; /* your existing gap */
    grid-template-columns: repeat(6, minmax(0,1fr));
    align-items: center;
  }
  
}

/* <= 1023px: carousel mode */
@media (max-width: 1023.98px) {
  .section-logo_grid .logos-grid {
    /* JS will change this into the track, but these are fallbacks */
    display: flex;
    gap: var(--logo-gap);
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* The viewport wrapper JS creates */
.logos-viewport {
  overflow: hidden;
  width: 100%;
}

/* The scrolling strip */
.logos-track {
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Items */
.section-logo_grid .logo-item {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

/* Images */
.section-logo_grid .logo-img {
  max-height: var(--logo-h);
  width: auto;
  height: auto;
  transition: filter .2s ease;
}

/* Pause hint on hover (optional) */
@media (hover:hover) {
  .logos-viewport:hover .logos-track {
    cursor: grab;
  }
}

    .header--transparent #mobile-nav-toggle {
      color:#fff;
    }
    html[data-skin="dark"] .header--transparent #mobile-nav-toggle {
      color:#fff;
    }
    .site-header.is-sticky #mobile-nav-toggle {
      color:var(--ink);
    }

/* === Mobile menu visibility (functionality only) === */
#mobile-nav-toggle { display: none; }
.mkrst-mobile-nav { display: none; } /* JS toggles [hidden] */

/* < 768px: hide desktop nav, show mobile controls */
@media (max-width: 767.98px) {
  /* Your desktop nav elements inside the header */
  .site-header .menu,
  .site-header .primary-nav,
  .site-header .nav-cta {
    display: none !important;
  }

  /* Show the mobile toggle; panel visibility controlled via [hidden] */
      #mobile-nav-toggle {
        display: inline-flex !important;
        background: none;
        box-shadow: none;
        outline: none;
        border: none;
        color: var(--ink);
        font-size: 1em;
        padding: 0.5em;
        width: auto;
    }

  .mkrst-mobile-nav[hidden] { display: none !important; }
  .mkrst-mobile-nav:not([hidden]) { display: block !important; }
}


/* === Mobile menu visibility (final fix) === */
/* < 768px: hide ONLY desktop containers */
@media (max-width: 767.98px) {
  .site-header .primary-nav,
  .site-header .nav-cta { display: none !important; }

  #mobile-nav-toggle { display: inline-flex !important; }
  .mkrst-mobile-nav[hidden] { display: none !important; }
  .mkrst-mobile-nav:not([hidden]) { display: block !important; }

    #site-header .nav-bar {
    justify-content: space-between;
    display: flex;
}
}

/* ≥ 768px: hide all mobile UI */
@media (min-width: 768px) {
  #mobile-nav-toggle,
  .mkrst-mobile-nav { display: none !important; }
}



/* ===== Mobile panel scaffold ===== */
.mkrst-mobile-nav { 
  position: fixed; inset: 0; z-index: 99999;
  background: #fff; overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  display: block; /* visibility controlled by [hidden] */
max-height:100dvh;
}
.mkrst-mobile-nav[hidden] { display: none !important; }

.mnav-inner { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; }
.mnav-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #eee;
}
.mnav-brand img { height: 20px; width: auto; display: block; }
.mnav-close { font: inherit; border: 0; background: none; cursor: pointer; font-size: 28px; line-height: 1; color:var(--ink); }

.mnav-primary { padding: 8px 8px; }
.mnav-list { list-style: none; margin: 0; padding: 0; }
.mnav-list > li { border-bottom: 1px solid #f1f1f1; }
.mnav-list > li > a {
  display: block; padding: 14px 12px 14px 20px; text-decoration: none; color: #111;
}
.mnav-list > li.menu-item-has-children > a { padding-right: 52px; position: relative; }

/* Accordion toggler */
.mnav-list > li.menu-item-has-children > button.mnav-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; font: inherit; cursor: pointer; width: 40px; height: 40px;
}
.mnav-list > li.menu-item-has-children > button.mnav-toggle::after {
  content: '▾'; font-size: 16px; display: inline-block; transform-origin: 50% 50%; transition: transform .2s ease;
}
.mnav-list > li.is-open > button.mnav-toggle::after { transform: rotate(180deg); }

/* Submenu */
.mnav-list .sub-menu { display: none; list-style: none; margin: 0; padding: 0 0 8px 0; }
.mnav-list li.is-open > .sub-menu { display: block; }
.mnav-list .sub-menu > li > a { display: block; padding: 10px 20px 10px 28px; text-decoration: none; color: #333; }

/* Divider */
.mnav-divider { border: 0; border-top: 1px solid #eee; margin: 8px 0; }

/* Footer grid menu */
.mnav-footer { padding: 8px 12px 0; }
.mnav-grid { 
  list-style: none; margin: 0; padding: 8px 8px 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
}
.mnav-grid a { text-decoration: none; color: #444; padding: 6px 12px; display: block; }

/* Actions (bottom) */
.mnav-actions { padding: 12px; border-top: 1px solid #eee; display: grid; gap: 10px; text-decoration:none; }
.mnav-btn { display: inline-block; text-align: center; padding: 12px 14px; text-decoration: none; border-radius: 6px; }
.mnav-btn--primary { background: #111; color: #fff; }
.mnav-btn--ghost   { background: transparent; color: #111; border: 1px solid #ddd; }

/* Breakpoints: only show panel <768px; desktop hides via existing rules */
@media (min-width: 768px) {
  .mkrst-mobile-nav { display: none !important; }
}