/* pozornice.hr — footer (design v2)
   Four stacked bands on the dark ground, separated by hairlines:
     1  statement — lockup, accent rule + mono eyebrow, claim, white CTA
     2  links     — four accented columns, one hairlined row per link
     3  attribution — "brend tvrtke" + the LumiLas mark, distributor line
     4  legal     — copyright and the two legal pages

   Requires poz-tokens.css. Loads AFTER poz-chrome.css, so it may override it;
   every override is marked OVERRIDE and says what it is overriding and why.

   VALUES: no literal colour, font, spacing, radius, duration or easing. Where
   the design's literal has no token, the nearest token is used and the literal
   is recorded as `was: …`. Breakpoints stay literal (var() is not usable in a
   media query), and so do ratios — line heights, `ch` measures, opacities and
   scale factors are proportions, not design values.

   SPECIFICITY: poz-chrome.css carries `.poz-footer a { … }` at (0,1,1), which
   outranks a bare `.poz-footer__…` class at (0,1,0) regardless of load order.
   Every rule below that sets colour or transition on a link is therefore
   written as `.poz-footer a.poz-footer__…` to clear it. */

/* ================================ GROUND ================================ */

/* OVERRIDE — poz-chrome.css declares `.poz-footer { background: var(--poz-ink-2) }`
   and then, further down the same file, `.poz-dark { background: var(--poz-ink);
   color: #FFFFFF }`. The footer carries both classes, so .poz-dark wins the tie
   and the footer would land on the darkest surface in white. Design v2 keeps it
   on --poz-ink-2 with grey as the resting ink. */
.poz-footer.poz-dark {
  background: var(--poz-ink-2);
  color: var(--poz-text-3);
}

/* OVERRIDE — poz-chrome.css sets the band measure to 2040px and the padding to
   clamp(40px, 4vw, 72px). Design v2 uses the --poz-max measure shared with every
   other page band, and a taller vertical rhythm. */
.poz-footer__band {
  max-width: var(--poz-max);
  margin: 0 auto;
  padding: clamp(var(--poz-7), 5vw, var(--poz-9)) var(--poz-gutter);
  /* --poz-gutter IS the design's horizontal clamp. Vertically the cap is
     --poz-9 (96px), not --poz-8: measured against the design, band 1 runs about
     300px tall on a 1456px viewport and the earlier 64px cap made the whole
     footer read ~30% tighter than drawn. 5vw is a ratio and stays literal. */
}

/* The hairline between bands comes from poz-chrome.css
   (`.poz-footer__band + .poz-footer__band`) and is already --poz-line-dark.
   Nothing to restate. */

/* ========================== BAND 1 — STATEMENT ========================== */

/* The statement rule is the same green as the KONTAKT column in the design,
   not the default blue accent. It is a graphic, so the pure hue is correct. */
.poz-footer__band--statement { --acc: var(--acc-truss); }

.poz-footer__band--statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--poz-7);   /* was: 40px — --poz-6 (32px) and --poz-7 (48px) sit either
                          side of it; the larger one keeps the CTA clear of the
                          claim when the claim runs long. */
  align-items: center;
}
@media (max-width: 900px) {   /* --poz-bp-mobile */
  .poz-footer__band--statement {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

.poz-footer__logo,
.poz-footer__logo img {
  display: block;
  height: var(--poz-logo-h-sm);   /* 44px. Declared on both the element and any
                                     nested <img> so the lockup gets its height
                                     whichever one carries the class. */
  width: auto;
}

.poz-footer__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--poz-3);                          /* was: 12px — exact */
  margin: var(--poz-8) 0 0;                   /* 64px. The design leaves the mark
                                                 standing clear above the block;
                                                 32px read as a stacked pair. */
  font: var(--poz-label);                     /* was: 400 9px/1.5 mono —
                                                 --poz-label is 9px/1.6 */
  letter-spacing: var(--poz-track-eyebrow);   /* 0.16em — exact. The design sets
                                                 its mono micro-labels at 0.16em,
                                                 not the 0.20em of
                                                 --poz-track-mono. */
  text-transform: uppercase;
  color: var(--poz-text-3);
}

/* The short accent rule, in band 1 and at the head of every band-2 column.
   It is a GRAPHIC, so it carries --acc, the pure hue. Accent-coloured TEXT in
   this footer would have to use --acc-ink, which poz-tokens.css rebinds to the
   tint twin under .poz-dark — there is none, by design: every label here is
   --poz-text-3 and only the rules are coloured. */
.poz-footer__rule {
  flex: 0 0 auto;
  display: block;
  width: var(--poz-4);        /* was: 18px — --poz-4 is 16px */
  height: var(--poz-spine);   /* 2px — exact */
  background: var(--acc, var(--poz-accent));
}

.poz-footer__claim {
  margin: var(--poz-5) 0 0;                   /* was: 24px — exact */
  max-width: 26ch;                            /* measure (ratio) — breaks the
                                                 claim after "Europska", as drawn */
  font: 400 calc(var(--poz-h3) * 1.28)/1.24 var(--poz-font-display);
  /* Measured against the design, the claim runs about 1.28x --poz-h3's cap.
     Expressed as a multiple of the token rather than a new literal, so it still
     tracks the type scale if that scale moves. */
  letter-spacing: var(--poz-track-title);     /* 0.02em — exact */
  color: var(--poz-text-on-dark);
}

/* The white-filled CTA. Geometry, radius, type, tracking and the press
   transform all come from .poz-btn in poz-tokens.css — this is only the
   inverted colour scheme, so the variant is four declarations plus its states.
   Written at (0,2,1) / (0,3,1) to clear poz-chrome's `.poz-footer a`. */
.poz-footer a.poz-footer__cta {
  gap: var(--poz-2);                       /* was: none in .poz-btn — the design
                                              sets the arrow 8px off the label */
  height: var(--poz-8);                    /* 64px — the design's button is a
                                              larger target than the 54px .poz-btn */
  padding-inline: var(--poz-7);
  background: var(--poz-text-on-dark);     /* was: #FFFFFF — exact */
  border-color: var(--poz-text-on-dark);
  color: var(--poz-ink);
  /* was: #16171B, which is the base value of --poz-text. .poz-dark rebinds
     --poz-text to white for everything inside the footer, so the dark ink has
     to be named directly. */
  white-space: nowrap;
}
.poz-footer a.poz-footer__cta:hover,
.poz-footer a.poz-footer__cta:focus-visible {
  background: var(--poz-plate);
  border-color: var(--poz-plate);
  color: var(--poz-ink);
  /* was: #D9DEE5. --poz-line (#DFE3E7) is the nearer value, but .poz-dark
     rebinds --poz-line to the dark hairline, which would turn the button black
     on hover. --poz-plate (#E9ECEF) is not rebound by .poz-dark. */
}
.poz-footer a.poz-footer__cta:active {
  background: var(--poz-plate);
  border-color: var(--poz-plate);
  color: var(--poz-ink);
  transform: scale(0.98);   /* ratio */
}
.poz-footer__cta-arrow {
  transition: transform var(--poz-dur-press) var(--poz-ease);
}
.poz-footer a.poz-footer__cta:hover .poz-footer__cta-arrow {
  transform: translateX(var(--poz-1));   /* was: 6px — --poz-1 is 4px */
}

/* ======================== BAND 2 — LINK COLUMNS ======================== */

/* OVERRIDE — poz-chrome.css lays .poz-footer__cols out with
   repeat(auto-fit, minmax(190px, 1fr)), which reflows to five or six tracks on
   a wide screen. Design v2 is a fixed four-up so the columns line up with the
   statement band above them. */
.poz-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--poz-7);   /* was: 40px — see band 1 */
}
@media (max-width: 900px) {   /* --poz-bp-mobile */
  .poz-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {   /* below the two-up the columns are too narrow for
                                 the longest category names */
  .poz-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

/* The column head is one line: rule, gap, label. The three children are
   siblings in the markup, so the column becomes a two-track grid and the list
   spans both — no markup change needed. */
.poz-footer__col {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  /* The columns are stretched to the tallest by the parent grid. Without this,
     align-items:center distributes the slack inside the SHORT columns too, so
     KONTAKT (3 links) floated lower than SCENSKA OPREMA (5). Pack the rows to
     the top and let align-items only do its job across each row. */
  align-content: start;
  column-gap: var(--poz-3);
}
.poz-footer__col .poz-footer__rule { grid-column: 1; }

.poz-footer__collabel {
  grid-column: 2;
  justify-self: start;
  margin-top: 0;
  font-family: var(--poz-font-mono);
  font-size: var(--poz-spec-size);            /* 12px, not 9px — the design sets
                                                 these labels close to link size */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--poz-track-mono);      /* 0.20em — wider than the 0.16em
                                                 used elsewhere; the design spaces
                                                 these labels noticeably */
  text-transform: uppercase;
  color: var(--poz-text-3);
}

.poz-footer__links {
  grid-column: 1 / -1;
  /* The column's align-items:center is there for the head row; without this the
     list gets centred in its own track too, so a 3-item column starts lower
     than a 5-item one. */
  align-self: start;
  margin: var(--poz-5) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--poz-line-dark-soft);   /* same weight as the row
                                      rules, so the head reads as part of the set */
}

.poz-footer a.poz-footer__link {
  display: block;
  padding: var(--poz-4) 0;                  /* 16px — holds the ~50px row pitch now
                                               that the row is set in Michroma 12 */
  /* Hairlines are --poz-line-dark-soft (#1E2127), not --poz-line-dark (#24272D)
     which is what var(--poz-border) resolves to under .poz-dark. On the #101114
     ground the softer token is roughly half the contrast — present, but reading
     as separation rather than as a table. */
  border-bottom: 1px solid var(--poz-line-dark-soft);
  font: var(--poz-card-title);              /* Michroma. The design language sets
                                               the display face for navigation and
                                               reserves Plex Sans for body copy;
                                               footer links are navigation. */
  letter-spacing: var(--poz-track-title);
  color: var(--poz-text-3);
  transition: color var(--poz-dur-hover) var(--poz-ease),
              padding-left var(--poz-dur-hover) var(--poz-ease);
}
/* With the row rules gone the hover is the slide and the lift to white — no
   accent, because the only thing left to carry it would be the text itself, and
   accent-coloured text on this ground fails contrast. */
.poz-footer a.poz-footer__link:hover,
.poz-footer a.poz-footer__link:focus-visible {
  color: var(--poz-text-on-dark);
  padding-left: var(--poz-2);   /* was: 6px — --poz-2 is 8px */
}

/* ================= BANDS 3 & 4 — ATTRIBUTION AND LEGAL ================= */

.poz-footer__band--attribution,
.poz-footer__band--legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--poz-4) var(--poz-6);   /* was: 14px 40px — --poz-4 is 16px;
                                       --poz-6 (32px) is the nearer of the two
                                       tokens flanking 40px in a row that wraps */
  padding-block: var(--poz-5);      /* was: 22px — --poz-5 is 24px. These two
                                       bands are shorter than the two above. */
}

.poz-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--poz-4);   /* was: 16px — exact */
}

/* Pushes the distributor line in band 3 to the trailing edge. Collapses
   harmlessly once the row wraps. */
.poz-footer__spacer { margin-left: auto; }

/* Band 4 reads as one legal sentence in the design — copyright and both links
   together on the leading edge. The shared .poz-footer__spacer would split it. */
.poz-footer__band--legal .poz-footer__spacer { margin-left: 0; }

.poz-footer__partner { display: block; }
.poz-footer__partner img {
  display: block;
  height: var(--poz-6);   /* 32px — it is the parent company's mark, and at 24px
                             it read as a footnote next to its own label */
  width: auto;
  opacity: 0.9;           /* ratio — was 0.75, which made a live link look
                             disabled on this ground */
  transition: opacity var(--poz-dur-hover) var(--poz-ease);
}
.poz-footer a.poz-footer__partner:hover img,
.poz-footer a.poz-footer__partner:focus-visible img { opacity: 1; }

/* The mono uppercase micro-labels of bands 3 and 4.
   The design sets these in #3D434C. That is --poz-text-muted-dark, which
   poz-tokens.css reserves for "hairlines and decorative glyphs ONLY — never
   text of any size" (1.95:1 on this ground). They are set in --poz-text-3
   (6.2:1) instead. See inc/FOOTER-NOTES.md. */
.poz-footer__meta {
  font: var(--poz-label);                     /* was: 400 9px/1.5 mono */
  letter-spacing: var(--poz-track-eyebrow);   /* 0.16em — exact */
  text-transform: uppercase;
  color: var(--poz-text-3);
}
.poz-footer a.poz-footer__meta {
  color: var(--poz-text-3);
  transition: color var(--poz-dur-hover) var(--poz-ease);
}
.poz-footer a.poz-footer__meta:hover,
.poz-footer a.poz-footer__meta:focus-visible { color: var(--poz-text-on-dark); }

/* The focus ring itself is poz-tokens.css's. It keys off [data-dark], which the
   <footer> carries, so it resolves to --poz-accent-tint here rather than the
   full-strength accent. Nothing to declare. */

/* ===================== BAND 3 — DISTRIBUTED BRANDS ===================== */

/* The five marks sit on their own line under the distributor statement they
   belong to. flex-basis:100% breaks them out of the band's row; the band is
   already flex-wrap:wrap, so no change is needed there. */
.poz-footer__brands {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--poz-5) var(--poz-8);
  margin-top: var(--poz-5);
}
@media (max-width: 900px) {   /* --poz-bp-mobile */
  .poz-footer__brands { justify-content: flex-start; gap: var(--poz-5) var(--poz-6); }
}

/* Artwork is already light-on-dark, so nothing is inverted here. It rests
   below full strength so the marks read as a set rather than competing with
   the wordmark above them, and comes up on hover. */
.poz-footer__blogo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.poz-footer__blogo img {
  display: block;
  /* A definite height, not max-height: an <img> that has not loaded yet and has
     no width/height attributes lays out at 0x0, so the lazy-load observer never
     fires and it never loads. Height fixes the box; width resolves after. */
  height: var(--poz-6);       /* 32px — the lockup beside it is 44px, so the
                                 partner marks stay subordinate to the brand */
  max-width: calc(var(--poz-10) + var(--poz-1));   /* 132px */
  width: auto;
  object-fit: contain;
  opacity: 0.62;   /* ratio */
  transition: opacity var(--poz-dur-hover) var(--poz-ease);
}
.poz-footer__blogo:hover img { opacity: 1; }


/* ============================================================================
   BAND 1 — STATEMENT, rebuilt as a LIGHT CAP  (Sven, 2026-08-02)

   "Svjetski brendovi. Europska proizvodnja. Lokalna podrška." used to be a dark
   band inside the dark footer: wordmark, eyebrow, claim and a filled button, in
   a two-column grid about 300px tall, with the five distributor marks stranded
   in the attribution band further down.

   It is now a light cap on top of the footer, in TWO tiers:
     1. the wordmark left, the CTA right;
     2. a hairline, then the claim left and the five marks beside it on the
        right.

   PUTTING THE MARKS NEXT TO THE CLAIM IS WHAT MAKES IT SLIM. On their own line
   they cost a third tier and could only be set small enough not to dominate it;
   in the second column they share the claim's height, so they are set nearly
   twice as large and the band still lost ~100px.

   THE FOOTER ELEMENT IS .poz-dark, so this band has to invert the token set the
   same way .poz-dark sets it — --poz-text, --poz-text-2, --poz-line — not just
   paint a white background and hope. Anything nested that reads a token then
   gets the light values.

   THE MARKS ARE A DIFFERENT SET OF FILES, not the same ones re-filtered.
   243–247 are the "-fordark" artwork (light ink); 129/132/128/127/126 are the
   originals, drawn in dark ink. poz_brand_logos('on-light') picks the second
   set. Do not invert() the first set — see the note in data-chrome.php.

   .poz-footer__band is a centred max-width box, so the band is made full-bleed
   here and .pzf__in puts the content back on the grid — otherwise the white
   would stop at the measure and read as a floating card.

   The old .poz-footer__logo / __eyebrow / __claim / __cta rules are dead with
   this markup and are left in place so a rollback is a one-file revert.
   ========================================================================= */
.poz-footer__band--statement {
	display: block;
	max-width: none;
	padding: 0;
	background: #FFFFFF;
	color: var(--poz-ink, #0C0D10);
	--poz-text: var(--poz-ink, #0C0D10);
	--poz-text-2: #5F6772;
	--poz-line: rgba(22, 23, 27, .12);
	--acc: var(--acc-truss);
	--pzf-ease: cubic-bezier(.16, 1, .3, 1);
}

.pzf__in {
	max-width: var(--poz-max);
	margin: 0 auto;
	padding: clamp(22px, 2.4vw, 36px) var(--poz-gutter) clamp(22px, 2.6vw, 38px);
}

/* ------------------------------------------------------------------ tier 1 */
.pzf__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 24px;
}
.pzf__logo,
.pzf__logo img {
	display: block;
	height: clamp(20px, 1.9vw, 27px);
	width: auto;
}

.pzf__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	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);
	white-space: nowrap;
}
.pzf__cta::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--acc);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--pzf-ease);
}
.pzf__cta:hover::after,
.pzf__cta:focus-visible::after { transform: scaleX(1); }
.pzf__cta i {
	font-style: normal;
	font-size: 14px;
	transition: transform .45s var(--pzf-ease);
}
.pzf__cta:hover i { transform: translateX(5px); }

/* ------------------------------------------------------------------ tier 2 */
/* ONE COLUMN SINCE 2026-08-03. The right column was the five distributor
   marks; they are on the tail line now (Sven), so the claim has the row to
   itself and can run to the measure instead of stopping at 45%. The grid and
   the .pzf__brands rules below are dead with that markup and are left in place
   so a rollback is a one-file revert. */
.pzf__row {
	margin-top: clamp(16px, 1.8vw, 26px);
	padding-top: clamp(16px, 1.8vw, 26px);
	border-top: 1px solid var(--poz-line);
}
.pzf__row .pzf__claim { max-width: 22ch; }
.pzf__t { min-width: 0; }

.pzf__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 500 10px/1 var(--poz-font-body, inherit);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--poz-text-2);
}
.pzf__rule {
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--acc);
	flex: 0 0 auto;
}
.pzf__claim {
	margin: clamp(11px, 1.2vw, 17px) 0 0;
	font: 400 clamp(19px, 1.95vw, 31px)/1.12 var(--poz-font-display, inherit);
	letter-spacing: -.02em;
	color: var(--poz-text);
	text-wrap: balance;
}

/* The wall shares the claim's height rather than taking a line of its own,
   which is what buys the size. */
.pzf__brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(14px, 1.9vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pzf__brand { display: flex; align-items: center; }
/* A definite height, and no loading="lazy": an <img> with neither lays out at
   0×0, never intersects the viewport, and so never loads — which is exactly
   how the footer marks went missing once before. */
.pzf__brand img {
	display: block;
	width: auto;
	height: clamp(18px, 1.8vw, 26px);
	opacity: .72;
	filter: grayscale(1);
	transition: opacity .35s ease, filter .35s ease;
}
/* Square marks carry far less ink per pixel of height than a wordmark, so they
   are sized larger to read at the same optical weight. PHP marks which is
   which from the artwork's own aspect ratio. */
.pzf__brand.is-mark img { height: clamp(34px, 3.4vw, 50px); }
/* The wall dims and the one under the pointer comes up. */
.pzf__brands:hover .pzf__brand img { opacity: .34; }
.pzf__brands .pzf__brand:hover img { opacity: 1; filter: none; }

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

@media (max-width: 1100px) {
	.pzf__row { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
	.pzf__brand img { height: clamp(16px, 1.7vw, 21px); }
	.pzf__brand.is-mark img { height: clamp(30px, 3.2vw, 40px); }
}

@media (max-width: 860px) {
	.pzf__row {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 22px;
	}
	.pzf__claim { font-size: clamp(19px, 5vw, 26px); }
	.pzf__brands { justify-content: flex-start; gap: 16px 26px; }
	.pzf__brand img { height: 17px; }
	.pzf__brand.is-mark img { height: 30px; }
}


/* ============================================================================
   BANDS 2–4 — CONTACT-FIRST, rebuilt  (Sven, 2026-08-02)

   The footer was 932px tall for 17 links and two lines of legal text. Bands:
   statement 260 · links 479 · attribution 81 · legal 111. It is now ~574px,
   and nothing was removed — every link, the Lumilas mark, the distributor
   line and both legal pages are all still there.

   THREE THINGS DID THE WORK.

   1  KONTAKT STOPPED PRETENDING TO BE A LINK COLUMN. Three rows — an address,
      a phone number and a CTA — set in the same 14px grey as "Truss i rigging"
      is not a contact block, it is a short column with a hole under it. The
      email is now display type, the phone sits under it, the city and hours
      are one grey line, and the quote CTA carries the green accent rule. Four
      things of four different weights read as an address block; four things of
      one weight read as a list that ran out.

   2  THE PER-LINK HAIRLINES WENT. Seventeen links each drew their own 1px rule
      plus 12px of padding either side of it: ~400px of the old band was rules
      and the air they need. One hairline per column label does the same job.
      Hover moves the colour to white instead of shifting the row 8px right.

   3  ATTRIBUTION AND LEGAL MERGED. Two bands, 192px between them, carrying six
      short items in one type size. They are one row now: the Lumilas mark and
      the distributor line lead, copyright and the two legal pages trail.

   Column bottoms come out near level as a side effect — 5 / 4 / 5 rows against
   a contact block of its own height, instead of 3 / 5 / 4 / 5 with the short
   one first.

   .poz-footer__band's own clamp(48px, 5vw, 96px) block padding is overridden
   per band below. It is left alone on the statement band, which sets its own.

   The old .poz-footer__cols / __col / __rule / __collabel / __links / __link
   and the __brand / __partner / __meta / __spacer rules are dead with this
   markup and are left in place so a rollback is a one-file revert.
   ========================================================================= */

/* -------------------------------------------------------------- band 2 */
.poz-footer__band--links {
	padding-block: clamp(32px, 3.2vw, 50px) clamp(26px, 2.6vw, 38px);
}

.pzq-b {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	gap: clamp(28px, 4vw, 80px);
}

/* The label. One rule per column, in the column's own accent, instead of one
   rule per link in a neutral grey. */
.pzq-lab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font: 500 10px/1 var(--poz-font-body, inherit);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
}
.pzq-lab i {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--acc);
	flex: 0 0 auto;
}

/* ---------------------------------------------- the contact block, left */
.pzq-ct { min-width: 0; }

.pzq-mail {
	display: block;
	font: 400 clamp(17px, 1.5vw, 23px)/1.2 var(--poz-font-display, inherit);
	letter-spacing: -.01em;
	color: #F2F4F6;
	text-decoration: none;
	transition: color .3s ease;
	overflow-wrap: anywhere;
}
.pzq-tel {
	display: block;
	margin-top: 9px;
	font: 400 15px/1.3 var(--poz-font-body, inherit);
	color: var(--poz-text-2, #98A0AC);
	text-decoration: none;
	transition: color .28s ease;
}
.pzq-mail:hover, .pzq-mail:focus-visible,
.pzq-tel:hover,  .pzq-tel:focus-visible { color: #FFFFFF; }

.pzq-loc {
	display: block;
	margin-top: 9px;
	font: 400 13px/1.45 var(--poz-font-body, inherit);
	color: var(--poz-text-3, #8B929E);
}

.pzq-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding-bottom: 7px;
	font: 500 10.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	white-space: nowrap;
}
/* Drawn at rest, unlike the CTAs in the light cap: this one is the footer's
   only call to action and has no headline above it to lend it weight. */
.pzq-cta::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--acc-truss);
}
.pzq-cta i {
	font-style: normal;
	font-size: 13px;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pzq-cta:hover i, .pzq-cta:focus-visible i { transform: translateX(5px); }

/* --------------------------------------------- the three columns, right */
.pzq-cols3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 52px);
}
.pzq-col { min-width: 0; }

.pzq-list { list-style: none; margin: 0; padding: 0; }
.pzq-list li { margin: 0; }

/* No rule, no left shift on hover: 5px of vertical padding and a colour
   change. Seventeen of these is 17 × 24px, not 17 × 46px. */
.pzq-a {
	display: inline-block;
	padding: 5px 0;
	font: 400 13.5px/1.35 var(--poz-font-body, inherit);
	color: var(--poz-text-2, #98A0AC);
	text-decoration: none;
	transition: color .28s ease;
}
.poz-footer a.pzq-a:hover,
.poz-footer a.pzq-a:focus-visible { color: #FFFFFF; }

/* ------------------------------------------------------ bands 3+4, merged */
/* The band keeps its own top hairline from poz-chrome.css
   (.poz-footer__band + .poz-footer__band); the row must not draw a second. */
.poz-footer__band--legal {
	display: block;
	padding-block: 18px 22px;
}

/* THE FAB SITS ON THIS BAND, AND THE CLEARANCE IS VERTICAL, NOT HORIZONTAL.

   .poz-fab is fixed 32px from the right edge, its button is 48px tall, so it
   occupies the bottom 80px of the viewport — and the foot of the page is
   exactly where that is in front of something. This band has a trailing group
   on every row, so "Podaci o tvrtki" landed under the button.

   THE FIRST FIX WAS A RIGHT-HAND RESERVE ON THE BAND, AND IT WAS WRONG.
   padding-right: max(var(--poz-gutter), 232px) kept the legal line clear, but
   it narrowed the whole band: the claim and the four link columns above ran to
   1719px and these two rows stopped at 1543px, so the footer's right margin
   visibly stepped in halfway down (Sven, 2026-08-03: "allignment is off").
   A 176px step to protect one line of 10px type is the wrong trade.

   The band keeps the full measure now and clears the button by sitting above
   it instead. 96px is the button's 80px plus a gap; it reads as the footer's
   bottom margin, which is what the foot of a page wants anyway.

   IF THE FAB EVER CHANGES SIZE OR OFFSET, THIS NUMBER FOLLOWS IT. It is the
   only thing keeping the legal line readable at the bottom of the scroll. */
.poz-footer__band--legal { padding-bottom: 96px; }

.pzq-tail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 28px;
}
.pzq-tail__l,
.pzq-tail__r {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
}
/* A definite height and no loading="lazy": an <img> with neither lays out at
   0×0, never intersects the viewport, and so never loads. */
.pzq-tail__lumi img {
	display: block;
	height: 15px;
	width: auto;
	opacity: .62;
	transition: opacity .3s ease;
}
.pzq-tail__lumi:hover img,
.pzq-tail__lumi:focus-visible img { opacity: 1; }

.pzq-tail__m {
	font: 500 10.5px/1.4 var(--poz-font-body, inherit);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
	text-decoration: none;
	transition: color .3s ease;
}
.poz-footer a.pzq-tail__m:hover,
.poz-footer a.pzq-tail__m:focus-visible { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
	.pzq-a, .pzq-mail, .pzq-tel, .pzq-cta i, .pzq-tail__lumi img, .pzq-tail__m {
		transition-duration: .01ms !important;
	}
	.pzq-cta i { transform: none !important; }
}

@media (max-width: 1100px) {
	.pzq-b { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: 28px 34px; }
	.pzq-a { font-size: 13px; }
}

@media (max-width: 860px) {
	/* The contact block goes over the columns rather than beside them; three
	   columns at phone width is 100px each, so they go two-up and wrap. */
	.pzq-b { grid-template-columns: 1fr; gap: 34px; }
	.pzq-cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
	.pzq-tail { justify-content: flex-start; gap: 14px 22px; }
}

@media (max-width: 520px) {
	.pzq-cols3 { grid-template-columns: 1fr; gap: 24px; }
}


/* ============================================================================
   THE TAIL, IN TWO TIERS  (Sven, 2026-08-03)

   Three things landed on this row at once:

     · "include the pozornice logo in footer as well" — the lockup now opens
       the tail. The light cap has its own on the white ground; this is the
       one on the ink, and it is what closes the page.
     · "after 'ovlašteni distributer za RH' add small brand logos" — the five
       distributor marks, moved down out of the light cap and set small. They
       read as credentials here, directly under the sentence that names the
       arrangement, which is what they are.
     · the phone came off the site, so nothing else on this row changed.

   TWO TIERS, NOT ONE. Everything above wants the leading edge — the lockup,
   the marks — and the sentence and the legal line want the trailing one. On a
   single row that is five groups fighting for two edges. Split:

     tier 1   [pozornice]                    [lumilas] Brend tvrtke … za RH
     ─────────────────────────────────────────────────────────────────────
     tier 2   [• • • • •]                     © 2026 · Pravila · Podaci

   Both tiers put a group on the trailing edge, so the FAB reserve on the band
   (see above) shifts both by the same amount and the right edge stays a line.
   One tier reserved and one not would read as a mistake.

   The marks are the "-fordark" artwork — a different set of files, not the
   light-cap set re-filtered. See the note in data-chrome.php.
   ========================================================================= */
.pzq-tail--2 {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--poz-line-dark);
}

/* The lockup. A definite height and no loading="lazy" — an <img> with neither
   lays out at 0×0, never intersects the viewport and so never loads. The SVG
   is the cropped-viewBox one (616.6 × 106.28), so 26px of height is ~150px of
   wordmark; the old uncropped file needed 90px to read at all. */
.pzq-tail__logo { display: block; flex: 0 0 auto; }
.pzq-tail__logo img {
	display: block;
	height: clamp(20px, 1.9vw, 26px);
	width: auto;
	opacity: .88;
	transition: opacity .3s ease;
}
.pzq-tail__logo:hover img,
.pzq-tail__logo:focus-visible img { opacity: 1; }

/* The credentials. Set well below the lockup's weight: they are a footnote to
   the sentence above them, not a second logo wall. */
.pzq-marks {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px clamp(16px, 1.7vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.pzq-mark { display: flex; align-items: center; }
/* GREYSCALE AT REST, and this is not a preference. The "-fordark" set is not
   one visual family: GUIL, Cameo and Studio Due are white wordmarks, but
   Pangolin's on-dark file is an icon-only mark drawn in RED (452 × 436), and
   at 22px beside four white marks it reads as an alert, not a credential.
   Desaturating the row makes the five one strip; hover brings the one under
   the pointer back to its own colour. */
.pzq-mark img {
	display: block;
	width: auto;
	height: 13px;
	opacity: .62;
	filter: grayscale(1);
	transition: opacity .3s ease, filter .3s ease;
}
/* A square mark carries far less ink per pixel of height than a wordmark, so
   the two are not set to the same height. PHP marks which is which from the
   artwork's own aspect ratio. */
.pzq-mark.is-mark img { height: 22px; }
/* The wall dims and the one under the pointer comes up — same gesture as the
   brands rail on the home page. */
.pzq-marks:hover .pzq-mark img { opacity: .3; }
.pzq-marks .pzq-mark:hover img { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
	.pzq-tail__logo img, .pzq-mark img { transition-duration: .01ms !important; }
}

@media (max-width: 860px) {
	.pzq-tail--2 { margin-top: 16px; padding-top: 16px; }
	.pzq-tail__logo img { height: 22px; }
	.pzq-mark img { height: 12px; }
	.pzq-mark.is-mark img { height: 20px; }
}


/* ============================================================================
   THE CLAIM COMES DOWN, AND ROWS 1–2 ARE REGROUPED  (Sven, 2026-08-03)

   "implement Svjetski brendovi… into the footer, separate section not needed"
   "redesign the lowest two rows of footer to be more logical, brand names
    should be more prominent, put lumilas logo to the right of its section"

   THE LIGHT CAP IS DELETED. It was a white band carrying four things, three of
   which had migrated out from under it over the previous two passes — the
   lockup to the tail, the CTA to the contact block, the marks to the tail.
   One claim was holding up 257px of its own band. The claim opens band 2 now
   and the footer is one colour top to bottom.

   Because the band above the footer is also ink, the footer's first band no
   longer has the white cap to separate it — hence the explicit top hairline on
   .poz-footer. The band-to-band rule in poz-chrome.css only fires between
   siblings inside the footer.

   THE TWO BOTTOM ROWS WERE SPLIT ALONG THE WRONG SEAM. They were:

       row 1   [pozornice]        [lumilas] Brend tvrtke … · ovlašteni distr…
       row 2   [• • • • •]        © · Pravila · Podaci

   which put the LumiLas mark, the sentence naming the arrangement, and the
   five makers that arrangement covers across two rows, and left the pozornice
   lockup keeping company with a sentence about somebody else. Now:

       row 1   Ovlašteni distributer za Hrvatsku      Brend tvrtke [lumilas]
               [ G U I L ] [ C A M E O ] [ … ]
       row 2   [pozornice]                  © · Pravila privatnosti · Podaci

   Row 1 is the distribution, end to end — what it covers on the leading edge,
   whose brand it is on the trailing one, with the mark AFTER its words. Row 2
   is pozornice.hr as a published thing: whose site, and the legal pages.

   The company name is no longer typed twice: the mark carries it in row 1, the
   © line carries it in row 2.

   THE MAKERS ARE SET TO BE READ. 13px wordmarks at .5 opacity were a texture;
   at 18/30px and .85 they are five names. They stay desaturated at rest —
   Pangolin's on-dark file is an icon-only mark drawn in RED, and at 30px in
   full colour beside four white wordmarks it reads as an alert. Hover brings
   the one under the pointer back to its own colour.
   ========================================================================= */
.poz-footer { border-top: 1px solid var(--poz-line-dark); }

/* -------------------------------------------------- the claim, on the ink */
.pzq-head {
	padding-bottom: clamp(22px, 2.4vw, 36px);
	margin-bottom: clamp(24px, 2.6vw, 38px);
	border-bottom: 1px solid var(--poz-line-dark);
}
.pzq-head__k {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 10px/1 var(--poz-font-body, inherit);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
}
.pzq-head__k i {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--acc-truss, #17B26A);
	flex: 0 0 auto;
}
.pzq-head__h {
	margin: clamp(14px, 1.5vw, 22px) 0 0;
	font: 400 clamp(21px, 2.4vw, 38px)/1.12 var(--poz-font-display, inherit);
	letter-spacing: -.022em;
	color: #F2F4F6;
	max-width: 26ch;
	text-wrap: balance;
}

/* ------------------------------------------------------------------ row 1 */
.pzq-tail--dist {
	align-items: flex-end;
	gap: 20px clamp(24px, 3vw, 64px);
}

.pzq-dist {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.3vw, 18px);
	min-width: 0;
}

/* The label above each half of row 1. Same size on both sides, so the two
   groups read as a pair rather than a heading and a footnote. */
.pzq-tail__k {
	font: 500 10px/1.3 var(--poz-font-body, inherit);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
	white-space: nowrap;
}

.pzq-marks { gap: 14px clamp(20px, 2.2vw, 40px); }
.pzq-mark img { height: 18px; opacity: .85; }
.pzq-mark.is-mark img { height: 30px; }
.pzq-marks:hover .pzq-mark img { opacity: .4; }

/* The parent company. Label then mark — the mark is to the RIGHT of its own
   words, which is what row 1's trailing edge is for. */
.pzq-parent {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 18px);
	flex: 0 0 auto;
	text-decoration: none;
	color: inherit;
}
.pzq-parent img {
	display: block;
	width: auto;
	height: clamp(18px, 1.7vw, 24px);
	opacity: .72;
	transition: opacity .3s ease;
}
.pzq-parent:hover img,
.pzq-parent:focus-visible img { opacity: 1; }
.pzq-parent:hover .pzq-tail__k { color: #FFFFFF; }

/* ------------------------------------------------------------------ row 2 */
.pzq-tail--2 {
	margin-top: clamp(18px, 2vw, 28px);
	padding-top: clamp(16px, 1.8vw, 24px);
}

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

@media (max-width: 860px) {
	.pzq-head__h { font-size: clamp(20px, 5.4vw, 28px); max-width: none; }
	.pzq-tail--dist { align-items: flex-start; gap: 22px; }
	.pzq-parent { order: -1; }
	.pzq-mark img { height: 15px; }
	.pzq-mark.is-mark img { height: 25px; }
}


/* -------------------------------------------- the maker list, named -------
   Each item is a small column: the mark, then the name under it. That is what
   turns five logos into five brands — GLP's file is a framed monogram and
   Pangolin's on-dark file is a lettering-free icon, so without the caption two
   of the five are shapes.

   align-items: flex-end on the row, so wordmarks and square marks sit on one
   optical baseline despite the 18 / 30px split above; the name line then runs
   straight across.
   ------------------------------------------------------------------------ */
.pzq-marks { align-items: flex-end; gap: 16px clamp(22px, 2.4vw, 44px); }

.pzq-mark { display: block; }
.pzq-mark__in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	text-decoration: none;
	color: inherit;
}
.pzq-mark__in img { transition: opacity .3s ease, filter .3s ease; }

.pzq-mark__n {
	font: 500 9.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--poz-text-3, #8B929E);
	white-space: nowrap;
	transition: color .3s ease;
}
a.pzq-mark__in:hover .pzq-mark__n,
a.pzq-mark__in:focus-visible .pzq-mark__n { color: #FFFFFF; }
a.pzq-mark__in:focus-visible { outline: 2px solid var(--acc-truss, #17B26A); outline-offset: 4px; }

/* The row dims and the one under the pointer comes up — the name follows the
   mark, so the hovered brand reads as one object. */
.pzq-marks:hover .pzq-mark__n { color: #5F6772; }
.pzq-marks .pzq-mark:hover .pzq-mark__n { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
	.pzq-mark__n, .pzq-mark__in img { transition-duration: .01ms !important; }
}

@media (max-width: 860px) {
	.pzq-marks { gap: 16px 22px; }
	.pzq-mark__n { font-size: 9px; letter-spacing: .12em; }
}


/* ============================================================================
   THE STRIP, AND TWO THINNER TAIL ROWS  (Sven, 2026-08-03)

   "reposition the pozornice logo to where the brand icons are now, and they
    should be to the right of the svjetski brendovi section. svjetski brendovi
    text should be smaller so it fits into one row makin a thin strip with the
    brand logos. the brand logos shouldnt have text. copyright notice, pravila
    privatnosti and podaci o tvrtki should be where the small pozornice logo
    now is, and that streip should also be thinner"

   Everything below follows from one move: the claim and the makers are on the
   SAME LINE now. That is what makes it a strip — the claim set at 19px instead
   of 38px and held to one line, the five logos opposite it, one hairline under
   the pair. It cost the footer ~110px and reads as a masthead for the band
   rather than a statement with a credential block a screen away.

   The captions under the marks are gone with it. They existed to make GLP's
   framed monogram and Pangolin's lettering-free icon legible when this row was
   the footer's brand statement; a caption on a strip puts it straight back to
   two lines. The names live in alt and title, so the links still announce
   themselves to a screen reader and on hover.

   That vacated the tail's first row, which took the pozornice lockup off the
   row below it, which in turn freed the last row for the legal line alone.
   Both tail rows lost their second element and are thinner for it.

   AND THE FAB CLEARANCE SHRINKS TO THE NARROW CASE. Nothing sits on the
   trailing edge of the last row any more, so the fixed button covers empty
   space above 860px and the band no longer reserves 96px of height. Below
   that the legal line wraps across the full measure and runs under the button
   again, so the reserve stays there — see the note further up.
   ========================================================================= */
.pzq-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px clamp(24px, 3vw, 64px);
	padding-bottom: clamp(16px, 1.7vw, 24px);
	margin-bottom: clamp(20px, 2.2vw, 32px);
	border-bottom: 1px solid var(--poz-line-dark);
}

.pzq-strip__h {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 18px);
	margin: 0;
	min-width: 0;
	font: 400 clamp(14px, 1.15vw, 19px)/1.35 var(--poz-font-display, inherit);
	letter-spacing: -.012em;
	color: #F2F4F6;
}
/* The tick the eyebrow used to carry. It is the only thing left of that line,
   and it is what keeps the claim from reading as a stray sentence. */
.pzq-strip__h i {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--acc-truss, #17B26A);
	flex: 0 0 auto;
}

/* ------------------------------------------------- the makers, uncaptioned */
.pzq-marks { align-items: center; gap: 12px clamp(20px, 2.2vw, 40px); }
.pzq-mark__in { display: block; }
.pzq-mark img { height: 16px; opacity: .8; }
.pzq-mark.is-mark img { height: 26px; }

/* ------------------------------------------------------------ tail, row 1 */
.pzq-tail--dist { align-items: center; gap: 16px clamp(24px, 3vw, 64px); }
.pzq-tail--dist .pzq-tail__logo img { height: clamp(19px, 1.7vw, 24px); }
.pzq-parent img { height: clamp(16px, 1.5vw, 21px); }

/* ------------------------------------------------------------ tail, row 2 */
.pzq-tail--2 {
	margin-top: clamp(13px, 1.4vw, 19px);
	padding-top: clamp(13px, 1.4vw, 19px);
}

/* ---------------------------------------------------------- the FAB again */
/* Above 860px the last row's trailing edge is empty, so there is nothing for
   the button to cover and nothing to reserve. */
.poz-footer__band--legal { padding-bottom: 22px; }
@media (max-width: 860px) {
	.poz-footer__band--legal { padding-bottom: 96px; }
}

@media (max-width: 1100px) {
	.pzq-strip { gap: 14px 28px; }
	.pzq-mark img { height: 15px; }
	.pzq-mark.is-mark img { height: 24px; }
}

@media (max-width: 860px) {
	.pzq-strip__h { font-size: clamp(15px, 3.6vw, 19px); }
	.pzq-tail--dist { align-items: flex-start; }
	.pzq-parent { order: 0; }
}


/* ===== BRAND STRIP, ONE GREY (2026-09-07, Sven): every distributed mark is drawn in the same light grey ink, whatever
   colour its artwork carries — filter to white, then one opacity. The hover choreography above (others dim, the hovered
   one lifts to full) is kept; only the ink is unified. Eight marks now: GUIL, Cameo, GLP, Studio Due, Pangolin, Adam Hall,
   Neutrik, Defender. ===== */
.pzq-mark img, .pzq-mark__in img { filter: brightness(0) invert(1) !important; opacity: .56; }
.pzq-marks:hover .pzq-mark img { opacity: .3; }
.pzq-marks .pzq-mark:hover img { opacity: .95; filter: brightness(0) invert(1) !important; }

/* EVENED (2026-09-07): every mark takes the height the footer computed from its own ink (see footer.php) */
.pzq-mark img, .pzq-mark.is-mark img { height: var(--mh, 16px); }