/* V28: deliberate separation of desktop navigation, responsive floating mobile menu,
   and predictable booking steps. All overrides reuse existing colors/shadows. */
@media (min-width: 761px) {
  .header nav#menu .mobile-nav-content { display:none !important; }
  .header nav#menu > .desktop-nav-link { display:inline-flex; }
  .header nav#menu > .desktop-nav-link:not(.button) { display:inline-block; }
}

/* The active step follows the same black focus outline/border language as project cards. */
.method-grid > .method-card.is-rotating-active,
.method-grid > .method-card:focus-within { border-color:#050505; }
@media (hover:hover) {
  .method-grid > .method-card:hover { border-color:#050505; }
}

/* Demo: only primary controls are gradient. The four progress tracks fill in solid ink. */
.mini-screen .demo-dots,
.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 { background-color:#cdcdcd !important; }
.mini-screen .demo-dots i::after { background:#050505 !important; }
/* Keep the simulated appointment flow inside the consistent 245px demo artwork. */
.method-grid > .method-card > .proto-demo {
  display:flex;align-items:stretch;justify-content:center;
  overflow:hidden !important;
}
.method-grid .proto-demo .mini-screen[data-booking] {
  display:flex;flex-direction:column;justify-content:center;
  box-sizing:border-box;width:100%;height:100%;max-height:100%;min-height:0;
  overflow:hidden;padding:clamp(9px,1.35vw,16px);
}
.method-grid .mini-screen .demo-step-content {
  flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;overscroll-behavior:contain;
}
.method-grid .mini-screen .demo-step-content::-webkit-scrollbar {display:none;width:0;height:0;}
.method-grid .mini-screen h4 {font-size:clamp(20px,1.8vw,25px);line-height:1.15;margin:0 0 9px;}
.method-grid .mini-screen p,.method-grid .mini-screen legend {
  font-size:11px;line-height:1.42;margin:0 0 10px;
}
.method-grid .mini-screen fieldset {margin:0 0 8px;}
.method-grid .mini-screen .booking-options {gap:5px;}
.method-grid .mini-screen .booking-options span {font-size:11px;padding:6px 8px;}
.method-grid .mini-screen .booking-actions {gap:7px;}
.method-grid .mini-screen button {min-height:39px;padding:9px 12px;}
.method-grid .mini-screen button[data-start],
.method-grid .mini-screen button[data-next],
.method-grid .mini-screen button[data-reset] {min-height:39px;padding:9px 13px;}
.method-grid .mini-screen .demo-dots {
  flex:0 0 auto;align-self:stretch;display:grid;width:100%;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;
}

@media (max-width:760px) {
  /* The header keeps its own floating appearance. Only the mobile panel is restyled. */
  .header nav#menu,
  .header nav#menu.open {
    height:var(--mobile-menu-height,calc(100dvh - 112px)) !important;
    min-height:0 !important;max-height:none !important;
    padding:0 !important;margin:0 !important;overflow:hidden !important;
    background:#fafafa !important;
    border:0 !important;border-radius:12px !important;
    box-shadow:0 16px 44px #0000001a,0 2px 7px #00000008;
  }
  .header nav#menu > .desktop-nav-link {display:none !important;}
  .header nav#menu .mobile-nav-content {
    display:flex !important;flex-direction:column;flex:1 1 auto;
    height:100%;min-height:0;gap:0;padding:0 !important;overflow:hidden;
  }
  .header nav#menu .mobile-nav-scroll {
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
    padding:clamp(11px,2dvh,20px) clamp(13px,3.5vw,19px) 7px !important;
    overflow:hidden !important;overscroll-behavior:none;
    justify-content:flex-start;
  }
  .header nav#menu .mobile-nav-shortcuts {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(9px,2.4vw,14px);
    flex:0 0 auto;
  }
  .header nav#menu a.mobile-nav-shortcut.related-case {
    display:flex!important;min-width:0;min-height:clamp(50px,7dvh,66px);
    flex-direction:row;align-items:center;gap:9px;
    padding:8px 10px;border-radius:8px !important;
  }
  .header nav#menu .mobile-nav-shortcut-icon {
    flex:0 0 35px;width:35px;height:35px;
  }
  .header nav#menu .mobile-nav-shortcut-label {font-size:12px;line-height:1.3;}
  .header nav#menu .mobile-nav-shortcut-label small {font-size:10px;margin-top:3px;}
  .header nav#menu .mobile-nav-heading-row {
    flex:0 0 auto;display:flex;align-items:center;
    margin:clamp(12px,2.5dvh,23px) 2px clamp(6px,1dvh,10px);
  }
  .header nav#menu .mobile-nav-heading {font-size:11px;letter-spacing:1.05px;}
  /* Native swipeable rail, snap to each card; hide ONLY the scrollbar, not the content. */
  .header nav#menu .mobile-nav-cards {
    display:flex!important;flex:0 0 auto;align-items:stretch;
    width:calc(100% + 20px);max-width:none;min-width:0;
    gap:clamp(10px,2.8vw,15px)!important;
    margin:-5px -10px -8px!important;padding:7px 10px 15px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x mandatory;scroll-padding-inline:10px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none!important;-ms-overflow-style:none;
    touch-action:pan-x;
  }
  .header nav#menu .mobile-nav-cards::-webkit-scrollbar {display:none!important;width:0!important;height:0!important;}
  .header nav#menu 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;
    display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;
    width:auto!important;min-width:0;min-height:0;height:auto;
    gap:0!important;margin:0;padding:0 0 9px!important;
    border:1px solid #e4e1dc!important;border-radius:8px!important;
    background:#fff!important;overflow:hidden;
    box-shadow:0 3px 13px #0000000a!important;
    scroll-snap-align:start;text-decoration:none!important;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card picture,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card picture {
    flex:0 0 auto!important;display:block;width:100%!important;
    height:clamp(66px,10.7dvh,102px)!important;aspect-ratio:auto!important;
    border-radius:7px 7px 0 0!important;overflow:hidden;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card picture img {
    width:100%;height:100%;border-radius:7px 7px 0 0!important;object-fit:cover;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card > span,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card > span {
    display:block;flex:1 0 auto;min-width:0;
    padding:8px 10px 0!important;
    font:600 12px/1.35 Inter,Arial,sans-serif;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card small,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card small {
    display:block;margin:3px 0 0;
    color:#666;font:400 10px/1.35 Inter,Arial,sans-serif;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card:hover,
  .header nav#menu .mobile-nav-cards a.mobile-nav-card:focus-visible {
    box-shadow:0 9px 24px #05050512!important;
  }
  .header nav#menu .mobile-nav-bottom {
    flex:0 0 auto;margin-top:auto;
    padding:11px clamp(13px,3.5vw,19px) max(12px,env(safe-area-inset-bottom))!important;
    background:#fafafa;box-shadow:none;
  }
  .header nav#menu .mobile-nav-contact.button.secondary {
    width:100%;min-height:41px;padding:10px 16px!important;
    background:transparent;border:1px solid #d4d4d4!important;
    font-size:12px;
  }
  /* Keep all active and focus outlines visible INSIDE the carousel's padded viewport. */
  .header nav#menu .mobile-nav-content a[aria-current="page"],
  .header nav#menu .mobile-nav-content a:focus-visible {
    outline:2px solid #050505!important;outline-offset:-2px!important;
  }
}
@media (max-width:760px) and (max-height:620px) {
  .header nav#menu .mobile-nav-scroll {padding-top:9px!important;padding-bottom:1px!important;justify-content:flex-start;}
  .header nav#menu .mobile-nav-heading-row {margin:7px 2px 4px;}
  .header nav#menu a.mobile-nav-shortcut.related-case {min-height:42px;padding:5px 8px;}
  .header nav#menu .mobile-nav-shortcut-icon {flex-basis:30px;width:30px;height:30px;}
  .header nav#menu .mobile-nav-cards a.mobile-nav-card picture,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card picture {height:clamp(42px,9dvh,62px)!important;}
  .header nav#menu .mobile-nav-cards a.mobile-nav-card > span,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card > span {padding:5px 8px 0!important;font-size:11px;}
  .header nav#menu .mobile-nav-cards a.mobile-nav-card small,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card small {font-size:9px;line-height:1.2;}
  .header nav#menu .mobile-nav-bottom {padding-top:6px!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important;}
  .header nav#menu .mobile-nav-contact.button.secondary {min-height:37px;padding:7px 12px!important;}
}
@media (max-width:760px) and (max-height:420px) {
  .header nav#menu .mobile-nav-shortcut-label small {display:none;}
  .header nav#menu .mobile-nav-shortcut-icon {width:26px;height:26px;flex-basis:26px;}
  .header nav#menu a.mobile-nav-shortcut.related-case {min-height:32px;padding:3px 6px;}
  .header nav#menu .mobile-nav-scroll {padding-top:5px!important;}
  .header nav#menu .mobile-nav-heading-row {margin:4px 2px 3px;}
  .header nav#menu .mobile-nav-cards a.mobile-nav-card picture,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card picture {height:33px!important;}
  .header nav#menu .mobile-nav-cards a.mobile-nav-card > span,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card > span {font-size:10px;padding-top:3px!important;}
  .header nav#menu .mobile-nav-cards a.mobile-nav-card small,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card small {font-size:8px;line-height:1.15;}
  .header nav#menu .mobile-nav-bottom {padding-top:4px!important;}
}
@media (prefers-reduced-motion:reduce) {
  .header nav#menu .mobile-nav-cards {scroll-behavior:auto;}
}

/* Landscape / extremely short viewports: retain every title and description,
   but arrange each carousel card image beside its text to save vertical space. */
@media (max-width:760px) and (max-height:420px) {
  .header nav#menu .mobile-nav-scroll {justify-content:flex-start;}
  .header nav#menu .mobile-nav-cards {
    padding:4px 10px 8px!important;
    margin:-3px -10px -5px!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-direction:row!important;align-items:center;gap:7px!important;
    padding:4px!important;min-height:53px;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card picture,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card picture {
    flex:0 0 54px!important;width:54px!important;height:44px!important;
    border-radius:5px!important;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card picture img {border-radius:5px!important;}
  .header nav#menu .mobile-nav-cards a.mobile-nav-card > span,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card > span {
    min-width:0;flex:1 1 auto;padding:0!important;
    font-size:11px;line-height:1.15;
  }
  .header nav#menu .mobile-nav-cards a.mobile-nav-card small,
  .header nav#menu .mobile-nav-projects a.mobile-nav-card small {
    font-size:9px;line-height:1.18;margin-top:2px;
  }
}