/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
	--O:    var(--accent);
	--11-5px: 13px;
}

html {scroll-behavior: smooth;}
body {background: var(--bg); color: var(--tx); font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 17px;line-height: 1.65; overflow-x: hidden; transition: background .4s, color .4s;}

a {color: inherit; text-decoration: none;}

h1, h2, h3, h4 {font-family: 'Bebas Neue', sans-serif; font-weight: 400; color: var(--hd); line-height: .95; letter-spacing: .04em; transition: color .4s;}

/* ─────────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────────── */
.site-header {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.5vw; background: var(--nav); backdrop-filter: blur(18px); border-bottom: 1px solid var(--li); transition: background .4s, border-color .4s;}
.logged-in .site-header {top:32px;}
.main-navigation {position:relative;}
.main-navigation .inside-navigation {max-width: none; padding-left: 2em !important; padding-right: 2em !important; backdrop-filter: blur(18px);}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {background-color: transparent;}
.main-navigation .sticky-navigation-logo,
.main-navigation.navigation-stick .site-logo:not(.mobile-header-logo) {display: inline-block !important;}

.main-nav {display: flex; align-items: center; gap: 36px;}
.main-nav ul {display: contents; list-style: none;}
.main-navigation .main-nav ul li a,
.is_stuck .main-nav ul li a {font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tx); transition: color .2s; position: relative; line-height:20px !important;}
.main-navigation .main-nav ul li a::after {content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--O); transition: width .22s;}
.main-navigation .main-nav ul li:hover a {color: var(--hd);}
.main-navigation .main-nav ul li:hover a::after {width: 100%;}
.main-navigation .main-nav > ul > li {padding:20px 20px;}
.main-navigation .main-nav > ul > li > a {padding:0 !important}
.menu-item-has-children .dropdown-menu-toggle {padding-right: 0; padding-left: 0px;}
.main-nav ul li a.active {color: var(--O);}
.main-nav ul li a.active::after {width: 100%;}
.header-image.is-logo-image {width:auto; height:24px;}
.header-image.is-logo-image .cls-1,
.footer .cls-1 {fill:black;}
.header-image.is-logo-image .cls-2,
.footer .cls-2 {fill:var(--accent);}
.main-navigation .main-nav .nabidka.menu-item {padding:0px !important;}
.main-navigation .main-nav .nabidka.menu-item a {color:white !important; padding:10px 25px !important;  background-color:var(--accent) !important;}
.main-navigation .main-nav .nabidka.menu-item:hover a  {background-color:var(--tx2) !important;}
.main-navigation .main-nav .nabidka.menu-item a::after {display:none;}


/* Dropdown nav item */
nav.main-navigation li {position: relative;}

.dd {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  background: var(--bg2);
  border: 1px solid var(--li);
  padding: 8px 0;
  min-width: 230px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
  transition: background .4s;
}

.nd:hover .dd {
  display: block;
}

.dd a {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx);
}

.dd a::after {
  display: none;
}

.dd a:hover,
.dd a.active-sub {
  color: var(--O);
  background: var(--bg3);
}

/* CTA button in nav */
.nav-cta {
  background: var(--O) !important;
  color: #fff !important;
  padding: 10px 22px;
  font-size: var(--11-5px) !important;
  font-weight: 500 !important;
  letter-spacing: .14em;
  transition: opacity .2s !important;
}

.nav-cta::after {
  display: none !important;
}

.nav-cta:hover {
  opacity: .82 !important;
}

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */
.btn {display: inline-block; font-family: 'Manrope', sans-serif; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .16em; text-transform: uppercase; padding: 14px 32px !important; border: 0 !important; cursor: pointer; transition: opacity .2s, transform .15s; border-radius:0 !important;}
.btn-solid {background: var(--O) !important; color: #fff;}

.btn-solid:hover {
  opacity: .84;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--tx2);
  border: 1px solid var(--li2);
}

.btn-ghost:hover {
  border-color: var(--O);
  color: var(--O);
}

.btn-ghost-vid {
  background: transparent;
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .2);
}

.btn-ghost-vid:hover {
  border-color: var(--O);
  color: #fff;
}

.btn-ghost-b {
  background: transparent;
  color: var(--tx2);
  border: 1px solid var(--li2);
}

.btn-ghost-b:hover {
  border-color: var(--O);
  color: var(--O);
}

/* Send button (contact page) */
.btn-send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--O);
  color: #fff;
  border: none;
  padding: 16px 36px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  flex-shrink: 0;
}

.btn-send:hover {
  opacity: .84;
  transform: translateY(-1px);
}

.btn-send svg {
  transition: transform .2s;
}

.btn-send:hover svg {
  transform: translateX(4px);
}

/* "More" outline button (references page) */
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 1px solid var(--li2);
  color: var(--tx2);
  background: transparent;
  transition: border-color .2s, color .2s, background .2s;
}

.btn-more::after {
  content: '→';
  font-size: 14px;
  transition: transform .2s;
}

.btn-more:hover {
  border-color: var(--O);
  color: var(--O);
}

.btn-more:hover::after {
  transform: translateX(4px);
}

/* ─────────────────────────────────────────────
   HERO (homepage)
   ───────────────────────────────────────────── */
.nk-awb {position: relative; z-index: 0; height: 95vh; min-height: 600px; overflow:hidden;}
.hero-scrim {position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.18) 25%,
    rgba(0, 0, 0, 0.18) 45%,
    rgba(0, 0, 0, .94) 100%
  );
}
.hero-eyebrow {font-size: var(--11-5px); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--O); display: flex; align-items: center; gap: 12px; margin-bottom: 22px;}
.hero-eyebrow::before {content: ''; width: 22px;height: 1px; background: var(--O);}
.hero-scrim h1 {font-size: clamp(3.5rem, 9vw, 9rem) !important; color: #fff; line-height: .88; letter-spacing: .03em; margin-bottom: 28px;}
.hero-scrim h1 em {color: var(--O); font-style: normal; display: block;}
.hero-sub {color: rgba(255, 255, 255, .42); line-height: 1.72; margin-bottom: 38px;}

/* Ticker / scrolling marquee */
.hero-ticker {position: relative; bottom: 0; left: -50px; z-index: 3; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); padding: 11px 0; width: 230vw !important; max-width: none !important;}
.ticker-track {display: flex; gap: 48px; animation: tick 22s linear infinite; white-space: nowrap;}
.ticker-track span {font-family: 'Bebas Neue', sans-serif; font-size: 14.5px; letter-spacing: .2em; color: rgba(255, 255, 255, .5);}
.ticker-track span.hi {color: var(--O);}

@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────
   PAGE HEADER (inner pages)
   ───────────────────────────────────────────── */
.page-header > .stk-row {min-height: 68vh; /*padding-top: 66px;*/ display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; border-bottom: 1px solid var(--li); background: linear-gradient(to top, black, transparent);}
.breadcrumb {display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--base); margin-bottom: 40px !important; background-color: transparent !important; border-radius: 0 !important; padding: 0 !important;}
.breadcrumb a {color: white; transition: color .2s;}
.breadcrumb a:hover {color: var(--O);}
.breadcrumb-sep {color: var(--base);}
.ph-eyebrow {font-size: var(--11-5px); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--O); display: flex; align-items: center; gap: 12px; margin-bottom: 20px;}
.ph-eyebrow::before {content: ''; width: 22px; height: 1px; background: var(--O);}
.ph-content h1 {font-size: clamp(4rem, 8vw, 10rem); color: var(--hd); line-height: .9; letter-spacing: .03em; max-width: 900px; margin-bottom: 36px;}
.ph-lead {font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.75; color: white; max-width: 680px; transition: color .4s;}






/* 1993 ghost year (O nás page) */
.ph-year {
  position: absolute;
  right: -2vw;
  bottom: -.08em;
  z-index: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(12rem, 26vw, 30rem);
  letter-spacing: .02em;
  line-height: 1;
  color: rgba(232, 97, 10, .05);
  pointer-events: none;
  transition: color .4s;
}

.ph-year {
  color: rgba(232, 97, 10, .07);
}

.ph-content .stk-inner-blocks {position: relative; z-index: 2; padding: 80px 5.5vw 72px;}



/* Contact page hero ghost */
.ch-ghost {
  position: absolute;
  left: -5vw;
  bottom: -.1em;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(12rem, 22vw, 28rem);
  letter-spacing: .02em;
  line-height: 1;
  color: rgba(232, 97, 10, .04);
  pointer-events: none;
  transition: color .4s;
  z-index: 0;
}

.ch-ghost {
  color: rgba(232, 97, 10, .06);
}

/* Contact hero eyebrow */
.ch-eyebrow {
  font-size: var(--11-5px);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--O);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ch-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--O);
}

/* ─────────────────────────────────────────────
   SECTION MARKER (homepage)
   ───────────────────────────────────────────── */
.sec-mark > .stk-row {padding: 120px 5.5vw 0; border-top: 1px solid var(--li); display: flex; align-items: center; overflow: hidden;}

.sec-mark-num p {font-family: 'Bebas Neue', sans-serif; font-size: clamp(5rem, 10vw, 12rem); color: var(--li2); line-height: 1; letter-spacing: .02em; flex-shrink: 0; margin-right: 40px; transition: color .4s;}
.sec-mark-label p {font-size: var(--11-5px); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--O);}

/* ─────────────────────────────────────────────
   MANIFESTO (homepage)
   ───────────────────────────────────────────── */
.manifesto > .stk-row {padding: 140px 5.5vw; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start;}
.manifesto-aside {padding-top: 14px;}
.manifesto-aside .eyebrow-sm {font-size: var(--11-5px); letter-spacing: .2em; text-transform: uppercase; color: var(--O); margin-bottom: 20px; display: block;}
.manifesto-aside p {line-height: 1.82; color: var(--tx);}
.manifesto h2 {font-size: clamp(3.5rem, 6vw, 7.5rem); line-height: .93; letter-spacing: .03em;}
.manifesto h2 em {color: var(--O); font-style: normal;}

/* ─────────────────────────────────────────────
   SERVICES LIST (homepage)
   ───────────────────────────────────────────── */
.svc-list {border-top: 1px solid var(--li);}
.svc-list > .stk-row {display:grid;}
.svc-row .stk-inner-blocks {display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 40px; padding: 40px 5.5vw; border-bottom: 1px solid var(--li); position: relative; overflow: hidden; transition: background .25s; cursor: default;}
:nth-child(1 of .svc-row) .stk-inner-blocks {border-top: 1px solid var(--li);}
.svc-row .stk-inner-blocks::after {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--O); transform: scaleY(0); transform-origin: top; transition: transform .35s;}
.svc-row:hover {background: var(--bg3);}
.svc-row:hover::after {transform: scaleY(1);}
.svc-n {font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .12em; color: var(--tx); transition: color .4s;}
.svc-row:hover .svc-n {color: var(--O);}
.svc-row h3 {font-size: clamp(2rem, 3.5vw, 4rem); letter-spacing: .04em; transition: color .25s;}
.svc-row:hover h3 {color: var(--O);}
.svc-desc {font-size: 14px; line-height: 1.78; color: var(--tx); max-width: 360px; text-align: right; opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s;}
.svc-row:hover .svc-desc {opacity: 1; transform: none;}

/* ─────────────────────────────────────────────
   CAPABILITIES STRIP (inner service pages)
   ───────────────────────────────────────────── */
.caps-strip > .stk-row {padding: 60px 5.5vw; border-bottom: 1px solid var(--li); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;}
.cap .stk-inner-blocks {padding: 32px 28px; border-right: 1px solid var(--li);}
.cap:last-child .stk-inner-blocks {border-right: none;}
.cap-icon {width: 36px; height: 2px; background: var(--O); margin-bottom: 20px;}
.cap h4 {font-size: 1.5rem; letter-spacing: .06em; margin-bottom: 8px;}
.cap p {line-height: 1.65; color: var(--tx);}

/* ─────────────────────────────────────────────
   ACCORDION (service sub-pages)
   ───────────────────────────────────────────── */
.svc-header > .stk-row {padding: 80px 5.5vw 0; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 0;}
.svc-header h2 {font-size: clamp(2.5rem, 4vw, 5rem);}
.svc-header p {color: var(--tx); /*max-width: 340px;*/ line-height: 1.78; text-align: right;}

.acc-list {margin-top: 60px;}
.acc-item.stk-block-accordion {border-top: 1px solid var(--li); width: 100%; display: grid; grid-template-columns: 1fr; align-items: center; /*gap: 32px;*/}
.acc-item.stk-block-accordion summary {padding: 32px 5.5vw; cursor: pointer; background: transparent; border: none; text-align: left; color: inherit; font-family: inherit; transition: background .2s; position: relative;}
.stk--is-open.acc-item.stk-block-accordion summary {background: var(--bg3);}
.acc-item.stk-block-accordion:last-child {border-bottom: 1px solid var(--li);}
.acc-item.stk-block-accordion summary > .stk-column-wrapper > .stk-inner-blocks {display:grid; grid-template-columns:64px 1fr; align-items: center;}
.acc-item.stk-block-accordion .stk-block-accordion__content {padding: 32px 5.5vw;}
.acc-item.stk-block-accordion summary::before {content: '' !important; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--O); transform: scaleY(0); transform-origin: top; transition: transform .3s; z-index:2;}
.acc-item.stk-block-accordion summary:hover {background: var(--bg3);}
.acc-item.stk-block-accordion:hover summary::before,
.acc-item.stk-block-accordion.stk--is-open summary::before {transform: scaleY(1);}
.acc-num {font-family: 'Bebas Neue', sans-serif; font-size: .95rem; letter-spacing: .12em; color: var(--tx); transition: color .3s;}
.acc-item.stk-block-accordion:hover .acc-num,
.acc-item.stk-block-accordion.stk--is-open .acc-num {color: var(--O);}
.acc-title h4 {font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 3vw, 3.2rem); letter-spacing: .04em; color: var(--hd); transition: color .3s;}
.acc-item.stk-block-accordion:hover .acc-title h4,
.acc-item.stk-block-accordion.stk--is-open .acc-title h4 {color: var(--O);}
.acc-item.stk-block-accordion .acc-arrow svg:nth-of-type(2) {padding:10px; box-sizing:content-box; border:2px solid var(--li);}
.acc-item.stk-block-accordion:hover .acc-arrow svg:nth-of-type(2),
.acc-item.stk-block-accordion.stk--is-open .acc-arrow svg:nth-of-type(2) {border:1px solid var(--accent); fill: var(--accent) !important; transform: rotate(45deg) !important;}
.acc-item.stk-block-accordion:hover .acc-arrow svg path:is(g, path, rect, polygon, ellipse) {fill: var(--accent) !important;}
.acc-body-inner {/*padding: 0 0 52px;*/ display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; /*border-top: 1px solid var(--li); padding-top: 36px;*/}
.acc-body-text p {line-height: 1.82; color: var(--tx); margin-bottom:0;}
.acc-body-text p + p {margin-top: 14px;}
.acc-tags {display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;}
.tag {font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--li2); padding: 6px 14px; color: var(--tx); transition: border-color .2s, color .2s;}
/*.tag:hover {border-color: var(--O); color: var(--O);}*/

/* ─────────────────────────────────────────────
   WORKS / PORTFOLIO (homepage)
   ───────────────────────────────────────────── */
.works > .stk-row {padding: 0 5.5vw 160px; display:block;}
.works-intro .stk-inner-blocks {padding: 72px 0 64px; display: flex; align-items: flex-end; justify-content: space-between; flex-direction: row;}
.works-intro h2 {font-size: clamp(2.5rem,4vw,5rem);}
.works-intro p {color: var(--tx); max-width: 450px; line-height: 1.78; text-align: right;}
.works-grid .stk-inner-blocks {display: flex; flex-direction: column; gap: 2px; flex-direction:row;}
.works [id*="wpv-view-layout-4860"],
.cat-section [id*="wpv-view-layout-4860"] {padding:0}
[id*="wpv-view-layout-4860"]::before,
[id*="wpv-view-layout-4860"]::after {display:none !important}
.works [id*="wpv-view-layout-4860"] .p-card,
.cat-section [id*="wpv-view-layout-4860"] .p-card {grid-area:auto/auto/span 1/span 1; aspect-ratio: 16 / 9;}
.works [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card) {grid-area:1/1/span 2/span 2; aspect-ratio:auto;}
.cat-section [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card) {grid-area:1/1/span 2/span 2; aspect-ratio:auto;}


.work-ph {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(8rem, 16vw, 18rem);
  color: rgba(232, 97, 10, .07);
  letter-spacing: .05em;
  line-height: 1;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), color .4s;
}

.work-item:hover .work-ph {
  transform: translateY(-50%) translateX(-20px);
}

.work-ph {
  color: rgba(232, 97, 10, .1);
}

.work-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 48px;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, transparent 100%);
}

.work-cat {
  font-size: var(--11-5px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--O);
  margin-bottom: 10px;
}

.work-body h3 {
  font-size: clamp(2rem, 4vw, 4.5rem);
  color: #fff;
  margin-bottom: 12px;
}

.work-body p {
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
  max-width: 500px;
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s .1s, opacity .3s;
  opacity: 0;
}

.work-item:hover .work-body p {
  max-height: 80px;
  opacity: 1;
}

.work-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-top: 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s .15s, transform .3s .15s, color .2s;
}

.work-item:hover .work-link {
  opacity: 1;
  transform: none;
}

.work-link:hover {
  color: var(--O);
}

.work-link svg {
  transition: transform .2s;
}

.work-link:hover svg {
  transform: translateX(3px);
}

.works-footer {
  padding-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--li);
}

.works-footer p {
  font-size: 15px;
  color: var(--tx);
  max-width: 320px;
  line-height: 1.72;
}

/* ─────────────────────────────────────────────
   TESTIMONIAL / QUOTE SECTION
   ───────────────────────────────────────────── */
.quote-section > .stk-row {padding: 160px 5.5vw; border-top: 1px solid var(--li); display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; background: var(--bg2);}
.quote-meta {padding-top: 8px;}
.quote-meta .q-name {font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: .06em; color: var(--hd); transition: color .4s;}
.quote-meta .q-role {font-size: 12.5px; color: var(--tx); margin-top: 5px; line-height: 1.5;}
.blockquote {position: relative;}
.blockquote::before {content: '"' !important; font-family: 'Bebas Neue', sans-serif; font-size: clamp(8rem, 14vw, 16rem); color: var(--O); opacity: .13; line-height: .7; position: absolute; top: -20px; left: -16px; pointer-events: none;}
.blockquote p {font-size: clamp(1.1rem, 2vw, 1.65rem); font-weight: 300; line-height: 1.62; color: var(--tx2); font-style: italic; padding-top: 40px;}
.blockquote :last-child {margin-bottom:0;}
[name*="wpv-filter-4873"] .pagination {display: flex; justify-content: center; width: 100%; margin-top: -24px; background: var(--base-3); z-index: 2; position: relative; padding-bottom: 24px; gap: 10px;}
[name*="wpv-filter-4873"] .pagination .page-item .page-link {width: 20px !important; height: 20px !important; border-radius: 30px !important;}
[name*="wpv-filter-4873"] .pagination .active-dot a,
[name*="wpv-filter-4873"] .pagination .page-item:hover a {background-color:var(--accent);} 

/* ─────────────────────────────────────────────
   PROCESS SECTION (homepage)
   ───────────────────────────────────────────── */
.process > .stk-row {padding: 120px 5.5vw; border-top: 1px solid var(--li); display:block;}
.process-hd .stk--block-horizontal-flex {display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 80px;}
.process-hd h2 {font-size: clamp(3rem, 5vw, 6rem);}
.process-hd p {font-size: 15px; color: var(--tx); line-height: 1.82;}
.process-steps .stk--block-horizontal-flex {display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--li);}

.ps {
  padding: 48px 36px 56px;
  border-right: 1px solid var(--li);
}

.ps:last-child {
  border-right: none;
}

.ps-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  letter-spacing: .04em;
  color: var(--li2);
  line-height: 1;
  margin-bottom: 28px;
  transition: color .4s;
}

.ps h3 {
  font-size: 1.7rem;
  letter-spacing: .05em;
  margin-bottom: 14px;
}

.ps p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--tx);
}

/* ─────────────────────────────────────────────
   TECH SECTION (service pages)
   ───────────────────────────────────────────── */
.tech-section > .stk-row {padding: 100px 5.5vw; border-bottom: 1px solid var(--li); display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start;}

.tech-section h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
  margin-bottom: 16px;
}

.tech-section .lead {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.78;
  max-width: 300px;
}

.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.tech-item {
  background: var(--bg2);
  padding: 28px;
  transition: background .2s;
}

.tech-item:hover {
  background: var(--bg3);
}

.tech-item h4 {
  font-size: 1.2rem;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.tech-item p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--tx);
}

/* ─────────────────────────────────────────────
   OTHER SERVICES PILLS NAV
   ───────────────────────────────────────────── */
.other-svcs > .stk-row {padding: 80px 5.5vw; /*border-bottom: 1px solid var(--li);*/ background: var(--bg2); transition: background .4s;}
.other-svcs h3 {font-size: clamp(1.5rem, 2.5vw, 2.5rem); letter-spacing: .04em; margin-bottom: 40px;}
.svc-pills > .stk-row {display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start !important; flex-direction: row;}
.svc-pills.stk-block-button-group .svc-pill.stk-block-button {border: 1px solid var(--li2); transition: border-color .2s, color .2s, background .2s; display: inline-block;}
.svc-pills.stk-block-button-group .svc-pill.stk-block-button:hover,
.svc-pills.stk-block-button-group .svc-pill.stk-block-button.current {border: 1px solid var(--accent);}
.svc-pills.stk-block-button-group .svc-pill.stk-block-button a.stk-link,
.svc-pills.stk-block-button-group .svc-pill.stk-block-button a.stk-link span {color:var(--tx); background:transparent;}
.svc-pills.stk-block-button-group .svc-pill.stk-block-button a.stk-link {font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 12px 22px; color: var(--tx);}
.svc-pills.stk-block-button-group .svc-pill.stk-block-button a.stk-link:hover span,
.svc-pills.stk-block-button-group .svc-pill.stk-block-button.current a.stk-link span {color:var(--accent);}
.svc-pills .svc-pill:hover {border-color: var(--O); color: var(--O);}
.svc-pill.current {border-color: var(--O); color: var(--O); background: rgba(232, 97, 10, .07);}
.stk-block-columns#dalsi-sluzby {margin-left: calc(-100vw / 2 + 100% / 2); margin-right: calc(-100vw / 2 + 100% / 2); max-width: 100vw; width: auto;}

.stk-block-columns.platformy .svc-pills a {pointer-events:none !important}

/* ─────────────────────────────────────────────
   CONTACT BLOCK (shared across pages)
   ───────────────────────────────────────────── */
.contact-block > .stk-row {border-top: 1px solid var(--li); display: grid; grid-template-columns: 1fr 1fr;}
.cb-left {padding: 120px 5.5vw; border-right: 1px solid var(--li); display: flex; flex-direction: column; justify-content: space-between; background: var(--bg);}
.cb-left h2 {font-size: clamp(3.5rem, 6vw, 8rem); line-height: .9; letter-spacing: .03em; margin-bottom: 48px;}
.cb-left h2 em {color: var(--O); font-style:normal;}
.cb-details {display: flex; flex-direction: column; gap: 20px;}
.cb-d {display: flex; align-items: flex-start; gap: 14px;}
.cb-ic {width: 36px; height: 36px; border: 1px solid var(--li); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--O); margin-top: 1px;}
.cb-dt {font-size: 15px; color: var(--tx); line-height: 1.5;}
.cb-dt strong {font-weight: 500; color: var(--tx2); display: block; margin-bottom: 1px;}
.cb-right {padding: 120px 5.5vw; background: var(--bg2);}
.cb-right h3 {font-size: clamp(2rem, 3vw, 3.5rem); letter-spacing: .04em; margin-bottom: 40px;}

/* ─────────────────────────────────────────────
   CONTACT HERO (kontakt page)
   ───────────────────────────────────────────── */
.contact-hero > .stk-row {display: grid; grid-template-columns: 1fr 1fr;}
.ch-left {padding: 100px 5.5vw 80px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--li); background: var(--bg2); transition: background .4s; position: relative; overflow: hidden;}
.ch-left-content {position: relative; z-index: 1;}
.ch-left h1 {font-size: clamp(4rem, 7vw, 9rem); color: var(--hd); line-height: .9; letter-spacing: .03em; margin-bottom: 36px;}
.ch-left h1 em {color: var(--O); font-style:normal;}
.ch-lead {font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.78; color: var(--tx2); max-width: 480px; margin-bottom: 64px; transition: color .4s;}
.ch-right {padding: 100px 5.5vw 80px; background: var(--bg); transition: background .4s; display: flex; flex-direction: column; justify-content: center;}
.ch-right h2 {font-size: clamp(2.5rem, 4vw, 5rem); letter-spacing: .04em; margin-bottom: 10px;}
.ch-right .form-lead {font-size: 15px; color: var(--tx); line-height: 1.7; margin-bottom: 48px; max-width: 480px;}
/* Contact detail rows (kontakt page) */
.contact-details {display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1;}
.cd-row {display: flex; align-items: flex-start; gap: 20px; padding: 28px 0; border-top: 1px solid var(--li); transition: background .2s;}
.cd-row:last-child {border-bottom: 1px solid var(--li);}
.cd-icon {width: 40px; height: 40px; border: 1px solid var(--li); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--O); margin-top: 1px; transition: border-color .2s;}
.cd-row:hover .cd-icon {border-color: var(--O);}
.cd-info {display: flex; flex-direction: column; gap: 3px;}
.cd-label {font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tx);}
.cd-value {font-size: 16px; font-weight: 400; color: var(--tx2); transition: color .4s;}
.cd-value a {color: var(--tx2); transition: color .2s;}
.cd-value a:hover {color: var(--O);}
.cd-sub {font-size: 12.5px; color: var(--tx);}

/* ─────────────────────────────────────────────
   FORM (shared)
   ───────────────────────────────────────────── */
.form {display: flex; flex-direction: column; gap: 14px;}
.form p {margin-bottom:0;}
.form span {display:block;}
.form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.fg {display: flex; flex-direction: column; gap: 7px;}
.fg label {font-size: var(--11-5px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tx);}
.fg input,
.fg textarea,
.fg select {background: var(--inp); border: 1px solid var(--li); color: var(--tx2); padding: 14px 16px; font-family: 'Manrope', sans-serif; font-size: 15px; outline: none; transition: border-color .2s, background .4s, color .4s; appearance: none; width:100%;}
.fg input::placeholder,
.fg textarea::placeholder {color: var(--tx); opacity: .5;}
.fg input:focus,
.fg textarea:focus,
.fg select:focus {border-color: var(--O);}
.fg textarea {resize: vertical; min-height: 110px;}
.form-note {font-size: 12.5px; color: var(--tx); line-height: 1.65;}
.wpcf7-acceptance .wpcf7-list-item {margin-left:0;}
.wpcf7-acceptance label {display: grid; grid-template-columns: 25px 1fr; align-items: start; grid-gap:10px;}
.wpcf7-acceptance label input {width: 20px; height: 20px;}


/* Contact page form footer */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}


/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.stk-block-columns.footer {border-top: 1px solid var(--li); padding: 72px 5.5vw 44px; background: var(--bg); transition: background .4s;}
.stk-block-columns.footer > .stk-row {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px;}
.stk-block-columns.footer .wp-block-image svg {height:30px; margin-bottom:1em;}
.f-logo b {color: var(--O);}
.f-desc {font-size: 15px; line-height: 1.75; color: var(--tx); max-width: 300px;}
.f-col h5 {font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tx); margin-bottom: 20px;}
.f-col ul {list-style: none; margin:0;}
.f-col li {margin-bottom: 10px;}
.f-col a {font-size: 14px; color: var(--tx); transition: color .2s;}
.f-col a:hover {color: var(--O);}
.sl {width: 32px; height: 32px; border: 1px solid var(--li); display: flex; align-items: center; justify-content: center; color: var(--tx); transition: border-color .2s, color .2s;}
.sl:hover {border-color: var(--O); color: var(--O);}

/* ─────────────────────────────────────────────
   SCROLL REVEAL ANIMATION
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: PHOTO GRID (Fotografie)
   ───────────────────────────────────────────── */
.photo-section {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
}

.photo-section-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.photo-section-hd h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
}

.photo-section-hd a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .2s;
}

.photo-section-hd a:hover {
  color: var(--O);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.photo-cell {
  background: var(--bg3);
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s;
}

.photo-cell.tall { grid-row: span 2; }
.photo-cell.wide { grid-column: span 2; }

.photo-ph {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 5vw, 6rem);
  color: rgba(232, 97, 10, .08);
  letter-spacing: .1em;
  pointer-events: none;
  transition: color .4s;
}

.photo-ph {
  color: rgba(232, 97, 10, .12);
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
}

.photo-cell:hover .photo-overlay {
  opacity: 1;
}

.photo-overlay span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--O);
  margin-bottom: 6px;
  display: block;
}

.photo-overlay p {
  font-size: 14px;
  color: #fff;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: SPECIAL PRODUCTS (Fotografie)
   ───────────────────────────────────────────── */
.special-section > .stk-row {padding: 100px 5.5vw 100px 5.5vw; border-bottom: 1px solid var(--li); border-top: 1px solid var(--li); display: block;}
.special-section-hd {margin-bottom: 60px;}
.special-section-hd h2 {font-size: clamp(2.5rem, 4vw, 5rem); margin-bottom: 14px;}

.special-section-hd p {
  font-size: 15px;
  color: var(--tx);
  max-width: 560px;
  line-height: 1.78;
}

.special-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.special-card {
  background: var(--bg2);
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
  transition: background .25s;
}

.special-card:hover {
  background: var(--bg3);
}

.special-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--O);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}

.special-card:hover::before {
  transform: scaleX(1);
}

.special-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--O);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.special-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--O);
}

.special-card h3 {
  font-size: clamp(2rem, 2.5vw, 3rem);
  margin-bottom: 20px;
}

.special-card p {
  font-size: 15px;
  line-height: 1.82;
  color: var(--tx);
}

.special-specs {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--li);
  padding-top: 24px;
}

.spec-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.spec-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx);
  flex-shrink: 0;
  width: 100px;
}

.spec-val {
  font-size: 14px;
  color: var(--tx2);
}

.special-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--O);
  transition: opacity .2s;
}

.special-link:hover {
  opacity: .7;
}

.special-link svg {
  transition: transform .2s;
}

.special-link:hover svg {
  transform: translateX(3px);
}

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: ANIMATED SHAPES (Grafika)
   ───────────────────────────────────────────── */
.ph-shapes {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  width: clamp(280px, 35vw, 520px);
  aspect-ratio: 1;
}

.ph-shapes svg {
  width: 100%;
  height: 100%;
}

.shape-ring  { animation: spin 18s linear infinite; transform-origin: center; }
.shape-ring2 { animation: spin 12s linear infinite reverse; transform-origin: center; }
.shape-tri   { animation: pulse 4s ease-in-out infinite; transform-origin: center; }
.shape-sq    { animation: drift 6s ease-in-out infinite; transform-origin: center; }

@keyframes spin  { from { transform: rotate(0deg);   } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .06; } 50% { opacity: .14; } }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(8deg); } }

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: VISUAL SHOWCASE (Grafika)
   ───────────────────────────────────────────── */
.showcase {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
}

.showcase-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.showcase-hd h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
}

.showcase-hd a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .2s;
}

.showcase-hd a:hover {
  color: var(--O);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.sc-cell {
  background: var(--bg3);
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  transition: background .4s;
}

.sc-cell.tall {
  grid-row: span 2;
  min-height: 480px;
}

.sc-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .25;
  transition: opacity .3s;
}

.sc-cell:hover .sc-art {
  opacity: .55;
}

.sc-art svg {
  width: 60%;
  height: 60%;
}

.sc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
}

.sc-cell:hover .sc-overlay {
  opacity: 1;
}

.sc-overlay span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--O);
  margin-bottom: 6px;
  display: block;
}

.sc-overlay p {
  font-size: 14px;
  color: #fff;
  line-height: 1.4;
}

/* Process strip (Grafika & WWW) */
.process-strip {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.process-strip h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
  margin-bottom: 16px;
}

.process-strip .lead {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.78;
  max-width: 300px;
}

.process-steps-h {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.psteps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.pstep {
  background: var(--bg2);
  padding: 36px 32px;
  transition: background .2s;
}

.pstep:hover {
  background: var(--bg3);
}

.pstep-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  letter-spacing: .04em;
  color: var(--li2);
  line-height: 1;
  margin-bottom: 16px;
  transition: color .4s;
}

.pstep h4 {
  font-size: 1.3rem;
  letter-spacing: .05em;
  margin-bottom: 10px;
}

.pstep p {
  font-size: 13px;
  line-height: 1.68;
  color: var(--tx);
}

/* Software pills (Grafika) */
.software-section {
  padding: 80px 5.5vw;
  border-bottom: 1px solid var(--li);
  background: var(--bg2);
  transition: background .4s;
}

.software-section h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  letter-spacing: .04em;
  margin-bottom: 40px;
}

.soft-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.soft-pill {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--li2);
  padding: 12px 22px;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s, color .2s;
}

.soft-pill:hover {
  border-color: var(--O);
  color: var(--O);
}

.soft-dot {
  width: 6px;
  height: 6px;
  background: var(--O);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: BROWSER MOCKUP (WWW)
   ───────────────────────────────────────────── */
.ph-browser {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: clamp(260px, 32vw, 480px);
  background: var(--bg3);
  border: 1px solid var(--li2);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
  transition: background .4s, border-color .4s;
}

.ph-browser-bar {
  height: 36px;
  background: var(--bg2);
  border-bottom: 1px solid var(--li);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  transition: background .4s;
}

.ph-browser-dots {
  display: flex;
  gap: 6px;
}

.ph-browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ph-browser-dot:nth-child(1) { background: rgba(232, 97, 10, .5); }
.ph-browser-dot:nth-child(2) { background: var(--li2); }
.ph-browser-dot:nth-child(3) { background: var(--li2); }

.ph-browser-url {
  flex: 1;
  height: 20px;
  background: var(--bg3);
  border: 1px solid var(--li);
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--tx);
  transition: background .4s;
}

.ph-browser-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ui-nav  { height: 10px; background: var(--li2); border-radius: 2px; width: 100%; }
.ui-hero { height: 80px; background: var(--O); opacity: .12; border-radius: 3px; }
.ui-row  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ui-card { height: 48px; background: var(--li); border-radius: 3px; position: relative; overflow: hidden; }
.ui-card::after { content: ''; position: absolute; top: 8px; left: 8px; right: 8px; height: 6px; background: var(--li2); border-radius: 2px; }
.ui-text-block { display: flex; flex-direction: column; gap: 6px; }
.ui-line { height: 6px; background: var(--li); border-radius: 2px; }
.ui-line.short { width: 60%; }
.ui-line.mid   { width: 80%; }
.ui-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--O);
  animation: blink 1s step-end infinite;
  vertical-align: middle;
  margin-left: 3px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: WHAT'S INCLUDED (WWW)
   ───────────────────────────────────────────── */
.included {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.included h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
  margin-bottom: 16px;
}

.included .lead {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.78;
  max-width: 300px;
}

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.check-item {
  background: var(--bg2);
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: background .2s;
}

.check-item:hover {
  background: var(--bg3);
}

.check-mark {
  width: 20px;
  height: 20px;
  border: 1px solid var(--O);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-mark svg {
  color: var(--O);
}

.check-text h4 {
  font-size: 1rem;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.check-text p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx);
}

/* Platforms strip (WWW) */
.platforms {
  padding: 80px 5.5vw;
  border-bottom: 1px solid var(--li);
  background: var(--bg2);
  transition: background .4s;
}

.platforms h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  letter-spacing: .04em;
  margin-bottom: 12px;
}

.platforms .sub {
  font-size: 15px;
  color: var(--tx);
  margin-bottom: 36px;
  max-width: 500px;
  line-height: 1.7;
}

.platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.platform-pill {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--li2);
  padding: 12px 22px;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s, color .2s;
}

.platform-pill:hover {
  border-color: var(--O);
  color: var(--O);
}

.platform-dot {
  width: 6px;
  height: 6px;
  background: var(--O);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: DATA VIZ ANIMATION (Marketing)
   ───────────────────────────────────────────── */
.ph-dataviz {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: clamp(260px, 34vw, 500px);
  pointer-events: none;
}

.ph-dataviz svg {
  width: 100%;
  display: block;
}

.dv-bar {
  transform-origin: bottom;
  animation: barGrow 1.4s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.dv-bar:nth-child(1) { animation-delay: .1s; }
.dv-bar:nth-child(2) { animation-delay: .2s; }
.dv-bar:nth-child(3) { animation-delay: .3s; }
.dv-bar:nth-child(4) { animation-delay: .4s; }
.dv-bar:nth-child(5) { animation-delay: .5s; }
.dv-bar:nth-child(6) { animation-delay: .6s; }

.dv-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawLine 2s ease forwards;
  animation-delay: .8s;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

.dv-pulse {
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { r: 4; opacity: .6; }
  50%       { r: 7; opacity: 1;  }
}

/* Full service list (Marketing) */
.services-full {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.services-full h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
  margin-bottom: 16px;
}

.services-full .lead {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.78;
  max-width: 300px;
}

.svc-full-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.svc-full-item {
  background: var(--bg2);
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: background .2s;
}

.svc-full-item:hover {
  background: var(--bg3);
}

.sfc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--O);
  flex-shrink: 0;
  margin-top: 8px;
}

.sfc-text h4 {
  font-size: .95rem;
  letter-spacing: .05em;
  margin-bottom: 3px;
}

.sfc-text p {
  font-size: 12.5px;
  color: var(--tx);
  line-height: 1.6;
}

/* External marketing dept block */
.ext-block > .stk-row {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  background: var(--bg2);
  transition: background .4s;
}

.ext-label {
  font-size: var(--11-5px);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--O);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ext-label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--O);
}

.ext-block h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
  margin-bottom: 24px;
}

.ext-block p {
  font-size: 15px;
  line-height: 1.82;
  color: var(--tx);
  margin-bottom: 16px;
}

.ext-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.ext-stat {
  background: var(--bg3);
  padding: 36px 32px;
  transition: background .4s;
}

.ext-stat-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  letter-spacing: .04em;
  color: var(--O);
  line-height: 1;
  margin-bottom: 8px;
}

.ext-stat-l {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx);
}

/* Channels */
.channels > .stk-row {padding: 80px 5.5vw; border-bottom: 1px solid var(--li); background: var(--bg); transition: background .4s; display:block;}
.channels h3 {font-size: clamp(1.5rem, 2.5vw, 2.5rem); letter-spacing: .04em; margin-bottom: 12px;}

.channels .sub {
  font-size: 15px;
  color: var(--tx);
  margin-bottom: 36px;
  max-width: 500px;
  line-height: 1.7;
}

.ch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ch-pill {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--li2);
  padding: 12px 22px;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s, color .2s;
}

.ch-pill:hover {
  border-color: var(--O);
  color: var(--O);
}

.ch-dot {
  width: 6px;
  height: 6px;
  background: var(--O);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: BRAND / STRATEGY (Strategie)
   ───────────────────────────────────────────── */
.ph-network {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: clamp(260px, 34vw, 500px);
  pointer-events: none;
}

.ph-network svg {
  width: 100%;
  display: block;
}

.node-core { animation: nodePulse 2.5s ease-in-out infinite; }
.node-sat  { animation: nodePulse 2.5s ease-in-out infinite; }
.node-sat:nth-child(2) { animation-delay: .4s; }
.node-sat:nth-child(3) { animation-delay: .8s; }
.node-sat:nth-child(4) { animation-delay: 1.2s; }
.node-sat:nth-child(5) { animation-delay: 1.6s; }
.node-sat:nth-child(6) { animation-delay: 2s; }

@keyframes nodePulse {
  0%, 100% { opacity: .5; }
  50%       { opacity: 1; }
}

.conn-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: connDraw 1.2s ease forwards;
}

.conn-line:nth-child(1) { animation-delay: .2s; }
.conn-line:nth-child(2) { animation-delay: .4s; }
.conn-line:nth-child(3) { animation-delay: .6s; }
.conn-line:nth-child(4) { animation-delay: .8s; }
.conn-line:nth-child(5) { animation-delay: 1.0s; }
.conn-line:nth-child(6) { animation-delay: 1.2s; }

@keyframes connDraw {
  to { stroke-dashoffset: 0; }
}

.orbit  { animation: orbitSpin 20s linear infinite; transform-origin: 240px 200px; }
.orbit2 { animation: orbitSpin 14s linear infinite reverse; transform-origin: 240px 200px; }

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* How it works (Strategie) */
.how-it-works > .stk-row {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
  background: var(--bg2);
  transition: background .4s;
}

.how-it-works h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
  margin-bottom: 16px;
}

.how-it-works .lead {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.82;
  max-width: 300px;
}

.how-body p {
  font-size: 16px;
  line-height: 1.88;
  color: var(--tx2);
  margin-bottom: 20px;
  transition: color .4s;
}

.how-body p:last-child {
  margin-bottom: 0;
}

.how-body strong {
  color: var(--hd);
  font-weight: 500;
}

/* Brand pillars */
.pillars > .stk-row {padding: 100px 5.5vw; border-bottom: 1px solid var(--li); display:block;}
.pillars-hd {margin-bottom: 60px;}
.pillars-hd h2 {font-size: clamp(2.5rem, 4vw, 5rem); margin-bottom: 14px;}
.pillars-hd p {font-size: 15px; color: var(--tx); max-width: 560px; line-height: 1.78;}
.pillars-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--li); border: 1px solid var(--li);}
.pillar {background: var(--bg2); padding: 48px 40px; position: relative; overflow: hidden; transition: background .25s;}
.pillar::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--O); transform: scaleX(0); transform-origin: left; transition: transform .35s;}
.pillar:hover {background: var(--bg3);}
.pillar:hover::before {transform: scaleX(1);}
.pillar-n {font-family: 'Bebas Neue', sans-serif; font-size: 4rem; letter-spacing: .04em; color: var(--li2); line-height: 1; margin-bottom: 24px; transition: color .4s;}
.pillar h3 {font-size: 1.8rem; letter-spacing: .05em; margin-bottom: 14px;}
.pillar p {font-size: 14px; line-height: 1.78; color: var(--tx);}

/* Marketing plan output */
.plan-section {
  padding: 100px 5.5vw;
  border-bottom: 1px solid var(--li);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.plan-section h2 {
  font-size: clamp(2.5rem, 4vw, 5rem);
  margin-bottom: 16px;
}

.plan-section .lead {
  font-size: 15px;
  color: var(--tx);
  line-height: 1.78;
  max-width: 300px;
}

.plan-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.plan-item {
  background: var(--bg2);
  padding: 24px 32px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: background .2s;
}

.plan-item:hover {
  background: var(--bg3);
}

.plan-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .12em;
  color: var(--O);
  flex-shrink: 0;
  padding-top: 3px;
  width: 28px;
}

.plan-text h4 {
  font-size: 1.1rem;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.plan-text p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tx);
}

/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: REFERENCE PORTFOLIO GRID
   ───────────────────────────────────────────── */
.cat-section > .stk-row {border-top: 1px solid var(--li); display:block; border-bottom:0;}
.cat-section-mark .stk--column-flex {padding: 80px 5.5vw 0; display: flex; align-items: center; overflow: hidden;}
.cat-section-num {font-family: 'Bebas Neue', sans-serif; font-size: clamp(5rem, 10vw, 12rem); color: var(--li2); line-height: 1; letter-spacing: .02em; flex-shrink: 0; margin-right: 40px; transition: color .4s;}
.cat-section-info {display: flex; flex-direction: column; gap: 6px;}
.cat-section-label {font-size: var(--11-5px); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--O);}
.cat-section-title {font-size: clamp(2rem, 4vw, 5rem); letter-spacing: .04em; color: var(--hd); transition: color .4s;}
.portfolio-grid,
[id*="wpv-view-layout-4860"] {padding: 48px 5.5vw 80px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 2px; width:100%;}
.home [id*="wpv-view-layout-4860"] {padding: 48px 0 80px;}
.p-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.p-card:nth-child(2) { grid-column: 1; grid-row: 2; }
.p-card:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
.p-card:nth-child(4) { grid-column: 3; grid-row: 1; }
.p-card:nth-child(5) { grid-column: 3; grid-row: 2; }
.p-card {position: relative; overflow: hidden; cursor: crosshair; display: block; min-height: 200px;}
.p-card:nth-child(1),
.p-card:nth-child(2),
.p-card:nth-child(4),
.p-card:nth-child(5) { aspect-ratio: 16/9; }
.p-card:nth-child(3) { aspect-ratio: unset; }
.p-card a {display: block; position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;}
.p-card a::before {content:""; position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, .18) 25%, transparent 100%);}
.p-card-label {position: absolute; top: 16px; left: 16px;}
.p-card-label span {display:inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(4px); padding: 4px 10px; color: var(--tx); background: var(--bg); border-color: var(--tx);}
.p-card-overlay {position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .18) 55%, transparent 100%); opacity: 0; transition: opacity .35s; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 26px;}
.p-card:hover .p-card-overlay {opacity: 1;}
.p-card-cat {font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--O); margin-bottom: 8px; display: block;}
.p-card-title {font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.4rem, 2.5vw, 2.2rem); letter-spacing: .04em; color: #fff; margin-bottom: 8px; line-height: 1;}
.p-card-excerpt {font-size: 12.5px; color: rgba(255, 255, 255, .55); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.cat-section [id*="wpv-view-layout-4860"] {padding: 48px 5.5vw 120px; width: 100% !important;}
.cat-section [id*="wpv-view-layout-4860"] .wpv-filter-next-link {grid-area: auto / 1 / span 1 / span 3; display: block; margin: 0 auto; width: fit-content; border: 1px solid var(--li2); padding: 15px 45px; margin-top: 2em; text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; font-size: 15px; transition:all 0.3s ease-in-out;}
.cat-section [id*="wpv-view-layout-4860"] .wpv-filter-next-link:hover {background-color:var(--accent); color:white; transition:all 0.3s ease-in-out;}
.cat-section [id*="wpv-view-layout-4860"]::before,
.cat-section [id*="wpv-view-layout-4860"]::after {display:none;}
/* Clients strip */
.clients-strip > .stk-row {padding: 72px 5.5vw; border-top: 1px solid var(--li); border-bottom: 1px solid var(--li); background: var(--bg3); transition: background .4s;}
.clients-strip-label {font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tx); text-align: center; margin-bottom: 44px;}

.drzak-slide {position: relative; height: 45px; display: flex; flex-direction: column; justify-content: center;}
.cl-row,
[id*="wpv-view-layout-5220"] {display: flex; align-items: center; justify-content: space-between; gap: 56px; flex-wrap: wrap; margin: 0 100px;}
[id*="wpv-view-layout-5220"]::before,
[id*="wpv-view-layout-5220"]::after {display:none !important}
.site-footer .stk-block-columns.clients-strip .wpv_slide_remove > div {display:flex; flex-direction:row; flex-wrap:nowrap; overflow:initial !important;}
[name*="wpv-filter-5220"] {display: flex; height: 45px; position: absolute; width: 100%; top: 0;}
[name*="wpv-filter-5220"] .pagination {width: 100%; display: flex; justify-content: space-between; position: relative; margin: 0; top: -3px;}
[name*="wpv-filter-5220"] .pagination li a {position: relative; float: none; padding: 5px; line-height: 1; color: #337ab7; background-color: transparent; border: 0;}
[name*="wpv-filter-5220"] .pagination li a svg {width:40px; height:40px}




/* ─────────────────────────────────────────────
   PAGE-SPECIFIC: O NÁS (About)
   ───────────────────────────────────────────── */
.stats-strip > .stk-row {border-bottom: 1px solid var(--li); display: grid; grid-template-columns: repeat(4, 1fr);}
.stat-item .stk-inner-blocks {padding: 48px 40px; border-right: 1px solid var(--li); transition: background .25s;}
.stat-item:last-child .stk-inner-blocks {border-right: none;}
.stat-item:hover .stk-inner-blocks {background: var(--bg3);}
.stat-n h4 {font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 4.5vw, 5.5rem); color: var(--O); line-height: 1; letter-spacing: .02em; margin-bottom: 8px;}
.stat-l {font-size: 13px; line-height: 1.55; color: var(--tx);}

/* Story section */
.story > .stk-row {padding: 120px 5.5vw; border-bottom: 1px solid var(--li); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;}
.story-left h2 {/*font-size: clamp(3rem, 5vw, 6rem); margin-bottom: 32px;*/}
.story-left p {line-height: 1.88; color: var(--tx); margin-bottom: 20px;}
.story-left p:last-child {margin-bottom: 0;}
.story-left p strong {color: var(--tx2); font-weight: 500;}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--li);
}

.tl-item:first-child {
  padding-top: 0;
}

.tl-item:last-child {
  border-bottom: none;
}

.tl-year {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: .05em;
  color: var(--O);
  line-height: 1;
  padding-top: 2px;
}

.tl-body h4 {
  font-size: 1rem;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.tl-body p {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--tx);
}

/* Team grid (shared on O nás + Kontakt) */
.team-section > .stk-row {padding: 120px 5.5vw; border-bottom: 1px solid var(--li); background: var(--bg2); transition: background .4s; display:block;}
.team-hd {margin-bottom: 72px;}
.team-hd h2 {font-size: clamp(3rem, 5vw, 6rem); margin-bottom: 14px;}
.team-hd p {font-size: 15px; color: var(--tx); max-width: 500px; line-height: 1.78;}
.team-grid > .stk-row {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--li); border: 1px solid var(--li);}
.team-card .stk-block-content {background: var(--bg2); padding: 48px 40px; position: relative; overflow: hidden; transition: background .25s;}
.team-card .stk-block-content::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--O); transform: scaleX(0); transform-origin: left; transition: transform .35s;}
.team-card:hover .stk-block-content {background: var(--bg3);}
.team-card:hover .stk-block-content::before {transform: scaleX(1);}
.team-card h3 {font-size: 2rem; letter-spacing: .05em; margin-bottom: 6px !important;}
.team-role {font-size: 11px !important; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--O) !important; margin-bottom: 20px !important;}
.team-card p {/*font-size: 14px;*/ line-height: 1.78; color: var(--tx); margin-bottom: 20px;}
.team-email {font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--tx); transition: color .2s; display: flex; align-items: center; gap: 8px;}
.team-email:hover {color: var(--O);}


/* Testimonials section (O nás) */
.testimonials-section > .stk-row {padding: 120px 5.5vw; border-bottom: 1px solid var(--li);}
.testimonials-hd {margin-bottom: 80px;}
.testimonials-hd h2 {font-size: clamp(3rem, 5vw, 6rem); margin-bottom: 14px;}
.testimonials-hd p {color: var(--tx); max-width: 500px; line-height: 1.78;}
.t-item,
.page-id-3240 #wpv-view-layout-5273 .quote-section > .stk-row {padding: 0 0 72px; border-bottom: 1px solid var(--li); margin-bottom: 72px; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; background:transparent; border-top:0;}
.page-id-3240 #wpv-view-layout-5273 .quote-section:last-child > .stk-row {border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.page-id-3240 #wpv-view-layout-5273 .blockquote p {max-width:none;}

/* Awards (O nás) */
.awards-section > .stk-row {padding: 100px 5.5vw; border-bottom: 1px solid var(--li); background: var(--bg2); transition: background .4s;}
.awards-hd {margin-bottom: 60px;}
.awards-hd h2 {font-size: clamp(2.5rem, 4vw, 5rem); margin-bottom: 14px;}
.awards-hd p {color: var(--tx); max-width: 500px; line-height: 1.78;}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--li);
  border: 1px solid var(--li);
}

.award-item {
  background: var(--bg2);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background .25s;
}

.award-item:hover {
  background: var(--bg3);
}

.award-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--O);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--O);
  opacity: .8;
}

.award-item h4 {
  font-size: 1.1rem;
  letter-spacing: .05em;
}

.award-item p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx);
}



/* */
/* */
/* PORTFOLIO SINGLE */
.ph-tags {display: flex; gap: 8px; flex-wrap: wrap;}
.ph-tags a {font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--O); padding: 5px 14px; color: var(--O); pointer-events:none;}
.intro > .stk-row {padding: 100px 5.5vw 100px 5.5vw; display: grid; grid-template-columns: .5fr 2fr; gap: 80px; align-items: start; /*border-bottom: 1px solid var(--li);*/}
.intro-label {font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--O); margin-bottom: 20px; display: flex; align-items: center; gap: 12px;}
.intro-label::before {content: ''; width: 22px; height: 1px; background: var(--O);}
.intro-body p {font-size: clamp(1rem, 1.3vw, 1.28rem); line-height: 1.86; color: var(--tx2); margin-bottom: 24px;}

#url-projektu {margin-top:-100px !important}
#url-projektu > .stk-row {padding: 0 5.5vw 100px 5.5vw !important; display: grid; grid-template-columns: .5fr 2fr; gap: 80px; align-items: start; }
#url-projektu > .stk-row::before {content:"";}
#url-projektu > .stk-row > .stk-block-button {width:fit-content;}

.gallery-section > .stk-row,
.video-section > .stk-row {padding: 100px 5.5vw; border-top: 1px solid var(--li); display:block;}
.gallery-hd h2,
.video-section h2 {font-size: clamp(2.5rem, 4vw, 5rem);}
.single-klient-reference #gallery-1.gallery,
.single-klient-reference #video-galerie {display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: white; width: 100%;}
.single-klient-reference #gallery-1.gallery .gallery-item,
.single-klient-reference #video-galerie > * {max-width: none; position: relative; overflow: hidden; grid-area: auto / auto / span 1 / span 1; width: 100%; aspect-ratio: 16 / 9; height:100%;}
.single-klient-reference #gallery-1.gallery :nth-child(1 of .gallery-item),
.single-klient-reference #gallery-1.gallery :nth-child(8 of .gallery-item),
.single-klient-reference #video-galerie > :nth-child(1),
.single-klient-reference #video-galerie > :nth-child(8) {grid-area: auto / auto / span 2 / span 2; /*aspect-ratio: auto;*/}
.single-klient-reference #gallery-1.gallery .gallery-item .gallery-icon {padding: 0; display: block; height: 100%; width: 100%;}
.single-klient-reference #gallery-1.gallery .gallery-item .gallery-icon a {display: block; height: 100%; position:relative;}
.single-klient-reference #gallery-1.gallery .gallery-item .gallery-icon a::before {content:""; display:block; background:black; position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; transition:all .5s ease-in-out;}
.single-klient-reference #gallery-1.gallery .gallery-item .gallery-icon a:hover::before {opacity:0.5; transition:all .5s ease-in-out;}
.single-klient-reference #gallery-1.gallery .gallery-item .gallery-icon a img {object-fit: cover; width: 100%; height: 100%; max-width: none; max-height: none; vertical-align: middle;}
#TB_closeWindow #TB_closeWindowButton {width: 50px; height: 50px; top: 0;}
#TB_closeWindow #TB_closeWindowButton .tb-close-icon {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: white; background: var(--accent);}
#TB_overlay {opacity: 0.85;}
#TB_prev,
#TB_next {position: absolute; top: 50%; display: block; border: 1px solid var(--contrast-3); display:block; font-size:0}
#TB_prev {left:0}
#TB_next {right:0}
#TB_prev a, 
#TB_next a {padding: 10px 15px; display: block; height: 100%; background: white; width: max-content; font-size: 1rem;}
#TB_prev a:hover, 
#TB_next a:hover {background: var(--accent); color: white;}
.video-section > .stk-row {background-color:white}
.ref-nav > .stk-row {border-top: 1px solid var(--li); display: grid; grid-template-columns: 1fr 1fr;}
.ref-nav .ref-nav-item {padding: 60px 5.5vw; display: flex; flex-direction: column; border-right: 1px solid var(--li); transition: background .25s; position: relative; overflow: hidden;}
.ref-nav .ref-nav-item:hover {background: var(--bg3);}
.ref-nav .ref-nav-item::after {content: '' !important; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--O); transform: scaleX(0); transform-origin: left; transition: transform .35s;}
.ref-nav .ref-nav-item:last-child::after {transform-origin: right;}
.ref-nav .ref-nav-item:hover::after {transform: scaleX(1);}
.ref-nav .ref-nav-item:last-child .ref-nav-dir {flex-direction: row-reverse;}
.ref-nav .ref-nav-dir {font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tx); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;}
.ref-nav .ref-nav-item .ref-nav-container a {font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 3vw, 3.5rem); letter-spacing: .04em; color: var(--hd); margin-bottom: 10px; transition: color .2s;}
.ref-nav .ref-nav-item:hover .ref-nav-container a {color: var(--accent);}
.ref-nav .ref-nav-item .ref-nav-tags {display: flex; gap: 6px; flex-wrap: wrap;}
.ref-nav-item:last-child .ref-nav-tags {justify-content: flex-end;}
.ref-nav .ref-nav-item .ref-nav-tags .klient-tax-item {font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--li2); padding: 4px 10px; color: var(--tx);}


@media screen and (max-width:1350px) {
	[id*="wpv-view-layout-5220"] {justify-content: space-between; margin: 0 50px; gap:30px;}
	[id*="wpv-view-layout-5220"] img {max-height:30px;}
}

@media screen and (max-width:1200px) {
	.home [id*="wpv-view-layout-4860"] {padding-top:0;}
	.works [id*="wpv-view-layout-4860"] .p-card,
	.cat-section [id*="wpv-view-layout-4860"] .p-card {aspect-ratio:auto;}
	.stk-block-button-group#btn-pod-realizacemi {margin-top:-50px !important;}
}

@media screen and (max-width:850px) {
	.works [id*="wpv-view-layout-4860"],
	.cat-section [id*="wpv-view-layout-4860"] {grid-template-columns:1fr 1fr;}
	.works [id*="wpv-view-layout-4860"] .p-card,
	.cat-section [id*="wpv-view-layout-4860"] .p-card,
	.works [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card),
	.cat-section [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card) {aspect-ratio:4/3;}
	.p-card-overlay {opacity:1;}
}

@media screen and (max-width:680px) {
	.works [id*="wpv-view-layout-4860"],
	.cat-section [id*="wpv-view-layout-4860"] {grid-template-columns:1fr;}
	.works [id*="wpv-view-layout-4860"] .p-card,
	.cat-section [id*="wpv-view-layout-4860"] .p-card,
	.works [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card),
	.cat-section [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card) {grid-area:auto; aspect-ratio:4/3;}
	.p-card-overlay {opacity:1;}
}











/* ============================================================
   HD Production — responzivní CSS pro homepage
   @media screen and (max-width: 1200px)

   Pouze přepisuje selektory definované v hlavním style.css.
   Žádné nové třídy ani ID nejsou vytvářeny.
   Vložit za hlavní stylesheet jako samostatný soubor
   nebo připojit na konec style.css.
   ============================================================ */

@media screen and (max-width: 1200px) {
	.sec-mark-label p {margin-bottom: 3em !important;}

  /* ─────────────────────────────────────────────
     NAVIGATION
     ───────────────────────────────────────────── */

  /* Zmenšení výšky a vnitřního odsazení headeru */
  .site-header {
    height: 58px;
    padding: 0 4vw;
  }

  /* Zúžení mezer mezi položkami nav */
  .main-nav {
    gap: 0;
  }

  .main-navigation .main-nav > ul > li {
    padding: 16px 12px;
  }
	.main-navigation.toggled #primary-menu {padding-bottom:2em;}

  /* ─────────────────────────────────────────────
     HERO
     ───────────────────────────────────────────── */

  /* Ticker: originální left:-50px + width:230vw způsobuje
     horizontální scroll na viewportech ≤1200px.
     Resetujeme na plnou šířku bez přesahu. */
  .hero-ticker {
    left: 0;
    width: 100%;
  }

  /* ─────────────────────────────────────────────
     SECTION MARKER
     ───────────────────────────────────────────── */

  .sec-mark > .stk-row {
    padding: 80px 4vw 0;
  }

  /* ─────────────────────────────────────────────
     MANIFESTO
     Původní: grid 1fr 2fr — přechod na 1 sloupec
     ───────────────────────────────────────────── */

  .manifesto > .stk-row {
    padding: 0px 4vw;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* ─────────────────────────────────────────────
     SERVICES LIST
     Původní grid: 80px 1fr auto — skryjeme .svc-desc,
     zúžíme grid na 2 sloupce a padding
     ───────────────────────────────────────────── */

  .svc-row .stk-inner-blocks {grid-template-columns: 60px 1fr; gap: 24px; padding: 32px 4vw;}
	.svc-row .svc-desc {opacity: 1; display: block; width: 100%; max-width: 100%; grid-area: 2 / 2 / span 2 / span 2; text-align: left;}
	.svc-row .stk-inner-blocks::after {display:none;}
	.svc-n {grid-area: 1 / 1 / span 2 / span 1;}
	.svc-row .stk-block-heading {grid-area: 1/2/span 1/span 1;}
	.svc-row h3 {padding-left: 7px;}


  /* ─────────────────────────────────────────────
     WORKS / PORTFOLIO
     ───────────────────────────────────────────── */
	.works-intro .stk-block-heading {max-width:none !important;}
  .works > .stk-row {
    padding: 0 4vw 100px;
	  border-top:1px solid var(--li);
  }

  /* Intro: flex row → column, popis vlevo */
  .works-intro .stk-inner-blocks {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 56px 0 44px;
  }

  .works-intro p {
    text-align: left;
    max-width: 100%;
  }

  /* Footer sekce Works: flex row → column */
  .works-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Padding obsahu karet */
  .work-body {
    padding: 24px 28px;
  }
	.p-card-overlay {opacity:1}

  /* ─────────────────────────────────────────────
     PORTFOLIO GRID (wpv-view-layout-4860)
     Původní: 3 sloupce s pevným grid-area.
     Na 1200px: auto-flow, 2 sloupce.
     Poznámka: dodaný CSS již obsahuje pravidlo
     .works [id*="wpv-view-layout-4860"] .p-card { aspect-ratio:auto }
     pro tento breakpoint — doplňujeme reset grid-area a padding.
     ───────────────────────────────────────────── */

  .portfolio-grid,
  [id*="wpv-view-layout-4860"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    padding: 32px 4vw 60px;
	  padding-top: 10px !important
  }

  /* První karta v .works a .cat-section: zrušení span 2×2 */
  .works [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card),
  .cat-section [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card),
	.works [id*="wpv-view-layout-4860"] .p-card,
	.cat-section [id*="wpv-view-layout-4860"] .p-card {grid-area: auto; aspect-ratio: auto; min-height: 350px;}

  /* ─────────────────────────────────────────────
     QUOTE / TESTIMONIAL
     Původní: grid 1fr 2fr → 1 sloupec
     ───────────────────────────────────────────── */

  .quote-section > .stk-row {
    padding: 50px 4vw 70px 4vw;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Dekorativní uvozovka — zmenšíme aby nepřetékala */
  .blockquote::before {
    font-size: clamp(6rem, 12vw, 10rem);
  }

  /* ─────────────────────────────────────────────
     PROCESS
     ───────────────────────────────────────────── */

  .process > .stk-row {
    padding: 50px 4vw 0 4vw;
  }

  /* Heading: grid 1fr 1fr → 1 sloupec */
  .process-hd .stk--block-horizontal-flex {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 56px;
  }

  /* Kroky: 4 sloupce → 2 sloupce */
  .process-steps .stk--block-horizontal-flex {
    grid-template-columns: 1fr 1fr; border-top:0;}

  .ps {padding: 36px 28px 48px; border-right:0; border-top:1px solid var(--li);}
	.ps p {margin-bottom:0}

  /* ─────────────────────────────────────────────
     CLIENTS STRIP
     ───────────────────────────────────────────── */

  .clients-strip > .stk-row {
    padding: 56px 4vw;
  }

  .cl-row {gap: 32px; justify-content: center;}

  /* ─────────────────────────────────────────────
     CONTACT BLOCK
     Původní: grid 1fr 1fr → 1 sloupec pod sebou
     ───────────────────────────────────────────── */

  .contact-block > .stk-row {
    grid-template-columns: 1fr;
  }

  .cb-left {
    padding: 80px 4vw 60px;
    border-right: none;
    border-bottom: 1px solid var(--li);
  }

  .cb-right {
    padding: 60px 4vw 80px;
  }

  /* ─────────────────────────────────────────────
     FORM
     Původní: grid 1fr 1fr → 1 sloupec
     ───────────────────────────────────────────── */

  .form-row {
    grid-template-columns: 1fr;
  }

  /* ─────────────────────────────────────────────
     FOOTER
     Původní: grid 2fr 1fr 1fr 1fr → 2 sloupce,
     první sloupec (logo + popis) přes celou šířku
     ───────────────────────────────────────────── */

  .stk-block-columns.footer {
    padding: 56px 4vw 36px;
  }

  .stk-block-columns.footer > .stk-row {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px;
  }

  /* Logo sloupec přes celou šířku (první přímý potomek řady) */
  .stk-block-columns.footer > .stk-row > *:first-child {
    grid-column: span 2;
  }
.acc-body-inner {grid-template-columns: 1fr 0.5fr;}
.acc-item.stk-block-accordion summary {padding: 32px 3.5vw; padding-left: 2em;}
.acc-item.stk-block-accordion .stk-block-column.acc-body {margin-left:0 !important}
.special-grid {grid-template-columns: 1fr;}
.manifesto.stk-block-columns .manifesto-aside.stk-block-column .stk-column-wrapper {max-width:none !important}
.manifesto.stk-block-columns .stk-block-column .stk-block-heading {max-width:none !important}
	
}




/* ============================================================
   HD Production — responzivní CSS
   @media screen and (max-width: 768px)

   Navazuje na existující breakpointy v style.css:
   (max-width:1200px), (max-width:850px), (max-width:680px)
   Pouze selektory definované v hlavním CSS souboru.
   Žádné nové třídy ani ID.
   ============================================================ */

@media screen and (max-width: 768px) {

  /* ─────────────────────────────────────────────
     NAVIGATION
     ───────────────────────────────────────────── */

  .site-header {
    height: 54px;
    padding: 0 5vw;
  }

  /* Skryjeme celý nav a CTA tlačítko —
     GeneratePress na mobilech přepíná na svůj
     hamburger, tento blok ladí padding a výšku */
  .main-navigation .main-nav > ul > li {
    padding: 12px 8px;
  }

  .main-navigation .main-nav .nabidka.menu-item a {
    padding: 8px 16px !important;
  }

  /* ─────────────────────────────────────────────
     HERO
     ───────────────────────────────────────────── */

  .nk-awb {
    height: 85vh;
    min-height: 480px;
  }

  .hero-ticker {
    left: 0;
    width: 100%;
  }

  .ticker-track {
    gap: 28px;
  }

  /* ─────────────────────────────────────────────
     SECTION MARKER
     ───────────────────────────────────────────── */

  .sec-mark > .stk-row {
    padding: 60px 5vw 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sec-mark-num p {
    margin-right: 0;
    font-size: clamp(4rem, 18vw, 8rem);
  }

  /* ─────────────────────────────────────────────
     MANIFESTO
     1fr 2fr → 1 sloupec (zdědeno z 1200px),
     ladíme padding a výchozí nadpis
     ───────────────────────────────────────────── */

  .manifesto > .stk-row {
    padding: 60px 5vw;
    gap: 24px;
  }

  /* ─────────────────────────────────────────────
     SERVICES LIST
     ───────────────────────────────────────────── */

  .svc-row .stk-inner-blocks {
    grid-template-columns: 44px 1fr;
    gap: 16px;
    padding: 24px 5vw;
  }

  .svc-row h3 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  .svc-row .svc-desc {
    font-size: 13px;
  }

  /* ─────────────────────────────────────────────
     WORKS / PORTFOLIO
     ───────────────────────────────────────────── */

  .works > .stk-row {
    padding: 0 5vw 72px;
  }

  .works-intro .stk-inner-blocks {
    padding: 44px 0 32px;
    gap: 14px;
  }

  .works-footer {
    gap: 20px;
    padding-top: 32px;
  }

  .work-body {
    padding: 16px 20px;
  }

  .work-body h3 {
    font-size: clamp(1.4rem, 5vw, 2.4rem);
  }

  /* portfolio grid — zdědeno z 850px (1fr 1fr),
     na 768px přejde na 1 sloupec */
  .works [id*="wpv-view-layout-4860"],
  .cat-section [id*="wpv-view-layout-4860"] {
    grid-template-columns: 1fr;
    padding: 24px 5vw 48px;
  }

  .works [id*="wpv-view-layout-4860"] .p-card,
  .cat-section [id*="wpv-view-layout-4860"] .p-card,
  .works [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card),
  .cat-section [id*="wpv-view-layout-4860"] :nth-child(1 of .p-card) {
    grid-area: auto;
  }

  .portfolio-grid,
  [id*="wpv-view-layout-4860"] {
    grid-template-columns: 1fr;
    padding: 24px 5vw 48px;
  }

  .p-card {grid-column: auto; grid-row: auto;}
	.works-footer .stk-inner-blocks {flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1em;}

  /* ─────────────────────────────────────────────
     QUOTE / TESTIMONIAL
     ───────────────────────────────────────────── */

  .quote-section > .stk-row {
    padding: 32px 5vw;
    gap: 28px;
  }

  .blockquote::before {
    font-size: clamp(5rem, 20vw, 8rem);
    top: -10px;
    left: -8px;
  }

  .blockquote p {
    padding-top: 28px;
  }

  /* ─────────────────────────────────────────────
     PROCESS
     ───────────────────────────────────────────── */

  .process > .stk-row {
    padding: 60px 5vw;
  }

  .process-hd .stk--block-horizontal-flex {
    margin-bottom: 40px;
    gap: 16px;
  }

  /* 4 kroky: zdědeno 1fr 1fr z 1200px → 1 sloupec */
  .process-steps .stk--block-horizontal-flex {
    grid-template-columns: 1fr;
  }

  .ps {
    padding: 28px 20px 36px;
    border-top: 1px solid var(--li);
    border-right: 0;
  }

  .ps-n {
    font-size: 2.8rem;
    margin-bottom: 18px;
  }

  /* ─────────────────────────────────────────────
     CLIENTS STRIP
     ───────────────────────────────────────────── */

  .clients-strip > .stk-row {
    padding: 44px 5vw;
  }

  .clients-strip-label {
    margin-bottom: 28px;
  }

  .cl-row {gap: 20px; justify-content: center;}

  /* ─────────────────────────────────────────────
     CONTACT BLOCK
     ───────────────────────────────────────────── */

  .cb-left {
    padding: 60px 5vw 44px;
  }

  .cb-left h2 {
    margin-bottom: 32px;
  }

  .cb-right {
    padding: 44px 5vw 60px;
  }

  .cb-right h3 {
    margin-bottom: 28px;
  }

  /* ─────────────────────────────────────────────
     FORM
     ───────────────────────────────────────────── */

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .btn-send {
    width: 100%;
    justify-content: center;
  }

  /* ─────────────────────────────────────────────
     FOOTER
     Zdědeno z 1200px: grid 1fr 1fr.
     Na 768px → plně jednosloupečkový
     ───────────────────────────────────────────── */

  .stk-block-columns.footer {
    padding: 44px 5vw 28px;
  }

  .stk-block-columns.footer > .stk-row {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
  }

  /* Logo sloupec — span 2 zrušen, není třeba při 1 sloupci */
  .stk-block-columns.footer > .stk-row > *:first-child {
    grid-column: span 1;
  }

  .f-desc {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     PAGE HEADER (inner pages)
     ───────────────────────────────────────────── */

  .page-header > .stk-row {
    min-height: 55vh;
  }

  .ph-content .stk-inner-blocks {
    padding: 60px 5vw 52px;
  }

  .breadcrumb {
    margin-bottom: 28px !important;
  }

  /* Ghost year / shapes — schovejeme na mobilech
     aby nepřekrývaly text */
  .ph-year,
  .ph-shapes,
  .ph-browser,
  .ph-dataviz,
  .ph-network {
    display: none;
  }

  /* ─────────────────────────────────────────────
     ACC (accordion — service sub-pages)
     ───────────────────────────────────────────── */

  .acc-item.stk-block-accordion summary {
    padding: 24px 5vw;
  }

  .acc-item.stk-block-accordion summary > .stk-column-wrapper > .stk-inner-blocks {
    grid-template-columns: 44px 1fr;
  }

  .acc-item.stk-block-accordion .stk-block-accordion__content {
    padding: 24px 5vw;
  }

  .acc-body-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ─────────────────────────────────────────────
     CAPS STRIP (inner service pages)
     ───────────────────────────────────────────── */

  .caps-strip > .stk-row {
    grid-template-columns: 1fr 1fr;
    padding: 44px 5vw;
  }

  .cap .stk-inner-blocks {
    padding: 24px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--li);
  }

  /* ─────────────────────────────────────────────
     PORTFOLIO SINGLE — intro
     ───────────────────────────────────────────── */

  .intro > .stk-row {
    grid-template-columns: 1fr;
    padding: 60px 5vw;
    gap: 32px;
  }

  #url-projektu > .stk-row {
    grid-template-columns: 1fr;
    padding: 0 5vw 60px 5vw !important;
    gap: 20px;
  }

  /* ─────────────────────────────────────────────
     GALLERY (portfolio single)
     ───────────────────────────────────────────── */

  .single-klient-reference #gallery-1.gallery,
  .single-klient-reference #video-galerie {
    grid-template-columns: 1fr 1fr;
  }

  /* ─────────────────────────────────────────────
     REF NAV (portfolio single — prev/next)
     ───────────────────────────────────────────── */

  .ref-nav > .stk-row {
    grid-template-columns: 1fr;
  }

  .ref-nav .ref-nav-item {
    padding: 40px 5vw;
    border-right: 0;
    border-bottom: 1px solid var(--li);
  }

  /* ─────────────────────────────────────────────
     SVC HEADER (service sub-pages)
     ───────────────────────────────────────────── */

  .svc-header > .stk-row {
    padding: 60px 5vw 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .svc-header p {
    text-align: left;
  }

}



/* ============================================================
   HD Production — doplněk responzivního CSS
   Selektory chybějící v breakpointech 1200px a 768px
   pro podstránky: /sluzby/*, /reference/, /o-nas/,
   /kontakt/, /klient-reference/*

   Pouze selektory definované v hlavním style.css.
   Žádné nové třídy ani ID.
   Připojit za stávající responzivní bloky.
   ============================================================ */


/* ============================================================
   @media screen and (max-width: 1200px) — doplnění
   ============================================================ */

@media screen and (max-width: 1200px) {

  /* ─────────────────────────────────────────────
     PAGE HEADER (inner pages)
     ───────────────────────────────────────────── */

  .page-header > .stk-row {
    min-height: 56vh;
  }

  .ph-content .stk-inner-blocks {
    padding: 64px 4vw 60px;
  }

  /* ─────────────────────────────────────────────
     SVC HEADER (service sub-pages)
     Původní: flex row space-between → column
     ───────────────────────────────────────────── */

  .svc-header > .stk-row {
    padding: 64px 4vw 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .svc-header p {
    text-align: left;
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     CAPS STRIP (inner service pages)
     Původní: repeat(4, 1fr) → 2 sloupce
     ───────────────────────────────────────────── */

  .caps-strip > .stk-row {
    grid-template-columns: 1fr 1fr;
    padding: 48px 4vw;
  }

  .cap:nth-child(2n) .stk-inner-blocks {
    border-right: none;
  }

  /* ─────────────────────────────────────────────
     TECH SECTION (service pages)
     Původní: 1fr 2fr → 1 sloupec
     ───────────────────────────────────────────── */

  .tech-section > .stk-row {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 36px;
  }

  .tech-section .lead {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     PROCESS STRIP (Grafika & WWW)
     Původní: 1fr 2fr → 1 sloupec
     ───────────────────────────────────────────── */

  .process-strip {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 36px;
  }

  .process-strip .lead {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     INCLUDED (WWW)
     Původní: 1fr 2fr → 1 sloupec
     ───────────────────────────────────────────── */

  .included {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 36px;
  }

  .included .lead {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     SPECIAL GRID (Fotografie — exkluzivní produkty)
     Původní: 1fr 1fr → zachováme, ladíme padding a karty
     ───────────────────────────────────────────── */

  .special-section > .stk-row {
    padding: 64px 4vw;
  }

  .special-card {
    padding: 36px 32px;
  }

  /* ─────────────────────────────────────────────
     PHOTO SECTION (Fotografie)
     Původní: repeat(3,1fr) → 2 sloupce;
     tall/wide span zachováme
     ───────────────────────────────────────────── */

  .photo-section {
    padding: 64px 4vw;
  }

  .photo-section-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
  }

  .photo-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* tall buňka přes 2 řádky zůstává, wide přes 2 sloupce
     může při 2 sloupcích rozbít layout — reset na auto */
  .photo-cell.wide {
    grid-column: span 1;
  }

  /* ─────────────────────────────────────────────
     SHOWCASE (Grafika)
     Původní: repeat(3,1fr) → 2 sloupce
     ───────────────────────────────────────────── */

  .showcase {
    padding: 64px 4vw;
  }

  .showcase-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
  }

  .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* tall buňka — při 2 sloupcích min-height upravíme */
  .sc-cell.tall {
    min-height: 360px;
  }

  /* ─────────────────────────────────────────────
     PILLARS GRID (Strategie)
     Původní: repeat(3,1fr) → 2 sloupce
     ───────────────────────────────────────────── */

  .pillars > .stk-row {
    padding: 64px 4vw;
  }

  .pillars-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pillar {
    padding: 36px 28px;
  }

  /* ─────────────────────────────────────────────
     STATS STRIP (O nás)
     Původní: repeat(4,1fr) → 2 sloupce
     ───────────────────────────────────────────── */

  .stats-strip > .stk-row {
    grid-template-columns: 1fr 1fr;
  }

  .stat-item:nth-child(2n) .stk-inner-blocks {
    border-right: none;
  }

  .stat-item .stk-inner-blocks {
    padding: 36px 28px;
  }

  /* ─────────────────────────────────────────────
     STORY (O nás)
     Původní: 1fr 1fr → 1 sloupec
     ───────────────────────────────────────────── */

  .story > .stk-row {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 40px;
  }

  /* ─────────────────────────────────────────────
     TEAM GRID (O nás + Kontakt)
     Původní: repeat(3,1fr) → 2 sloupce
     ───────────────────────────────────────────── */

  .team-section > .stk-row {
    padding: 64px 4vw;
  }

  .team-grid > .stk-row {
    grid-template-columns: 1fr 1fr;
  }

  .team-card .stk-block-content {
    padding: 36px 28px;
  }

  /* ─────────────────────────────────────────────
     TESTIMONIALS SECTION (O nás)
     ───────────────────────────────────────────── */

  .testimonials-section > .stk-row {
    padding: 64px 4vw;
  }

  /* t-item: grid 1fr 2fr → 1 sloupec */
  .t-item,
  .page-id-3240 #wpv-view-layout-5273 .quote-section > .stk-row {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 0 48px;
    margin-bottom: 48px;
  }

  /* ─────────────────────────────────────────────
     AWARDS GRID (O nás)
     Původní: repeat(4,1fr) → 2 sloupce
     ───────────────────────────────────────────── */

  .awards-section > .stk-row {
    padding: 64px 4vw;
  }

  .awards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .award-item {
    padding: 28px 24px;
  }

  /* ─────────────────────────────────────────────
     CONTACT HERO (Kontakt)
     Původní: 1fr 1fr → 1 sloupec
     ───────────────────────────────────────────── */

  .contact-hero > .stk-row {
    grid-template-columns: 1fr;
  }

  .ch-left {
    padding: 72px 4vw 56px;
    border-right: none;
    border-bottom: 1px solid var(--li);
  }

  .ch-left h1 {
    margin-bottom: 24px;
  }

  .ch-lead {
    margin-bottom: 40px;
  }

  .ch-right {
    padding: 56px 4vw 72px;
  }

  /* ─────────────────────────────────────────────
     EXT BLOCK (Marketing)
     Původní: 1fr 1fr → 1 sloupec
     ───────────────────────────────────────────── */

  .ext-block > .stk-row {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 40px;
  }

  /* ─────────────────────────────────────────────
     SERVICES FULL (Marketing)
     Původní: 1fr 2fr → 1 sloupec
     ───────────────────────────────────────────── */

  .services-full {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 36px;
  }

  .services-full .lead {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     HOW IT WORKS (Strategie)
     Původní: 1fr 2fr → 1 sloupec
     ───────────────────────────────────────────── */

  .how-it-works > .stk-row {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 36px;
  }

  .how-it-works .lead {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     PLAN SECTION (Strategie)
     Původní: 1fr 2fr → 1 sloupec
     ───────────────────────────────────────────── */

  .plan-section {
    grid-template-columns: 1fr;
    padding: 64px 4vw;
    gap: 36px;
  }

  .plan-section .lead {
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     OTHER SVCS (service sub-pages)
     ───────────────────────────────────────────── */

  .other-svcs > .stk-row {
    padding: 56px 4vw;
  }

  /* ─────────────────────────────────────────────
     CAT SECTION MARK (Reference)
     ───────────────────────────────────────────── */

  .cat-section-mark .stk--column-flex {
    padding: 56px 4vw 0;
  }

  .cat-section-num {
    margin-right: 24px;
  }

  /* ─────────────────────────────────────────────
     REF NAV (portfolio single)
     ───────────────────────────────────────────── */

  .ref-nav .ref-nav-item {
    padding: 48px 4vw;
  }

  /* ─────────────────────────────────────────────
     SOFTWARE & PLATFORMS & CHANNELS sections
     (Grafika, WWW, Marketing)
     ───────────────────────────────────────────── */

  .software-section {
    padding: 56px 4vw;
  }

  .platforms {
    padding: 56px 4vw;
  }

  .channels > .stk-row {
    padding: 56px 4vw;
  }

	.contact-hero > .stk-row {grid-template-columns: 1fr;}
	.timeline {width:100%;}
	.team-hd p {max-width:none;}
	.blockquote p {padding-top: 0px;}
	.blockquote::before {top: -5px;}
	.contact-block .cb-left .stk-block-heading {max-width:100% !important}
  /* ─────────────────────────────────────────────
     GALLERY & VIDEO SECTION (portfolio single)
     ───────────────────────────────────────────── */

  .gallery-section > .stk-row,
  .video-section > .stk-row {
    padding: 64px 4vw;
  }

  .single-klient-reference #gallery-1.gallery,
  .single-klient-reference #video-galerie {
    grid-template-columns: repeat(3, 1fr);
  }

}


/* ============================================================
   @media screen and (max-width: 768px) — doplnění
   ============================================================ */





@media screen and (max-width:1024px) {
	[id*="wpv-view-layout-5220"] img {max-height: 25px;}
}





@media screen and (max-width: 768px) {

  /* ─────────────────────────────────────────────
     PAGE HEADER (inner pages)
     ───────────────────────────────────────────── */

  .page-header > .stk-row {
    min-height: 48vh;
  }

  .ph-content .stk-inner-blocks {
    padding: 48px 5vw 44px;
  }

  /* ─────────────────────────────────────────────
     SVC HEADER (service sub-pages)
     ───────────────────────────────────────────── */

  .svc-header > .stk-row {
    padding: 44px 5vw 0;
    gap: 12px;
  }

  /* ─────────────────────────────────────────────
     CAPS STRIP
     2 sloupce (z 1200px) → 1 sloupec
     ───────────────────────────────────────────── */

  .caps-strip > .stk-row {
    grid-template-columns: 1fr;
    padding: 32px 5vw;
  }

  .cap .stk-inner-blocks {
    border-right: none;
    border-bottom: 1px solid var(--li);
    padding: 20px 0;
  }

  .cap:last-child .stk-inner-blocks {
    border-bottom: none;
  }

  /* ─────────────────────────────────────────────
     TECH SECTION
     ───────────────────────────────────────────── */

  .tech-section > .stk-row {
    padding: 48px 5vw;
    gap: 24px;
  }

  .tech-grid {
    grid-template-columns: 1fr;
  }

  /* ─────────────────────────────────────────────
     PROCESS STRIP
     ───────────────────────────────────────────── */

  .process-strip {
    padding: 48px 5vw;
    gap: 24px;
  }

  .process-steps-h,
  .psteps {
    grid-template-columns: 1fr;
  }

  .pstep {
    padding: 24px 20px;
  }

  /* ─────────────────────────────────────────────
     INCLUDED
     ───────────────────────────────────────────── */

  .included {
    padding: 48px 5vw;
    gap: 24px;
  }

  .check-grid {
    grid-template-columns: 1fr;
  }

  /* ─────────────────────────────────────────────
     SPECIAL GRID → 1 sloupec
     ───────────────────────────────────────────── */

  .special-section > .stk-row {
    padding: 48px 5vw;
  }

  .special-grid {
    grid-template-columns: 1fr;
  }

  .special-card {
    padding: 28px 20px;
  }

  /* ─────────────────────────────────────────────
     PHOTO SECTION → 1 sloupec
     ───────────────────────────────────────────── */

  .photo-section {
    padding: 48px 5vw;
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  /* Na 1 sloupci span nemá smysl */
  .photo-cell.tall,
  .photo-cell.wide {
    grid-row: auto;
    grid-column: auto;
  }

  /* ─────────────────────────────────────────────
     SHOWCASE → 1 sloupec
     ───────────────────────────────────────────── */

  .showcase {
    padding: 48px 5vw;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .sc-cell.tall {
    grid-row: auto;
    min-height: 240px;
  }

  /* ─────────────────────────────────────────────
     PILLARS → 1 sloupec
     ───────────────────────────────────────────── */

  .pillars > .stk-row {
    padding: 48px 5vw;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .pillar {
    padding: 28px 20px;
  }

  /* ─────────────────────────────────────────────
     STATS STRIP → 2 sloupce (zachováme z 1200px),
     na velmi malých viewport je pak 1 sloupec vhodný —
     ale 768px ještě 2 zvládne, tak necháme
     ───────────────────────────────────────────── */

  .stat-item .stk-inner-blocks {
    padding: 24px 16px;
  }

  /* ─────────────────────────────────────────────
     STORY → 1 sloupec (zdědeno z 1200px), ladíme padding
     ───────────────────────────────────────────── */

  .story > .stk-row {
    padding: 48px 5vw;
    gap: 28px;
  }

  /* ─────────────────────────────────────────────
     TEAM GRID → 1 sloupec
     ───────────────────────────────────────────── */

  .team-section > .stk-row {
    padding: 48px 5vw;
  }

  .team-hd {
    margin-bottom: 40px;
  }

  .team-grid > .stk-row {
    grid-template-columns: 1fr;
  }

  .team-card .stk-block-content {
    padding: 28px 20px;
  }

  /* ─────────────────────────────────────────────
     TESTIMONIALS SECTION (O nás)
     ───────────────────────────────────────────── */

  .testimonials-section > .stk-row {
    padding: 48px 5vw;
  }

  .testimonials-hd {
    margin-bottom: 40px;
  }

  .t-item,
  .page-id-3240 #wpv-view-layout-5273 .quote-section > .stk-row {
    gap: 20px;
    padding: 0 0 36px;
    margin-bottom: 36px;
  }

  /* ─────────────────────────────────────────────
     AWARDS → 1 sloupec
     ───────────────────────────────────────────── */

  .awards-section > .stk-row {
    padding: 48px 5vw;
  }

  .awards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .award-item {
    padding: 20px 16px;
  }

  /* ─────────────────────────────────────────────
     CONTACT HERO (Kontakt) — ladíme padding
     ───────────────────────────────────────────── */

  .ch-left {
    padding: 52px 5vw 40px;
  }

  .ch-lead {
    margin-bottom: 32px;
  }

  .ch-right {
    padding: 40px 5vw 52px;
  }

  .ch-right .form-lead {
    margin-bottom: 28px;
  }

  /* ─────────────────────────────────────────────
     EXT BLOCK
     ───────────────────────────────────────────── */

  .ext-block > .stk-row {
    padding: 48px 5vw;
    gap: 28px;
  }

  .ext-stats {
    grid-template-columns: 1fr;
  }

  .ext-stat {
    padding: 24px 20px;
  }

  /* ─────────────────────────────────────────────
     SERVICES FULL
     ───────────────────────────────────────────── */

  .services-full {
    padding: 48px 5vw;
    gap: 24px;
  }

  .svc-full-grid {
    grid-template-columns: 1fr;
  }

  /* ─────────────────────────────────────────────
     HOW IT WORKS
     ───────────────────────────────────────────── */

  .how-it-works > .stk-row {
    padding: 48px 5vw;
    gap: 24px;
  }

  /* ─────────────────────────────────────────────
     PLAN SECTION
     ───────────────────────────────────────────── */

  .plan-section {
    padding: 48px 5vw;
    gap: 24px;
  }

  /* ─────────────────────────────────────────────
     OTHER SVCS
     ───────────────────────────────────────────── */

  .other-svcs > .stk-row {
    padding: 44px 5vw;
  }

  .other-svcs h3 {
    margin-bottom: 24px;
  }

  /* ─────────────────────────────────────────────
     CAT SECTION MARK (Reference)
     ───────────────────────────────────────────── */

  .cat-section-mark .stk--column-flex {padding: 40px 5vw 0; flex-direction: column; align-items: flex-start !important; gap: 10px}

  .cat-section-num {
    margin-right: 0;
    font-size: clamp(3.5rem, 16vw, 7rem);
  }

  /* ─────────────────────────────────────────────
     SOFTWARE, PLATFORMS, CHANNELS sections
     ───────────────────────────────────────────── */

  .software-section {
    padding: 40px 5vw;
  }

  .software-section h3 {
    margin-bottom: 24px;
  }

  .platforms {
    padding: 40px 5vw;
  }

  .channels > .stk-row {
    padding: 40px 5vw;
  }

  /* ─────────────────────────────────────────────
     GALLERY & VIDEO SECTION (portfolio single)
     ───────────────────────────────────────────── */

  .gallery-section > .stk-row,
  .video-section > .stk-row {
    padding: 48px 5vw;
  }

  .single-klient-reference #gallery-1.gallery,
  .single-klient-reference #video-galerie {
    grid-template-columns: 1fr 1fr;
  }

  /* ─────────────────────────────────────────────
     INTRO (portfolio single)
     ───────────────────────────────────────────── */

  .intro > .stk-row {
    padding: 48px 5vw;
  }

	.p-card a::before {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.08) 25%, transparent 100%);}
	.p-card-overlay {background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.08) 80%, transparent 100%);}
	.p-card-title {font-size: clamp(1.7rem, 2.5vw, 2.2rem);}
	.p-card-excerpt {color: white;}
	.cat-section-title {margin-bottom:0;}
	.stk-entrance.stk-will-enter {transform:translate(0,0) !important; opacity:1 !important; transition:none !important; --entrance-transform: none !important; --entrance-delay: 0 !important;}
	.drzak-slide {height: auto;}
	[id*="wpv-view-layout-5220"] {display:grid; grid-template-columns:repeat(3,1fr);}
	.works-intro .stk--block-horizontal-flex {flex-direction:column !important; align-items:flex-start !important}
	.works-intro .stk--block-horizontal-flex .stk-block-button-group {position:relative !important}
	
}

@media screen and (max-width:500px) {
	.stats-strip > .stk-row {grid-template-columns: 1fr;}
	[id*="wpv-view-layout-5220"] {display:grid; grid-template-columns:repeat(2,1fr);}
}