/* ============================================================
   CODE QUBE — tokeni
   Vrednosti dolaze iz theme.json, ovde se samo skraćuju imena
   da CSS ostane čitljiv kao u originalnim demoima.
   ============================================================ */
:root{
  --ink:    var(--wp--preset--color--ink,    #0E0F13);
  --ink-2:  var(--wp--preset--color--ink-2,  #16181F);
  --ink-3:  var(--wp--preset--color--ink-3,  #1E2028);
  --paper:  var(--wp--preset--color--paper,  #EDEAE4);
  --muted:  var(--wp--preset--color--muted,  #9490A3);
  --accent: var(--wp--preset--color--accent, #FFE135);
  --blue:   var(--wp--preset--color--blue,   #005AD9);
  --red:    var(--wp--preset--color--red,    #C60012);

  --edge:   rgba(237,234,228,.14);
  --edge-2: rgba(237,234,228,.28);
  --err:    #E86B6B;

  --display: var(--wp--preset--font-family--display, "Bricolage Grotesque", Georgia, serif);
  --body:    var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);

  --ease: cubic-bezier(.2,.7,.3,1);
  --tap: 48px;
  --gut: 20px;
  --maxw: 1240px;
  --nav-h: 62px;
}
@media (min-width:480px){  :root{ --gut:28px } }
@media (min-width:768px){  :root{ --gut:40px } }
@media (min-width:1280px){ :root{ --gut:56px } }

/* ============================================================
   OSNOVA
   ============================================================ */
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--ink) }

/* Block tema ubacuje blockGap između zaglavlja, sadržaja i podnožja.
   Sekcije nose sopstveni razmak, pa bi to samo napravilo prazne trake. */
.wp-site-blocks > *{ margin-block-start:0 }

/* Isti blockGap se preko `.is-layout-flow > * + *` lepi i na decu grupa.
   U kontejnerima koji su grid ili flex razmak pravi `gap`, pa bi ta
   margina samo pomerila svaku stavku osim prve — treća kartica u ceni
   je zbog toga stajala dvadeset piksela niže od prve. */
.cq-pricing__grid > *,
.cq-faq__list > *,
.cq-mosaic__grid > *,
.cq-duo__grid > *,
.cq-duo__text > *,
.cq-places > *,
.cq-footer__brand > *,
.cq-footer__row > *{ margin-block-start:0 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px }

.cq-skip{
  position:absolute; left:var(--gut); top:-100px; z-index:100;
  background:var(--accent); color:var(--ink);
  padding:12px 20px; border-radius:0 0 6px 6px; font-weight:500;
  transition:top .2s var(--ease);
}
.cq-skip:focus{ top:0 }

.cq-grain{
  position:fixed; inset:-50%; z-index:9; pointer-events:none;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width:900px){
  .cq-grain{ opacity:.16; animation:cq-grain 1.2s steps(3) infinite }
}
@keyframes cq-grain{
  0%{ transform:translate(0,0) } 33%{ transform:translate(-3%,2%) } 66%{ transform:translate(2%,-3%) }
}

.cq-wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  /* Tekst je isečen na 1px i vidi ga samo čitač ekrana, pa veličina ništa
     ne menja — stoji zbog pravila da ništa na sajtu nije ispod 16px. */
  font-size:16px;
}

/* Sekcije koje same nose hero pune ekran ispod fiksne navigacije;
   obične stranice moraju da je razmaknu. */
.cq-page-head{ padding:calc(var(--nav-h) + 12vh) var(--gut) 6vh; max-width:var(--maxw); margin-inline:auto }
.cq-page-head h1{ margin:0 }
.cq-page-head__lede{ margin-top:18px; max-width:60ch; color:var(--muted); font-size:clamp(16px,1.7vw,19px) }
.cq-page-head__lede p{ margin:0 }
.cq-main > .cq-wrap:first-child{ padding-top:calc(var(--nav-h) + 8vh) }

/* Nosač medija. Dok nema slike prikazuje se gradijentni placeholder
   sa upisanom preporučenom rezolucijom. */
.cq-slot{
  position:relative; overflow:hidden; border-radius:4px;
  background:linear-gradient(150deg,#1B2340,#3A2B58);
  display:grid; place-items:center;
}
/* Oznaka se pojavljuje samo ako je data-size upisan i nema slike —
   prazan atribut bi inače ostavio praznu isprekidanu kutiju. */
.cq-slot[data-size]::after{
  content:attr(data-size); position:absolute;
  font-size:16px; letter-spacing:.06em; color:rgba(237,234,228,.6);
  border:1px dashed rgba(237,234,228,.3); padding:5px 10px; border-radius:2px;
}
.cq-slot:has(img)::after{ display:none }
.cq-slot > .wp-block-image{ margin:0; width:100%; height:100% }
.cq-slot img,.cq-slot video{ display:block; width:100%; height:100%; object-fit:cover }
.cq-slot figure{ margin:0; height:100%; width:100% }
.cq-slot.is-b{ background:linear-gradient(150deg,#2A3560,#6B3F2E) }
.cq-slot.is-c{ background:linear-gradient(150deg,#1F3A38,#4F3675) }
.cq-slot.is-d{ background:linear-gradient(150deg,#43273C,#232852) }

/* ============================================================
   LOGOTIP
   Rasterski logotip (24. 9. 2026). Dve pune varijante: --dark ima
   natpis u boji papira i ide na tamnu podlogu, --light zadržava
   originalnu teget boju i pali se uz .is-on-light.
   ============================================================ */
.cq-logo{ display:inline-flex; align-items:center }
/* Isti logotip na svim širinama, visine 55px. Aspect-ratio drži širinu,
   pa red ne poskoči dok se slika učitava.
   Selektor je `.cq-logo span`, a ne `.cq-logo > span`: potomački ima istu
   težinu kao `.cq-logo__full`, pa skrivanje ispod ne bi radilo. */
.cq-logo span{
  height:55px;
  background-repeat:no-repeat; background-position:left center; background-size:contain;
}
.cq-logo__full{ display:block; aspect-ratio:666/176 }
.cq-logo__full--dark{  background-image:url(../img/logo-on-dark.webp) }
.cq-logo__full--light{ display:none; background-image:url(../img/logo-on-light.webp) }
/* Varijanta sa sloganom je drugih proporcija i svojih fajlova. */
.cq-logo--slogan .cq-logo__full{ aspect-ratio:829/224 }
.cq-logo--slogan .cq-logo__full--dark{  background-image:url(../img/logo-slogan-on-dark.webp) }
.cq-logo--slogan .cq-logo__full--light{ background-image:url(../img/logo-slogan-on-light.webp) }

/* ============================================================
   NAVIGACIJA
   Umesto mix-blend-mode iz demoa, ton se prebacuje klasom koju
   postavlja ScrollTrigger — kontrast je time predvidiv.
   ============================================================ */
.cq-nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:14px var(--gut);
  padding-top:calc(14px + env(safe-area-inset-top));
  font-size:16px; color:var(--paper);
  transition:color .35s var(--ease);
}
/* Podloga se spušta ispod navigacije i drži skoro punu neprozirnost do
   dna trake — preko svetlih slika je tekst inače nečitak. */
.cq-nav::before{
  content:""; position:absolute; inset:0 0 -24px; z-index:-1; opacity:0;
  background:linear-gradient(180deg,
    rgba(14,15,19,.96) 0%,
    rgba(14,15,19,.92) 62%,
    rgba(14,15,19,0) 100%);
  transition:opacity .35s var(--ease);
}
.cq-nav.is-stuck::before{ opacity:1 }
@supports (backdrop-filter:blur(2px)){
  .cq-nav.is-stuck::before{ backdrop-filter:saturate(140%) blur(6px) }
}
/* Natpis prati podlogu — svetao na tamnoj, teget na svetloj.
   Kocka svuda zadržava svoje boje. */
.cq-nav.is-on-light .cq-logo__full--dark{ display:none }
.cq-nav.is-on-light .cq-logo__full--light{ display:block }
.cq-nav.is-on-light{ color:var(--ink) }

.cq-nav__links{ display:none; gap:26px; align-items:center }
.cq-nav__links a{ position:relative; padding:4px 0 }
.cq-nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.cq-nav__links a[aria-current="page"]::after{ transform:scaleX(1) }
@media (hover:hover){ .cq-nav__links a:hover::after{ transform:scaleX(1) } }
@media (min-width:900px){
  .cq-nav__links{ display:flex }
}

.cq-burger{
  position:relative; z-index:2;
  width:var(--tap); height:var(--tap); margin-right:-10px;
  display:grid; place-items:center; align-content:center;
  background:none; border:0; cursor:pointer; color:inherit;
}
.cq-burger span{
  display:block; width:24px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s linear;
}
.cq-burger span + span{ margin-top:6px }
.cq-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.cq-burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.cq-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* Mora da stoji POSLE definicije .cq-burger — isti specifičnost,
   pobeđuje pravilo koje je kasnije u fajlu. */
@media (min-width:900px){ .cq-burger{ display:none } }

.cq-menu{
  position:fixed; inset:0; z-index:35;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 6vh) var(--gut) 8vh;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.cq-menu.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
.cq-menu a{
  display:block; padding:14px 0; border-bottom:1px solid var(--edge);
  font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(30px,9vw,46px);
}
.cq-menu__foot{ margin-top:6vh; color:var(--muted); font-size:16px; display:grid; gap:8px }
.cq-menu__foot a{
  font-family:var(--body); font-size:16px; font-weight:400;
  border:0; padding:6px 0; color:var(--paper);
}
body.cq-menu-open{ overflow:hidden }
@media (min-width:900px){ .cq-menu{ display:none } }

/* Maska za tekst koji ulazi odozdo.
   Reči seče cq-motion.js, pa naslov u editoru ostaje običan Heading
   blok. Donji padding sa negativnom marginom pravi mesta za repove
   slova g, j, p, y — bez toga ih overflow:hidden odseca. */
.cq-w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.cq-w__i{ display:inline-block; will-change:transform }

.cq-mask{ display:block; overflow:hidden }
.cq-mask > span{ display:block; will-change:transform }

/* ============================================================
   1. HERO
   ============================================================ */
.cq-hero{ height:170vh; position:relative }
.cq-hero__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:flex-end;
}
.cq-hero__media{ position:absolute; inset:0; transform-origin:50% 45% }
.cq-hero__media .cq-slot{ height:100%; border-radius:0 }
/* Zamućeni sloj stoji preko oštrog i pojavljuje se kroz opacity.
   Demo je animirao filter:blur() — to je na celom viewportu skupo. */
.cq-hero__blur{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  overflow:hidden; will-change:opacity;
}
.cq-hero__blur img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(14px); transform:scale(1.06);
}
.cq-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,15,19,.45) 0%, rgba(14,15,19,0) 35%, rgba(14,15,19,.85) 100%);
}
.cq-hero__copy{ position:relative; z-index:2; padding:0 var(--gut) 12vh; width:100% }
.cq-hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(40px,9.5vw,124px); line-height:.94; letter-spacing:-.035em;
  max-width:15ch; margin:0;
}
.cq-hero__lede{
  margin-top:22px; max-width:44ch; color:var(--muted);
  font-size:clamp(16px,1.6vw,19px);
}
.cq-hero__hint{ display:none }
@media (min-width:900px){
  .cq-hero{ height:200vh }
  .cq-hero__hint{
    display:block; position:absolute; right:var(--gut); bottom:9vh; z-index:2;
    font-size:16px; color:var(--muted); writing-mode:vertical-rl;
  }
}

/* ============================================================
   2. SCRUB
   ============================================================ */
.cq-scrub{ height:200vh; position:relative }
@media (min-width:900px){ .cq-scrub{ height:300vh } }
.cq-scrub__stage{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; overflow:hidden; padding:0 var(--gut);
}
.cq-scrub__plane{
  width:min(88vw,980px); aspect-ratio:16/10;
  will-change:transform, clip-path;
  box-shadow:0 40px 120px rgba(0,0,0,.5); border-radius:6px; overflow:hidden;
}
/* Početno stanje se postavlja i u CSS-u, ne samo u JS-u. Motion sloj se
   učitava odloženo, pa bi sloj do tada stajao neisečen i u punoj veličini
   i onda poskočio. Vezano je za .cq-js da bi bez JavaScripta ostao ceo. */
.cq-js .cq-scrub__plane{ transform:scale(.88); clip-path:inset(12% 12% round 6px) }
.cq-scrub__meta{
  position:absolute; left:var(--gut); bottom:7vh;
  font-size:16px; color:var(--muted);
  display:flex; gap:12px; align-items:baseline;
}
.cq-scrub__pct{ font-family:var(--display); font-size:34px; color:var(--paper); font-weight:600 }

/* ============================================================
   3. IZJAVA
   ============================================================ */
.cq-statement{ padding:16vh 0 }
@media (min-width:900px){ .cq-statement{ padding:22vh 0 } }
.cq-statement p{
  font-family:var(--display); font-weight:400;
  font-size:clamp(26px,4.4vw,58px); line-height:1.14; letter-spacing:-.025em;
  max-width:22ch; margin:0;
}
.cq-statement em{ font-style:normal; color:var(--accent) }

/* ============================================================
   4. MARKIZA
   ============================================================ */
.cq-marquee{
  border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  padding:18px 0; overflow:hidden; white-space:nowrap;
}
.cq-marquee__track{ display:inline-flex; gap:48px; will-change:transform }
.cq-marquee__track > *{
  margin:0; flex:0 0 auto;
  font-family:var(--display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(26px,5vw,60px);
  color:transparent; -webkit-text-stroke:1px rgba(237,234,228,.45);
}
.cq-marquee__track > *:nth-child(even){ color:var(--paper); -webkit-text-stroke:0 }

/* ============================================================
   5. LEPLJIVA SLIKA + TEKST
   ============================================================ */
.cq-duo{ padding:14vh 0 }
.cq-duo__grid{ display:grid; gap:40px }
.cq-duo__media{ position:relative; aspect-ratio:4/5 }
.cq-duo__media .cq-slot{ position:absolute; inset:0 }
.cq-duo__media .cq-slot + .cq-slot{ opacity:0 }
.cq-duo__text{ display:grid; gap:9vh }
.cq-duo__text h2,.cq-duo__text h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(24px,3vw,38px); letter-spacing:-.025em; margin:0;
}
.cq-duo__text p{ margin-top:12px; color:var(--muted); max-width:42ch }
@media (min-width:900px){
  .cq-duo{ padding:20vh 0 }
  .cq-duo__grid{ grid-template-columns:1fr 1fr; gap:80px; align-items:start }
  .cq-duo__media{ position:sticky; top:14vh }
  .cq-duo__text{ gap:34vh; padding:22vh 0 }
}

/* ============================================================
   6. USLUGE
   ============================================================ */
.cq-services{ position:relative }
.cq-services__stage{ display:grid; gap:12vh; padding:12vh var(--gut) }
.cq-services__panel{ display:grid; gap:20px }
.cq-services__panel .cq-slot{ aspect-ratio:4/3 }
.cq-services__panel h2,.cq-services__panel h3{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(34px,8vw,88px); line-height:.96; margin:0;
}
.cq-services__panel p{ margin-top:12px; max-width:42ch; color:var(--muted) }
.cq-services__rail{ display:none }
@media (min-width:900px){
  .cq-services{ height:420vh }
  .cq-services__stage{ position:sticky; top:0; height:100svh; display:block; padding:0 var(--gut) }
  .cq-services__panel{
    position:absolute; top:50%; left:var(--gut); right:var(--gut);
    transform:translateY(-50%); opacity:0; will-change:transform,opacity;
    grid-template-columns:1fr 1fr; gap:60px; align-items:center;
    max-width:1160px; margin-inline:auto;
  }
  .cq-services__panel .cq-slot{ aspect-ratio:5/4 }
  .cq-services__rail{
    display:grid; gap:10px; position:absolute; right:var(--gut); top:50%;
    transform:translateY(-50%);
  }
  .cq-services__dot{ width:24px; height:2px; background:var(--edge) }
  .cq-services__dot.is-on{ background:var(--accent) }
}

/* ============================================================
   7. MOZAIK
   ============================================================ */
.cq-mosaic{ padding:12vh 0 }
.cq-mosaic h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(24px,3vw,40px); letter-spacing:-.025em; margin:0 0 34px;
}
.cq-mosaic__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.cq-mosaic__grid .cq-slot{ aspect-ratio:1 }
.cq-mosaic__grid .is-tall{ aspect-ratio:3/4 }
.cq-mosaic__grid .cq-slot a{ display:block; width:100%; height:100% }
@media (min-width:900px){
  .cq-mosaic{ padding:18vh 0 }
  .cq-mosaic__grid{ grid-template-columns:repeat(12,1fr); gap:20px }
  .cq-mosaic__grid .cq-slot{ aspect-ratio:auto }
  .cq-mosaic__grid .m1{ grid-column:1/6;  height:60vh }
  .cq-mosaic__grid .m2{ grid-column:6/10; height:44vh; align-self:end }
  .cq-mosaic__grid .m3{ grid-column:10/13;height:52vh }
  .cq-mosaic__grid .m4{ grid-column:2/6;  height:46vh }
  .cq-mosaic__grid .m5{ grid-column:6/13; height:64vh }
  .cq-mosaic__grid .m6{ grid-column:3/9;  height:50vh }
}

/* ============================================================
   8. RADOVI
   ============================================================ */
.cq-work{ background:var(--ink-2); padding:12vh 0 }
.cq-work__inner{
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cq-work__inner::-webkit-scrollbar{ display:none }
/* Traku ispisuje Query Loop, pa su kartice <li> iz post-template bloka. */
.cq-work__list{
  display:flex; gap:16px; padding:0 var(--gut); margin:0;
  list-style:none; will-change:transform;
}
.cq-work__list > li,
.cq-card{
  flex:0 0 78vw; scroll-snap-align:center;
  border:1px solid var(--edge); border-radius:4px; overflow:hidden;
  margin:0;
}
.cq-work__list > li > .cq-slot,
.cq-card .cq-slot{ aspect-ratio:4/3; border-radius:0; margin:0 }
.cq-work__list > li > .cq-slot a{ display:block; width:100%; height:100% }
.cq-card__meta{ padding:16px 18px 20px; background:var(--ink) }
.cq-card__meta h3,.cq-card__meta h4{
  font-family:var(--display); font-weight:600; font-size:22px;
  letter-spacing:-.02em; margin:0;
}
.cq-card__tag{ color:var(--muted); font-size:16px; margin-top:2px }
@media (min-width:900px){
  .cq-work{ padding:0 }
  .cq-work__inner{
    height:100svh; display:flex; align-items:center;
    overflow:hidden; scroll-snap-type:none;
  }
  .cq-work__list{ gap:28px }
  .cq-work__list > li,
  .cq-card{ flex:0 0 min(38vw,480px) }
}

/* ============================================================
   9. PARALAKS TRAKA
   ============================================================ */
.cq-band{ height:60vh; overflow:hidden; position:relative }
@media (min-width:900px){ .cq-band{ height:90vh } }
.cq-band .cq-slot{ position:absolute; inset:-15% 0; border-radius:0; will-change:transform }

/* ============================================================
   CTA I PODNOŽJE
   ============================================================ */
.cq-cta{ padding:18vh 0 12vh }
.cq-cta h2{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(36px,9vw,108px); line-height:.95; max-width:14ch; margin:0;
}
.cq-btn{
  display:inline-block; margin-top:30px; padding:16px 30px; border-radius:100px;
  background:var(--accent); color:var(--ink); font-weight:500; border:0; cursor:pointer;
  transition:transform .25s var(--ease);
}
@media (hover:hover){ .cq-btn:hover{ transform:translateY(-3px) } }

.cq-footer{
  border-top:1px solid var(--edge); padding:44px 0 26px;
  color:var(--muted); font-size:16px;
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}
.cq-footer__brand{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px 40px;
  padding-bottom:34px; margin-bottom:26px; border-bottom:1px solid var(--edge);
}
.cq-footer__brand .cq-logo__full--dark{ height:56px }
.cq-footer__brand address{ font-style:normal; color:var(--muted) }
.cq-footer__links{ display:grid; gap:6px; margin-left:auto }
.cq-footer__links a{ color:var(--muted); transition:color .25s var(--ease) }
@media (hover:hover){ .cq-footer__links a:hover{ color:var(--paper) } }
@media (max-width:700px){ .cq-footer__links{ margin-left:0 } }
.cq-footer__row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between }

/* ============================================================
   KONTAKT — tabovi
   ============================================================ */
.cq-page-hero{
  position:relative; min-height:62svh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom:8vh;
}
.cq-page-hero__media{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(110% 80% at 72% 20%, #24306B 0%, transparent 58%),
    radial-gradient(90% 70% at 15% 90%, #4F3675 0%, transparent 62%),
    linear-gradient(180deg, #14161E, var(--ink));
}
.cq-page-hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, var(--ink) 100%);
}
.cq-page-hero .cq-wrap{ position:relative; z-index:1; width:100% }
.cq-page-hero h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(38px,11vw,104px); line-height:.94; max-width:14ch; margin:0;
}
.cq-page-hero__lede{
  margin-top:18px; max-width:44ch; color:var(--muted);
  font-size:clamp(16px,1.7vw,19px);
}
@media (min-width:1024px){ .cq-page-hero{ min-height:72svh; padding-bottom:10vh } }
@media (max-height:520px) and (orientation:landscape){
  .cq-page-hero{ min-height:auto; padding-top:22vh; padding-bottom:6vh }
}

.cq-contact{ padding:8vh 0 14vh }
.cq-tablist{
  position:relative; display:flex; gap:4px;
  border-bottom:1px solid var(--edge);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cq-tablist::-webkit-scrollbar{ display:none }
.cq-tab{
  position:relative; z-index:1; flex:0 0 auto;
  background:none; border:0; cursor:pointer;
  min-height:var(--tap); padding:14px 18px;
  font-size:clamp(16px,1.5vw,18px); color:var(--muted);
  transition:color .3s var(--ease); white-space:nowrap;
}
.cq-tab[aria-selected="true"]{ color:var(--paper) }
.cq-tab:active{ transform:scale(.97) }
.cq-tab-ink{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--accent); border-radius:2px; pointer-events:none;
}
@media (min-width:768px){ .cq-tab{ padding:16px 26px } }
@media (hover:hover){ .cq-tab:hover{ color:var(--paper) } }

.cq-panels{ position:relative; margin-top:clamp(28px,5vw,52px) }
.cq-panel{
  position:absolute; top:0; left:0; width:100%;
  opacity:0; visibility:hidden; pointer-events:none;
}
.cq-panel.is-active{ position:relative; opacity:1; visibility:visible; pointer-events:auto }

/* --- lokacije i mreže --- */
.cq-places{ display:grid; gap:clamp(24px,4vw,40px) }
@media (min-width:768px){ .cq-places{ grid-template-columns:repeat(2,1fr) } }
/* Jedna lokacija ne treba da se razvuče preko pola ekrana. */
.cq-places:has(> :only-child) .cq-place{ max-width:44ch }
.cq-place{ border-top:1px solid var(--edge); padding-top:22px }
.cq-place h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(24px,3.4vw,34px); letter-spacing:-.02em; margin:0;
}
.cq-place address{ font-style:normal; color:var(--muted); margin-top:10px }
.cq-place__row{ display:flex; gap:10px; align-items:center; margin-top:14px; min-height:var(--tap) }
.cq-place__row a{
  border-bottom:1px solid var(--edge-2); padding-bottom:2px;
  transition:border-color .25s var(--ease);
}
@media (hover:hover){ .cq-place__row a:hover{ border-color:var(--accent) } }

.cq-social{ display:grid; gap:2px }
.cq-social a{
  display:flex; justify-content:space-between; align-items:center;
  min-height:64px; padding:18px 4px; border-bottom:1px solid var(--edge);
  font-family:var(--display); font-size:clamp(22px,4vw,38px);
  font-weight:600; letter-spacing:-.025em;
}
.cq-social .cq-go{
  font-size:16px; font-family:var(--body); font-weight:400; color:var(--muted);
  transition:transform .3s var(--ease), color .3s var(--ease);
}
@media (hover:hover){ .cq-social a:hover .cq-go{ transform:translateX(6px); color:var(--accent) } }
.cq-social a:active{ background:var(--ink-2) }

/* ============================================================
   TEKSTUALNE STRANICE
   Duži sadržaj na stranicama po tehnologiji izrade.
   ============================================================ */
.cq-prose{ padding:clamp(48px,8vh,96px) 0 }
.cq-prose h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(22px,2.8vw,34px); letter-spacing:-.025em;
  margin:clamp(38px,5vh,60px) 0 0; max-width:24ch;
}
.cq-prose h2:first-child{ margin-top:0 }
.cq-prose p{ margin:14px 0 0; max-width:68ch; color:var(--muted); font-size:17px; line-height:1.7 }
.cq-prose p strong{ color:var(--paper); font-weight:600 }
.cq-prose a{ color:var(--accent); border-bottom:1px solid var(--edge-2); padding-bottom:1px }
@media (hover:hover){ .cq-prose a:hover{ border-bottom-color:var(--accent) } }

.cq-prose ul{
  margin:18px 0 0; padding:0; list-style:none;
  display:grid; gap:10px; max-width:66ch;
}
.cq-prose li{
  position:relative; padding-left:26px;
  color:var(--muted); font-size:17px; line-height:1.6;
}
/* Kvačica umesto tačke — isti znak kao u paketima, pa lista deluje
   kao spisak onoga što dobijaš, a ne kao nabrajanje. */
.cq-prose li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:8px; height:4px;
  border-left:1.8px solid var(--accent); border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}

/* Akordeon sa pitanjima na tekstualnim stranicama stoji na tamnijoj
   podlozi, da se odvoji od teksta iznad. */
.cq-faq--qa{ background:var(--ink-2); padding:clamp(48px,8vh,90px) 0 }
.cq-faq--qa .cq-faq__item{ background:var(--ink) }
.cq-faq--qa .cq-faq__item[open]{ background:var(--ink-3) }

/* ============================================================
   IZRADA WEB SAJTOVA — akordeon
   Gradi se na <details>, pa radi i bez JavaScripta: otvaranje,
   tastatura i pretraga u stranici su ugrađeni u sam element.
   ============================================================ */
.cq-faq{ padding:12vh 0 4vh }
@media (min-width:900px){ .cq-faq{ padding:16vh 0 6vh } }
.cq-faq__eyebrow{
  margin:0; font-size:16px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.cq-faq h2{
  margin:12px 0 0; font-family:var(--display); font-weight:800;
  font-size:clamp(28px,4.4vw,54px); letter-spacing:-.035em; line-height:1;
}

.cq-faq__lede{ margin-top:14px; color:var(--muted); max-width:56ch }
.cq-faq__list{ display:grid; gap:10px; margin-top:clamp(28px,4vw,42px) }

.cq-faq__item{
  background:var(--ink-2); border:1px solid var(--edge); border-radius:8px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.cq-faq__item[open]{ border-color:var(--edge-2); background:var(--ink-3) }
@media (hover:hover){ .cq-faq__item:hover{ border-color:var(--edge-2) } }

.cq-faq__item summary{
  position:relative; cursor:pointer; list-style:none;
  padding:22px 62px 22px 26px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(17px,1.9vw,22px); letter-spacing:-.02em;
}
.cq-faq__item summary::-webkit-details-marker{ display:none }
.cq-faq__item summary::marker{ content:"" }
.cq-faq__item summary strong{ color:var(--accent); font-weight:inherit }

/* Strelica od dve ivice — okreće se kad se stavka otvori. */
.cq-faq__item summary::after{
  content:""; position:absolute; right:28px; top:50%;
  width:9px; height:9px; margin-top:-7px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.cq-faq__item[open] summary::after{
  transform:rotate(-135deg); margin-top:-3px;
  border-color:var(--accent);
}
.cq-faq__item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:8px }

.cq-faq__item > :not(summary){
  padding-inline:26px; margin:0 0 16px; color:var(--muted);
  max-width:82ch; font-size:16px; line-height:1.65;
}
.cq-faq__item > :not(summary):first-of-type{ padding-top:2px }
.cq-faq__item p strong{ color:var(--paper); font-weight:600 }
.cq-faq__more{ padding-bottom:26px }
.cq-faq__more .cq-btn{ margin-top:6px }

/* ============================================================
   PAKETI I CENE
   ============================================================ */
.cq-pricing{ padding:12vh 0 }
@media (min-width:900px){ .cq-pricing{ padding:16vh 0 } }
.cq-pricing h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(24px,3vw,40px); letter-spacing:-.025em; margin:0;
}
.cq-pricing__lede{ margin-top:10px; color:var(--muted); max-width:52ch }

.cq-pricing__grid{
  display:grid; gap:20px; margin-top:clamp(34px,5vw,52px);
  grid-template-columns:1fr;
}
/* Paketa ima četiri. Tri kolone su ostale iz vremena kad ih je bilo tri,
   pa je četvrti padao u drugi red sam. Sada: dva u sredini, četiri kad
   ima mesta da svaka kartica ostane šira od 280px. */
@media (min-width:640px){  .cq-pricing__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px } }
@media (min-width:1180px){ .cq-pricing__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px } }

.cq-pricing__card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--edge); border-radius:10px;
  padding:30px 26px 26px;
}
/* Istaknuti paket se izdvaja obodom i punim dugmetom, ne drugom bojom
   kartice — tri različite podloge bi razbile red. */
.cq-pricing__card.is-featured{ border-color:var(--accent); background:var(--ink-3) }
/* Izdignuta kartica ima smisla samo kad su sve četiri u istom redu. */
@media (min-width:1180px){
  .cq-pricing__card.is-featured{ margin-block:-14px; padding-block:44px 26px }
}

.cq-pricing__badge{
  position:absolute; top:0; left:26px; transform:translateY(-50%);
  margin:0; padding:6px 14px; border-radius:99px;
  background:var(--accent); color:var(--ink);
  font-size:16px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}

.cq-pricing__name{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(20px,2.2vw,24px); letter-spacing:-.02em; color:var(--accent);
  /* „Professional+Online“ je jedan token bez razmaka. Bez ovoga bi
     razvukao svoju kolonu, pa bi četiri kartice ispale različite širine.
     Prelama se samo kad zaista ne staje — ne nasred reči po svaku cenu. */
  overflow-wrap:break-word;
}
.cq-pricing__card:not(.is-featured) .cq-pricing__name{ color:var(--paper) }
/* U četiri kolone kartica je ~264px. Na 24px se najduže ime („Professional+
   Online Prodavnica Woocommerce“) lomi nasred reči; na 20px staje u red.
   Mora posle osnovnog pravila — ista težina, pa odlučuje redosled. */
@media (min-width:1180px){ .cq-pricing__name{ font-size:20px } }

.cq-pricing__price{
  margin:14px 0 0; font-family:var(--display); font-weight:800;
  font-size:clamp(34px,4vw,46px); letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
/* "od" nije deo cene nego njena odrednica — zato stoji u CSS-u,
   pa u editoru ostaje samo broj koji se menja. */
.cq-pricing__price::before{
  content:"od "; font-family:var(--body); font-weight:400;
  font-size:16px; letter-spacing:0; color:var(--muted);
}

.cq-pricing__features{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; gap:12px; flex:1 1 auto;
}
.cq-pricing__features li{
  position:relative; padding-left:32px; font-size:16px; line-height:1.45;
}
.cq-pricing__features li::before{
  content:""; position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--edge-2);
}
/* Kvačica od dve ivice — bez ikone i bez dodatnog fajla. */
.cq-pricing__features li::after{
  content:""; position:absolute; left:6px; top:7px;
  width:8px; height:4px;
  border-left:1.8px solid var(--paper); border-bottom:1.8px solid var(--paper);
  transform:rotate(-45deg);
}
.cq-pricing__card.is-featured .cq-pricing__features li::before{ border-color:var(--accent) }
.cq-pricing__card.is-featured .cq-pricing__features li::after{
  border-left-color:var(--accent); border-bottom-color:var(--accent);
}
.cq-pricing__example a{
  color:var(--accent); border-bottom:1px solid transparent; padding-bottom:1px;
  transition:border-color .25s var(--ease);
}
@media (hover:hover){ .cq-pricing__example a:hover{ border-bottom-color:var(--accent) } }

.cq-pricing__cta{ margin:26px 0 0 }
.cq-pricing__cta .cq-btn{ margin-top:0; display:block; text-align:center }
.cq-btn--ghost{
  background:none; color:var(--paper);
  border:1px solid var(--edge-2);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
@media (hover:hover){
  .cq-btn--ghost:hover{ border-color:var(--accent); color:var(--accent) }
}

.cq-pricing__note{
  margin-top:clamp(26px,4vw,40px); color:var(--muted);
  font-size:16px; max-width:74ch;
}
.cq-pricing__note a{ color:var(--accent); border-bottom:1px solid var(--edge-2) }
@media (hover:hover){ .cq-pricing__note a:hover{ border-bottom-color:var(--accent) } }

/* ============================================================
   ARHIVA I POJEDINAČNI PROJEKAT
   ============================================================ */
.cq-archive{ padding:2vh 0 16vh }
.cq-archive__list{
  display:grid; gap:clamp(20px,3vw,34px); margin:0; padding:0; list-style:none;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .cq-archive__list{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .cq-archive__list{ grid-template-columns:repeat(3,1fr) } }
.cq-archive__list > li{
  margin:0; border:1px solid var(--edge); border-radius:4px; overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.cq-archive__list > li > .cq-slot{ aspect-ratio:4/3; border-radius:0; margin:0 }
.cq-archive__list > li > .cq-slot a{ display:block; width:100%; height:100% }
@media (hover:hover){
  .cq-archive__list > li:hover{ border-color:var(--edge-2); transform:translateY(-3px) }
}
.cq-card__tag{ color:var(--muted); font-size:16px; margin-top:2px }
.cq-card__tag a{ color:inherit }

.cq-project-hero{ position:relative; padding-top:var(--nav-h) }
.cq-project-hero__media{ height:56svh; border-radius:0; margin:0 }
.cq-project-hero__media img{ width:100%; height:100%; object-fit:cover }
.cq-project-hero__copy{ padding-top:5vh }
.cq-project-hero h1{ margin:6px 0 0 }

.cq-project-body{ padding:6vh 0 10vh; display:grid; gap:clamp(28px,5vw,60px) }
@media (min-width:900px){
  .cq-project-body{ grid-template-columns:minmax(220px,300px) 1fr; align-items:start }
}
.cq-project-facts{ margin:0; display:grid; gap:16px; align-content:start }
.cq-project-facts__row{ border-top:1px solid var(--edge); padding-top:12px }
.cq-project-facts dt{ color:var(--muted); font-size:16px; margin:0 }
.cq-project-facts dd{ margin:4px 0 0; font-family:var(--display); font-size:19px; font-weight:600 }
.cq-project-facts a{ border-bottom:1px solid var(--edge-2) }
@media (hover:hover){ .cq-project-facts a:hover{ border-color:var(--accent) } }

.cq-project-nav{ padding-bottom:14vh; gap:20px; flex-wrap:wrap }
.cq-project-nav a{
  color:var(--muted); border-bottom:1px solid var(--edge-2); padding-bottom:3px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
@media (hover:hover){ .cq-project-nav a:hover{ color:var(--paper); border-color:var(--accent) } }

/* ============================================================
   KONTAKT FORMA (Fluent Forms)
   Njihov stylesheet je isključen u inc/contact.php, pa se forma
   ovde gradi od nule po dizajnu iz demoa.
   ============================================================ */
.cq-panel .fluentform{ max-width:none }
.cq-panel .frm-fluent-form fieldset{
  border:0; margin:0; padding:0; min-inline-size:100%;
  display:grid; gap:clamp(22px,3vw,30px);
}
@media (min-width:768px){
  .cq-panel .frm-fluent-form fieldset{ grid-template-columns:1fr 1fr }
}
.cq-panel .ff-el-group{ position:relative; grid-column:1 / -1; margin:0 }
@media (min-width:768px){
  /* Kratka polja idu u dve kolone; ciljano po imenu polja,
     jer Fluent Forms ne daje klasu po polju. */
  .cq-panel .ff-el-group:has(input[name="ime"]),
  .cq-panel .ff-el-group:has(input[name="firma"]),
  .cq-panel .ff-el-group:has(input[name="email"]),
  .cq-panel .ff-el-group:has(input[name="telefon"]){ grid-column:span 1 }
}

/* --- polja sa plutajućim labelom --- */
.cq-panel .ff-el-form-control{
  width:100%; background:none; border:0;
  border-bottom:1px solid var(--edge-2);
  color:var(--paper); padding:22px 0 10px;
  font-family:var(--body); font-size:16px;  /* 16px sprečava zum na iOS-u */
  border-radius:0; -webkit-appearance:none;
}
.cq-panel textarea.ff-el-form-control{ resize:vertical; min-height:120px }
.cq-panel .ff-el-form-control:focus{ outline:none }

.cq-panel .ff-el-group:not(.cq-ff-chips):not(.cq-ff-consent):not(.ff_submit_btn_wrapper) .ff-el-input--label{
  position:absolute; left:0; top:22px; z-index:1;
  margin:0; pointer-events:none; transform-origin:0 0;
  color:var(--muted);
  transition:transform .28s var(--ease), color .28s var(--ease);
}
.cq-panel .ff-el-input--label label{ margin:0; font-weight:400; cursor:text }
.cq-panel .ff-el-group:has(.ff-el-form-control:focus) .ff-el-input--label,
.cq-panel .ff-el-group:has(.ff-el-form-control:not(:placeholder-shown)) .ff-el-input--label{
  transform:translateY(-20px) scale(.76);
}
.cq-panel .ff-el-group:has(.ff-el-form-control:focus) .ff-el-input--label{ color:var(--accent) }

/* Linija koja se izvlači ispod fokusiranog polja. */
.cq-panel .ff-el-group:not(.cq-ff-chips):not(.cq-ff-consent):not(.ff_submit_btn_wrapper)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--ease);
}
.cq-panel .ff-el-group:focus-within::after{ transform:scaleX(1) }

/* --- chip dugmad od radio grupe --- */
.cq-panel .cq-ff-chips .ff-el-input--label{ margin-bottom:14px; color:var(--muted) }
.cq-panel .cq-ff-chips .ff-el-input--content{ display:flex; flex-wrap:wrap; gap:10px }
.cq-panel .cq-ff-chips .ff-el-form-check{ margin:0 }
.cq-panel .cq-ff-chips .ff-el-form-check-input{
  position:absolute; opacity:0; width:0; height:0;
}
.cq-panel .cq-ff-chips .ff-el-form-check-label{
  display:block; margin:0; cursor:pointer;
}
.cq-panel .cq-ff-chips .ff-el-form-check-label span{
  display:grid; place-items:center; min-height:44px; padding:0 18px;
  border:1px solid var(--edge-2); border-radius:100px;
  color:var(--muted); font-size:16px;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background-color .25s var(--ease), transform .18s var(--ease);
}
.cq-panel .cq-ff-chips .ff-el-form-check:has(input:checked) .ff-el-form-check-label span{
  background:var(--accent); border-color:var(--accent); color:var(--ink);
}
.cq-panel .cq-ff-chips .ff-el-form-check:has(input:active) .ff-el-form-check-label span{ transform:scale(.94) }
.cq-panel .cq-ff-chips .ff-el-form-check:has(input:focus-visible) .ff-el-form-check-label span{
  outline:2px solid var(--accent); outline-offset:3px;
}
@media (hover:hover){
  .cq-panel .cq-ff-chips .ff-el-form-check:has(input:not(:checked)):hover .ff-el-form-check-label span{
    border-color:var(--paper); color:var(--paper);
  }
}

/* --- saglasnost --- */
.cq-panel .cq-ff-consent .ff-el-input--label{ display:none }
.cq-panel .cq-ff-consent .ff-el-form-check-label{
  display:flex; gap:14px; align-items:flex-start;
  margin:0; min-height:var(--tap); cursor:pointer;
  color:var(--muted); font-size:16px; max-width:52ch;
}
.cq-panel .cq-ff-consent .ff-el-form-check-input{
  flex:0 0 22px; width:22px; height:22px; margin:2px 0 0;
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--edge-2); border-radius:4px; cursor:pointer;
  display:grid; place-items:center;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.cq-panel .cq-ff-consent .ff-el-form-check-input::after{
  content:""; width:11px; height:6px;
  border-left:2.4px solid var(--ink); border-bottom:2.4px solid var(--ink);
  transform:rotate(-45deg) scale(0); transform-origin:center;
  transition:transform .25s var(--ease); margin-top:-3px;
}
.cq-panel .cq-ff-consent .ff-el-form-check-input:checked{
  background:var(--accent); border-color:var(--accent);
}
.cq-panel .cq-ff-consent .ff-el-form-check-input:checked::after{ transform:rotate(-45deg) scale(1) }

/* --- dugme --- */
.cq-panel .ff_submit_btn_wrapper{ margin-top:6px }
.cq-panel .ff-btn-submit{
  min-height:var(--tap); padding:16px 34px; border:0; border-radius:100px;
  background:var(--accent); color:var(--ink);
  font-family:var(--body); font-size:16px; font-weight:500; cursor:pointer;
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.cq-panel .ff-btn-submit:disabled{ opacity:.55; cursor:not-allowed }
.cq-panel .ff-btn-submit:active{ transform:scale(.96) }
@media (hover:hover){ .cq-panel .ff-btn-submit:hover{ transform:translateY(-2px) } }

/* --- greške i potvrda --- */
.cq-panel .error,
.cq-panel .text-danger,
.cq-panel .ff-el-is-error-message{ color:var(--err); font-size:16px; margin-top:8px }
.cq-panel .ff-el-form-control.ff-el-is-error{ border-bottom-color:var(--err) }
.cq-panel .ff-message-success{
  border:1px solid var(--edge-2); border-left:2px solid var(--accent);
  padding:20px 22px; border-radius:4px; color:var(--paper);
}

/* ============================================================
   PRISTUPAČNOST — bez animacija
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .cq-grain{ animation:none }
  .cq-mask > span{ transform:none !important }
  .cq-hero,.cq-scrub,.cq-services{ height:auto }
  .cq-hero__stage,.cq-scrub__stage,.cq-services__stage,.cq-duo__media{ position:static; height:auto }
  .cq-hero__stage{ min-height:80svh }
  .cq-services__panel{
    position:static; transform:none; opacity:1 !important; margin-bottom:12vh;
  }
  /* Bez smenjivanja slike stoje jedna ispod druge. Okvir više nije
     pozicioniran, pa bi slike sa position:absolute pobegle iz kolone
     i razvukle se preko cele sekcije. */
  .cq-duo__media{ aspect-ratio:auto; display:grid; gap:24px }
  .cq-duo__media .cq-slot{ position:relative; inset:auto; aspect-ratio:4/5 }
  .cq-duo__media .cq-slot + .cq-slot{ opacity:1 }
  .cq-hero__blur{ display:none }
  /* Bez animacije nema ni otvaranja, pa sloj stoji ceo. */
  .cq-js .cq-scrub__plane{ transform:none; clip-path:none }
}