/* r63v — persistent services top menu wrapper.
   The visual design of .services-home-head-r62u is not changed here. */

.services-top-shell-r63v{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:14px 12px calc(var(--bottom-nav-h,72px) + env(safe-area-inset-bottom,0px) + 14px);
  box-sizing:border-box;
  background:#f5f6f8;
  color:#10131a;
  overflow-x:hidden;
}

.services-top-shell-r63v .services-home-head-r62u{
  margin:0 0 14px !important;
}

.services-top-shell-r63v__body{
  min-width:0;
  max-width:100%;
}

.services-top-shell-r63v__body > .page,
.services-top-shell-r63v__body > main,
.services-top-shell-r63v__body > section,
.services-top-shell-r63v__body > div{
  max-width:100%;
}

@media(max-width:767px){
  .services-top-shell-r63v{
    max-width:430px;
    padding-left:12px;
    padding-right:12px;
  }
}

@media(min-width:768px) and (max-width:1023px){
  .services-top-shell-r63v{
    max-width:760px;
    padding-left:14px;
    padding-right:14px;
  }
}

@media(min-width:1024px){
  .services-top-shell-r63v{
    max-width:1180px;
    padding-left:18px;
    padding-right:18px;
  }
}

/* r63x — stable design for persistent services top menu.
   Problem fixed: .services-home-head-r62u lost design outside .services-home-r62u parent and jumped between routes.
   This does not redesign the menu; it mirrors the existing home header behavior inside .services-top-shell-r63v. */

.services-top-shell-r63v{
  --svc-head-h-r63x: 50px;
}

.services-top-shell-r63v .services-home-head-r62u{
  width:100% !important;
  min-height:var(--svc-head-h-r63x) !important;
  height:var(--svc-head-h-r63x) !important;
  margin:0 0 12px !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  z-index:10 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

.services-top-shell-r63v .services-home-logo-r62u{
  display:block !important;
  width:auto !important;
  height:40px !important;
  max-width:160px !important;
  min-width:0 !important;
  object-fit:contain !important;
  object-position:left center !important;
  flex:0 0 auto !important;
}

.services-top-shell-r63v .services-home-desktop-nav-r63c{
  min-width:0 !important;
  width:100% !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}

.services-top-shell-r63v .services-home-desktop-nav-r63c button{
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  color:#7a818d !important;
  height:40px !important;
  min-width:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  position:relative !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.services-top-shell-r63v .services-home-desktop-nav-r63c button.is-active,
.services-top-shell-r63v .services-home-desktop-nav-r63c button:hover{
  color:#10131a !important;
}

.services-top-shell-r63v .services-home-desktop-nav-r63c button.is-active:after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:18px !important;
  height:3px !important;
  border-radius:999px !important;
  background:#ff5a00 !important;
  transform:translateX(-50%) !important;
}

.services-top-shell-r63v .services-home-head-actions-r63a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  min-width:max-content !important;
  height:42px !important;
}

.services-top-shell-r63v .services-app-icon-btn,
.services-top-shell-r63v .services-home-loc-r63a,
.services-top-shell-r63v .services-home-fav-r63c,
.services-top-shell-r63v .services-home-bell-r62u,
.services-top-shell-r63v .services-home-menu-r62u{
  flex:0 0 auto !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  padding:0 !important;
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.07) !important;
  background:#fff !important;
  color:#10131a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 10px 22px rgba(15,23,42,.055) !important;
  position:relative !important;
  overflow:visible !important;
}

.services-top-shell-r63v .services-home-loc-r63a{
  width:auto !important;
  min-width:40px !important;
  padding:0 10px !important;
  gap:6px !important;
}

.services-top-shell-r63v .services-home-loc-r63a b{
  display:inline-block !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#10131a !important;
  max-width:72px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.services-top-shell-r63v .services-app-icon-btn svg,
.services-top-shell-r63v .services-home-loc-r63a svg,
.services-top-shell-r63v .services-home-bell-r62u svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
}

.services-top-shell-r63v .services-app-bell-btn i,
.services-top-shell-r63v .services-home-bell-r62u i{
  position:absolute !important;
  right:-3px !important;
  top:-3px !important;
  min-width:17px !important;
  height:17px !important;
  padding:0 4px !important;
  border-radius:999px !important;
  background:#ff5a00 !important;
  color:#fff !important;
  border:2px solid #fff !important;
  font-style:normal !important;
  font:900 10px/13px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  text-align:center !important;
}

.services-top-shell-r63v .services-home-menu-r62u{
  flex-direction:column !important;
  gap:4px !important;
}

.services-top-shell-r63v .services-home-menu-r62u span{
  width:17px !important;
  height:2px !important;
  border-radius:999px !important;
  background:#10131a !important;
  display:block !important;
  margin:0 !important;
}

/* Keep the same visual slot on route changes to stop vertical jumping. */
.services-top-shell-r63v__body{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Phone: desktop nav is hidden, but the header height stays fixed and does not jump. */
@media(max-width:767px){
  .services-top-shell-r63v{
    --svc-head-h-r63x: 46px;
  }

  .services-top-shell-r63v .services-home-head-r62u{
    height:var(--svc-head-h-r63x) !important;
    min-height:var(--svc-head-h-r63x) !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:8px !important;
    margin-bottom:10px !important;
  }

  .services-top-shell-r63v .services-home-logo-r62u{
    height:38px !important;
    max-width:146px !important;
  }

  .services-top-shell-r63v .services-home-desktop-nav-r63c{
    display:none !important;
  }

  .services-top-shell-r63v .services-home-head-actions-r63a{
    height:40px !important;
    gap:7px !important;
  }

  .services-top-shell-r63v .services-home-fav-r63c,
  .services-top-shell-r63v .services-home-loc-r63a{
    display:none !important;
  }

  .services-top-shell-r63v .services-app-icon-btn,
  .services-top-shell-r63v .services-home-bell-r62u,
  .services-top-shell-r63v .services-home-menu-r62u{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
  }
}

/* Tablet: avoid wrapping and maintain constant header height. */
@media(min-width:768px) and (max-width:1023px){
  .services-top-shell-r63v{
    --svc-head-h-r63x: 50px;
  }

  .services-top-shell-r63v .services-home-head-r62u{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:10px !important;
  }

  .services-top-shell-r63v .services-home-logo-r62u{
    max-width:152px !important;
  }

  .services-top-shell-r63v .services-home-desktop-nav-r63c{
    gap:12px !important;
    justify-content:center !important;
  }

  .services-top-shell-r63v .services-home-desktop-nav-r63c button{
    font-size:11.5px !important;
  }

  .services-top-shell-r63v .services-home-loc-r63a b{
    display:none !important;
  }
}

@media(min-width:1024px){
  .services-top-shell-r63v{
    --svc-head-h-r63x: 50px;
  }
}

/* r63y — home-like packaging for persistent top menu.
   Goal: top menu on inner top-nav routes must sit in the same visual package/rhythm as on the main page.
   Header button design is not changed. */

.services-top-shell-r63v{
  width:100% !important;
  max-width:none !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:10px 10px calc(var(--bottom-nav-h,72px) + env(safe-area-inset-bottom,0px) + 14px) !important;
  background:#f5f6f8 !important;
  color:#10131a !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

/* Same outer “app phone” package logic as the main services screen. */
.services-top-shell-r63v::before{
  content:none !important;
}

.services-top-shell-r63v .services-home-head-r62u,
.services-top-shell-r63v__body{
  width:100% !important;
  max-width:100% !important;
}

/* Create a stable packed canvas equivalent to .services-app-phone.services-home-r62u spacing. */
.services-top-shell-r63v{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.services-top-shell-r63v .services-home-head-r62u{
  flex:0 0 auto !important;
  margin:0 !important;
}

/* The body below menu should start as if it is inside the same page package, not as a loose page. */
.services-top-shell-r63v__body{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

/* Remove double page padding from wrapped pages so the wrapper supplies the same package as home. */
.services-top-shell-r63v__body > .page,
.services-top-shell-r63v__body > main.page,
.services-top-shell-r63v__body > .parts-reference-r61,
.services-top-shell-r63v__body > .masters-reference-r59,
.services-top-shell-r63v__body > .masters-page{
  margin-left:auto !important;
  margin-right:auto !important;
  padding-top:0 !important;
}

/* Parts / masters pages inside top shell must not create a second outer phone frame. */
.services-top-shell-r63v__body .parts-reference-r61,
.services-top-shell-r63v__body .masters-reference-r59,
.services-top-shell-r63v__body .masters-page{
  background:transparent !important;
}

/* Mobile package: same compact canvas as services home. */
@media(max-width:767px){
  .services-top-shell-r63v{
    max-width:430px !important;
    margin:0 auto !important;
    padding:10px 12px calc(var(--bottom-nav-h,72px) + env(safe-area-inset-bottom,0px) + 14px) !important;
    gap:10px !important;
  }

  .services-top-shell-r63v .services-home-head-r62u{
    margin:0 !important;
  }

  .services-top-shell-r63v__body > .page,
  .services-top-shell-r63v__body > main.page,
  .services-top-shell-r63v__body > .parts-reference-r61,
  .services-top-shell-r63v__body > .masters-reference-r59,
  .services-top-shell-r63v__body > .masters-page{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* Tablet package: same centered width rhythm as main services. */
@media(min-width:768px) and (max-width:1023px){
  .services-top-shell-r63v{
    max-width:760px !important;
    margin:0 auto !important;
    padding:14px 14px calc(var(--bottom-nav-h,78px) + 16px) !important;
    gap:12px !important;
  }

  .services-top-shell-r63v__body > .page,
  .services-top-shell-r63v__body > main.page,
  .services-top-shell-r63v__body > .parts-reference-r61,
  .services-top-shell-r63v__body > .masters-reference-r59,
  .services-top-shell-r63v__body > .masters-page{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* Desktop package: match the main services canvas, not a loose full-width header. */
@media(min-width:1024px){
  .services-top-shell-r63v{
    max-width:1180px !important;
    margin:0 auto !important;
    padding:16px 18px 18px !important;
    gap:12px !important;
    border-radius:20px !important;
  }

  .services-top-shell-r63v .services-home-head-r62u{
    min-height:50px !important;
    height:50px !important;
  }

  .services-top-shell-r63v__body > .page,
  .services-top-shell-r63v__body > main.page,
  .services-top-shell-r63v__body > .parts-reference-r61,
  .services-top-shell-r63v__body > .masters-reference-r59,
  .services-top-shell-r63v__body > .masters-page{
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

@media(min-width:1280px){
  .services-top-shell-r63v{
    max-width:1220px !important;
  }
}

/* r63z — fix menu jumping by using the same parent structure as home.
   The wrapper now renders:
   .services-app-page--reference-r62u > .services-app-phone.services-home-r62u > .services-home-head-r62u
   Therefore this block neutralizes old artificial shell rules from r63v/r63y. */

.services-app-page--reference-r62u.services-top-shell-r63v{
  width:100% !important;
  max-width:none !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:10px 12px calc(var(--bottom-nav-h,72px) + env(safe-area-inset-bottom,0px) + 14px) !important;
  background:#f5f6f8 !important;
  color:#10131a !important;
  overflow-x:hidden !important;
  display:block !important;
  box-sizing:border-box !important;
}

.services-app-page--reference-r62u.services-top-shell-r63v .services-home-r62u--persistent-r63z{
  width:100% !important;
  max-width:430px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* The header now has the correct parent, so keep one stable slot and avoid previous shell double rules. */
.services-home-r62u--persistent-r63z .services-home-head-r62u{
  flex:0 0 auto !important;
  margin:0 !important;
  width:100% !important;
}

/* Body must not create a second page frame under the same header. */
.services-home-r62u--persistent-r63z .services-top-shell-r63v__body{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  background:transparent !important;
}

/* Remove double outer padding from wrapped pages. */
.services-home-r62u--persistent-r63z .services-top-shell-r63v__body > .page,
.services-home-r62u--persistent-r63z .services-top-shell-r63v__body > main.page,
.services-home-r62u--persistent-r63z .services-top-shell-r63v__body > .parts-reference-r61,
.services-home-r62u--persistent-r63z .services-top-shell-r63v__body > .masters-reference-r59,
.services-home-r62u--persistent-r63z .services-top-shell-r63v__body > .masters-page{
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  padding-top:0 !important;
  background:transparent !important;
}

/* Mobile */
@media(max-width:767px){
  .services-app-page--reference-r62u.services-top-shell-r63v{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .services-app-page--reference-r62u.services-top-shell-r63v .services-home-r62u--persistent-r63z{
    max-width:430px !important;
    gap:10px !important;
  }
}

/* Tablet: same canvas rhythm as home. */
@media(min-width:768px) and (max-width:1023px){
  .services-app-page--reference-r62u.services-top-shell-r63v{
    padding:14px 14px calc(var(--bottom-nav-h,78px) + 16px) !important;
  }

  .services-app-page--reference-r62u.services-top-shell-r63v .services-home-r62u--persistent-r63z{
    max-width:760px !important;
    gap:12px !important;
  }
}

/* Desktop: same canvas rhythm as home services page. */
@media(min-width:1024px){
  .services-app-page--reference-r62u.services-top-shell-r63v{
    padding:10px 12px 18px !important;
  }

  .services-app-page--reference-r62u.services-top-shell-r63v .services-home-r62u--persistent-r63z{
    max-width:1180px !important;
    padding:16px 18px 18px !important;
    gap:12px !important;
    border-radius:20px !important;
  }
}

@media(min-width:1280px){
  .services-app-page--reference-r62u.services-top-shell-r63v .services-home-r62u--persistent-r63z{
    max-width:1220px !important;
  }
}