/* pozornice.hr - home sections, the gaps poz-home.css does not cover.
   Loads AFTER poz/poz-home.css. Nothing here restyles the package: every rule
   is either (a) a value the reference carried as an inline style, (b) support
   for a node the package has no selector for, or (c) a behaviour the brief
   asks for that the package's selectors cannot reach.

   Every rule is listed with its reason in inc/HOME-NOTES-B.md. */

/* --------------------------- 03 · PLANNER ---------------------------- */

/* (a) The reference carried `position: relative` inline on the planner's
   .poz-wrap. Without it the wrap sits under the absolutely-positioned grid
   and glow plates, and the rows stop taking pointer events. */
.poz-planner__inner { position: relative; }

/* (a) The reference carried this margin inline on .poz-counters. Scoped to the
   planner so a .poz-counters block used elsewhere is unaffected. */
.poz-planner__counters { margin-top: clamp(32px, 3vw, 52px); }

/* (c) "each carrying its own category hue". The package pins .poz-planner__num
   to the fixed blue tint, which makes all four rows read as one tool. The row
   number is TEXT, so it takes --acc-ink, which .poz-dark has already remapped
   to that category's tint twin (≥7:1 on --poz-ink). The pure hue stays on the
   ::before spine, which is the sanctioned graphic exception for this band. */
.poz-planner__row .poz-planner__num { color: var(--acc-ink, var(--poz-accent-tint)); }

/* (b) poz_configurators() returns a `spec` line per tool and the package has no
   selector for it. Stacked under the name inside the middle grid cell. Colour
   is --poz-text-3, the muted-on-dark floor (6.28:1); --poz-text-muted-dark is
   for hairlines only. */
.poz-planner__body { display: block; min-width: 0; }
.poz-planner__spec {
  display: block; margin-top: 9px;
  font: var(--poz-spec); color: var(--poz-text-3);
}

/* --------------------------- 04 · BRANDS ----------------------------- */

/* (a) The reference set the band's ground inline. It is --poz-ink-2, one step
   up from the planner above it, so the two dark bands read as separate. */
.poz-brands-band { background: var(--poz-ink-2); }

/* (b) The logo artwork is already light-on-dark; state this so no later
   stylesheet "helpfully" inverts it. The definite 26px height is in the
   package - do not turn it into max-height, and never add loading="lazy". */
.poz-brands__logo { filter: none; }

/* --------------------------- 05 · CLIENTS ---------------------------- */

/* (b) Wrapper the package has no selector for. It exists so hover can be read
   across BOTH rails at once - .poz-clients__row:hover only ever pauses the
   track inside the row the cursor happens to be over. */
.poz-clients__rails { margin-top: clamp(32px, 3vw, 52px); }

/* (c) Hover pauses both tracks. */
.poz-clients__rails:hover .poz-clients__track { animation-play-state: paused; }

/* (c) Hover lights the mark under the cursor and drops the rest. The package
   only lifts the hovered logo; the drop needs the rails-level hover. */
.poz-clients__rails:hover .poz-clients__logo { opacity: 0.22; }
.poz-clients__rails:hover .poz-clients__logo:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* poz-components.css already kills the animation itself. What it cannot fix
     is the fallout: a stopped `width: max-content` track just clips at the
     row edge, so most of the list becomes unreachable and the duplicate half
     is dead weight. Wrap the marks into a static block instead, drop the
     duplicate set, and lift the edge mask that no longer has anything to
     hide. Hover still lights one mark - that is a state change, not motion. */
  .poz-clients__row {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .poz-clients__track {
    flex-wrap: wrap; justify-content: center;
    width: auto; gap: 34px 56px;
  }
  .poz-clients__logo--dup { display: none; }
}

/* --------------------------- 06 · CONTACT ---------------------------- */

/* (b) The contact rows reuse .poz-planner__num and .poz-planner__arrow - the
   reference does the same, and the package defines them nowhere else. The
   arrow's travel, though, is written against .poz-planner__row, so it never
   fires inside a contact row. Same distance, same easing. */
.poz-contact__row:hover .poz-planner__arrow,
.poz-contact__row:focus-visible .poz-planner__arrow {
  transform: translateX(10px);
  color: var(--acc-ink, var(--poz-accent-tint));
}

@media (prefers-reduced-motion: reduce) {
  /* The package neutralises animations globally but not transitions. These
     four are the ones this batch adds or relies on that move geometry. */
  .poz-planner__row,
  .poz-planner__arrow,
  .poz-contact__row,
  .poz-clients__logo { transition-duration: 0.01ms !important; }
  .poz-planner__row:hover,
  .poz-planner__row:focus-visible,
  .poz-contact__row:hover,
  .poz-contact__row:focus-visible { padding-left: clamp(8px, 1vw, 18px); }
  .poz-planner__row:hover .poz-planner__arrow,
  .poz-planner__row:focus-visible .poz-planner__arrow,
  .poz-contact__row:hover .poz-planner__arrow,
  .poz-contact__row:focus-visible .poz-planner__arrow { transform: none; }
}

/* ---------------------------------------------------------------------------
   Brand marks - optical height.

   poz-home.css sizes every mark to a flat 26px, which suits the wordmarks
   (GUIL, Cameo, Studio Due, all near 3:1) and shrinks the square marks (GLP
   1.14:1, Pangolin 1.05:1) to about 30px wide. home-brands.php measures each
   file and hands the bucket down as --poz-brand-logo-h; this is the only line
   that consumes it, so the package sheet stays untouched.
--------------------------------------------------------------------------- */
.poz-brands__logo { height: var(--poz-brand-logo-h, 26px); object-position: center center; }

/* ---------------------------------------------------------------------------
   Brands band, v2 concept: two-column head (claim | paragraph + CTA), cards
   with accent tick / category eyebrow / centred mark / name + country + arrow,
   and a closing label line. Extends the package's .poz-brands grid; the card's
   accent arrives per-card as --bacc from home-brands.php.
--------------------------------------------------------------------------- */
.poz-brands2__head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 96px); align-items: start;
  margin-bottom: clamp(30px, 3.4vw, 54px);
}
.poz-brands2__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: var(--poz-label); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--poz-text-3);
}
.poz-brands2__eyebrow i { display: block; width: 26px; height: 2px; background: #2AA876; }
.poz-brands2__title {
  margin: 18px 0 0; max-width: 15ch;
  font: 400 clamp(28px, 3.2vw, 44px)/1.18 var(--poz-font-display);
  letter-spacing: 0.01em; color: #F2F4F6;
}
.poz-brands2__aside { padding-top: 34px; }
.poz-brands2__aside p {
  margin: 0; max-width: 44ch;
  font: 400 14.5px/1.75 var(--poz-font-body); color: #A9AFB8;
}
.poz-brands2__cta {
  display: inline-block; margin-top: 22px; padding-bottom: 5px;
  border-bottom: 1px solid #6B7280;
  font: var(--poz-label); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #E6E9EE; text-decoration: none;
  transition: border-color 0.3s, color 0.3s;
}
.poz-brands2__cta:hover { border-color: #E6E9EE; }
.poz-brands2__cta span { display: inline-block; transition: transform 0.3s; }
.poz-brands2__cta:hover span { transform: translateX(4px); }

.poz-brands__tick { display: block; width: 26px; height: 2px; background: var(--bacc, #3E7BFA); margin-bottom: 20px; }
.poz-brands__card { min-height: 340px; }
.poz-brands__role { margin-top: 0; }
.poz-brands__stage {
  flex: 1 1 auto; min-height: 170px;
  display: flex; align-items: center; justify-content: center;
  padding: 26px 0;
}
.poz-brands__name {
  font: 400 17px/1.3 var(--poz-font-display); letter-spacing: 0.02em;
  color: #F2F4F6; margin-bottom: 8px;
}
.poz-brands__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.poz-brands__origin2 {
  font: var(--poz-label); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--poz-text-3);
}
.poz-brands__arrow { color: var(--poz-text-3); font-size: 13px; transition: transform 0.3s, color 0.3s; }
.poz-brands__card:hover .poz-brands__arrow { transform: translateX(5px); color: #E6E9EE; }

.poz-brands2__foot {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(18px, 2vw, 26px);
  font: var(--poz-label); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--poz-text-3);
}

@media (max-width: 1000px) {
  .poz-brands2__head { grid-template-columns: 1fr; gap: 20px; }
  .poz-brands2__aside { padding-top: 0; }
}
@media (max-width: 900px) {
  .poz-brands__card { min-height: 280px; }
  .poz-brands__stage { min-height: 120px; }
}

/* ---------------------------------------------------------------------------
   Strip specs, two-column grid.

   .poz-strip__spec is nowrap because in the accordion the open panel is wide
   and a wrapped mono line would look broken. Below 820px the same panel is
   half a phone wide and the line is simply cut - "MODULI 2×1 · 1×1 · 0,5×1 M"
   ends mid-unit. Let it wrap at the width where nowrap stops being true.

   Two class names, not one: poz-accordion.css is enqueued after this sheet, so
   a single-class rule loses the cascade to its own nowrap.
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .poz-strip__panel .poz-strip__spec { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Strip panels, two-column grid - let the panel grow instead of colliding.

   .poz-strip__open is absolutely bottom-anchored, which is right in the
   accordion: the panel is a fixed-height column and the block hangs off its
   floor. In the grid the panel has a 240px min-height and the block grows
   upward out of it, so a long entry (06 "Kabel ispod, siguran prolaz iznad",
   two-line kicker + three-line title) runs straight over the 01–09 number
   pinned at the top.

   Take the block out of absolute flow and let the panel be a column that grows
   from its floor. The padding-top reserves the number's row; min-height stays
   the floor, not the ceiling. Image, veil, tint and bar are all absolutely
   positioned, so none of them join the flex flow.
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .poz-strip .poz-strip__panel {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 46px;
  }
  .poz-strip__panel .poz-strip__open { position: static; }
}

/* ---------------------------------------------------------------------------
   Homepage hero, first-viewport contract.

   The global chrome already consumes --poz-utility-h + --poz-header-h. A hero
   that is another 100vh pushes its primary actions below the first viewport.
   Keep the hero inside the remaining space on ordinary laptop viewports while
   preserving the original tall composition on large displays.
--------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-height: 900px) {
  .poz-hero {
    height: calc(100vh - var(--poz-utility-h) - var(--poz-header-h));
    height: calc(100svh - var(--poz-utility-h) - var(--poz-header-h));
    min-height: 500px;
  }
  .admin-bar .poz-hero {
    height: calc(100vh - var(--poz-utility-h) - var(--poz-header-h) - 32px);
    height: calc(100svh - var(--poz-utility-h) - var(--poz-header-h) - 32px);
  }
  .poz-hero__copy { bottom: clamp(82px, 11vh, 116px); }
  .poz-hero__rail { bottom: 24px; }
  .poz-hero__scroll { bottom: clamp(94px, 13vh, 132px); }
}

/* Client marks: the package's 30px reads too small against the section's
   scale - lift the rails to 58px marks (42px on phones). Override of
   poz/poz-home.css .poz-clients__logo; delete if the package adopts it. */
.poz-clients__logo { height: 58px; }
@media (max-width: 700px) { .poz-clients__logo { height: 42px; } }

/* ---------------------------------------------------------------------------
   Category strip — concept pass (31 Jul): the accordion rests fully closed on
   pointer devices (.is-open only serves touch, which never fires :hover), and
   the open panel's highlight is an accent→white gradient with the accent bar
   along the TOP edge, replacing the multiply tint.
--------------------------------------------------------------------------- */
@media (hover: hover) {
  .poz-strip__panel.is-open:not(:hover) { flex-grow: 1; }
  .poz-strip__panel.is-open:not(:hover) .poz-strip__open { opacity: 0; transform: translateY(14px); }
  .poz-strip__panel.is-open:not(:hover) .poz-strip__vert { opacity: 1; }
  .poz-strip__panel.is-open:not(:hover) .poz-strip__bar { transform: scaleX(0); }
  .poz-strip__panel.is-open:not(:hover) .poz-strip__num { color: var(--poz-text-2); }
  .poz-strip__panel.is-open:not(:hover) { background: var(--poz-page); }
  .poz-strip:not(:hover) .poz-strip__panel.is-open .poz-strip__img {
    filter: grayscale(0.9) contrast(1) brightness(1.12) opacity(0.5);
  }
  .poz-strip:hover .poz-strip__panel.is-open:not(:hover) .poz-strip__img {
    filter: grayscale(0.9) contrast(1) brightness(1.12) opacity(0.5);
  }
  .poz-strip:not(:hover) .poz-strip__panel.is-open .poz-strip__vert { opacity: 1; }
  .poz-strip:not(:hover) .poz-strip__panel.is-open .poz-strip__open { opacity: 0; transform: translateY(14px); }
  .poz-strip:not(:hover) .poz-strip__panel.is-open .poz-strip__bar { transform: scaleX(0); }
  .poz-strip:not(:hover) .poz-strip__panel.is-open { flex-grow: 1; background: var(--poz-page); }
  .poz-strip .poz-strip__panel.is-open:not(:hover) .poz-strip__vert { transform: rotate(-90deg); }
}

.poz-strip .poz-strip__bar { top: 0; bottom: auto; }
.poz-strip__panel:hover,
.poz-strip__panel:focus-visible,
.poz-strip__panel.is-open {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 8%, #fff) 0%, #fff 48%);
}
.poz-strip .poz-strip__panel:hover .poz-strip__tint,
.poz-strip .poz-strip__panel:focus-visible .poz-strip__tint,
.poz-strip .poz-strip__panel.is-open .poz-strip__tint { opacity: 0 !important; }

/* ---------------------------------------------------------------------------
   Brands band — the small caps lines follow the principal (display) face,
   per the concept, not the mono label face.
--------------------------------------------------------------------------- */
.poz-brands__role,
.poz-brands__origin2,
.poz-brands2__eyebrow,
.poz-brands2__foot,
.poz-brands2__cta {
  font-family: var(--poz-font-display);
  font-size: 9.5px;
}
.poz-brands2__eyebrow { font-size: 10px; }
.poz-brands2__cta { font-size: 10px; }

/* The closed panel's vertical label swings to horizontal as the panel opens,
   fading out into the open block's own copy. Replaces the package's
   writing-mode approach with a rotated horizontal element so the swing can
   animate (writing-mode itself cannot). */
.poz-strip .poz-strip__vert {
  left: calc(50% + 0.55em); right: auto; top: auto; bottom: 28px;
  writing-mode: horizontal-tb;
  transform-origin: 0 100%;
  transform: rotate(-90deg);
  font: 400 12.5px/1.15 var(--poz-font-display);
  letter-spacing: 0.14em;
  color: var(--poz-text);
  transition: transform 0.55s cubic-bezier(0.55, 0, 0.85, 0.45), opacity 0.4s ease;
}
.poz-strip .poz-strip__panel:hover .poz-strip__vert,
.poz-strip .poz-strip__panel:focus-visible .poz-strip__vert,
.poz-strip .poz-strip__panel.is-open .poz-strip__vert { transform: rotate(-90deg) translateX(38px); }
.poz-strip .poz-strip__panel:hover .poz-strip__open,
.poz-strip .poz-strip__panel:focus-visible .poz-strip__open { transition-delay: 0.14s; }

/* Inactive panels keep a trace of the artwork's own colour, per the concept -
   the package's near-total grayscale wash is softened. !important because
   poz-accordion.css loads after this layer. */
.poz-strip:hover .poz-strip__panel:not(:hover) .poz-strip__img,
.poz-strip:focus-within .poz-strip__panel:not(:focus-visible) .poz-strip__img,
.poz-strip:not(:hover) .poz-strip__panel:not(.is-open) .poz-strip__img,
.poz-strip:not(:hover) .poz-strip__panel.is-open .poz-strip__img {
  filter: grayscale(0.35) contrast(1.02) brightness(1.06) opacity(0.78) !important;
}

/* Hero animations: the clip replaces the still. The renders sit on a
   near-white (not pure white) studio ground, so the slide ground is forced
   white, the video graded a touch brighter so its ground clips to white, and
   .poz-hero__feather (pinned by poz-wp.js on contain slides) melts the frame
   edges. Fit is per category - see poz_hero_media(): widescreen frames run
   contained; categories with no widescreen frame run cover, edge-to-edge;
   the portrait-only lifters compose a widescreen as .poz-hero__multi, a
   flex rank of three models assembling side by side. No ken-burns. */
.poz-hero .poz-hero__slide { background: #fff; }
.poz-hero video.poz-hero__img {
  background: #fff;
  object-fit: contain; object-position: 78% 50%;
  filter: contrast(1.02) saturate(0.97) brightness(1.07);
}
.poz-hero video.poz-hero__img[data-poz-fit="cover"] { object-fit: cover; object-position: 50% 42%; }
.poz-hero__slide.is-current video.poz-hero__img { transform: none; transition: none; }
.poz-hero__feather {
  position: absolute; pointer-events: none;
  box-shadow: inset 0 0 clamp(36px, 5vw, 80px) clamp(18px, 2.6vw, 40px) #fff;
}
.poz-hero__multi {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(14px, 2.2vw, 44px);
  padding: 5vh clamp(24px, 5vw, 80px) 9vh 18vw;
}
.poz-hero__cell { position: relative; height: 100%; max-height: 86vh; flex: 0 1 auto; min-width: 0; }
.poz-hero__cell video {
  height: 100%; width: auto; max-width: 100%; display: block;
  background: #fff;
  filter: contrast(1.02) saturate(0.97) brightness(1.07);
}
.poz-hero__cell .poz-hero__feather { inset: 0; }
@media (max-width: 1080px) {
  .poz-hero video.poz-hero__img { object-position: 50% 32%; }
  .poz-hero__multi { justify-content: center; padding: 9vh 5vw 34vh; gap: 4vw; }
  .poz-hero__cell { max-height: 52vh; }
  .poz-hero__cell:nth-child(3) { display: none; }
}

/* Hero copy choreography: each slide change re-runs a staged entrance keyed
   off .is-current, which the package toggles - no JS needed. Order: accent
   dash draws in, kicker settles its tracking, the title rises out of a
   bottom mask with a blur settle, then the lead, then the two buttons a
   beat apart. All on an expo-out ease; skipped for reduced motion (the
   package's own single crossfade remains). */
@media (prefers-reduced-motion: no-preference) {
  .poz-hero__copy.is-current .poz-hero__kicker span:first-child {
    transform-origin: 0 50%;
    animation: pozHeroDash 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
  }
  .poz-hero__copy.is-current .poz-hero__kicker span:last-child {
    animation: pozHeroKick 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
  }
  .poz-hero__copy.is-current .poz-hero__title {
    animation: pozHeroTitle 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
  }
  .poz-hero__copy.is-current .poz-hero__lead {
    animation: pozHeroUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both;
  }
  .poz-hero__copy.is-current .poz-hero__actions .poz-btn {
    animation: pozHeroUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .poz-hero__copy.is-current .poz-hero__actions .poz-btn:first-child { animation-delay: 0.74s; }
  .poz-hero__copy.is-current .poz-hero__actions .poz-btn:last-child { animation-delay: 0.86s; }
}
@keyframes pozHeroDash {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes pozHeroKick {
  from { opacity: 0; letter-spacing: 0.34em; }
  to   { opacity: 1; letter-spacing: 0.16em; }
}
@keyframes pozHeroTitle {
  from { opacity: 0; transform: translateY(36px); clip-path: inset(0 0 68% 0); filter: blur(8px); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -18% 0); filter: blur(0); }
}
@keyframes pozHeroUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Hero copy panel: the package's horizontal white wash is retired - it
   flattened the footage. In its place the copy block itself becomes a
   frosted-glass card: over the white ground it reads as barely-there, and
   the moment a product passes behind the text the backdrop blur turns it
   into legible frosted glass. A slim bottom wash stays for the rail. */
.poz-hero .poz-hero__veil {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 36%);
}
.poz-hero .poz-hero__copy {
  padding: clamp(22px, 2.4vw, 40px) clamp(24px, 2.6vw, 44px);
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
  border: 1px solid rgba(22, 23, 27, 0.07);
  border-radius: 4px;
  box-shadow: 0 24px 60px -30px rgba(22, 23, 27, 0.18);
}

/* Top alignment (Sven): every clip hangs from the top of the hero, so there
   is no empty crop band under the menu bar. Covers pin to the frame top;
   contained clips are pinned by place() (see poz-wp.js, T = 0); the multi
   rank hangs from the top likewise. */
.poz-hero video.poz-hero__img { object-position: 78% 0%; }
.poz-hero video.poz-hero__img[data-poz-fit="cover"] { object-position: 50% 0%; }
.poz-hero__multi { align-items: flex-start; padding-top: 2vh; }
@media (max-width: 1080px) {
  .poz-hero video.poz-hero__img { object-position: 50% 0%; }
}

/* Chrome: the utility strip is GONE (Sven, 2026-08-03). html:root outranks the
   package's :root token even though poz-tokens.css loads later, so zeroing it
   in poz-tokens.css alone would not have taken — this is the line that decides
   the header's top offset. */
html:root { --poz-utility-h: 0px; }

/* Asortiman head, compact: one balanced line above the accordion now that it
   sits directly under the hero - label left, claim centre-left, index right. */
.poz-asort { padding: clamp(26px, 2.6vw, 44px) 0 0; }
.poz-asort__head {
  display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 36px);
  padding-bottom: clamp(16px, 1.8vw, 26px);
}
.poz-asort__eyebrow {
  font-family: var(--poz-font-display); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--poz-text-2, #6b7078);
  white-space: nowrap;
}
.poz-asort__title {
  margin: 0; font: 400 clamp(17px, 1.7vw, 24px)/1.2 var(--poz-font-display);
  letter-spacing: 0.01em; color: var(--poz-text, #16171b);
}
.poz-asort__idx {
  margin-left: auto; font-family: var(--poz-font-mono, monospace); font-size: 11px;
  letter-spacing: 0.14em; color: var(--poz-text-2, #6b7078); white-space: nowrap;
}
@media (max-width: 700px) {
  .poz-asort__head { flex-wrap: wrap; gap: 8px 14px; }
  .poz-asort__idx { display: none; }
}

/* ============================================================================
   R2-K — O nama: animation-backed hero, stat band, editorial sections,
   working rules, GUIL band. The Elementor body no longer renders here.
   ========================================================================== */
.poz-onama-hero { position: relative; overflow: hidden; }
.poz-onama-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; filter: saturate(0.97) brightness(1.06); }
.poz-onama-hero__wash { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 46%, rgba(255,255,255,0.62) 100%); }
.poz-onama-hero .poz-wrap { position: relative; }
.poz-onama-brand { margin: 18px 0 0; font: 400 14px/1.6 var(--poz-font-body, sans-serif); color: var(--poz-text-2, #4a4e55); }
.poz-onama-brand a { color: inherit; }
.poz-onama-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--poz-line, #D8DAD6); border: 1px solid var(--poz-line, #D8DAD6);
  margin-top: clamp(30px, 4vw, 52px);
}
.poz-onama-stat { background: #fff; padding: 22px 20px 24px; }
.poz-onama-stat b { display: block; font: 400 clamp(26px, 3vw, 40px)/1.1 var(--poz-font-display, sans-serif); color: var(--poz-text, #16171b); }
.poz-onama-stat span { display: block; margin-top: 8px; font: 400 12.5px/1.55 var(--poz-font-body, sans-serif); color: var(--poz-text-3, #7c828c); max-width: 30ch; }
.poz-onama-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); max-width: 1100px; }
.poz-onama-cols p { margin: 0; font: 400 15.5px/1.75 var(--poz-font-body, sans-serif); color: var(--poz-text-2, #4a4e55); }
.poz-onama-rulegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.poz-onama-rule {
  border: 1px solid var(--poz-line, #D8DAD6); background: #fff; padding: 26px 24px 30px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.poz-onama-rule:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(14, 18, 32, 0.35); }
.poz-onama-rule__num { font: var(--poz-label, 600 10px/1 sans-serif); font-size: 10px; letter-spacing: 0.14em; color: var(--acc, var(--poz-text-3, #7c828c)); }
.poz-onama-rule h3 { margin: 14px 0 10px; font: 400 18px/1.3 var(--poz-font-display, sans-serif); color: var(--poz-text, #16171b); }
.poz-onama-rule p { margin: 0; font: 400 13.5px/1.65 var(--poz-font-body, sans-serif); color: var(--poz-text-3, #7c828c); }
.poz-onama-guil__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.poz-onama-guil__media { border: 1px solid var(--poz-line, #D8DAD6); background: #fff; }
.poz-onama-guil__media video { display: block; width: 100%; height: auto; }
.poz-onama-cta { margin: 26px 0 0 clamp(0px, 3vw, 34px); }
@media (max-width: 1000px) {
  .poz-onama-stats { grid-template-columns: repeat(2, 1fr); }
  .poz-onama-cols { grid-template-columns: 1fr; }
  .poz-onama-rulegrid { grid-template-columns: 1fr; }
  .poz-onama-guil__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .poz-onama-rule, .poz-onama-rule:hover { transform: none; }
}

/* ============================================================================
   R2-L — category pages: animation hero + extracted original content in the
   new design language (highlight cards, product grid, planner CTA).
   ========================================================================== */
.poz-cat-hero { position: relative; overflow: hidden; }
.poz-cat-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; filter: saturate(0.97) brightness(1.06); }
.poz-cat-hero__wash { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 46%, rgba(255,255,255,0.6) 100%); }
.poz-cat-hero .poz-wrap { position: relative; }
.poz-cat-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.poz-cat-hero__side img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.poz-cat-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.poz-cat-body { max-width: 70ch; }
.poz-cat-body p { margin: 0 0 14px; font: 400 15.5px/1.75 var(--poz-font-body, sans-serif); color: var(--poz-text-2, #4a4e55); }
.poz-cat-body p:last-child { margin-bottom: 0; }
.poz-cat-hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.poz-cat-hl__card { border: 1px solid var(--poz-line, #D8DAD6); background: #fff; padding: 24px 22px 26px; }
.poz-cat-hl__num { font: var(--poz-label, 600 10px/1 sans-serif); font-size: 10px; letter-spacing: 0.14em; color: var(--acc-ink, var(--poz-text-3, #7c828c)); }
.poz-cat-hl__card h3 { margin: 12px 0 8px; font: 400 17px/1.35 var(--poz-font-display, sans-serif); color: var(--poz-text, #16171b); }
.poz-cat-hl__card p { margin: 0; font: 400 13px/1.65 var(--poz-font-body, sans-serif); color: var(--poz-text-3, #7c828c); }
.poz-cat-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; margin-top: 30px; }
.poz-cat-prod {
  display: flex; flex-direction: column;
  border: 1px solid var(--poz-line, #D8DAD6); background: #fff; padding: 18px 18px 22px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.poz-cat-prod:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(14, 18, 32, 0.35); border-color: var(--acc, var(--poz-line)); }
.poz-cat-prod__img { aspect-ratio: 4 / 3; overflow: hidden; background: #F4F5F7; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.poz-cat-prod__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.poz-cat-prod:hover .poz-cat-prod__img img { transform: scale(1.05); }
.poz-cat-prod__name { margin: 0 0 8px; font: 400 17px/1.3 var(--poz-font-display, sans-serif); color: var(--poz-text, #16171b); }
.poz-cat-prod__desc { margin: 0 0 12px; font: 400 13px/1.6 var(--poz-font-body, sans-serif); color: var(--poz-text-2, #4a4e55); }
.poz-cat-prod__spec { display: block; margin-top: auto; padding-top: 10px; font: 400 11px/1.5 var(--poz-font-mono, monospace); color: var(--acc-ink, var(--poz-text-3, #7c828c)); text-transform: uppercase; letter-spacing: 0.04em; }
.poz-cat-prod__cta { display: inline-block; margin-top: 12px; font: var(--poz-label, 600 10px/1 sans-serif); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--poz-text, #16171b); text-decoration: none; border-bottom: 1px solid var(--poz-line, #D8DAD6); padding-bottom: 4px; width: max-content; transition: border-color 0.25s; }
.poz-cat-prod__cta:hover { border-color: var(--acc, var(--poz-text)); }
.poz-cat-prod__cta span { display: inline-block; transition: transform 0.25s; }
.poz-cat-prod__cta:hover span { transform: translateX(4px); }
@media (max-width: 980px) {
  .poz-cat-hero__grid { grid-template-columns: 1fr; }
  .poz-cat-hero__side { order: -1; }
  .poz-cat-hero__side img { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .poz-cat-prod, .poz-cat-prod:hover { transform: none; }
  .poz-cat-prod__img img, .poz-cat-prod:hover .poz-cat-prod__img img { transform: none; }
}


/* --------------------- 03b · CONFIGURATOR FILM (Sven, 2026-08-02) ----------
   The four konfigurator-*.mp4 clips run full-bleed, one after another, with
   the tool's name over them. Replaces the numbered row list AND the section
   headline — the film is the headline now.

   Rules the design depends on:
   · The stage is a direct child of the section, never inside .poz-wrap, so it
     runs edge to edge. Only .poz-conf__inner is put back on the page grid.
   · The clips have no `loop`. The band advances on `ended`, so looping would
     stop it dead.
   · Copy sits over a two-part darkening: a corner vignette for the frame and a
     bottom-left scrim for the type. Both are needed — the renders are dark in
     the middle and bright at the edges, so a single flat overlay either washes
     the picture or loses the text.
   -------------------------------------------------------------------------- */
.poz-conf { padding-top: 0; padding-bottom: 0; }
.poz-conf .poz-planner__grid,
.poz-conf .poz-planner__glow { z-index: 0; }

.poz-conf__stage {
  position: relative;
  width: 100%;
  height: clamp(460px, 78vh, 900px);
  overflow: hidden;
  background: #0B0C0F;
  isolation: isolate;
}
.poz-conf__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
}
.poz-conf__clip.is-on { opacity: 1; transform: scale(1); }

.poz-conf__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 88% at 62% 34%, transparent 42%, rgba(6,7,10,.55) 100%);
}
.poz-conf__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(to top, rgba(6,7,10,.92) 0%, rgba(6,7,10,.62) 26%, rgba(6,7,10,0) 62%),
    linear-gradient(to right, rgba(6,7,10,.78) 0%, rgba(6,7,10,0) 54%);
}

.poz-conf__inner {
  position: relative; z-index: 3;
  /* .poz-wrap is NOT border-box, so height:100% + padding made the overlay
     92px taller than the stage and pushed the rail outside overflow:hidden. */
  box-sizing: border-box;
  height: 100%;
  display: flex; flex-direction: column;
  padding-top: clamp(26px, 3.4vw, 54px);
  padding-bottom: clamp(20px, 2.4vw, 38px);
}
.poz-conf__eyebrow {
  margin: 0;
  font: var(--poz-eyebrow, 600 10px/1 sans-serif);
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}

/* ------------------------------------------------------------------ the copy
   All four are stacked in one grid cell so the band never changes height as
   the names change length; only opacity and a small rise move. */
.poz-conf__deck { position: relative; flex: 1 1 auto; min-height: 0; display: grid; align-items: end; }
.poz-conf__copy {
  grid-area: 1 / 1;
  max-width: 44ch;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.poz-conf__copy.is-on { opacity: 1; transform: none; pointer-events: auto; }
.poz-conf__name {
  margin: 0;
  font: 400 clamp(30px, 4.4vw, 68px)/1.06 var(--poz-font-display);
  letter-spacing: -0.005em;
  color: #fff;
}
.poz-conf__spec {
  margin: clamp(12px, 1.1vw, 18px) 0 0;
  font: 400 clamp(13px, 1.05vw, 17px)/1.55 var(--poz-font-body);
  color: rgba(255,255,255,.74);
}
.poz-conf__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(18px, 1.8vw, 30px);
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  color: #fff; text-decoration: none;
  font: 500 12px/1 var(--poz-font-display);
  letter-spacing: .11em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,.06);
  transition: background-color .3s, border-color .3s, color .3s;
}
.poz-conf__cta-a { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.poz-conf__cta:hover { background: #fff; border-color: #fff; color: var(--poz-ink, #101114); }
.poz-conf__cta:hover .poz-conf__cta-a { transform: translateX(5px); }

/* ------------------------------------------------------------------ the rail
   Four ticks, each a filling track. The fill IS the clip's progress, written
   by poz-wp.js on timeupdate — it doubles as the "how long until the next one"
   the auto-advance needs to be legible rather than abrupt. */
.poz-conf__rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 30px);
  margin-top: clamp(22px, 2.4vw, 40px);
}
.poz-conf__tick {
  position: relative; display: block; width: 100%;
  padding: 16px 0 0; border: 0; background: none; cursor: pointer;
  text-align: left; box-sizing: border-box;
  opacity: .5; transition: opacity .35s ease;
}
.poz-conf__tick:hover, .poz-conf__tick.is-on { opacity: 1; }
.poz-conf__tick-track {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(255,255,255,.2); overflow: hidden; display: block;
}
.poz-conf__tick-track i {
  display: block; height: 100%; width: 0;
  background: var(--acc-ink, #fff);
}
.poz-conf__tick-n {
  display: block;
  font: var(--poz-label, 600 10px/1 sans-serif); font-size: 10.5px;
  letter-spacing: .16em; color: var(--acc-ink, rgba(255,255,255,.7));
}
.poz-conf__tick-l {
  display: block; margin-top: 7px;
  font: 400 clamp(11.5px, .82vw, 14px)/1.35 var(--poz-font-display);
  color: rgba(255,255,255,.9);
}
.poz-conf__tick:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Counters keep their own band under the film.

   THE SPACE GOES ON THE WRAPPER, NOT ON .poz-counters. That element paints its
   own background in --poz-line-dark and relies on `gap: 1px` to show it as the
   hairline between cells — so padding on it does not create space, it paints a
   52px slab of hairline colour above and below the row. Which is exactly what
   it was doing: two grey bands across the foot of the film band.

   .poz-planner__inner is a transparent .poz-wrap and is the right place for it.
   Margin would also work, but it would collapse through the wrapper (no vertical
   padding or border on it) and the spacing would depend on the section's own
   padding rather than on this rule. */
.poz-conf .poz-planner__inner { padding-top: clamp(32px, 3vw, 52px); padding-bottom: clamp(32px, 3vw, 52px); }
.poz-conf .poz-planner__counters { margin-top: 0; padding-top: 0; padding-bottom: 0; }

@media (max-width: 900px) {
  .poz-conf__stage { height: clamp(420px, 74vh, 640px); }
  .poz-conf__scrim { background: linear-gradient(to top, rgba(6,7,10,.94) 0%, rgba(6,7,10,.5) 40%, rgba(6,7,10,0) 78%); }
  .poz-conf__copy { max-width: none; }
  /* Four labelled ticks do not fit; the numbers and the tracks do. */
  .poz-conf__rail { gap: 8px; }
  .poz-conf__tick-l { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .poz-conf__clip, .poz-conf__copy { transition-duration: .01ms; transform: none; }
  .poz-conf__clip.is-on { transform: none; }
}


/* ---------- 03c · O NAMA (Sven, 2026-08-02) ---------------------------------
   Sits after the configurator film and before the brands band — the light
   break between two dark ones.

   It was first built as a DARK bridge above the film, so the film continued
   out of it instead of slamming in. Sven moved it below the planners and back
   to the page ground, which changes its job: it is no longer a transition into
   anything, it is the breath between two dark bands. So: no .poz-dark, no
   background of its own, no negative margin, and no downward hand-off — the
   arrow that used to close it pointed at the film, which is now above it.

   Colour comes from tokens throughout, so the band is correct on the page
   ground without restating any of it.
   ------------------------------------------------------------------------- */
.poz-ona__in {
	display: grid;
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	align-items: end;
	gap: 0 clamp(30px, 5vw, 96px);
}

.poz-ona__k {
	display: block;
	font: 500 10.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--poz-text-2);
}
.poz-ona__t {
	margin: clamp(14px, 1.5vw, 24px) 0 0;
	font: 400 clamp(26px, 3.1vw, 52px)/1.06 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
	color: var(--poz-text);
	text-wrap: balance;
}
.poz-ona__lead {
	margin: 0;
	font: 400 clamp(15px, 1.25vw, 20px)/1.55 var(--poz-font-body, inherit);
	color: var(--poz-text-2);
	text-wrap: balance;
}

.poz-ona__figs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3.4vw, 60px);
	margin: clamp(20px, 2.2vw, 34px) 0 0;
	padding-top: clamp(16px, 1.8vw, 26px);
	border-top: 1px solid var(--poz-line);
}
.poz-ona__fig-n {
	font: 400 clamp(20px, 2vw, 32px)/1 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
	color: var(--poz-text);
}
.poz-ona__fig-l {
	margin: 8px 0 0;
	font: 400 10px/1.4 var(--poz-font-body, inherit);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--poz-text-2);
}

.poz-ona__more {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-top: clamp(18px, 2vw, 28px);
	font: 500 11px/1 var(--poz-font-body, inherit);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--poz-text);
	white-space: nowrap;
}
.poz-ona__a {
	font-style: normal;
	font-size: 15px;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.poz-ona__more:hover .poz-ona__a { transform: translateX(5px); }
.poz-ona__more:focus-visible { outline: 2px solid var(--acc-ink, currentColor); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.poz-ona__a { transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
	.poz-ona__in {
		grid-template-columns: 1fr;
		gap: clamp(20px, 3vw, 32px);
		align-items: start;
	}
	.poz-ona__t { font-size: clamp(22px, 5.4vw, 32px); }
	.poz-ona__lead { font-size: clamp(15px, 3.6vw, 18px); }
	.poz-ona__figs { gap: 16px 28px; }
}


/* ---------- 06 · SLJEDEĆI KORAK (Sven, 2026-08-02) --------------------------
   The closing enquiry band, on every page that ends in a call to action.

   It was four full-bleed rows at ~82px each — e-mail, phone, city, planner
   link — all set in Michroma at 27px, over a boxed three-cell fact grid. About
   900px of band, and four things at equal weight, which is a contact page
   rather than a call to action.

   Three tiers now, and each is thinner than the one above it:
     1. the claim left, the E-MAIL right, on one line;
     2. a hairline, then everything else as one quiet inline row;
     3. a hairline, then the three facts as one line — no boxes, no cells.

   The original principle is intact: no .poz-btn, the address IS the call to
   action. It is just no longer one of four equal rows — it is the only large
   interactive thing in the band, and the only one that takes the accent.

   Everything reads from tokens; .poz-dark on the section flips them and
   .poz-dark.poz-acc--* re-points --acc-ink at the tint twin, which is the only
   version of the accent legible on ink.
   ------------------------------------------------------------------------- */
.poz-nx { --nx-ease: cubic-bezier(.16, 1, .3, 1); }

/* ------------------------------------------------------------------ tier 1 */
.poz-nx__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: clamp(20px, 3vw, 64px);
	padding-bottom: clamp(20px, 2.4vw, 38px);
}
.poz-nx__t { min-width: 0; }
.poz-nx__k {
	display: block;
	font: 500 10.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--poz-text-2);
}
.poz-nx__h {
	margin: clamp(12px, 1.3vw, 20px) 0 0;
	max-width: 22ch;
	font: 400 clamp(21px, 2.3vw, 38px)/1.12 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
	color: var(--poz-text);
	text-wrap: balance;
}

/* The address IS the call to action — so it is the one thing here that is
   allowed to be big, and the only one that takes the accent. */
.poz-nx__mail {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: clamp(12px, 1.2vw, 20px);
	padding-bottom: 8px;
	text-decoration: none;
	color: var(--poz-text);
	white-space: nowrap;
}
.poz-nx__mail-v {
	font: 400 clamp(15px, 1.5vw, 25px)/1.1 var(--poz-font-display, inherit);
	letter-spacing: -.015em;
}
.poz-nx__mail::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--acc-ink, currentColor);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--nx-ease);
}
.poz-nx__mail:hover::after,
.poz-nx__mail:focus-visible::after { transform: scaleX(1); }

.poz-nx__a {
	font-style: normal;
	font-size: .8em;
	transition: transform .45s var(--nx-ease);
}
.poz-nx__mail:hover .poz-nx__a { transform: translateX(5px); }

/* ------------------------------------------------------------------ tier 2 */
.poz-nx__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 clamp(20px, 2.6vw, 46px);
	padding: clamp(13px, 1.4vw, 20px) 0;
	border-top: 1px solid var(--poz-line);
}
.poz-nx__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	font: 400 clamp(12px, .92vw, 14px)/1.3 var(--poz-font-body, inherit);
	letter-spacing: .03em;
	text-decoration: none;
	color: var(--poz-text-2);
	transition: color .35s ease;
}
.poz-nx__item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--nx-ease);
}
.poz-nx__item:hover,
.poz-nx__item:focus-visible { color: var(--poz-text); }
.poz-nx__item:hover::after,
.poz-nx__item:focus-visible::after { transform: scaleX(1); }
/* The planner link is the one errand in this row, so it reads as one. */
.poz-nx__item--go {
	margin-left: auto;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--poz-text);
}
.poz-nx__item--go:hover .poz-nx__a { transform: translateX(4px); }

/* ------------------------------------------------------------------ tier 3 */
.poz-nx__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 56px);
	margin: 0;
	padding: clamp(13px, 1.4vw, 20px) 0 0;
	border-top: 1px solid var(--poz-line);
}
.poz-nx__fact { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.poz-nx__fact-v {
	font: 400 clamp(12.5px, 1vw, 15px)/1.2 var(--poz-font-display, inherit);
	letter-spacing: -.01em;
	color: var(--poz-text);
	white-space: nowrap;
}
.poz-nx__fact-l {
	margin: 0;
	font: 400 9.5px/1.4 var(--poz-font-body, inherit);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--poz-text-2);
}

@media (prefers-reduced-motion: reduce) {
	.poz-nx__mail::after, .poz-nx__item::after, .poz-nx__a, .poz-nx__item {
		transition-duration: .01ms !important;
	}
	.poz-nx__a { transform: none !important; }
}

@media (max-width: 860px) {
	.poz-nx__top {
		grid-template-columns: 1fr;
		align-items: start;
		gap: clamp(16px, 3vw, 26px);
	}
	.poz-nx__h { max-width: none; font-size: clamp(20px, 5vw, 28px); }
	.poz-nx__mail { white-space: normal; }
	.poz-nx__mail-v { font-size: clamp(15px, 4.4vw, 21px); }
	.poz-nx__line { gap: 0 22px; }
	/* No room to push it to the far edge; let it sit in the flow. */
	.poz-nx__item--go { margin-left: 0; flex: 0 0 100%; }
	.poz-nx__facts { gap: 12px 26px; }
}


/* ---------- 04b · BRANDS RAIL (Sven, 2026-08-02) ----------------------------
   Five distributed brands, each leading to the category page it supplies.

   WHAT CHANGED, AND WHY IT LOOKS DIFFERENT

   · No outer box. The old version drew a border round the whole group and
     another between every card, so it read as five floating panels. Only the
     internal hairlines survive, which makes it one rail — the same grammar as
     the category accordion and the mega panel.
   · The logo is left-aligned and about half again as large. It used to float
     dead-centre in a 170px stage with nothing to hold it.
   · Every card ends by NAMING where it goes. That is the point of the rebuild:
     five brands, five different product pages, readable before the click.
   · Hover is the brand's own hue: the tick runs the card's full width, a wash
     rises from the foot, and the destination line lifts to full white.

   The tick's width is the transition, so it is set in px and animated on
   width — not scaleX — because it also has to line up with the card's padding
   at rest.
   ------------------------------------------------------------------------- */
.pzb {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	border-top: 1px solid var(--poz-line-dark);
	border-bottom: 1px solid var(--poz-line-dark);
}

.pzb__card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: clamp(18px, 1.8vw, 28px) clamp(16px, 1.6vw, 26px) clamp(16px, 1.6vw, 24px);
	border-right: 1px solid var(--poz-line-dark);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: background-color .45s cubic-bezier(.16, 1, .3, 1);
}
.pzb__card:last-child { border-right: 0; }
.pzb__card:hover { background-color: rgba(255, 255, 255, .03); }
.pzb__card:focus-visible { outline: 2px solid var(--bacc, #3E7BFA); outline-offset: -3px; }

/* The wash. Absolutely placed so it cannot affect the card's own height, and
   it rises from the foot because that is where the destination line sits. */
.pzb__card::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, var(--bacc, #3E7BFA), transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1);
}
.pzb__card:hover::before,
.pzb__card:focus-visible::before { opacity: .09; }

.pzb__tick {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--bacc, #3E7BFA);
	transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
.pzb__card:hover .pzb__tick,
.pzb__card:focus-visible .pzb__tick { width: 100%; }

.pzb__role {
	display: block;
	margin-top: clamp(14px, 1.4vw, 20px);
	font: 500 10px/1.45 var(--poz-font-body, inherit);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
}

/* Left-aligned, and it owns the space rather than floating in it. */
.pzb__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-height: clamp(78px, 8vw, 120px);
	padding: clamp(16px, 1.8vw, 28px) 0 clamp(14px, 1.6vw, 24px);
}
.pzb__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: clamp(20px, 1.9vw, 28px);
	object-fit: contain;
	object-position: left center;
	opacity: .78;
	transition: opacity .35s ease;
}
/* Square marks carry far less ink per pixel of height than a wordmark. */
.pzb__card.is-mark .pzb__logo { height: clamp(40px, 4.2vw, 62px); }
.pzb__card:hover .pzb__logo,
.pzb__card:focus-visible .pzb__logo { opacity: 1; }

.pzb__id {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.pzb__name {
	font: 400 clamp(15px, 1.25vw, 19px)/1.25 var(--poz-font-display, inherit);
	letter-spacing: .01em;
	color: #F2F4F6;
}
.pzb__origin {
	font: 500 10px/1 var(--poz-font-body, inherit);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
	white-space: nowrap;
}

/* The destination. Named, not implied. */
.pzb__go {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: clamp(12px, 1.3vw, 18px);
	padding-top: clamp(12px, 1.3vw, 18px);
	border-top: 1px solid var(--poz-line-dark);
}
.pzb__go-l {
	min-width: 0;
	font: 500 10.5px/1.35 var(--poz-font-body, inherit);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
	transition: color .35s ease;
}
/* "and n more categories", without the sentence. */
.pzb__go-m {
	font-style: normal;
	margin-left: 6px;
	padding: 2px 5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .08);
	font-size: 9px;
	letter-spacing: .06em;
	color: var(--poz-text-3, #8B929E);
}
.pzb__go-a {
	font-style: normal;
	font-size: 13px;
	color: var(--poz-text-3, #8B929E);
	transition: transform .45s cubic-bezier(.16, 1, .3, 1), color .35s ease;
}
.pzb__card:hover .pzb__go-l,
.pzb__card:focus-visible .pzb__go-l { color: #FFFFFF; }
.pzb__card:hover .pzb__go-a,
.pzb__card:focus-visible .pzb__go-a { color: #FFFFFF; transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	.pzb__card, .pzb__card::before, .pzb__tick, .pzb__logo,
	.pzb__go-l, .pzb__go-a {
		transition-duration: .01ms !important;
	}
	.pzb__go-a { transform: none !important; }
}

@media (max-width: 1100px) {
	.pzb__role { font-size: 9.5px; letter-spacing: .1em; }
	.pzb__go-l { font-size: 9.5px; letter-spacing: .09em; }
}

@media (max-width: 900px) {
	/* Five columns at phone width is 70px each. Two up, and the last one runs
	   full width rather than leaving a half-empty cell. */
	.pzb { flex-wrap: wrap; border-left: 1px solid var(--poz-line-dark); border-right: 1px solid var(--poz-line-dark); }
	.pzb__card {
		flex: 1 1 50%;
		border-right: 1px solid var(--poz-line-dark);
		border-bottom: 1px solid var(--poz-line-dark);
	}
	.pzb__card:nth-child(2n) { border-right: 0; }
	.pzb__card:last-child { flex-basis: 100%; border-right: 0; border-bottom: 0; }
	.pzb__stage { min-height: 70px; }
	.pzb__logo { height: 22px; }
	.pzb__card.is-mark .pzb__logo { height: 44px; }
}


/* ---------- 01b · ASORTIMAN HEAD (Sven, 2026-08-02) -------------------------
   The head above the nine-panel accordion. THE ACCORDION IS UNCHANGED — only
   the text above it.

   THE COUNT IS DELIBERATELY GONE. It used to be everywhere in this head: a
   hollow "09" as the opening gesture, "Devet kategorija" as the claim, and
   "01 — 09" pushed right. Three restatements of a number that is not the
   selling point, on a section whose job is to send people into the products.
   The strip below still prints 01–09 on its own panels; that is enough.

   What is left is a rule, a label, a claim about the RANGE rather than its
   size, one line naming what is actually in it, and a route out.

   Two columns, bottom-aligned: the claim carries the section on the left, the
   lead and the link sit opposite it. Same grammar as the brands band head, so
   the page keeps one shape for "here is a set of things".
   ------------------------------------------------------------------------- */
.poz-asort__head {
	display: grid;
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	align-items: end;
	gap: 22px clamp(30px, 5vw, 88px);
	padding: clamp(22px, 2.4vw, 40px) 0 clamp(18px, 2vw, 32px);
	--pzah-ease: cubic-bezier(.16, 1, .3, 1);
}

.poz-asort__t { min-width: 0; }

/* A rule, not a numeral. */
.poz-asort__eyebrow2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 10.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--poz-text-2, #5F6772);
}
.poz-asort__eyebrow2 i {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--acc-stage-decks, #0066CC);
	flex: 0 0 auto;
}

.poz-asort__h {
	margin: clamp(13px, 1.4vw, 21px) 0 0;
	font: 400 clamp(24px, 2.9vw, 48px)/1.05 var(--poz-font-display, inherit);
	letter-spacing: -.024em;
	color: var(--poz-text, #16171B);
	text-wrap: balance;
}

.poz-asort__r { padding-bottom: 5px; }
.poz-asort__lead {
	margin: 0;
	font: 400 clamp(13.5px, 1.02vw, 16.5px)/1.65 var(--poz-font-body, inherit);
	color: var(--poz-text-2, #5F6772);
}

.poz-asort__go {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-top: clamp(14px, 1.6vw, 24px);
	padding-bottom: 7px;
	font: 500 11px/1 var(--poz-font-body, inherit);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--poz-text, #16171B);
	white-space: nowrap;
}
.poz-asort__go::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--acc-stage-decks, #0066CC);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--pzah-ease);
}
.poz-asort__go:hover::after,
.poz-asort__go:focus-visible::after { transform: scaleX(1); }
.poz-asort__go i {
	font-style: normal;
	font-size: 14px;
	transition: transform .45s var(--pzah-ease);
}
.poz-asort__go:hover i { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	.poz-asort__go::after, .poz-asort__go i { transition-duration: .01ms !important; }
	.poz-asort__go i { transform: none !important; }
}

@media (max-width: 900px) {
	.poz-asort__head {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 16px;
	}
	.poz-asort__h { font-size: clamp(21px, 5.6vw, 30px); }
	.poz-asort__r { padding-bottom: 0; }
	.poz-asort__lead { font-size: 14px; }
}


/* ---------- 03d · COUNTERS ON THE FILM (Sven, 2026-08-02) -------------------
   "Can this section also be transparent to see video behind it."

   It could not, as it stood: the counters sit BELOW .poz-conf__stage, so making
   them transparent would have shown the section's own ink, not the clip. To get
   video behind them the band has to ride ON the stage.

   THE TRICK IS THAT NOTHING ELSE MOVES. One length, --pzc-band, does three jobs:

     · the stage grows by exactly that much, so there is new picture to sit on;
     · .poz-conf__inner takes the same amount of extra bottom padding, so the
       planner tab rail keeps its old distance from the foot of the film;
     · .poz-planner__inner is pulled back up by the same amount, into the new
       strip.

   Net section height is unchanged, and the rail does not shift by a pixel.

   The cells are GLASS, not merely transparent. A clear cell over a moving
   picture makes the numerals unreadable half the time; a dark translucent fill
   with a blur behind it holds the type steady whatever frame is playing. The
   1px hairline grid is now white-at-low-alpha instead of --poz-line-dark,
   which over video was invisible.

   REMEMBER: .poz-counters uses its own background as the gap colour, so this
   block must never put padding on it — that paints a slab. See
   PLANNER-COUNTERS-FIX.md.
   ------------------------------------------------------------------------- */
.poz-conf { --pzc-band: clamp(148px, 15vw, 190px); }

.poz-conf .poz-conf__stage {
	height: calc(clamp(460px, 78vh, 900px) + var(--pzc-band));
}
.poz-conf .poz-conf__inner {
	padding-bottom: calc(38px + var(--pzc-band));
}

/* Up into the strip, above the stage's own layers. */
.poz-conf .poz-planner__inner {
	position: relative;
	z-index: 4;
	margin-top: calc(-1 * var(--pzc-band));
	height: var(--pzc-band);
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}
.poz-conf .poz-planner__counters {
	width: 100%;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	background: rgba(255, 255, 255, .14);          /* the hairline grid */
	border-color: rgba(255, 255, 255, .14);
}
.poz-conf .poz-counters__cell {
	background: rgba(9, 10, 13, .46);
	-webkit-backdrop-filter: blur(16px) saturate(125%);
	backdrop-filter: blur(16px) saturate(125%);
}
/* No backdrop-filter (older Firefox, forced-colors): fall back to a fill dark
   enough to carry the type on its own, rather than leaving it over live video. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.poz-conf .poz-counters__cell { background: rgba(9, 10, 13, .86); }
}

@media (max-width: 900px) {
	/* auto-fit drops the row to 2×2 below ~380px per cell, which is twice the
	   height — the strip has to follow or the second row lands off the film. */
	.poz-conf { --pzc-band: clamp(210px, 46vw, 268px); }
}

/* TOUCH TARGET (2026-09-10): a standalone CTA measured 22px tall on a phone.
   The underline is the affordance, so the height goes above the text only. */
@media (max-width: 600px) {
  .poz-brands2__cta { padding-top: 17px; font-size: 11px; }
}

/* Mobile hero: one shared media frame and a stable copy row for every category. */
@media (max-width: 900px) {
  .home main#top > .poz-hero {
    display: grid; height: auto !important; min-height: 0 !important;
    padding: 80px 0 24px !important;
  }
  .home .poz-hero::before { content: ""; display: block; grid-area: 1 / 1; aspect-ratio: 16 / 9; }
  .home .poz-hero .poz-hero__slide {
    inset: 80px 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .home .poz-hero .poz-hero__slide .poz-hero__img {
    inset: 0 !important; width: 100% !important; height: 100% !important;
    object-fit: contain !important; object-position: 50% 50% !important;
    transform: none !important;
  }
  .home .poz-hero .poz-hero__feather,
  .home .poz-hero .poz-hero__veil { display: none; }
  .home .poz-hero .poz-hero__copy {
    position: relative; inset: auto; grid-area: 2 / 1;
    align-self: start; min-width: 0; max-width: none;
    margin: 20px 20px 0;
  }
}