/* Shared surfaces from Naslovna and Studio za snimanje.
   Page classes own layout; these components own panel appearance.
   Deliberately opt-in: no selectors reach forms, tracking or mascot artwork. */
#main-content.kk-unified {
  --kk-panel-bg: #11231a;
  --kk-panel-line: #3b5541;
  --kk-panel-muted: #bccbbf;
  --kk-panel-radius: 24px;
  --kk-panel-space: clamp(24px, 2.5vw, 32px);
  --kk-panel-accent: linear-gradient(150deg, #203821, #11231a 70%);
}
#main-content.kk-unified .kk-panel {
  background: var(--kk-panel-bg) !important;
  border: 1px solid var(--kk-panel-line) !important;
  border-radius: var(--kk-panel-radius) !important;
  box-shadow: inset 0 1px 0 #ffffff0d !important;
  min-width: 0;
}
#main-content.kk-unified .kk-panel-accent { background: var(--kk-panel-accent) !important; }
#main-content.kk-unified .kk-panel:not(.kk-work-card) { padding: var(--kk-panel-space) !important; }
#main-content.kk-unified :is(a.kk-panel, .kk-panel[role="button"]):is(:hover,:focus-visible) { border-color: #a4ae60 !important; }
#main-content.kk-unified :is(a.kk-panel, .kk-panel[role="button"]):focus-visible { outline: 2px solid #fde500 !important; outline-offset: 4px !important; }
#main-content.kk-unified .kk-panel :is(h2,h3) { line-height: 1.25 !important; }
#main-content.kk-unified .kk-panel > p { color: var(--kk-panel-muted) !important; line-height: 1.75 !important; }

/* One inquiry panel, proportioned around its content rather than a large banner. */
#main-content.kk-unified .kk-panel.kk-panel-inquiry { gap: 24px !important; padding: 28px 32px !important; }
#main-content.kk-unified .kk-panel-inquiry h2 { font-size: clamp(24px,2.5vw,32px) !important; margin-bottom: 12px !important; }
#main-content.kk-unified .kk-panel-inquiry p { font-size: 16px !important; line-height: 1.75 !important; max-width: 58ch; }
#main-content.kk-unified .kk-panel-inquiry > a { max-width: 100%; font-size: 12px !important; letter-spacing: .04em !important; line-height: 1.5 !important; }
#main-content.kk-unified .kk-compact-section > .kk-taste-section-inner { padding-top: 0 !important; }
#main-content.kk-unified .pp-estimate-panel > div { max-width: 650px !important; }
#main-content.kk-unified .pp-brief-list { margin-top: 16px; gap: 8px 20px; }

/* Final invitations retain the same quiet gradient as the homepage. */
#main-content.kk-unified .kk-closing-panel {
  background: linear-gradient(110deg,#102219 0%,#102219 55%,#23412a 100%) !important;
  border-top: 1px solid #3c5843 !important;
}
#main-content.kk-unified .kk-closing-panel > .kk-taste-section-inner { padding-block: clamp(48px,5vw,72px) !important; }
#main-content.kk-unified .kk-closing-panel h2 { font-size: clamp(32px,3.5vw,48px) !important; line-height: 1.15 !important; max-width: 20ch; }
/* One closing layout on every service page: the invitation on the left, the actions stacked on the right. */
#main-content.kk-unified .kk-closing-panel:not(:has(.kk-parrot-slot)) > .kk-taste-section-inner {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center !important;
  column-gap: clamp(32px,5vw,72px) !important;
  row-gap: 28px !important;
}
#main-content.kk-unified .kk-closing-panel:not(:has(.kk-parrot-slot)) > .kk-taste-section-inner > div:first-child p { max-width: 56ch; margin-bottom: 0 !important; }
#main-content.kk-unified .kk-closing-panel:not(:has(.kk-parrot-slot)) > .kk-taste-section-inner > :last-child:not(:first-child) {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 18px !important;
  margin: 0 !important;
}

/* Studio FAQ panels, used consistently instead of a second set of open rules. */
/* Every FAQ uses the Studio page's centred 900px column. */
#main-content.kk-unified #faq:is(.pp-faq,.vp-faq,.yt-faq) > div { display: block; max-width: 900px !important; }
#main-content.kk-unified #faq:is(.pp-faq,.vp-faq) h2 { margin-bottom: 32px !important; }
#main-content.kk-unified #faq .kk-panel-faq,
#main-content.kk-unified .kk-panel-faq {
  padding: 0 !important;
  margin: 0 0 12px !important;
  background: #112319 !important;
  border: 1px solid #3c5945 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#main-content.kk-unified #faq .kk-panel-faq > summary,
#main-content.kk-unified .kk-panel-faq > summary { padding: 22px 24px !important; font-size: 17px !important; line-height: 1.5 !important; }
#main-content.kk-unified #faq .kk-panel-faq > p,
#main-content.kk-unified .kk-panel-faq > p { padding: 0 24px 24px !important; line-height: 1.75 !important; color: var(--kk-panel-muted) !important; }

/* Connected steps use the homepage's panel construction; no stretched circles. */
#main-content.kk-unified .kk-process-layout { display: block !important; }
#main-content.kk-unified .kk-process-layout > div:first-child { max-width: 780px; margin-bottom: 32px; }
#main-content.kk-unified .kk-process-grid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 0 !important;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--kk-panel-line);
  border-radius: var(--kk-panel-radius);
  background: #122019;
}
#main-content.kk-unified .kk-process-grid.kk-process-five { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
#main-content.kk-unified .kk-process-step {
  display: block !important;
  min-width: 0;
  padding: 26px !important;
  border: 0 !important;
  background: transparent;
}
#main-content.kk-unified .kk-process-step + .kk-process-step { border-left: 1px solid var(--kk-panel-line) !important; }
#main-content.kk-unified .kk-process-step:before { content: none !important; }
#main-content.kk-unified .kk-process-step > .kk-process-number {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #fde500 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
#main-content.kk-unified .kk-process-step > span:last-child { display:block; font-size:16px !important; font-weight:600 !important; line-height:1.55 !important; }
#main-content.kk-unified .kk-process-step h3 { margin: 0 0 12px !important; font-size: 18px !important; line-height: 1.4 !important; }
#main-content.kk-unified .kk-process-step p:not(.kk-process-number) { font-size: 15px !important; line-height: 1.7 !important; }

/* Delivery formats are useful labels, not empty device-shaped illustrations. */
#main-content.kk-unified .pp-delivery { grid-template-columns: 1.15fr 1fr; gap: 32px; }
#main-content.kk-unified .pp-delivery h2 { font-size: 28px !important; margin-bottom: 14px !important; }
#main-content.kk-unified .pp-formats { gap: 18px; align-items: stretch; }
#main-content.kk-unified .pp-formats > div { flex: 1; align-items: flex-start; gap: 8px; }
#main-content.kk-unified .pp-format-shape { width: auto; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: none; font-size: 24px; line-height: 1.2; justify-content: flex-start; color: #fde500; font-weight: 800; }
#main-content.kk-unified .pp-formats > div > span:last-child { font-size: 12px; text-align: left; }
#main-content.kk-unified .pp-finishing { gap: 20px; }
#main-content.kk-unified .pp-finishing .kk-panel { padding: 26px !important; border: 1px solid var(--kk-panel-line) !important; border-radius: var(--kk-panel-radius) !important; }
#main-content.kk-unified .pp-finishing .kk-panel h2 { font-size: 23px !important; }
#main-content.kk-unified #motion-graphics.pp-service { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#main-content.kk-unified .pp-motion-feature { gap: 40px; }

/* Reuse the homepage work cards, including the secondary video examples. */
#main-content.kk-unified .vp-work-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; align-items: stretch; }
#main-content.kk-unified .vp-work-secondary { display: contents; }
#main-content.kk-unified .vp-work-grid .kk-work-card { display: flex !important; flex-direction: column; padding: 0 !important; }
#main-content.kk-unified .vp-work-grid .kk-work-card > div:first-child { aspect-ratio: 16/9 !important; border-radius: 24px; }
#main-content.kk-unified .vp-work-grid .kk-work-card > div:last-child { padding: 24px !important; }
#main-content.kk-unified .vp-work-grid .kk-work-card h3 { font-size: 23px !important; }
#main-content.kk-unified .vp-work-grid .vp-project-context { font-size: 14px !important; }
/* Gallery work cards are boxed panels, so their caption needs the same inset as every other panel. */
#main-content.kk-unified .kk-portfolio-grid .kk-work-card > div:last-child { padding: 22px 24px 24px !important; }
#main-content.kk-unified .pp-guide { border: 1px solid var(--kk-panel-line) !important; }
#main-content.kk-unified .pp-guide-grid { gap: 24px; }

@media(max-width:1050px) {
  #main-content.kk-unified .kk-process-grid,
  #main-content.kk-unified .kk-process-grid.kk-process-five { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #main-content.kk-unified .kk-process-step:nth-child(odd) { border-left: 0 !important; }
  #main-content.kk-unified .kk-process-step:nth-child(n+3) { border-top: 1px solid var(--kk-panel-line) !important; }
  #main-content.kk-unified .kk-process-five .kk-process-step:last-child { grid-column: 1/-1; }
  #main-content.kk-unified .pp-delivery { grid-template-columns: 1fr; }
  /* Three narrow cards on tablets: long words like "enhancement" need a smaller title. */
  #main-content.kk-unified .pp-finishing .kk-panel h2 { font-size: 20px !important; }
  #main-content.kk-unified .pp-formats { max-width: none; }
  #main-content.kk-unified .vp-work-grid { grid-template-columns: 1fr !important; }
  #main-content.kk-unified .vp-work-grid .kk-work-card { display: grid !important; grid-template-columns: 1fr 1fr; }
}
/* With the parrot: it perches to the left of the stacked actions, on every closing panel. */
#main-content.kk-unified .kk-closing-panel:not(:has(.kk-parrot-slot)) > .kk-taste-section-inner > :last-child:not(:first-child):has(> .kk-inline-mascot) {
  display: grid !important;
  grid-template-columns: 112px auto;
  column-gap: 20px !important;
  row-gap: 16px !important;
  align-items: center !important;
  max-width: none !important;
}
#main-content.kk-unified .kk-closing-panel > .kk-taste-section-inner > div > .kk-inline-mascot {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 112px !important;
  height: 150px !important;
  align-self: end;
}
#main-content.kk-unified .kk-closing-panel > .kk-taste-section-inner > div:has(> .kk-inline-mascot) > a { grid-column: 2; justify-self: start; }
#main-content.kk-unified .kk-closing-panel > .kk-taste-section-inner > div:has(> .kk-inline-mascot) > a:only-of-type { grid-row: 1 / span 2; }
@media(max-width:860px) {
  #main-content.kk-unified .kk-closing-panel:not(:has(.kk-parrot-slot)) > .kk-taste-section-inner { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  #main-content.kk-unified .kk-closing-panel:not(:has(.kk-parrot-slot)) > .kk-taste-section-inner > :last-child:not(:first-child):has(> .kk-inline-mascot) { grid-template-columns: 76px minmax(0,1fr); column-gap: 14px !important; }
  #main-content.kk-unified .kk-closing-panel > .kk-taste-section-inner > div > .kk-inline-mascot { width: 76px !important; height: 104px !important; }
}
@media(max-width:760px) {
  #main-content.kk-unified .kk-panel-inquiry { padding: 26px !important; }
  #main-content.kk-unified .kk-panel-inquiry p { font-size: 15px !important; }
  #main-content.kk-unified .kk-panel-inquiry > a { width: 100%; text-align: center; justify-content: center; }
  #main-content.kk-unified #faq .kk-panel-faq > summary,
  #main-content.kk-unified .kk-panel-faq > summary { padding: 20px !important; font-size: 16px !important; }
  #main-content.kk-unified #faq .kk-panel-faq > p,
  #main-content.kk-unified .kk-panel-faq > p { padding: 0 20px 22px !important; }
  #main-content.kk-unified .kk-process-grid,
  #main-content.kk-unified .kk-process-grid.kk-process-five { grid-template-columns: 1fr !important; }
  #main-content.kk-unified .kk-process-step { padding: 22px 24px !important; }
  #main-content.kk-unified .kk-process-step + .kk-process-step { border-left: 0 !important; border-top: 1px solid var(--kk-panel-line) !important; }
  #main-content.kk-unified .kk-process-step > .kk-process-number { margin-bottom: 10px !important; }
  #main-content.kk-unified .pp-delivery { gap: 24px; }
  #main-content.kk-unified .pp-formats { gap: 14px; }
  #main-content.kk-unified .pp-format-shape { font-size: 22px; }
  #main-content.kk-unified .pp-guide { grid-template-columns: 90px 1fr; gap: 18px; }
  #main-content.kk-unified .pp-finishing .kk-panel h2 { font-size: 24px !important; }
  #main-content.kk-unified .vp-work-grid .kk-work-card { display: flex !important; }
}