/* Paper service sheet, shared visual language with studio and contact panels. */
html body.kk-sys #kk-header #kk-mega {
  background:var(--k-paper)!important;
  color:var(--k-ink)!important;
  border:1px solid #c4d2c7!important;
  border-radius:28px!important;
  box-shadow:0 16px 32px #010a081a!important;
  max-height:calc(100dvh - var(--kk-nav-height) - 24px)!important;
  scrollbar-width:thin;scrollbar-color:#789887 var(--k-paper);
  overscroll-behavior:contain;
}
html body.kk-sys #kk-header #kk-mega .kk-mega-decoration {display:none!important;}
html body.kk-sys #kk-header #kk-mega .kk-megagrid {
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr!important;align-items:stretch!important;
  max-width:none!important;gap:12px!important;padding:20px 20px 12px!important;
}
html body.kk-sys #kk-header #kk-mega .kk-mega-card {
  --kk-menu-accent:#006740;
  position:relative;isolation:isolate;min-width:0;min-height:208px;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  gap:8px!important;padding:20px!important;
  border:1px solid #c3d3c7!important;border-radius:16px!important;
  background:#fff!important;color:var(--k-ink)!important;
  box-shadow:none!important;transform:none!important;
  transition:background-color 160ms ease,border-color 160ms ease!important;
}
html body.kk-sys #kk-header #kk-mega .kk-mega-card:is(:hover,:focus-within) {background:#edf4ec!important;border-color:#006740!important;}
html body.kk-sys #kk-header #kk-mega .kk-mega-card>svg {display:none!important;}
html body.kk-sys #kk-header #kk-mega .kk-mega-primary {
  display:flex!important;align-items:flex-start!important;min-height:48px!important;
  width:calc(100% - 56px);max-width:24ch;color:#10291e!important;
  font-size:19px!important;font-weight:800!important;letter-spacing:-.025em!important;
  line-height:1.22!important;text-decoration:none!important;text-wrap:balance;
}
html body.kk-sys #kk-header #kk-mega .kk-mega-primary::after {border-radius:16px;}
html body.kk-sys #kk-header #kk-mega .kk-menu-description {
  display:block!important;margin:0!important;max-width:42ch;
  font-size:13px!important;font-weight:400!important;line-height:1.5!important;
  color:#51675b!important;text-wrap:pretty;
}
html body.kk-sys #kk-header #kk-mega .kk-menu-links {
  display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
  gap:0 14px!important;margin-top:auto!important;padding-top:4px;
}
html body.kk-sys #kk-header #kk-mega .kk-menu-links .kk-mega-secondary {
  min-height:34px!important;padding:5px 0!important;font-size:12px!important;font-weight:600!important;
  line-height:1.5!important;letter-spacing:0!important;color:#006740!important;
  text-decoration:underline!important;text-decoration-color:#9eb8a7!important;
  text-decoration-thickness:1px!important;text-underline-offset:4px!important;
}
html body.kk-sys #kk-header #kk-mega .kk-menu-links .kk-mega-secondary:hover {text-decoration-color:currentColor!important;}
html body.kk-sys #kk-header #kk-mega .kk-mega-card>a.kk-taste-action {
  position:relative;z-index:2;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;align-self:flex-start!important;
  min-height:42px!important;padding:9px 21px!important;margin-top:auto!important;
  font-size:13px!important;font-weight:800!important;line-height:1.4!important;
  letter-spacing:0!important;text-transform:none!important;
  background:var(--k-yellow)!important;color:var(--k-ink)!important;
  border:0!important;border-radius:999px!important;box-shadow:none!important;transform:none!important;
}
html body.kk-sys #kk-header #kk-mega .kk-menu-footer {
  padding:10px 40px 18px!important;max-width:none!important;
  border-top:1px solid #d4dfd5!important;margin:8px 0 0!important;
}
html body.kk-sys #kk-header #kk-mega .kk-menu-footer a {
  min-height:36px;display:inline-flex;align-items:center;
  font-size:13px!important;font-weight:600!important;text-transform:none!important;
  letter-spacing:0!important;color:#006740!important;
}
html body.kk-sys #kk-header #kk-mega a:focus-visible {outline:2px solid #006740!important;outline-offset:4px!important;}
html body.kk-sys #kk-header #kk-mega .kk-mega-primary:focus-visible {outline:none!important;}
html body.kk-sys #kk-header #kk-mega .kk-mega-primary:focus-visible::after {outline:2px solid #006740!important;outline-offset:-3px!important;}
html body.kk-sys #kk-header #kk-mega .kk-menu-motif {--k-paper:#006740;--k-mint:#529d73;}
/* Four motifs are shared with the homepage. Two complete the original six disciplines. */
html body.kk-sys #kk-header #kk-mega .kk-menu-motif {
  position: absolute;
  display: block !important;
  top: 20px !important;
  right: 14px !important;
  width: 92px;
  height: 58px;
  transform: scale(.72) !important;
  transform-origin: right top;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
html body.kk-sys #kk-header #kk-mega .kk-menu-motif i { pointer-events: none; }
html body.kk-sys #kk-header #kk-mega .kk-motif--motion .m-orbit {
  width: 44px; height: 44px; top: 7px; left: 30px;
  border: 2px solid var(--k-paper); border-radius: 50%;
}
html body.kk-sys #kk-header #kk-mega .kk-motif--motion .m-orbit::before {
  content: ""; position: absolute; width: 12px; height: 12px;
  left: -6px; top: 6px; border-radius: 50%; background: var(--k-yellow);
}
html body.kk-sys #kk-header #kk-mega .kk-motif--motion .m-square {
  width: 21px; height: 21px; top: 19px; left: 42px;
  border-radius: 5px; background: var(--k-emerald);
}
html body.kk-sys #kk-header #kk-mega .kk-motif--motion.is-live .m-orbit { animation: kk-menu-orbit 7s linear infinite; }
html body.kk-sys #kk-header #kk-mega .kk-motif--motion.is-live .m-square { animation: kk-menu-turn 7s cubic-bezier(.22,1,.36,1) infinite; }
html body.kk-sys #kk-header #kk-mega .kk-motif--studio .m-room {
  width: 56px; height: 42px; left: 22px; top: 8px;
  border: 2px solid var(--k-paper); border-radius: 5px 5px 15px 5px;
}
html body.kk-sys #kk-header #kk-mega .kk-motif--studio .m-floor {
  width: 44px; height: 17px; left: 28px; top: 28px;
  border-radius: 0 0 9px 0; background: var(--k-mint);
}
html body.kk-sys #kk-header #kk-mega .kk-motif--studio .m-light {
  width: 10px; height: 10px; left: 32px; top: 17px;
  border-radius: 50%; background: var(--k-yellow);
}
html body.kk-sys #kk-header #kk-mega .kk-motif--studio.is-live .m-light { animation: kk-menu-light 5.6s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes kk-menu-orbit { to { transform: rotate(360deg); } }
@keyframes kk-menu-turn { 0%,18% { transform: rotate(0); } 48%,66% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } }
@keyframes kk-menu-light { 0%,20%,100% { transform: translateX(0); } 48%,70% { transform: translateX(26px); } }

/* Closed, offscreen or paused navigation consumes no animation frames. */
html body.kk-sys #kk-header #kk-mega .kk-menu-motif *,
html body.kk-sys #kk-header #kk-mega .kk-menu-motif *::before,
html body.kk-sys #kk-header #kk-mega .kk-menu-motif *::after { animation-play-state: paused !important; }
html body.kk-sys #kk-header #kk-mega[data-menu-motion="running"] .kk-menu-in-view .kk-menu-motif *,
html body.kk-sys #kk-header #kk-mega[data-menu-motion="running"] .kk-menu-in-view .kk-menu-motif *::before,
html body.kk-sys #kk-header #kk-mega[data-menu-motion="running"] .kk-menu-in-view .kk-menu-motif *::after { animation-play-state: running !important; }
html[data-motion-paused="true"] body.kk-sys #kk-header #kk-mega .kk-menu-motif *,
html[data-motion-paused="true"] body.kk-sys #kk-header #kk-mega .kk-menu-motif *::before,
html[data-motion-paused="true"] body.kk-sys #kk-header #kk-mega .kk-menu-motif *::after { animation-play-state: paused !important; }

/* Compact button board: every destination stays visible on a phone. */
html body.kk-sys #kk-header .kk-mobilemenu {
  background:var(--k-paper)!important;color:var(--k-ink)!important;
  border:1px solid #c4d2c7!important;border-radius:26px!important;
  box-shadow:0 16px 32px #010a081a!important;
  max-height:calc(100dvh - var(--kk-nav-height) - 20px)!important;
  scrollbar-width:thin;scrollbar-color:#789887 var(--k-paper);overscroll-behavior:contain;
}
html body.kk-sys #kk-header .kk-mobilemenu>nav {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding:14px 12px max(14px,env(safe-area-inset-bottom))!important;gap:8px!important;
}
html body.kk-sys #kk-header .kk-mobilemenu nav a {
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:48px!important;margin:0!important;padding:9px 12px!important;
  border:0!important;border-radius:999px!important;box-shadow:none!important;
  font-size:14px!important;font-weight:700!important;line-height:1.25!important;
  letter-spacing:0!important;text-align:center!important;text-decoration:none!important;
  background-color:#173c2c!important;color:#f4f7f0!important;
  transition:transform 140ms ease,background-color 140ms ease!important;
  touch-action:manipulation;
}
html body.kk-sys #kk-header .kk-mobilemenu nav a::before,
html body.kk-sys #kk-header .kk-mobilemenu nav a::after {display:none!important;}
html body.kk-sys #kk-header .kk-mobile-services {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-column:1/-1!important;gap:8px!important;padding:0 0 4px!important;margin:0!important;border:0!important;
}
html body.kk-sys #kk-header .kk-mobilemenu nav .kk-mobile-services a {
  background-color:#dce8dc!important;color:#163d2a!important;font-size:13px!important;padding-block:7px!important;
}
html body.kk-sys #kk-header .kk-mobile-services a:last-child,
html body.kk-sys #kk-header .kk-mobilemenu>nav>a[href="/studio-za-snimanje"],
html body.kk-sys #kk-header .kk-mobilemenu>nav>a.kk-taste-action {grid-column:1/-1!important;}
html body.kk-sys #kk-header .kk-mobilemenu>nav>a[href^="tel:"] {font-size:12px!important;padding-inline:6px!important;}
html body.kk-sys #kk-header .kk-mobilemenu nav a[aria-current="page"],
html body.kk-sys #kk-header .kk-mobilemenu>nav>a.kk-taste-action {
  background-color:var(--k-yellow)!important;color:var(--k-ink)!important;
}
html body.kk-sys #kk-header .kk-mobilemenu nav a:active {transform:scale(.97)!important;}
html body.kk-sys #kk-header .kk-mobilemenu nav a:focus-visible {outline:2px solid #006740!important;outline-offset:3px!important;}
@media(hover:hover) {
  html body.kk-sys #kk-header .kk-mobilemenu nav a:hover {transform:translateY(-1px)!important;}
}
/* Use the established single gleam and shade, with quieter green highlights. */
@layer kk-cel-finish {
  body.kk-sys #kk-header .kk-mobilemenu nav a {
    background-image:var(--kk-cel-gleam),var(--kk-cel-wide-shadow)!important;
    background-size:24px 9px,100% 100%!important;
    background-position:15px 3px,center!important;background-repeat:no-repeat!important;
    background-origin:border-box!important;background-clip:border-box!important;
  }
  body.kk-sys #kk-header .kk-mobilemenu nav a:not([aria-current="page"],.kk-taste-action) {
    --kk-cel-gleam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cellipse cx='50' cy='50' rx='44' ry='25' transform='rotate(-16 50 50)' fill='white' opacity='.25'/%3E%3C/svg%3E");
  }
}
@media(min-width:600px) and (max-height:500px) {
  html body.kk-sys #kk-header .kk-mobilemenu>nav {grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;padding-block:10px!important;}
  html body.kk-sys #kk-header .kk-mobilemenu>nav>a:is(:nth-child(1),:nth-child(2),[href="/studio-za-snimanje"],[href="/kontakt"],[href^="tel:"]) {grid-column:span 2!important;}
  html body.kk-sys #kk-header .kk-mobile-services {grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;padding:0!important;}
  html body.kk-sys #kk-header .kk-mobile-services a:last-child {grid-column:auto!important;}
}
@media(prefers-reduced-motion:reduce) {
  html body.kk-sys #kk-header .kk-mobilemenu nav a {transition:none!important;transform:none!important;}
}
@media(min-width:941px) and (max-width:1100px) {
  html body.kk-sys #kk-header #kk-mega .kk-megagrid {padding:14px 14px 10px!important;gap:10px!important;}
  html body.kk-sys #kk-header #kk-mega .kk-mega-card {padding:16px!important;}
  html body.kk-sys #kk-header #kk-mega .kk-mega-primary {font-size:18px!important;}
}
@media(prefers-reduced-motion:reduce) {
  html body.kk-sys #kk-header #kk-mega .kk-menu-motif *,
  html body.kk-sys #kk-header #kk-mega .kk-menu-motif *::before,
  html body.kk-sys #kk-header #kk-mega .kk-menu-motif *::after {animation:none!important;}
  html body.kk-sys #kk-header #kk-mega .kk-mega-card {transition:none!important;}
}
