/* V29 | Responsive audit: one authoritative mobile navigation layout.
   Earlier version-specific visual rules remain for backward compatibility;
   these narrow overrides apply only to the mobile navigation surface. */
@media (min-width:761px){
 .header nav#menu>.desktop-nav-link{display:inline-flex}
 .header nav#menu .mobile-nav-content{display:none!important}
}
@media (max-width:760px){
 .header nav#menu,.header nav#menu.open{
   overflow:hidden!important;min-height:0!important;max-height:none!important;
   background:#fafafa!important;border-radius:12px!important;
 }
 .header nav#menu .mobile-nav-content{
   display:flex!important;flex-direction:column;width:100%;height:100%;
   min-height:0;padding:0!important;gap:0!important;
 }
 .header nav#menu .mobile-nav-scroll{
   display:flex;flex:1 1 auto;flex-direction:column;min-height:0;
   justify-content:space-evenly;
   gap:clamp(12px,2dvh,22px);
   padding:clamp(13px,2dvh,20px) clamp(14px,3.6vw,20px) 8px!important;
   overflow:hidden!important;overscroll-behavior:contain;
 }
 .header nav#menu .mobile-nav-shortcuts{
   flex:0 0 auto;gap:clamp(9px,2.4vw,14px);
 }
 .header nav#menu .mobile-nav-group{
   display:flex;flex:0 0 auto;flex-direction:column;min-width:0;min-height:0;
   gap:clamp(7px,1.2dvh,11px);
 }
 .header nav#menu .mobile-nav-group .mobile-nav-heading-row{
   display:flex;flex:0 0 auto;align-items:center;
   padding:0 2px!important;margin:0!important;
 }
 .header nav#menu .mobile-nav-group .mobile-nav-cards{
   flex:0 0 auto;display:flex!important;
   width:calc(100% + 22px)!important;
   min-width:0;max-width:none;
   gap:clamp(10px,2.7vw,15px)!important;
   padding:7px 11px 13px!important;margin:-6px -11px -9px!important;
   overflow-x:auto!important;overflow-y:hidden!important;
   scroll-snap-type:x mandatory;scroll-padding-inline:11px;
   overscroll-behavior-x:contain;
   scrollbar-width:none!important;-ms-overflow-style:none;
   -webkit-overflow-scrolling:touch;
 }
 .header nav#menu .mobile-nav-group .mobile-nav-cards::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
 .header nav#menu .mobile-nav-cards a.mobile-nav-card.related-case,
 .header nav#menu .mobile-nav-projects a.mobile-nav-card.related-case{
   flex:0 0 clamp(150px,44vw,210px)!important;
   min-width:0;max-width:none;scroll-snap-align:start;
 }
 .header nav#menu .mobile-nav-cards a.mobile-nav-card:focus-visible,
 .header nav#menu .mobile-nav-cards a.mobile-nav-card[aria-current=page]{
   outline:2px solid #050505!important;outline-offset:-2px!important;
 }
 .header nav#menu .mobile-nav-bottom{
   flex:0 0 auto;margin-top:0;
   padding:10px clamp(14px,3.6vw,20px) max(12px,env(safe-area-inset-bottom))!important;
 }
 .header nav#menu .mobile-nav-contact.button.secondary{
   min-height:42px;
   border:1px solid #cdcdcd!important;
   background:#fafafa!important;
   color:#050505!important;
   font:500 12px/1.5 Inter,Arial,sans-serif!important;
 }
 .header nav#menu .mobile-nav-contact.button.secondary:hover{
   background:#e2e2e2!important;
 }
}
@media (max-width:760px) and (max-height:620px){
 .header nav#menu .mobile-nav-scroll{
   justify-content:flex-start;gap:clamp(5px,1.15dvh,9px);
   padding-top:7px!important;padding-bottom:1px!important;
 }
 .header nav#menu .mobile-nav-group{gap:clamp(3px,.8dvh,6px)}
 .header nav#menu .mobile-nav-group .mobile-nav-cards{
   padding-top:4px!important;padding-bottom:9px!important;
   margin-top:-3px!important;margin-bottom:-5px!important;
 }
 .header nav#menu .mobile-nav-bottom{
   padding-top:4px!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important;
 }
}
@media (max-width:760px) and (max-height:420px){
 .header nav#menu .mobile-nav-scroll{gap:3px;padding-top:3px!important;padding-bottom:0!important}
 .header nav#menu .mobile-nav-group{gap:2px}
 .header nav#menu .mobile-nav-group .mobile-nav-cards{padding-top:3px!important;padding-bottom:7px!important;margin-top:-2px!important;margin-bottom:-4px!important}
 .header nav#menu .mobile-nav-cards a.mobile-nav-card.related-case,
 .header nav#menu .mobile-nav-projects a.mobile-nav-card.related-case{min-height:51px!important}
 .header nav#menu .mobile-nav-bottom{padding-top:3px!important;padding-bottom:max(5px,env(safe-area-inset-bottom))!important}
}
/* Badge hover changes only the text-decoration. The background and text colors
   must stay identical to their resting state across all earlier CSS layers. */
.hero-tags a:hover,.hero-tags a:focus-visible{
 background:#0505051a!important;color:#050505!important;
 text-decoration:underline!important;text-underline-offset:3px;
}
/* The existing black 1px project-card edge is the exact same active edge of Etapas. */
.method-grid > .method-card.is-rotating-active,
.method-grid > .method-card:focus-within{border-color:#050505}
/* Solid progress segments; no gradient on demo steps. */
.mini-screen .demo-dots i,.mini-screen .demo-dots i::before,.mini-screen .demo-dots i::after{
 background-image:none!important;
}
.mini-screen .demo-dots i::after{background-color:#050505!important}
/* On taller phones, use the available height for the covers rather than
   leaving a large band of unused blank space in the menu. */
@media (max-width:760px) and (min-height:700px){
  .header nav#menu .mobile-nav-group .mobile-nav-cards a.mobile-nav-card picture,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card picture{
    height:clamp(112px,16dvh,155px)!important;
  }
}