/* Shared navigation styling for every page. */
.service-nav-page .site-header { top: 22px; right: 24px; transition: none; }
.service-nav-page.menu-open { overflow: hidden; }
/* Reserve a separate right-hand column for MENU and LANG. */
.service-nav-page :is(.products__heading, .team__heading) { right: 164px; }
.service-nav-page :is(.products__title, .team__title) { position: absolute; top: 0; right: 0; transform: none; }
.service-nav-page :is(.products__brand, .team__brand) { flex-shrink: 0; }
.service-nav-page .services-heading { padding-right: 164px; }
.service-nav-page .menu-button { width: 108px; height: 44px; padding: 0 14px; display: flex; gap: 14px; align-items: center; justify-content: space-between; border: 1px solid var(--cut-border); background-color: rgba(16, 17, 14, .35); color: var(--paper); font: 700 12px/1 var(--sans); letter-spacing: .08em; }
.service-nav-page .menu-button__icon { width: 19px; gap: 4px; }
.service-nav-page .menu-button__icon i { height: 1px; }
.service-nav-page .menu-button[aria-expanded=true] .menu-button__icon i:first-child { transform: translateY(5px) rotate(45deg); }
.service-nav-page .menu-button[aria-expanded=true] .menu-button__icon i:last-child { transform: translateY(-5px) rotate(-45deg); }
.service-nav-page .menu-label-close, .service-nav-page.menu-open .menu-label-open { display: none; }
.service-nav-page.menu-open .menu-label-close { display: inline; }
.service-nav-page .navigation-backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(8px); }
.service-nav-page .navigation { box-sizing: border-box; padding: 34px; top: 4px; right: 4px; height: calc(100svh - 8px); color: var(--paper); border: 1px solid var(--cut-border); overflow: auto; transform: translateY(-16px); opacity: 0; transition: opacity .25s ease, transform .35s ease, visibility .35s; }
.service-nav-page .navigation.is-open { opacity: 1; transform: translateY(0); }
.service-nav-page .navigation nav { margin: 0; width: auto; min-width: 0; }
.service-nav-page .navigation nav::before { display: none; }
.service-nav-page .navigation__list { opacity: 1; transition: none; counter-reset: nav-item; }
.service-nav-page .navigation__list li { counter-increment: nav-item; }
.service-nav-page .navigation__list a { position: relative; min-height: 78px; grid-template-columns: 1fr; padding: 14px 40px 14px 44px; border-bottom: 1px solid #e1dad2; transition: color .2s, background .2s; }
.service-nav-page .navigation__list a::before { content: '0' counter(nav-item); position: absolute; left: 0; top: 20px; font: 11px/1.4 var(--sans); color: rgba(50, 50, 50, .72); }
.service-nav-page .navigation__list a::after { content: '\2197'; position: absolute; right: 12px; top: 24px; font: 20px/1 var(--sans); }
.service-nav-page .navigation__list a span { padding: 0; text-align: left; font: 12px/1.6 var(--sans); letter-spacing: .06em; color: rgba(50, 50, 50, .72); }
.service-nav-page .navigation__list a em { grid-row: 1; padding: 0; font: 700 32px/1.05 var(--navigation-font); letter-spacing: .025em; }
.service-nav-page .navigation.is-open .navigation__list :is(span, em) { animation: none; }
.service-nav-page .navigation__list a:is(:hover, :focus-visible) { background: #f6f1eb; }
.service-nav-page .navigation__list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.service-nav-page .nav-masthead { margin: 0; font: 11px/1.5 var(--sans); letter-spacing: .14em; color: rgba(50, 50, 50, .72); }
.service-nav-page .nav-brand { font: 700 20px/1 var(--navigation-font); color: var(--accent); letter-spacing: .1em; margin-right: 12px; }
.service-nav-page .nav-caption { margin: 18px 0 0; font: 10px/1.7 var(--sans); letter-spacing: .12em; color: rgba(50, 50, 50, .72); }

/* Compact studio directory. */
.service-nav-page .navigation { width: min(520px, calc(100% - 8px)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 30px; background-color: #f6f1eb; }
.service-nav-page .nav-masthead { grid-column: 1 / -1; padding-right: 120px; }
.service-nav-page .navigation nav { grid-column: 1; grid-row: 2; align-self: center; }
.service-nav-page .navigation__list a[aria-current=page] { background: var(--accent); color: #f6f1eb; padding-left: 44px; }
.service-nav-page .navigation__list a[aria-current=page] :is(span, em), .service-nav-page .navigation__list a[aria-current=page]::before { color: #f6f1eb; }
.service-nav-page .navigation__list a[aria-current=page]::before { left: 12px; }
.service-nav-page .menu-button:is(:hover, :focus-visible), .service-nav-page .menu-button[aria-expanded=true] { --cut-border: var(--accent); border-color: var(--cut-border); color: var(--accent); background-color: rgba(16, 18, 14, .5); }

/* The small control keeps its clipped, translucent background. */
.service-nav-page .menu-button {
  clip-path: polygon(0 0, calc(100% - var(--corner-cut)) 0, 100% var(--corner-cut), 100% 100%, var(--corner-cut) 100%, 0 calc(100% - var(--corner-cut)));
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--cut-border) calc(50% - 1px), var(--cut-border) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg, transparent calc(50% - 1px), var(--cut-border) calc(50% - 1px), var(--cut-border) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: right top, left bottom;
  background-size: var(--corner-cut) var(--corner-cut);
  background-repeat: no-repeat;
}
/* Paint the panel silhouette directly. Transparent corner pixels stay empty
   after the opening transition, without relying on composited clip-path. */
.service-nav-page .navigation {
  --corner-cut: 40px;
  --cut-border: rgba(50, 50, 50, .72);
  --panel-fill: #f6f1eb;
  border: 0;
  clip-path: none;
  background:
    linear-gradient(var(--cut-border), var(--cut-border)) left top / calc(100% - var(--corner-cut)) 1px,
    linear-gradient(var(--cut-border), var(--cut-border)) right bottom / 1px calc(100% - var(--corner-cut)),
    linear-gradient(var(--cut-border), var(--cut-border)) right bottom / calc(100% - var(--corner-cut)) 1px,
    linear-gradient(var(--cut-border), var(--cut-border)) left top / 1px calc(100% - var(--corner-cut)),
    linear-gradient(45deg, var(--panel-fill) calc(50% - .7px), var(--cut-border) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) right top / var(--corner-cut) var(--corner-cut),
    linear-gradient(45deg, transparent calc(50% - .7px), var(--cut-border) calc(50% - .7px) calc(50% + .7px), var(--panel-fill) calc(50% + .7px)) left bottom / var(--corner-cut) var(--corner-cut),
    linear-gradient(var(--panel-fill), var(--panel-fill)) left top / calc(100% - var(--corner-cut)) var(--corner-cut),
    linear-gradient(var(--panel-fill), var(--panel-fill)) right bottom / calc(100% - var(--corner-cut)) var(--corner-cut),
    linear-gradient(var(--panel-fill), var(--panel-fill)) center / 100% calc(100% - var(--corner-cut) - var(--corner-cut));
  background-repeat: no-repeat;
}
.service-nav-page .menu-button { --corner-cut: 10px; --cut-border: rgba(50, 50, 50, .72); }
/* Keep MENU and CLOSE anchored in the same position; the panel has a small inset to expose its outline. */
.service-nav-page.menu-open .site-header { top: 22px; right: 24px; }

@media (max-width: 700px) {
  .service-nav-page .navigation { --corner-cut: 32px; }
  .service-nav-page .menu-button { --corner-cut: 9px; }
  .service-nav-page.menu-open .site-header { top: 18px; right: 18px; }
  .service-nav-page .site-header { top: 18px; right: 18px; }
  .service-nav-page .menu-button { width: 90px; height: 40px; gap: 8px; padding-inline: 10px; font-size: 10px; }
  .service-nav-page :is(.products__heading, .team__heading) { right: 126px; }
  .service-nav-page .services-heading { padding-right: 126px; }
  .service-nav-page .services-heading__title h1 { font-size: clamp(20px, 4.3vw, 30px); }
  .service-nav-page .services-heading__brand { width: var(--section-logo-width); }
  .service-nav-page .navigation { top: 4px; right: 4px; width: calc(100% - 8px); height: calc(100svh - 8px); padding: 24px 20px; }
  .service-nav-page .nav-masthead { padding-right: 96px; font-size: 9px; letter-spacing: .06em; }
  .service-nav-page .nav-brand { display: block; margin-bottom: 5px; }
  .service-nav-page .navigation { display: flex; gap: 22px; width: min(520px, calc(100% - 8px)); }
  .service-nav-page .navigation nav { align-self: stretch; }
  .service-nav-page .navigation__list a { min-height: 66px; padding-block: 10px; }
  .service-nav-page .navigation__list a em { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-nav-page .navigation { transition: none; }
}

/* Compact LANG control with the same upper-right/lower-left cuts as MENU. */
.service-nav-page .language-toggle {
  --lang-cut: 6px;
  display: block;
  width: 68px;
  min-height: 26px;
  margin-left: auto;
  padding: 5px 8px;
  --lang-edge: rgba(50, 50, 50, .72);
  border: 1px solid var(--lang-edge);
  background-color: rgba(16, 17, 14, .35);
  clip-path: polygon(0 0, calc(100% - var(--lang-cut)) 0, 100% var(--lang-cut), 100% 100%, var(--lang-cut) 100%, 0 calc(100% - var(--lang-cut)));
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--lang-edge) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg, transparent calc(50% - 1px), var(--lang-edge) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: right top, left bottom;
  background-size: var(--lang-cut) var(--lang-cut);
  background-repeat: no-repeat;
}
.service-nav-page .language-toggle:is(:hover, :focus-visible, [aria-expanded=true]) {
  --lang-edge: var(--accent);
  color: var(--accent);
  background-color: rgba(16, 18, 14, .5);
}

@media (max-width: 700px) {
  .service-nav-page .language-toggle { width: 60px; min-height: 24px; padding: 4px 6px; }
}

/* A small cut-corner popover with understated edges. */
.service-nav-page .language-options {
  --corner-cut: 10px;
  --cut-border: #e1dad2;
  --panel-fill: #f6f1eb;
  border: 0;
  clip-path: none;
  background:
    linear-gradient(var(--cut-border), var(--cut-border)) left top / calc(100% - var(--corner-cut)) 1px,
    linear-gradient(var(--cut-border), var(--cut-border)) right bottom / 1px calc(100% - var(--corner-cut)),
    linear-gradient(var(--cut-border), var(--cut-border)) right bottom / calc(100% - var(--corner-cut)) 1px,
    linear-gradient(var(--cut-border), var(--cut-border)) left top / 1px calc(100% - var(--corner-cut)),
    linear-gradient(45deg, var(--panel-fill) calc(50% - .7px), var(--cut-border) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) right top / var(--corner-cut) var(--corner-cut),
    linear-gradient(45deg, transparent calc(50% - .7px), var(--cut-border) calc(50% - .7px) calc(50% + .7px), var(--panel-fill) calc(50% + .7px)) left bottom / var(--corner-cut) var(--corner-cut),
    linear-gradient(var(--panel-fill), var(--panel-fill)) left top / calc(100% - var(--corner-cut)) var(--corner-cut),
    linear-gradient(var(--panel-fill), var(--panel-fill)) right bottom / calc(100% - var(--corner-cut)) var(--corner-cut),
    linear-gradient(var(--panel-fill), var(--panel-fill)) center / 100% calc(100% - var(--corner-cut) - var(--corner-cut));
  background-repeat: no-repeat;
}