/* Shared Services navigation. The preview fills the list's natural height;
   switching images never changes the panel geometry. */

.service-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.service-menu-trigger{
  display:inline-flex!important;
  align-items:center;
  min-height:44px;
  white-space:nowrap;
}

.service-menu-trigger::after,
.service-nav-link::after{
  display:none!important;
}

/* Keep the pointer inside the menu while it crosses the small gap. */
.service-menu::after{
  content:"";
  position:absolute;
  inset:100% 0 auto;
  height:.72rem;
}

.service-menu-panel{
  position:absolute;
  z-index:4;
  top:calc(100% + .65rem);
  left:50%;
  display:grid;
  grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:.75rem;
  width:min(50rem,calc(100vw - 2rem));
  box-sizing:border-box;
  padding:.75rem;
  border:1px solid rgb(17 17 21 / .14);
  border-radius:.7rem;
  background:#fff;
  box-shadow:0 1rem 2.6rem rgb(17 17 21 / .14),0 .15rem .45rem rgb(17 17 21 / .08);
  color:#111115;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-.45rem) scale(.97);
  transform-origin:50% 0;
  transition:opacity 180ms var(--ease-out,ease-out),transform 220ms var(--ease-out,ease-out),visibility 0s linear 180ms;
}

.service-menu:focus-within > .service-menu-panel,
.service-menu:hover > .service-menu-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
  transition-delay:0s;
}

/* Keep the original proportions of each WebP and crop inside the available
   panel area. The visual never determines the menu's row height. */
.service-menu-visual{
  position:relative;
  align-self:stretch;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#fff;
}

.service-menu-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  background:#fff;
  transition:opacity 180ms ease-out;
}

.service-menu-image.is-ready{
  opacity:1;
}

.service-menu-links{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.1rem;
  min-width:0;
}

.service-menu-panel .service-nav-link{
  display:flex!important;
  align-items:center;
  min-width:0;
  min-height:2.1rem;
  box-sizing:border-box;
  padding:.35rem .65rem;
  border:0;
  border-radius:.3rem;
  background:#fff;
  color:#111115!important;
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  transition:background-color 180ms ease-out,color 180ms ease-out;
}

.service-nav-link:hover,
.service-nav-link:focus-visible{
  background:#f3f3f5;
  color:#e5007d!important;
}

.service-nav-link:focus-visible{
  outline:2px solid #111115;
  outline-offset:2px;
}

/* The home header stays expanded down to 761px. Keep its wide panel inside
   the viewport at those in-between widths. */
@media (min-width:761px) and (max-width:900px){
  .home-header .service-menu-panel{left:calc(50% + 4rem)}
}

/* Non-home templates use a compact details menu below the desktop header
   breakpoint. The image column is removed before the menu can be opened, so
   the mobile layout never assigns a URL and never requests a WebP. */
.site-menu{display:none;position:relative;justify-self:end}
.site-menu > summary{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;list-style:none}
.site-menu > summary::-webkit-details-marker{display:none}
.site-menu > summary svg{width:26px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.site-menu > nav{display:grid;gap:.25rem}

@media (max-width:980px){
  .site-menu{display:block}
  .site-menu > nav{
    position:absolute;
    top:calc(100% + .5rem);
    right:0;
    z-index:5;
    display:grid!important;
    gap:.25rem;
    min-width:min(21rem,calc(100vw - 2rem));
    padding:.75rem 1rem;
    border-radius:.5rem;
    background:var(--surface-light,#fafafa);
    box-shadow:0 .75rem 2rem rgb(17 17 21 / .14);
  }

  .site-menu > nav > a:not(.service-menu-trigger){
    min-height:44px;
    color:#111115!important;
  }

  .site-menu-contact{font-weight:600}

  .site-menu > nav > .service-menu{
    display:block;
    width:100%;
  }

  .site-menu .service-menu-panel{
    position:static;
    display:block;
    width:100%;
    height:auto;
    margin:.15rem 0 .45rem;
    padding:.35rem 0 .45rem;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:none;
  }

  .site-menu .service-menu-visual{display:none}
  .site-menu .service-menu-links{
    display:grid;
    grid-template-rows:none;
    gap:0;
    height:auto;
    min-height:0;
  }
  .site-menu .service-nav-link{min-height:44px;padding:.55rem .75rem}
}

@media (max-width:760px){
  .site-header:not(.home-header) .header-cta{display:none}

  .home-header .hero-menu nav{
    min-width:min(21rem,calc(100vw - 2rem));
    padding:.75rem 1rem;
  }

  .hero-menu .service-menu{
    display:block;
    width:100%;
  }

  .hero-menu .service-menu-panel{
    position:static;
    display:block;
    width:100%;
    height:auto;
    margin:.15rem 0 .45rem;
    padding:.35rem 0 .45rem;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:none;
  }

  .hero-menu .service-menu-visual{display:none}
  .hero-menu .service-menu-links{
    display:grid;
    grid-template-rows:none;
    gap:0;
    height:auto;
    min-height:0;
  }
  .service-menu-trigger{justify-content:space-between;width:100%}
  .hero-menu .service-nav-link{min-height:44px;padding:.55rem .75rem}
}

@media (prefers-reduced-motion:reduce){
  .service-menu-panel,
  .service-menu-image,
  .service-nav-link{transition:none}
}

/* Motion layer. Смена превью в меню: новый кадр мягко проявляется из лёгкого
   увеличения, прежний остаётся под ним до загрузки - белой вспышки нет. */
@media (prefers-reduced-motion:no-preference){
  .service-menu-image.is-swap{animation:menu-swap 260ms cubic-bezier(.16,1,.3,1)}
}
@keyframes menu-swap{from{opacity:.55;scale:1.035}}

/* Бургер превращается в крестик: три линии - отдельные path */
.hero-menu > summary path,
.site-menu > summary path{transform-box:fill-box;transform-origin:center}
:is(.hero-menu,.site-menu)[open] > summary path:nth-child(1){transform:translateY(7px) rotate(45deg)}
:is(.hero-menu,.site-menu)[open] > summary path:nth-child(2){opacity:0;transform:scaleX(.2)}
:is(.hero-menu,.site-menu)[open] > summary path:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Мобильное меню раскрывается от кнопки, пункты идут коротким каскадом */
@media (prefers-reduced-motion:no-preference){
  .hero-menu > summary path,
  .site-menu > summary path{transition:transform 240ms cubic-bezier(.16,1,.3,1),opacity 160ms ease-out}
  .hero-menu[open] > nav,
  .site-menu[open] > nav{animation:menu-open 240ms cubic-bezier(.16,1,.3,1) both;transform-origin:calc(100% - 22px) 0}
  .hero-menu[open] > nav > *,
  .site-menu[open] > nav > *,
  :is(.hero-menu,.site-menu)[open] .service-nav-link{animation:menu-item 340ms cubic-bezier(.16,1,.3,1) backwards}
  :is(.hero-menu,.site-menu)[open] > nav > :nth-child(2){animation-delay:150ms}
  :is(.hero-menu,.site-menu)[open] > nav > :nth-child(3){animation-delay:180ms}
  :is(.hero-menu,.site-menu)[open] > nav > :nth-child(4){animation-delay:210ms}
  :is(.hero-menu,.site-menu)[open] > nav > :nth-child(5){animation-delay:240ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(1){animation-delay:40ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(2){animation-delay:55ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(3){animation-delay:70ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(4){animation-delay:85ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(5){animation-delay:100ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(6){animation-delay:115ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(7){animation-delay:130ms}
  :is(.hero-menu,.site-menu)[open] .service-nav-link:nth-child(8){animation-delay:145ms}
}
@keyframes menu-open{from{opacity:0;scale:.94;translate:0 -6px}}
@keyframes menu-item{from{opacity:0;translate:0 6px}}