/*FONTS:START (generated by tools/build-fonts.js — self-hosted @fontsource subsets)*/
@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/kanit-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/kanit-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Kanit";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/kanit-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Kanit";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/kanit-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/kanit-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/kanit-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/kanit-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/kanit-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Kanit";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/kanit-latin-600-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Kanit";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/kanit-latin-ext-600-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/kanit-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/kanit-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Kanit";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/kanit-latin-700-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Kanit";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/kanit-latin-ext-700-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Kanit Fallback";src:local("Arial"),local("Roboto");size-adjust:125.96%;ascent-override:87.33%;descent-override:31.36%;line-gap-override:0%;}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New"),local("Consolas"),local("DejaVu Sans Mono");size-adjust:100.32%;ascent-override:101.68%;descent-override:29.91%;line-gap-override:0%;}
/*FONTS:END*/
/* ==================================================================
   JT Lika Company — Homepage styles
   ------------------------------------------------------------------
   Table of contents
   01. Design tokens (:root)
   02. Reset & base
   03. Layout & shared utilities (container, eyebrow, title, buttons…)
   04. Reveal system (progressive-enhancement start states)
   05. Scroll progress (the custom cursor was removed — native cursors only)
   06. (removed — no preloader)
   07. Header, nav & mobile menu
   08. Hero
   09. Capability bar (the placeholder client marquee was removed — see 13b)
   10. Segments (dual audience)
   11. Program (horizontal showcase)
   12. Process (scrolly story)
   13. References  ·  13b. Company references (.refcos)
   14. Services (dark band)
   15. RFQ
   16. Footer
   17. Responsive
   18. Reduced motion
   ================================================================== */

/* ============================ 01. TOKENS ============================ */
/* ────────────────────────────────────────────────────────────────────────
   SEMANTIC PALETTE (visual modernization pass)

   The old palette was a 76%-saturation corporate blue (#1656A2) beside a cold
   near-black (#0E1116). Both are what read as "dated and heavy": the blue is
   loud, the black is colder than any of the photography, and headings picked
   between them with no rule.

   The new family is one NAVY, desaturated to ~58–62%, used for every dark
   thing on the site — dark bands, headings, surfaces — so the page stops
   alternating between blue and black. The accent is a slightly deeper, less
   neon orange kept for CTAs, active states and small marks only.

   EVERY VALUE BELOW IS CONTRAST-VERIFIED. The measured ratios are in
   VISUAL-MODERNIZATION-REPORT.md §2; nothing here was chosen by eye.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* — Primary: one navy family ————————————————————————————— */
  --color-primary-dark:  #153251;   /* deep industrial navy — dark bands, surfaces */
  --color-primary:       #255D9D;   /* supporting blue — links, data, active state */
  --color-primary-soft:  #EEF3F9;   /* pale navy wash — category heading bands */

  /* — Accent: used deliberately, never for large areas ———————— */
  --color-accent:        #EF7C1F;   /* CTA, active state, ticks, focus detail */
  --color-accent-strong: #D9660F;   /* pressed / deep accent */
  --color-accent-text:   #A8530F;   /* AA orange for SMALL text on light (5.37:1) */

  /* — Neutrals ————————————————————————————————————————— */
  --color-heading:       #12263C;   /* THE heading colour on every light surface */
  --color-text:          #2F3A48;   /* body — softer charcoal, not near-black */
  --color-text-muted:    #5B6675;   /* muted / small utility text (5.83:1 on white) */
  --color-bg:            #FFFFFF;
  --color-bg-subtle:     #F7F8FA;
  --color-border:        #E3E7ED;

  /* — Channels, for the translucent variants ————————————————
     37 rgba() literals across this sheet carried the OLD brand numbers at a
     dozen different alphas — shadows, hairlines, tints, scrims. Hard-coded,
     they would have quietly stayed on the old navy while everything solid
     moved. As channels they follow the palette. Used as
     `rgb(var(--rgb-primary-dark) / 0.55)`. */
  --rgb-primary-dark: 21 50 81;    /* #153251 */
  --rgb-primary:      37 93 157;   /* #255D9D */
  --rgb-accent:       239 124 31;  /* #EF7C1F */
  --rgb-heading:      18 38 60;    /* #12263C */

  /* — Compatibility aliases ————————————————————————————————
     ~250 declarations across this sheet already speak the old names. Pointing
     them at the semantic tokens moves the whole site in one place, with no
     risk of a missed find-and-replace leaving one component on the old blue.
     New rules should use the --color-* names above. */
  --blue:        var(--color-primary);
  --blue-deep:   var(--color-primary-dark);
  --orange:      var(--color-accent);
  --orange-deep: var(--color-accent-strong);
  --orange-text: var(--color-accent-text);
  --ink:         var(--color-heading);
  --graphite:    var(--color-text-muted);
  --line:        var(--color-border);
  --paper:       var(--color-bg-subtle);
  --paper-blue:  var(--color-primary-soft);
  --white:       var(--color-bg);

  /* Type — Kanit matches the bold, slightly-italic industrial logo wordmark.
     JetBrains Mono is kept for the technical "blueprint" micro-labels. */
  --font-display: "Kanit", "Kanit Fallback", "Inter", system-ui, sans-serif;
  --font-body:    "Kanit", "Kanit Fallback", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale — four clamps and no more.
     Only the four sizes that genuinely need to travel between 320px and 1920px
     are fluid; everything else in this sheet stays a fixed rem so the scale
     remains readable and predictable.

     The display sizes came DOWN in the modernization pass (h1 5.6→4.9rem,
     h2 3.7→3.2rem). The old maxima were the main reason the site read as
     "heavy" on a large screen; the ratio between the steps is unchanged, so the
     hierarchy is identical — it is the shouting that is gone. The lower bounds
     went slightly UP, so mobile type is not smaller anywhere. */
  --fs-h1:    clamp(2.55rem, 5.8vw, 4.9rem);   /* Rev #7: still wraps inside the scrimmed left column, with more room than before */
  --fs-h2:    clamp(1.95rem, 4vw, 3.2rem);
  --fs-h3:    clamp(1.3rem, 1.75vw, 1.6rem);
  --fs-lead:  clamp(1.05rem, 1.25vw, 1.22rem);
  --fs-mono:  0.72rem;

  /* Layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-pad: clamp(72px, 10vw, 140px);
  --radius: 14px;
  --radius-sm: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;

  /* ── Hero scrim (Rev #7) ─────────────────────────────────────────────
     A DIRECTIONAL scrim anchored to the TEXT only — never a full-bleed white
     sheet and never a backdrop-filter (both desaturate the whole photo and read
     as a milky, clinical wash). The right two-thirds of the photo stay
     COMPLETELY clean (no white, no blur, no desaturation). Alpha is scaled by a
     per-slide / per-page multiplier --scrim-k (see the SCRIMK block, computed by
     tools/measure-scrim.js to the LIGHTEST value that still passes contrast).
       desktop           → strong on the left text column, clear past ~66% width
       hero mobile       → vertical, strong at the bottom (hero text sits low)
       inner-page mobile → vertical, strong at the top (page-hero text sits high) */
  --scrim-col: linear-gradient(100deg,
      rgba(255, 255, 255, calc(0.82 * var(--scrim-k, 1))) 0%,
      rgba(255, 255, 255, calc(0.70 * var(--scrim-k, 1))) 22%,
      rgba(255, 255, 255, calc(0.34 * var(--scrim-k, 1))) 42%,
      rgba(255, 255, 255, calc(0.06 * var(--scrim-k, 1))) 56%,
      rgba(255, 255, 255, 0) 66%);
  --scrim-col-hero-mobile: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, calc(0.08 * var(--scrim-k, 1))) 40%,
      rgba(255, 255, 255, calc(0.46 * var(--scrim-k, 1))) 68%,
      rgba(255, 255, 255, calc(0.82 * var(--scrim-k, 1))) 100%);
  --scrim-col-inner-mobile: linear-gradient(180deg,
      rgba(255, 255, 255, calc(0.80 * var(--scrim-k, 1))) 0%,
      rgba(255, 255, 255, calc(0.44 * var(--scrim-k, 1))) 34%,
      rgba(255, 255, 255, calc(0.08 * var(--scrim-k, 1))) 62%,
      rgba(255, 255, 255, 0) 82%);
  /* Targeted top strip for the header nav + logo only (kept — not a full wash). */
  --scrim-light-top: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(255, 255, 255, 0) 100%);
}

/* ============================ 02. RESET & BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  /* 1.6 → 1.65. Serbian sets long words (POŠTANSKI SANDUČIĆI, PLASTIFIKACIJA)
     and the extra leading is what makes a wrapped paragraph scannable. */
  line-height: 1.65;
  /* --color-text, NOT --color-heading. Body copy at the heading's weight of
     darkness is what made the page feel dense; headings now sit a clear step
     above the text they introduce. */
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;                 /* guard against horizontal bleed */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* When smooth scroll (Lenis) is active we manage scrolling ourselves */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

/* The focus ring is --color-accent-strong, not --color-accent. WCAG 2.2 wants
   3:1 for a focus indicator against what is behind it; the bright accent only
   reaches 2.60:1 on white. The deeper accent still reads as the brand orange
   and clears the bar on BOTH surfaces the site actually has:
   3.59:1 on white, 3.67:1 on the navy bands. */
:focus-visible {
  outline: 3px solid var(--color-accent-strong);
  outline-offset: 3px;
  border-radius: 3px;
}

/* CURSORS — the browser's own, everywhere.
   The site used to hide the native cursor and draw a dot + ring in its place.
   Visitors reported losing the pointer, and in any overlay above z-index 130 it
   genuinely disappeared. There is no `cursor: none` left anywhere; interactive
   things say `pointer`, an image that enlarges says `zoom-in`, and the enlarged
   image says `zoom-out`. */
a[href], label[for], summary, [role="button"] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; }

/* ============================ 03. LAYOUT & UTILITIES ============================ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* — Eyebrow: monospace "drawing callout" label with an orange tick —
   The bracketed form „[ 01 · REŠENJA ]" was retired in the modernization pass.
   The label is now „01 REŠENJA": the brackets and the DECORATIVE middot are
   gone from the markup, the number is wrapped in .eyebrow__n so it can carry
   the accent while the label keeps the text colour, and the tracking came down
   from 0.18em (which read as dated wide-set mono) to 0.13em.

   A middot that carries MEANING — „INOX PROGRAM · SUDOPERE" (category ·
   subcategory), „PROIZVODNJA METALNE OPREME · OD 2004." — was deliberately
   kept. Only the decorative one between a number and its label was removed. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 0.62em;
}
.eyebrow::before {
  content: "";
  align-self: center;
  width: 20px;
  height: 2px;
  background: var(--color-accent);
  flex: none;
}
/* The number: accent-tinted, one step heavier, tabular so 01/02/03 align.
   --color-accent-text (not --color-accent) because this is SMALL text on a
   light surface and needs 4.5:1 — the bright accent only reaches 2.6:1 there. */
.eyebrow__n {
  color: var(--color-accent-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.84); }
/* On the dark bands the bright accent is the legible one (4.71:1 on navy). */
.eyebrow--light .eyebrow__n,
.services .eyebrow__n,
.process .eyebrow__n,
.cta-band .eyebrow__n { color: var(--color-accent); }

/* — Section title — */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  /* 1.03 → 1.1. At 1.03 a two-line Serbian heading had its descenders almost
     touching the next line's caps; the extra leading is most of what makes the
     section heads read as calmer. */
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  max-width: 20ch;
}
.section-head { margin-bottom: clamp(36px, 5vw, 68px); }
.section-head .eyebrow { margin-bottom: 18px; }

/* Title line-reveal masks (spans injected by JS) */
.tl-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.tl-word { display: inline-block; will-change: transform; }

/* — Monospace inline data — */
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
  color: var(--blue);
  white-space: nowrap;
}
/* On dark sections the blue mono would be low-contrast — use orange instead */
.services .mono, .process .mono { color: var(--orange); }   /* bright orange on the DARK sections */
.services .eyebrow, .process .eyebrow { color: rgba(255, 255, 255, 0.75); }   /* AA on dark bg */

/* — Buttons — */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bg);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  /* transform is driven by GSAP (magnetic); only color/border transition here */
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
}
.btn::before {                 /* sweep fill, revealed on hover */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }

/* ── PRIMARY CTA — the one real contrast fix in this pass ──────────────────
   It was WHITE on #F5821F: 2.59:1, which fails AA (4.5:1 for 15.7px/600) and
   failed harder on hover, at 3.31:1 on the darker orange. The label was the
   least legible text on the site.

   Rest  : navy label on the accent      #12263C on #EF7C1F = 5.53:1  ✓
   Hover : white label on the navy sweep #FFFFFF on #153251 = 13.07:1 ✓

   Darkening the orange until white passed would have taken it to a brown
   around #B8590F — that is not the accent the client asked for. Inverting to
   navy keeps the orange bright, and orange→navy on hover is a stronger,
   quieter interaction than orange→darker-orange ever was. */
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-heading);
}
.btn--primary:hover,
.btn--primary:focus-visible { color: #fff; border-color: var(--color-primary-dark); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary-dark);
  border-color: rgba(21, 50, 81, 0.42);
}
.btn--ghost:hover { color: #fff; border-color: var(--color-primary-dark); }

/* — Arrow link — */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 500;
  color: var(--blue);
}
.arrow-link i { transition: transform 0.35s var(--ease); font-style: normal; }
.arrow-link--light { color: #fff; }

/* — Chips — */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.5em 1em;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--graphite);
}
.chips--light li { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); }

.chip {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  padding: 0.55em 1.1em;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--graphite);
  background: transparent;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.chip.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }

/* — Seamless marquee — */
.marquee { display: flex; width: max-content; }
.marquee__track {
  display: flex;
  align-items: center;
  flex: none;                    /* keep natural width; never shrink to fit */
  gap: clamp(20px, 3vw, 44px);
  padding-right: clamp(20px, 3vw, 44px);
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ============================ 04. REVEAL SYSTEM ============================
   .has-motion == "JS present AND motion allowed" (added by the head pre-flight
   script, cleared if JS/GSAP fail). It gates the BELOW-the-fold reveal start
   states only. Base markup is always visible.

   Rev #6 (LCP): the hero above-the-fold (H1 `.line`, eyebrow/lead/CTAs
   `[data-hero]`) is NEVER opacity-hidden or clip-hidden here — it paints in its
   final, readable position at first paint (so it is the LCP candidate and is
   readable with JS off). buildHeroIntro() in main.js adds only a transform-based
   settle (opacity stays 1), i.e. JS ADDS the animation from a visible state. */
.has-motion [data-reveal]      { opacity: 0; transform: translateY(40px); }
.has-motion .tl-word           { transform: translateY(115%); }
.has-motion [data-img-reveal]  { clip-path: inset(0 0 0 100%); }
.has-motion [data-img-reveal] img { transform: scale(1.1); }
/* Draw-in hairline dividers start collapsed */
.has-motion [data-rule]        { transform: scaleX(0); }
/* Product detail hero title (JS-populated on the legacy ?p= page, static on the
   pre-rendered pages) paints immediately — excluded from the masked word reveal. */
.has-motion .page-hero__title .tl-word { transform: translateY(0); }

.line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; }
.line { display: block; will-change: transform; }

/* ============================ 05. CURSOR & PROGRESS ============================ */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 120;
  pointer-events: none;
}

/* (The custom dot + ring cursor lived here. Removed — see the cursor note in
   section 02. Nothing replaces it: the native pointer is the whole feature.) */

/* 06. (removed) — the site no longer has a loading screen. The page paints and
   is usable from the first frame; nothing covers it and nothing has to be
   dismissed before content is readable. */

/* ============================ 07. HEADER / NAV ============================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}
/* Transparent logo sits directly on the background — no chip, no halo. A whisper-
   thin definition shadow keeps its edges crisp on photos and drops on the white
   header; on the dark mobile-menu overlay a soft dark shadow keeps it readable. */
.header__logo { position: relative; display: inline-flex; align-items: center; }
.header__logo img { height: 52px; width: auto; filter: drop-shadow(0 1px 2px rgb(var(--rgb-primary-dark) / 0.18)); transition: filter 0.4s var(--ease); }
.header.scrolled .header__logo img { filter: none; }
.menu-open .header__logo img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }

/* Light top wash behind the header so logo + nav stay readable at page top on
   every slide. Hidden on the white header and while the dark mobile menu is open. */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 140px;
  z-index: -1;
  background: var(--scrim-light-top);
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.header.scrolled::before,
.menu-open .header::before { opacity: 0; }

/* Skip-to-content link — off-screen until focused (keyboard users land on it first). */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--blue); color: #fff;
  font-weight: 600; box-shadow: 0 6px 20px -8px rgb(var(--rgb-primary-dark) / 0.6);
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible, .skip-link:focus { top: 12px; outline: 3px solid var(--orange); outline-offset: 2px; }

/* Language switcher — ships hidden (the [hidden] attribute); reveal when EN exists. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-family: var(--font-mono); font-size: 0.72rem; }
.lang-switch[hidden] { display: none; }
.lang-switch__opt { padding: 4px 7px; border-radius: 6px; color: var(--graphite); letter-spacing: 0.06em; }
.lang-switch__opt.is-active { color: #fff; background: var(--blue); }
.lang-switch__opt:hover { color: var(--blue); }
.lang-switch__opt.is-active:hover { color: #fff; }

/* The nav column is the FULL height of the header, and so is every item in it.
   The links stay optically centred (each item centres its own content), but the
   hover box of „Proizvodi" now reaches the bottom edge of the header instead of
   stopping at the text — which is what makes the path down into the mega menu
   continuous. See the dropdown block below. */
.nav { margin-left: auto; align-self: stretch; display: flex; align-items: stretch; }
/* A2 (Rev #4): every top-level nav item shares identical box metrics so none sit
   lower than the others. Every link is an inline-flex box with the SAME
   line-height + padding, whether or not it carries the dropdown caret. The
   aria-current underline is a positioned ::after (below) so it never changes a
   link's height. */
.nav__list { display: flex; align-items: stretch; gap: clamp(18px, 2vw, 34px); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1;
  padding: 4px 0;
  color: var(--blue-deep);
  transition: color 0.3s;
}
.nav__link::after {           /* orange underline-grow */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.header__cta { padding: 0.7em 1.35em; font-size: 0.92rem; }

/* Solid state after scroll */
.header.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.header.scrolled .nav__link { color: var(--ink); }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: none; background: transparent;
  position: relative;
  margin-left: auto;
}
.burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--blue-deep);
  transition: transform 0.35s var(--ease), background 0.35s;
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 27px; }
.header.scrolled .burger span { background: var(--ink); }
.menu-open .burger span { background: var(--white); }
.menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile menu — a full-height drawer with ONE internal scroll container.
   The fixed header sits above it (z-index 100 > 90), so the logo and the burger
   — which is also the close control — stay reachable at every scroll position
   without a second copy of either inside the panel. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  height: 100vh;    /* fallback for browsers without dynamic viewport units */
  height: 100dvh;   /* the visible viewport, so the last entry is never under the URL bar */
  background: var(--blue-deep);
  color: #fff;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease);
  visibility: hidden;
}
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; }

/* The only scroller in the drawer. `overscroll-behavior: contain` stops a swipe
   that reaches the end of the list from chaining to the page behind it. */
.mobile-menu__scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--header-h) + 10px) var(--gutter) 30px;
}
/* Separate declaration on purpose: a browser without env() drops this one line
   rather than the whole padding shorthand. */
.mobile-menu__scroll { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }

/* Fallback for a page whose chrome region could not be replaced and still
   carries the pre-drawer markup: it scrolls too, rather than overflowing. */
.mobile-menu > .mobile-menu__nav {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 auto;
  padding: calc(var(--header-h) + 10px) var(--gutter) 30px;
}

/* Page behind the drawer. `overflow: hidden` on the root keeps the scroll
   position, so closing restores it exactly — nothing to save and put back, and
   nothing left locked if a close path is missed. */
.menu-open, .menu-open body { overflow: hidden; }

.mobile-menu__nav { width: 100%; max-width: 460px; }
.mobile-menu__list { list-style: none; display: grid; gap: 2px; margin: 0 0 26px; padding: 0; }
.mm-row { display: flex; align-items: center; gap: 10px; }
.mm-row > a {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 5.4vw, 1.85rem);
  letter-spacing: -0.02em;
  padding: 4px 0;
  color: #fff;
  overflow-wrap: anywhere;
}
.mobile-menu__list > li > .mm-row > a { opacity: 0; transform: translateY(24px); }
.menu-open .mobile-menu__list > li > .mm-row > a { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.mobile-menu__idx { flex: none; font-family: var(--font-mono); font-size: 0.82rem; color: var(--orange); }
.mobile-menu__cta { margin-bottom: 26px; text-align: center; }
.mobile-menu__contact { display: grid; gap: 6px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); text-align: center; }
.mobile-menu__contact a { color: #fff; }

/* Stagger delays for the top-level entries */
.menu-open .mobile-menu__list > li:nth-child(1) > .mm-row > a { transition-delay: 0.10s; }
.menu-open .mobile-menu__list > li:nth-child(2) > .mm-row > a { transition-delay: 0.15s; }
.menu-open .mobile-menu__list > li:nth-child(3) > .mm-row > a { transition-delay: 0.20s; }
.menu-open .mobile-menu__list > li:nth-child(4) > .mm-row > a { transition-delay: 0.25s; }
.menu-open .mobile-menu__list > li:nth-child(5) > .mm-row > a { transition-delay: 0.30s; }
.menu-open .mobile-menu__list > li:nth-child(6) > .mm-row > a { transition-delay: 0.35s; }
.menu-open .mobile-menu__list > li:nth-child(7) > .mm-row > a { transition-delay: 0.40s; }
.menu-open .mobile-menu__list > li:nth-child(8) > .mm-row > a { transition-delay: 0.45s; }

/* — Active nav item (aria-current) — persistent orange underline — */
.nav__link[aria-current="page"] { color: var(--blue-deep); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.header.scrolled .nav__link[aria-current="page"] { color: var(--ink); }

/* — Proizvodi dropdown (desktop) — reveals on hover + keyboard focus-within — */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__caret { flex: 0 0 auto; vertical-align: middle; transition: transform 0.3s var(--ease); }
.nav__item--drop:hover .nav__caret,
.nav__item--drop:focus-within .nav__caret { transform: rotate(180deg); }
/* Rev #4 mega-dropdown: 9 categories + 16 subcategories. Laid out in balanced
   CSS columns; its height is capped to the viewport with internal scroll so it
   never overflows on a 13" laptop / 1024px-tall screen.

   ---------------------------------------------------------------------------
   THE WIDTH IS ONE VARIABLE, AND BOTH THE PANEL AND THE HOVER BRIDGE READ IT
   ---------------------------------------------------------------------------
   The panel is centred on the „Proizvodi" trigger, and the trigger is NOT at
   the centre of the page — it sits in a right-aligned nav. So the widest the
   panel may be is twice the distance from the trigger's centre to the nearer
   viewport edge, and that distance is at its smallest exactly where the
   desktop nav first appears, at 1024 px: the trigger centre is 381 px there,
   which leaves 762 px of centred room and no more.

   Hence three measured steps rather than one big number. Left edge / right
   edge, measured in the browser:

       1024  720 wide ->   21 … 741      1366  900 wide ->  216 … 1116
       1152  720 wide ->  136 … 856      1440 1040 wide ->  175 … 1215
       1280  900 wide ->  161 … 1061     1920 1040 wide ->  389 … 1429

   `--drop-w` lives on the ITEM so the transparent hover bridge below reads the
   same value. A bridge narrower than the panel is how the hover-gap bug comes
   back, and this makes the two impossible to set separately. */
.nav__item--drop { --drop-w: min(720px, calc(100vw - 40px)); }
@media (min-width: 1200px) { .nav__item--drop { --drop-w: 900px; } }
@media (min-width: 1400px) { .nav__item--drop { --drop-w: 1040px; } }

.nav__drop {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 8px);
  width: var(--drop-w); background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgb(var(--rgb-primary-dark) / 0.38), 0 2px 10px -6px rgb(var(--rgb-primary-dark) / 0.14);
  padding: 20px 22px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: min(76vh, 620px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 200;
}
/* Hover bridge across the visual gap.
   It lives on the ITEM, not on the panel: the panel is a scroll container
   (max-height + overflow-y), and a scroll container clips its own ::before, so
   a bridge drawn there is neither painted nor hit-tested — the cursor fell
   through the gap and the menu closed. On the item it is clipped by nothing,
   and hovering an element's pseudo-element keeps :hover on the element itself,
   so the panel stays open all the way down. Transparent, and inert until the
   menu is actually open, so it never blocks anything underneath. */
.nav__item--drop::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  width: var(--drop-w); height: 14px;
  transform: translateX(-50%);
  pointer-events: none;
}
.nav__item--drop:hover::after,
.nav__item--drop:focus-within::after { pointer-events: auto; }
.nav__item--drop:hover .nav__drop,
.nav__item--drop:focus-within .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
/* Escape, from the keyboard: hold the panel shut while focus stays on the
   trigger. Released on focusout or mouseleave (see navDropdowns() in main.js). */
.nav__item--drop.is-collapsed .nav__drop { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); }
.nav__item--drop.is-collapsed::after { pointer-events: none; }
/* Rev #7: THREE EXPLICIT COLUMNS, not `columns: 3`.
   Multicol balances by height, so which column a category landed in was a
   consequence of how long the ones before it were — „Roba široke potrošnje"
   sat at the foot of the middle column because the flow put it there, and no
   amount of CSS could move it without moving the category itself. The panel
   is a grid of three real column boxes now, and which box a category is
   rendered into is decided once, by slug, in ChromeGenerator::DROP_COLUMNS.
   The 30px separation multicol drew with `column-gap` + `column-rule` is
   15px of padding either side of the rule, so the hairline lands exactly on
   the midpoint and — because grid items stretch — runs the full height of
   the panel instead of stopping at the shortest column.
   The columns are deliberately NOT `align-items: start`: that would ragged
   the three rules off at different heights. */
.nav__drop-column { min-width: 0; padding: 0 15px; }
.nav__drop-column:first-child { padding-left: 0; }
.nav__drop-column:last-child { padding-right: 0; }
.nav__drop-column + .nav__drop-column { border-left: 1px solid var(--line); }
.nav__drop-col { margin-bottom: 18px; }
.nav__drop-col:last-child { margin-bottom: 0; }
.nav__drop a {
  display: block; border-radius: var(--radius-sm);
  overflow-wrap: break-word;   /* „Garderobni, arhivski ormani i ostali ormani" */
  transition: background-color 0.2s, color 0.2s;
}
/* 17px semibold navy. NOT #000 and not 700 — at this size the brand navy at
   600 is the heavier-looking of the two and stays legible against white. */
.nav__drop-cat {
  padding: 8px 12px; color: var(--blue-deep); font-weight: 600; font-size: 1.0625rem;
  line-height: 1.3; letter-spacing: -0.01em;
}
/* 15px in a navy-tinted charcoal — the „ordinary submenu text" the client saw
   as harsh. #46506B on white is 8.1:1, far past AA, and reads softer than the
   near-black it replaces because it carries the brand's blue in it. */
.nav__drop-sub { display: grid; gap: 1px; margin: 5px 0 6px 12px; padding-left: 14px; border-left: 2px solid var(--line); }
.nav__drop-sub a { font-size: 0.9375rem; color: #46506B; padding: 6px 12px; font-weight: 400; line-height: 1.35; }
/* The three kitchen subcategories the client reads as belonging to „Oprema za
   kuhinje". A PRESENTATION grouping — see ChromeGenerator::DROP_GROUPS; the
   database still holds them as ordinary siblings and their links are
   unchanged. 19px further in than their head (10 margin + 8 padding + the
   1px hairline), one step down in size, one step softer in colour: enough to
   read as „these belong to the item above", not enough to read as a third
   level of navigation. #5A6478 on white is 5.9:1, past AA at this size. */
.nav__drop-kids {
  display: grid; gap: 1px;
  margin: 1px 0 3px 10px; padding-left: 8px;
  border-left: 1px solid var(--line);
}
.nav__drop-kids a { font-size: 0.875rem; color: #5A6478; padding: 5px 12px; }
/* The orange accent, used the way the rest of the site uses it for small text:
   a whisper of wash plus --orange-text, which is the token that exists
   precisely because full-strength orange is not legible at this size. */
.nav__drop-cat:hover,
.nav__drop-cat:focus-visible,
.nav__drop-sub a:hover,
.nav__drop-sub a:focus-visible { background-color: rgb(var(--rgb-accent) / 0.09); color: var(--orange-text); }

/* — Mobile menu: accordions —
   One per navigation branch that HAS children. A `+` that expands nothing is
   never rendered, so there is nothing here that hides a toggle: if you see one,
   the database gave that branch children. */
.mm-acc-toggle {
  flex: none; width: 44px; height: 44px; position: relative; border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff;
  cursor: pointer;
}
.mm-acc-toggle span { position: absolute; left: 12px; right: 12px; top: 50%; margin-top: -1px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s; }
.mm-acc-toggle span:last-child { transform: rotate(90deg); }   /* the two bars make a + */
.mm-acc-toggle[aria-expanded="true"] span:last-child { opacity: 0; transform: rotate(0); }  /* … and a − when open */
.mm-acc-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* The `hidden` attribute has to WIN over these display rules — an author
   `display: grid` beats the user-agent `[hidden] { display: none }`, which is
   why the tree used to stand permanently open however the toggle was set. */
.mm-sub, .mm-subsub { list-style: none; display: grid; }
.mm-sub[hidden], .mm-subsub[hidden] { display: none; }

.mm-sub { margin: 2px 0 12px; padding: 0 0 0 10px; gap: 2px; border-left: 2px solid rgba(255, 255, 255, 0.18); }
.mm-row--cat { gap: 8px; }
.mm-row--cat > a,
.mm-cat > a {   /* the second selector also covers the pre-drawer fallback markup */
  flex: 1 1 auto; display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  letter-spacing: 0; padding: 6px 0; color: #fff; opacity: 1; transform: none;
  overflow-wrap: anywhere;
}
.mm-subsub { margin: 0 0 8px; padding: 0 0 0 12px; gap: 1px; border-left: 2px solid rgba(255, 255, 255, 0.22); }
.mm-subsub a {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.94rem;
  letter-spacing: 0; padding: 4px 0 4px 10px; color: rgba(255, 255, 255, 0.72);
  opacity: 1; transform: none; overflow-wrap: anywhere;
}
.mm-subsub a:hover { color: #fff; }

/* ============================ 08. HERO ============================ */
.hero {
  position: relative;
  /* True one-viewport height on every device (fallbacks first, best last) */
  height: calc(var(--app-vh, 1vh) * 100);   /* JS fallback for old browsers */
  height: 100vh;
  height: 100svh;                            /* small viewport unit (mobile chrome) */
  min-height: calc(var(--app-vh, 1vh) * 100);
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(90px, 12vh, 150px);
  overflow: hidden;
  color: var(--ink);
}
.hero__media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; z-index: -2; will-change: transform; }
.hero__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Hero slider: 3 cross-fading slides behind the fixed content */
.hero__slider { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Slider controls — hidden until mouse moves; always shown on focus/touch */
.hero__controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); }
.hero__controls.is-visible { opacity: 1; }
.hero__controls :focus-visible { opacity: 1; }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; display: grid; place-items: center;
  color: rgb(var(--rgb-primary-dark) / 0.65); background: rgba(255, 255, 255, 0.55); border: 1px solid rgb(var(--rgb-primary-dark) / 0.22);
  border-radius: 50%; backdrop-filter: blur(6px); pointer-events: auto;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__arrow:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.hero__arrow--prev { left: clamp(14px, 3vw, 34px); }
.hero__arrow--next { right: clamp(14px, 3vw, 34px); }
.hero__dots { position: absolute; left: 50%; bottom: clamp(74px, 11vh, 128px); transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; }
/* 24×24 hit area (WCAG target-size) with a 10px visible dot centred via ::before. */
.hero__dot { width: 24px; height: 24px; border: 0; background: transparent; padding: 0; position: relative; border-radius: 50%; }
.hero__dot::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1.5px solid rgb(var(--rgb-primary-dark) / 0.55); background: transparent;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.hero__dot.is-active::before { background: var(--orange); border-color: var(--orange); transform: scale(1.15); }
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Rev #7: directional text-column scrim only; right two-thirds untouched. */
  background: var(--scrim-col);
  --scrim-k: 1;   /* default; overridden per active slide (SCRIMK block) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Mobile/portrait: hero text sits low, so scrim strong at the bottom. */
@media (max-width: 760px) {
  .hero__scrim { background: var(--scrim-col-hero-mobile); }
}
/*SCRIMK:START (generated by tools/build-scrim.js — per-slide adaptive scrim strength)*/
.hero[data-slide="0"] .hero__scrim { --scrim-k: 0.3; }
.hero[data-slide="1"] .hero__scrim { --scrim-k: 0.5; }
.hero[data-slide="2"] .hero__scrim { --scrim-k: 0.6; }
/*SCRIMK:END*/
.hero__content { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: 26px; color: var(--blue); }
.hero__eyebrow .ticks {
  width: 46px; height: 10px; flex: none;
  background-image: repeating-linear-gradient(90deg, var(--orange) 0 1px, transparent 1px 8px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 30px;
  max-width: 15ch;
  /* Rev #7 (item 4b): a tight white halo buys local contrast for any glyph that
     sits over a busier/darker part of the photo (e.g. the green-machine slide) —
     at zero cost to the photo, so the scrim itself can stay light. Invisible over
     the light scrimmed column; only shows where the photo behind a glyph is dark. */
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(255, 255, 255, 0.72), 0 0 12px rgba(255, 255, 255, 0.55);
}
/* Italic orange emphasis echoes the italic "Lika" in the logo wordmark */
.hero__title .accent { color: var(--orange); font-style: italic; }
.hero__subtitle {
  font-size: var(--fs-lead);
  max-width: 52ch;
  /* Rev #4: ink (near-black); Rev #7: tighter column + white halo so the lead
     stays legible without a full-width wash. */
  color: var(--ink);
  margin-bottom: 38px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 0 8px rgba(255, 255, 255, 0.42);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.hero__marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 16px 0;
  border-top: 1px solid rgb(var(--rgb-primary-dark) / 0.12);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.hero__marquee .marquee__track {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  animation-duration: 32s;
}
.hero__marquee i { color: var(--orange); font-style: normal; }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(90px, 12vh, 150px);
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--rgb-primary-dark) / 0.55);
}
.hero__scroll:hover { color: var(--blue-deep); }
.hero__scroll-line { width: 1px; height: 46px; background: rgb(var(--rgb-primary-dark) / 0.25); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--orange); animation: scrollpulse 1.9s var(--ease) infinite; }
@keyframes scrollpulse { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ============================ 09. CAPABILITY ============================ */
.capability { padding: clamp(56px, 8vw, 96px) 0; border-bottom: 1px solid var(--line); }
/* FIVE stats since „500+ proizvoda u ponudi" joined the row. Five equal
   columns, and the gap and the numeral size come down with them: at 1280 the
   old 4-up geometry left 258 px a column, five leaves 212 px, and „3000 mm"
   set at the shared 3.6rem needs ~230 px. Shrinking the numeral only INSIDE
   this grid keeps the identical `.stat` used on o-nama at its own size. */
.capability__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}
.capability__grid .stat__num { font-size: clamp(1.9rem, 3.1vw, 2.7rem); }
.capability__grid .stat__label { max-width: 24ch; }
.stat { border-left: 2px solid var(--line); padding-left: 22px; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: 12px; font-size: 0.92rem; color: var(--graphite); max-width: 20ch; }

/* The scrolling client band that used to live here is gone. It was a row of
   hand-typed text chips marked „REPLACE: real client logos", four of which
   named companies the client does not present as collaborators. The companies
   now have ONE presentation, `.refcos` below, rendered from the database on
   both the homepage and /reference.html. */

/* ============================ 10. SEGMENTS ============================ */
.segments { padding: var(--section-pad) 0; background: var(--paper); }
/* ── HEADING COLOUR RULE ──────────────────────────────────────────────────
   The client's note was that homepage headings appear in blue, black AND
   white with no visible reason. They did: .section-head used near-black,
   .segments used the mid blue, .catsec used the mid blue and .pgrid used the
   navy — four values for one job.

   ONE RULE NOW, and it has exactly three cases:

     light surface   → --color-heading (#12263C). Every h1/h2/h3.
     dark surface    → #fff / rgba(255,255,255,.9). Set by the dark section
                       itself (.process, .services, .cta-band, .footer).
     accent          → --color-accent, and ONLY on an .accent span the author
                       opted into — the italic word that echoes the logo.

   A heading never picks the mid blue again. The blue is now a LINK and DATA
   colour, which is the job it was competing with. */
.section-head .section-title { color: var(--color-heading); }
.segments__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 34px); }
.seg-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.seg-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -30px rgb(var(--rgb-primary-dark) / 0.4); }
.seg-card__media { position: relative; aspect-ratio: 5 / 6; overflow: hidden; }
.seg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.seg-card:hover .seg-card__media img { transform: scale(1.06); }
.seg-card__corner {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  opacity: 0;
  transform: translate(-8px, 8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.seg-card:hover .seg-card__corner { opacity: 1; transform: none; }
.seg-card__body { padding: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.seg-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); letter-spacing: -0.01em; transition: transform 0.35s var(--ease); }
.seg-card:hover .seg-card__title { transform: translateX(4px); }
.seg-card__text { color: var(--graphite); font-size: 0.98rem; flex: 1; }
.seg-card .arrow-link { margin-top: 6px; }
.seg-card:hover .arrow-link i { transform: translateX(6px); }

/* ==================== 11. SERVICE SLIDER (usluge) ====================
   Replaces the old scroll-driven product showcase, which pinned the section
   and translated a track horizontally from ScrollTrigger's scrub. Nothing here
   listens to page scroll: the carousel moves only from its own arrows, its own
   swipe handler and its own 5 s timer.

   SLIDES-PER-VIEW LIVES HERE, NOT IN JAVASCRIPT. `--svc-per` is read back by
   service-slider.js through getComputedStyle, so the breakpoints are declared
   once, in CSS, and the script cannot disagree with the layout.

   1:1 SLIDES, AND THAT IS DELIBERATE. All seventeen source images are
   1254x1254. A square frame with object-fit: cover therefore crops NOTHING
   while still guaranteeing a filled box. A 4/3 frame was measured against the
   set first and rejected: it cut the top and bottom off the inox sign, the
   staircase, the free-standing stand and the lectern, whose subjects run the
   full height of the frame. `cover` is kept rather than `contain` so a future
   replacement image that is not perfectly square fills the frame instead of
   letterboxing. */
.svcslider {
  padding: var(--section-pad) 0;
  --svc-per: 1;
  --svc-gap: 14px;
}
@media (min-width: 640px)  { .svcslider { --svc-per: 2; --svc-gap: 18px; } }
@media (min-width: 1024px) { .svcslider { --svc-per: 3; --svc-gap: clamp(18px, 1.8vw, 26px); } }

.svcslider__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.2vw, 46px);
}
.svcslider__head .eyebrow { margin-bottom: 16px; }
.svcslider__all { flex: none; }
.svcslider__all i { font-style: normal; transition: transform 0.35s var(--ease); }
.svcslider__all:hover i { transform: translateX(5px); }

.svcslider__frame { position: relative; }
.svcslider__viewport { overflow: hidden; }

.svcslider__track {
  display: flex;
  gap: var(--svc-gap);
  will-change: transform;
  transition: transform 0.55s var(--ease);
}
/* Set while the loop silently rewinds from a clone onto the real slide, and for
   the whole session under prefers-reduced-motion. */
.svcslider__track.is-instant { transition: none; }

.svc-slide {
  flex: 0 0 calc((100% - (var(--svc-per) - 1) * var(--svc-gap)) / var(--svc-per));
  min-width: 0;
  margin: 0;
}
.svc-slide picture { display: contents; }
.svc-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;          /* with width/height on the tag: no CLS */
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
}

/* Arrows — real buttons, inset over the rail so they are reachable at every
   width without making the section wider. 46px clears the 44px tap target. */
.svcslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  box-shadow: 0 6px 20px -10px rgb(var(--rgb-primary-dark) / 0.45);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.svcslider__arrow:hover {
  background: var(--color-primary-dark);
  color: #fff;
  border-color: var(--color-primary-dark);
}
.svcslider__arrow--prev { left: 8px; }
.svcslider__arrow--next { right: 8px; }

/* ============================ 12. PROCESS ============================ */
.process { padding: var(--section-pad) 0; background: var(--ink); color: #fff; }
.process__head { margin-bottom: clamp(40px, 5vw, 70px); }
.process__head .eyebrow { margin-bottom: 18px; }
.process__head .section-title { color: #fff; }
.process__scene { display: grid; gap: clamp(28px, 4vw, 60px); }

/* Sticky visual frame — hidden by default (mobile/no-JS shows inline imgs) */
.process__media { display: none; }
.pvis { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s var(--ease); }
.pvis img { width: 100%; height: 100%; object-fit: cover; }
.pvis.is-active { opacity: 1; }

.process__list { display: grid; }
.pstep { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: clamp(20px, 3vw, 34px) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.pstep__num { font-family: var(--font-mono); font-size: 1rem; color: var(--orange); padding-top: 6px; }
.pstep__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border-radius: var(--radius-sm); margin-bottom: 18px; }
.pstep__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
.pstep__text { color: rgba(255, 255, 255, 0.72); margin-top: 8px; max-width: 46ch; }

/* ============================ 13. REFERENCES ============================ */
.refs { padding: var(--section-pad) 0; }
.refs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.refs__head .eyebrow { margin-bottom: 16px; }
.refs__filters { display: flex; flex-wrap: wrap; gap: 10px; }
/* Bento grid — every tile shares 4/3 so rows align with zero gaps */
.refs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); grid-auto-flow: dense; }
.ref-item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.ref-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
/* Desktop only: first tile becomes a 2×2 feature (6 items fill 3×3 exactly) */
@media (min-width: 1024px) {
  .ref-item--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
/* When a filter is active, drop the feature span so any subset still tiles cleanly */
.refs__grid.is-filtered .ref-item--feature { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
.ref-item.is-hidden { display: none; }
.ref-item:hover img { transform: scale(1.06); }
.ref-item__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px;
  display: grid;
  gap: 3px;
  color: #fff;
  background: linear-gradient(to top, rgb(var(--rgb-primary-dark) / 0.92), transparent);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.ref-item:hover .ref-item__cap, .ref-item:focus-within .ref-item__cap { transform: none; opacity: 1; }
.ref-item__cap strong { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; }
.ref-item__cap span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.8); }
.ref-item.is-dim { opacity: 0.32; filter: grayscale(0.6); transition: opacity 0.4s, filter 0.4s; }

/* ---------------------------------------------------------------------------
   13b. COMPANY REFERENCES — „Sa kim je JT Lika sarađivala?"
   ---------------------------------------------------------------------------
   The presentation `.refs` above was a photo gallery of realisations. This one
   answers a different question — which companies — and it is used TWICE, by
   /reference.html and by the homepage, from the same database rows.

   EQUAL VISUAL WEIGHT IS THE POINT. Every card is the same size whatever it
   holds, so no company reads as bigger than another and a logo added later
   drops into exactly the box a name occupies today. Deliberately NOT a product
   card: no shadow, no image frame, no hover lift, no orange fill — one pale
   wash, one hairline, and the name.
   --------------------------------------------------------------------------- */
.refcos { padding: var(--section-pad) 0; }
.refcos__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 24px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.refcos__head .eyebrow { margin-bottom: 16px; }
.refcos__head .section-title { max-width: 24ch; }
.refcos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}
/* 320 px is too narrow for two cards and a long name; one column reads. */
@media (max-width: 359px)  { .refcos__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px)  { .refcos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .refcos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.refco {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(84px, 9vw, 108px);
  padding: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 20px);
  background: var(--paper-blue);
  border: 1px solid rgb(var(--rgb-primary-dark) / 0.09);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.refco:hover { border-color: rgb(var(--rgb-accent) / 0.42); background-color: #fff; }
.refco__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.98rem, 2.6vw, 1.14rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
  overflow-wrap: anywhere;   /* „Telekom Srbija" must wrap, never widen the page */
}
/* A real logo, when one is attached in the admin panel, occupies the same box:
   contained, centred, never stretched and never cropped. */
.refco__logo { display: block; width: 100%; }
.refco__logo picture { display: block; }
.refco__logo img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: clamp(40px, 5vw, 56px);
  margin: 0 auto;
  object-fit: contain;
}
/* One column at 320: a full-width card needs less height to look deliberate,
   and eleven at the desktop height would be a long scroll for little content.
   AFTER the base rule, not before it — same specificity, so source order is
   what decides which min-height wins. */
@media (max-width: 359px) {
  .refco { min-height: 62px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .refco { transition: none; } }

/* ============================ 14. SERVICES ============================ */
.services { position: relative; padding: clamp(90px, 13vw, 180px) 0; background: var(--blue-deep); color: #fff; overflow: hidden; }
.services__bg { position: absolute; inset: -8% 0 0 0; width: 100%; height: 116%; object-fit: cover; opacity: 0.22; z-index: 0; will-change: transform; }
.services::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(var(--rgb-primary-dark) / 0.9), rgb(var(--rgb-primary-dark) / 0.55)); z-index: 0; }
.services__content { position: relative; z-index: 1; max-width: 780px; }
.services__content .eyebrow { margin-bottom: 22px; }
.services__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 22px; max-width: 20ch; }
.services__sub { font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.85); margin-bottom: 32px; max-width: 60ch; }
.services__actions { margin-bottom: 30px; }

/* ============================ 15. RFQ ============================ */
.rfq { padding: var(--section-pad) 0; background: var(--paper); }
.rfq__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
/* A grid item's default `min-width: auto` is its CONTENT's minimum width, and a
   file input refuses to report anything smaller than its button plus its
   filename box. Without this the contact form pushed the whole page ~19 px wide
   at 390 px. Letting the columns shrink, and capping the controls, fixes it at
   the source rather than hiding it with overflow-x. */
.rfq__grid > *, .rfq__form > * { min-width: 0; }
/* The same fault one level deeper, and the reason `max-width: 100%` below is
   not enough on its own. `.field` is ITSELF a grid, so its single auto column
   is sized by its content's minimum — for the „Tema / proizvod" select that is
   the longest option, „Garderobni, arhivski ormani i ostali ormani", 358 px.
   The track grew to 358, `max-width: 100%` resolved against that 358 rather
   than against the 280 px the field actually had, and kontakt.html carried a
   58 px horizontal scrollbar at 320 px. Measured, not guessed. */
.field > * { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; }
.field input[type="file"] { width: 100%; }
.rfq__intro .eyebrow { margin-bottom: 18px; }
.rfq__lead { font-size: var(--fs-lead); color: var(--graphite); margin: 18px 0 34px; }
.rfq__direct { border-top: 1px solid var(--line); padding-top: 26px; }
.rfq__phone { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; color: var(--blue); }
.rfq__hours { color: var(--graphite); margin-top: 6px; font-size: 0.95rem; }
.rfq__hours a { color: var(--blue); }

.rfq__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.85em 1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(var(--rgb-primary) / 0.14);
}
.field input.invalid, .field textarea.invalid { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12); }
.rfq__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.rfq__note { font-size: 0.85rem; color: var(--graphite); }
.rfq__status { grid-column: 1 / -1; }
.rfq__status:empty { display: none; }
.rfq__status .ok { display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--orange); }
.rfq__status .ok strong { font-family: var(--font-display); font-size: 1.15rem; }
.rfq__status .err { display: grid; gap: 8px; padding: 16px 20px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); border-left: 3px solid #d23; color: #a11; font-size: 0.95rem; }
.rfq__status .err strong { font-family: var(--font-display); font-size: 1.05rem; color: #a11; }
.rfq__status .err a, .rfq__status .rfq-alt a { color: var(--blue); font-weight: 600; }
.rfq__status .sending { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--graphite); padding: 14px 0; }
.rfq__status .rfq-alt { font-size: 0.85rem; color: var(--graphite); }

/* ============================ 16. FOOTER ============================ */
.footer { background: var(--blue-deep); color: rgba(255, 255, 255, 0.8); border-top: 3px solid var(--orange); padding-top: clamp(56px, 7vw, 96px); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1.3fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); }
.footer__logo-chip { display: inline-flex; background: #fff; border-radius: var(--radius-sm); padding: 10px 14px; }
.footer__logo-chip img { height: 40px; width: auto; }
.footer__tagline { margin-top: 18px; color: rgba(255, 255, 255, 0.65); max-width: 26ch; }
.footer__h { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; font-weight: 500; }
.footer__addr { font-style: normal; line-height: 1.9; font-size: 0.95rem; }
.footer__addr a:hover { color: #fff; }
.footer__links { display: grid; gap: 10px; font-size: 0.95rem; }
.footer__links a { position: relative; }
.footer__links a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.85rem; }
.footer__social { display: flex; gap: 12px; }
.footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; color: rgba(255, 255, 255, 0.8); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.footer__social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ============================ 17. RESPONSIVE ============================ */
@media (min-width: 1024px) {
  .hero__scroll { display: flex; }
}

@media (max-width: 1023px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .header__logo img { height: 46px; }

  /* Below the desktop nav: three across, so five items read 3 + 2 rather than
     4 + 1, which leaves one card stranded on a line of its own. */
  .capability__grid { grid-template-columns: repeat(3, 1fr); }
  .segments__grid { grid-template-columns: 1fr; max-width: 460px; }
  .segments__grid .seg-card__media { aspect-ratio: 16 / 10; }

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

  .refs__grid { grid-template-columns: repeat(2, 1fr); }

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

  /* Process becomes a simple stacked story (media panel stays hidden) */
  .pstep { grid-template-columns: 1fr; }
  .pstep__num { padding-top: 0; }
}

@media (min-width: 1024px) {
  /* Desktop scrolly process: reveal sticky media, hide inline step images */
  .process__scene { grid-template-columns: 1fr 1fr; align-items: start; }
  .has-motion .process__media { display: block; position: sticky; top: 12vh; height: 76vh; border-radius: var(--radius); overflow: hidden; }
  .has-motion .pstep__img { display: none; }

  /* Step list with a vertical rail that fills orange as you scroll (--pp) */
  .has-motion .process__list { position: relative; padding-block: 6vh; padding-left: 30px; }
  .has-motion .process__list::before { content: ""; position: absolute; left: 0; top: 6vh; bottom: 6vh; width: 2px; background: rgba(255, 255, 255, 0.14); }
  .has-motion .process__list::after { content: ""; position: absolute; left: 0; top: 6vh; width: 2px; height: calc((100% - 12vh) * var(--pp, 0)); background: var(--orange); }
  .has-motion .pstep { min-height: 46vh; align-content: center; border-top: none; opacity: 0.75; transition: opacity 0.4s var(--ease); }
  .has-motion .pstep.is-active { opacity: 1; }
}

@media (max-width: 640px) {
  .header__logo img { height: 40px; }
  .capability__grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .refs__grid { grid-template-columns: 1fr; }
  .ref-item { grid-column: auto; aspect-ratio: 4 / 3; }
  .rfq__form { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .ref-item__cap { transform: none; opacity: 1; }   /* captions always visible on touch */
  .btn { width: 100%; }
  .hero__actions .btn { width: auto; flex: 1 1 auto; }
}

/* ============================ 19. REVISION #1 ADDITIONS ============================ */

/* Floating-UI bottom-offset coordination (mobile CTA stack) */
:root { --float-base: 22px; --mcta-h: 0px; --float-y: calc(var(--float-base) + var(--mcta-h)); }
@media (max-width: 1023px) { :root { --mcta-h: 64px; } }

/* — Film-grain overlay — */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
}

/* — Blueprint dot-grid on the capability (stats) section — */
.capability { position: relative; }
.capability::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgb(var(--rgb-primary) / 0.09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.capability > .container { position: relative; z-index: 1; }

/* — Draw-in hairline dividers — */
.rule { margin: 0 0 clamp(30px, 5vw, 54px); }
.rule span { display: block; height: 1px; width: 100%; background: var(--line); transform-origin: left; }

/* — Footer author credit — */
.footer__credit { display: inline-block; margin-left: 6px; color: rgba(255, 255, 255, 0.55); }
.footer__credit a { color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.45); transition: color 0.3s, border-color 0.3s; }
.footer__credit a:hover { color: var(--orange); border-color: var(--orange); }

/* — Back-to-top (bottom-right) with orange progress ring — */
.to-top {
  position: fixed; right: clamp(14px, 3vw, 24px); bottom: var(--float-y); z-index: 95;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: 50%; box-shadow: 0 10px 30px -12px rgb(var(--rgb-primary-dark) / 0.5);
  opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.3s, color 0.3s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--blue-deep); color: #fff; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__track { fill: none; stroke: var(--line); stroke-width: 2; }
.to-top__prog { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; }
.to-top__arrow { position: relative; }

/* — AI assistant (bottom-left) — */
.assistant { position: fixed; left: clamp(14px, 3vw, 24px); bottom: var(--float-y); z-index: 95; }
.assistant__launcher {
  position: relative; width: 60px; height: 60px; display: grid; place-items: center;
  color: #fff; background: var(--blue); border: none; border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgb(var(--rgb-primary) / 0.7);
  transition: transform 0.3s var(--ease), background 0.3s;
}
.assistant__launcher::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(var(--rgb-primary) / 0.5); animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--rgb-primary) / 0.5); } 70%, 100% { box-shadow: 0 0 0 16px rgb(var(--rgb-primary) / 0); } }
.assistant__launcher:hover { transform: scale(1.06); background: #1a63b8; }
.assistant__icon-close { display: none; }
.assistant.is-open .assistant__icon-chat { display: none; }
.assistant.is-open .assistant__icon-close { display: block; }
.assistant.is-open .assistant__launcher::after { animation: none; }
.assistant__badge { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; }
.assistant.is-open .assistant__badge { display: none; }

.assistant__panel[hidden] { display: none; }   /* respect the hidden attribute over display:flex */
.assistant__panel {
  position: absolute; left: 0; bottom: calc(100% + 14px);
  width: min(360px, calc(100vw - 28px)); max-height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 70px -24px rgb(var(--rgb-primary-dark) / 0.55);
  transform-origin: bottom left;
}
.assistant__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--blue-deep); color: #fff; }
.assistant__avatar { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; flex: none; }
.assistant__online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #37d67a; border: 2px solid var(--blue-deep); }
.assistant__title { display: flex; flex-direction: column; font-weight: 600; font-size: 0.98rem; line-height: 1.2; }
.assistant__title em { font-style: normal; font-weight: 400; font-size: 0.74rem; color: rgba(255, 255, 255, 0.7); }
.assistant__x { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: transparent; border: none; border-radius: 8px; }
.assistant__x:hover { background: rgba(255, 255, 255, 0.12); }
.assistant__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.assistant__msg { max-width: 85%; padding: 10px 13px; border-radius: var(--radius); font-size: 0.92rem; line-height: 1.5; }
.assistant__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.assistant__msg--user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.assistant__msg a { color: var(--orange-deep); font-weight: 600; text-decoration: underline; }
.assistant__msg--user a { color: #fff; }
.assistant__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.assistant__quick button { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; padding: 7px 12px; border: 1px solid var(--line); border-radius: 100px; background: #fff; color: var(--blue); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.assistant__quick button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.assistant__input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.assistant__input input { flex: 1; font: inherit; font-size: 0.92rem; padding: 0.6em 0.9em; border: 1px solid var(--line); border-radius: 100px; }
.assistant__input input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--rgb-primary) / 0.14); }
.assistant__input button { flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--orange); border: none; border-radius: 50%; transition: background 0.25s; }
.assistant__input button:hover { background: var(--orange-deep); }

/* — Sticky mobile CTA — */
.mcta { display: none; }
@media (max-width: 1023px) {
  .mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 94; display: flex; gap: 10px; padding: 10px clamp(12px, 4vw, 20px); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -14px rgb(var(--rgb-primary-dark) / 0.4); transform: translateY(120%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0.4s var(--ease); }
  /* visibility:hidden while off-screen removes the links from the tab order + AT,
     so no aria-hidden is needed (avoids the aria-hidden-focus violation). */
  .mcta.is-visible { transform: none; visibility: visible; }
  .mcta__quote { flex: 1; }
  .mcta__call { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; color: var(--blue); border: 1px solid var(--line); border-radius: 100px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
}

/* Hide floating UI while the mobile menu overlay is open */
.menu-open .to-top, .menu-open .assistant, .menu-open .mcta { opacity: 0; pointer-events: none; }

/* ============================ 18. REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; }
  .hero__scroll-line::after { animation: none; }
  .assistant__launcher::after { animation: none; }   /* no pulse */
  .hero__controls { opacity: 1; }                     /* slider controls always visible */
  /* Reveal states never applied (no .has-motion), so content is fully visible */
}

/* ============================ 20. CATALOG PAGES (Proizvodi + Proizvod) ============================
   Shared chrome (header/footer/floating UI) comes from the homepage styles above.
   These pages open with a dark intro band so the transparent white nav stays
   legible over an otherwise white page. */

/* — Dark intro band / page hero — */
.page-hero {
  position: relative;
  background: linear-gradient(158deg, var(--white) 0%, var(--paper) 100%);
  color: var(--ink);
  padding-top: calc(var(--header-h) + clamp(30px, 6vw, 66px));
  padding-bottom: clamp(34px, 6vw, 66px);
  overflow: hidden;
  --scrim-k: 0.5;   /* default; overridden per page via inline style (measure-scrim.js) */
}
/* Real image behind the banner: positioned right, blurred, under a strong
   left→right dark gradient so the heading/breadcrumb stay AA-legible while the
   empty right side gets filled. The base gradient above is the no-image fallback. */
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  filter: blur(10px);
  transform: scale(1.1);            /* hides the soft blurred edges */
  opacity: 0.9;
  pointer-events: none;
}
.page-hero::after {                     /* Rev #7: directional text-column scrim */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--scrim-col);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Mobile/portrait: inner-page hero text sits high, so scrim strong at the top. */
@media (max-width: 760px) {
  .page-hero::after { background: var(--scrim-col-inner-mobile); }
}
.page-hero::before {                    /* blueprint dot-grid texture (kept on top) */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(rgb(var(--rgb-primary-dark) / 0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.page-hero__inner { position: relative; z-index: 3; }
.page-hero .eyebrow { margin-bottom: 16px; color: var(--color-heading); }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
  max-width: 15ch;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.72), 0 0 10px rgba(255, 255, 255, 0.5);
}
.page-hero__title .accent { color: var(--orange); font-style: italic; }
.page-hero__lead { font-size: var(--fs-lead); color: var(--ink); max-width: 54ch; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 0 8px rgba(255, 255, 255, 0.42); }
.page-hero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.page-hero__meta .mono { color: var(--orange-text); }
/* Product detail hero: name can be long, so cap it at H2 scale */
.page-hero--product .page-hero__title { font-size: var(--fs-h2); max-width: 22ch; }
.page-hero--product .page-hero__meta .chip { color: var(--blue-deep); border-color: rgb(var(--rgb-primary-dark) / 0.28); }

/* — Breadcrumb — */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 22px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--graphite);
}
.breadcrumb a { color: var(--blue); transition: color 0.3s var(--ease); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { color: rgb(var(--rgb-primary-dark) / 0.3); }
.breadcrumb [aria-current] { color: var(--ink); }

/* — Category cards — */
.catsec { padding: clamp(40px, 6vw, 78px) 0 clamp(8px, 1.6vw, 18px); }
.catsec__head { margin-bottom: clamp(24px, 3vw, 40px); }
.catsec__head .eyebrow { margin-bottom: 14px; }
.catsec__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; color: var(--color-heading); }
.cat-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.cat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--ink); aspect-ratio: 4 / 5;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -28px rgb(var(--rgb-primary-dark) / 0.5); }
.cat-card__media { position: absolute; inset: 0; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; transition: transform 0.7s var(--ease), opacity 0.4s var(--ease); }
.cat-card:hover .cat-card__media img { transform: scale(1.07); opacity: 0.6; }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 14, 20, 0.94) 4%, rgba(10, 14, 20, 0.2) 55%, rgba(10, 14, 20, 0.42)); }
.cat-card__body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(12px, 1.2vw, 18px); color: #fff; }
.cat-card__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.92rem, 1.05vw, 1.12rem); line-height: 1.14; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cat-card__count { display: inline-block; margin-top: 7px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--orange); }
.cat-card__corner { position: absolute; top: 12px; right: 12px; z-index: 1; width: 26px; height: 26px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); opacity: 0; transform: translate(-6px, 6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.cat-card:hover .cat-card__corner { opacity: 1; transform: none; }

/* — Toolbar: category chips + search (sticks under the fixed header) — */
.toolbar { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.toolbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-block: 13px; }
.toolbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar__chips .chip { cursor: pointer; }
.toolbar__search { margin-left: auto; position: relative; display: flex; align-items: center; }
.toolbar__search svg { position: absolute; left: 13px; color: var(--graphite); pointer-events: none; }
.toolbar__search input { font: inherit; font-size: 0.92rem; padding: 0.58em 1em 0.58em 2.5em; border: 1px solid var(--line); border-radius: 100px; background: #fff; color: var(--ink); width: min(300px, 62vw); transition: border-color 0.3s, box-shadow 0.3s; }
.toolbar__search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--rgb-primary) / 0.14); }

/* — Product grid — */
.catalog { padding: clamp(28px, 4vw, 52px) 0 var(--section-pad); }
.catalog__count { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--graphite); margin-bottom: 22px; }
.catalog__count b { color: var(--ink); }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pcard { display: flex; }
.pcard.is-hidden { display: none; }

/* Rev #4: full-width category + subcategory heads inside the grid double as the
   two-level anchor targets (#<cat> and #<cat>-<sub>). scroll-margin clears the
   sticky header + toolbar when deep-linking. */
.pgrid__cathead, .pgrid__catintro, .pgrid__subhead, .pgrid__uskoro { grid-column: 1 / -1; scroll-margin-top: calc(var(--header-h) + 84px); }
/* Category heading — a pale blue band with an orange edge.
   It replaces a hairline rule that read as one more divider among many, so
   scrolling past a category boundary was easy to miss. Deliberately a band and
   not a card: no shadow, no border box, no lift — it separates, it does not
   compete with the product cards under it. */
.pgrid__cathead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px 18px; flex-wrap: wrap;
  margin: clamp(34px, 4.4vw, 58px) 0 0;
  padding: clamp(13px, 1.5vw, 18px) clamp(15px, 1.7vw, 22px);
  background: var(--paper-blue);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
}
.pgrid__cathead:first-child { margin-top: 0; }
.pgrid__cathead-k { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.3vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--color-heading); overflow-wrap: anywhere; }
/* `.pgrid__cathead-n` — the „13 proizvoda" that sat on the right of the band —
   is no longer rendered. The rule is gone with it; the band now holds the
   category name alone, which is what `space-between` above lays out. */
/* Aligned with the band's text, and gone entirely when the category has no
   description — an empty paragraph must not leave a gap in the grid. */
.pgrid__catintro { margin: 0 0 6px; padding-left: calc(4px + clamp(15px, 1.7vw, 22px)); max-width: 74ch; color: var(--graphite); font-size: 0.98rem; }
.pgrid__catintro:empty { display: none; }
/* `justify-content` is `flex-start` now, not `space-between`: the count that
   sat on the right (`.pgrid__subhead .mono`, „SUDOPERE … 5") is no longer
   rendered, and space-between with one child is only correct by accident. */
.pgrid__subhead {
  display: flex; align-items: center; gap: 14px;
  margin: clamp(16px, 2vw, 26px) 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-deep);
}
.pgrid__uskoro {
  margin: 4px 0 6px; padding: 18px 20px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--graphite); font-size: 0.95rem;
}
.pgrid__uskoro a { color: var(--blue); font-weight: 600; }
.pgrid__uskoro a:hover { color: var(--orange); }
/* hidden by category filter / search */
.pgrid__cathead.is-hidden, .pgrid__catintro.is-hidden, .pgrid__subhead.is-hidden, .pgrid__uskoro.is-hidden { display: none; }
.pcard__link { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s; }
.pcard__link:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgb(var(--rgb-primary-dark) / 0.45); border-color: transparent; }
/* PRODUCT IMAGE — fitted, not cropped (see .gallery__main img). The card
   keeps its 4/3 box and its width/height attributes, so nothing shifts. */
.pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); padding: 10px; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 0.7s var(--ease); }
/* <picture> is a transparent wrapper around the fill image (WebP + .jpg fallback) */
.cat-card__media picture, .pcard__media picture, .gallery__main picture, .gallery__thumb picture, .hero__slide picture,
.header__logo picture, .footer__logo-chip picture,
/* Process section (uspravno-*): the WebP source was added to markup that sized
   the <img> against its parent — `.pvis img{height:100%}` and
   `.pstep__img{width:100%}`. Without this the <picture> becomes an inline box
   between them and both percentages resolve against it instead of the figure. */
.pvis picture, .pstep__body picture { display: contents; }
.pcard__link:hover .pcard__media img { transform: scale(1.06); }
.pcard__more { position: absolute; inset: auto 12px 12px auto; display: inline-flex; align-items: center; gap: 6px; padding: 0.5em 0.85em; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: #fff; background: var(--blue); border-radius: 100px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.pcard__more i { font-style: normal; }
.pcard__link:hover .pcard__more, .pcard__link:focus-visible .pcard__more { opacity: 1; transform: none; }
.pcard__body { padding: 15px 17px 19px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pcard__tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--orange-text); }
.pcard__title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.22; letter-spacing: -0.01em; color: var(--color-heading); overflow-wrap: anywhere; }

/* Catalog-managed reveal (independent of the homepage ScrollTrigger batch so
   filtering can never leave a card stuck invisible). Added by catalog.js only
   when motion is allowed; without it the cards are simply visible. */
.pgrid.reveal-ready .pcard { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.pgrid.reveal-ready .pcard.in { opacity: 1; transform: none; }

.no-results { text-align: center; padding: 56px 0; color: var(--graphite); font-size: 1.05rem; }
.no-results[hidden] { display: none; }

/* — Product detail — */
.product { padding: clamp(38px, 6vw, 82px) 0 clamp(30px, 4vw, 56px); }
.product__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 66px); align-items: start; }

/* Gallery */
/* PRODUCT IMAGE — the product page is where the whole item matters most. */
.gallery__main { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); aspect-ratio: 4 / 3; padding: clamp(10px, 1.4vw, 18px); }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; object-position: center; cursor: zoom-in; }
.gallery__expand { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: rgb(var(--rgb-primary-dark) / 0.55); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; backdrop-filter: blur(4px); pointer-events: none; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gallery__thumb { width: 80px; height: 62px; padding: 4px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; background: var(--paper); opacity: 0.68; transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease); }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--orange); opacity: 1; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.gallery__replace { margin-top: 14px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--graphite); display: inline-flex; align-items: center; gap: 8px; }
.gallery__replace::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }

/* Details column */
.pd__desc { color: var(--graphite); font-size: 1.04rem; line-height: 1.7; margin-bottom: 26px; max-width: 54ch; }
.pd__desc:empty { display: none; }
.specs { margin-bottom: 30px; border-top: 1px solid var(--line); }
.specs__row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.specs__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--graphite); align-self: center; }
.specs__v { font-weight: 500; color: var(--ink); }
.specs__v.is-upit { font-weight: 400; font-style: italic; color: var(--graphite); }
.pd__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 4px; }
.pd__phone { display: inline-flex; flex-direction: column; }
.pd__phone b { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--blue); }
.pd__phone span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--graphite); }
.pd__back { margin-top: 26px; }

/* Related products */
.related { padding: 0 0 var(--section-pad); }
.related__head { margin-bottom: clamp(22px, 3vw, 38px); }
.related__head .eyebrow { margin-bottom: 14px; }
.related__head .section-title { font-size: var(--fs-h3); color: var(--color-heading); }

/* Lightbox */
/* The overlay used to be where the pointer vanished: the page hid the native
   cursor and drew its own at z-index 130, under this z-index 210 overlay. The
   custom cursor is gone; these declarations state the intent explicitly so the
   pointer is right whatever else changes. */
.lightbox { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; background: rgba(10, 14, 20, 0.93); padding: clamp(16px, 5vw, 60px); cursor: default; }
.lightbox.is-open { display: flex; }
.lightbox__stage { position: relative; max-width: 94vw; max-height: 88vh; }
.lightbox__img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-sm); cursor: zoom-out; }
.lightbox__btn { position: absolute; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; cursor: pointer; transition: background 0.3s var(--ease); }
.lightbox__btn:hover { background: var(--orange); border-color: var(--orange); }
.lightbox__close { top: -6px; right: -6px; width: 44px; height: 44px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox__nav--prev { left: -66px; }
.lightbox__nav--next { right: -66px; }

/* — Catalog responsive — */
@media (max-width: 1100px) {
  .cat-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product__grid { grid-template-columns: 1fr; }
  .gallery__main { aspect-ratio: 16 / 10; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
  .lightbox__close { top: 6px; right: 6px; }
}
@media (max-width: 720px) {
  .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { top: 0; }                       /* header hides on mobile; stick to viewport top */
  .toolbar__search { margin-left: 0; width: 100%; }
  .toolbar__search input { width: 100%; }
}
@media (max-width: 400px) {
  .cat-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* — Catalog reduced-motion — */
@media (prefers-reduced-motion: reduce) {
  .pgrid.reveal-ready .pcard { opacity: 1; transform: none; }
  .cat-card:hover, .pcard__link:hover { transform: none; }
}

/* ============================ 21. NEW PAGES (shared) ============================ */
.section { padding: var(--section-pad) 0; }
.section--tight { padding: clamp(46px, 7vw, 92px) 0; }
.section--alt { background: var(--paper); }
.lead { font-size: var(--fs-lead); color: var(--graphite); max-width: 62ch; }

/* Faint blueprint grid behind a light section (Task 6 groundwork) */
.blueprint { position: relative; }
.blueprint::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--rgb-primary) / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rgb-primary) / .05) 1px, transparent 1px),
    linear-gradient(rgb(var(--rgb-primary) / .10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--rgb-primary) / .10) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}
.blueprint > .container { position: relative; z-index: 1; }

/* Closing CTA band — dark anchor at page bottom */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--blue-deep) 0%, var(--ink) 100%); color: #fff; padding: clamp(56px, 8vw, 116px) 0; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; max-width: 760px; }
.cta-band .eyebrow { color: rgba(255,255,255,.7); }
.cta-band__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.02em; }
.cta-band__title .accent { color: var(--orange); font-style: italic; }
.cta-band__lead { color: rgba(255,255,255,.8); font-size: var(--fs-lead); max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* the ghost button is dark-on-light by default; invert it on the dark band */
.cta-band .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn--ghost::before { background: #fff; }
.cta-band .btn--ghost:hover { color: var(--ink); border-color: #fff; }

/* Contact page */
.kontakt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.kontakt__list { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 2px; }
.kontakt__list li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.kontakt__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.kontakt__v { font-size: 1.02rem; color: var(--ink); overflow-wrap: anywhere; }
.kontakt__v a { color: var(--blue); }
.kontakt__v a:hover { color: var(--orange); }
.kontakt__map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--paper); }
/* The embed is sized by this box, never by its own width/height attributes —
   so a pasted „600 px" snippet can never push the page sideways on a phone. */
.kontakt__map iframe { width: 100%; max-width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .kontakt__grid { grid-template-columns: 1fr; } .kontakt__map { aspect-ratio: 16 / 10; } }

/* ============================ 22. USLUGE / spec-sheet ============================ */
.usluge__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); margin-top: clamp(30px, 4vw, 52px); }
.usluga { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 34px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.usluga:hover { box-shadow: 0 26px 60px -34px rgb(var(--rgb-primary-dark) / 0.4); transform: translateY(-3px); }
.usluga__head { display: flex; align-items: baseline; gap: 14px; }
.usluga__num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--orange-text); flex: none; }
.usluga__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.1; }
.usluga__text { color: var(--graphite); font-size: 0.98rem; margin-top: -4px; }
.usluga .spec-sheet { margin-top: auto; }
.usluga__cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.usluga__cta i { font-style: normal; }
.usluga__cta:hover { color: var(--orange); gap: 12px; }

/* Custom-work gallery (Vanstandardni proizvodi) — branded placeholders until the
   client supplies photos (see TODO in usluge.html / TODO-KLIJENT.md). */
.custom-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(28px, 4vw, 46px); }
.custom-tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; }
.custom-tile--ph {
  border: 1px dashed rgb(var(--rgb-primary-dark) / 0.28);
  background:
    repeating-linear-gradient(45deg, rgb(var(--rgb-primary-dark) / 0.04) 0 10px, transparent 10px 20px),
    var(--paper);
}
.custom-tile__badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-deep); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px;
}
.custom-tile figcaption {
  width: 100%; padding: 12px 14px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink);
  background: linear-gradient(to top, rgba(246, 247, 249, 0.96), rgba(246, 247, 249, 0));
}
@media (max-width: 860px) { .custom-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .custom-gallery { grid-template-columns: 1fr; } }

/* Technical data-sheet — mono keys, hairline rules, right-aligned values */
.spec-sheet { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: 30px 18px 10px; }
.spec-sheet__stamp { position: absolute; top: 10px; right: 12px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: rgb(var(--rgb-primary) / 0.7); border: 1px solid rgb(var(--rgb-primary) / 0.25); padding: 2px 6px; border-radius: 4px; }
.spec-sheet__row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 9px 0; border-top: 1px dashed var(--line); align-items: baseline; }
.spec-sheet__row:first-of-type { border-top: 0; }
.spec-sheet__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--graphite); }
.spec-sheet__v { text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.spec-sheet__v .unit { color: var(--graphite); font-weight: 400; margin-left: 3px; }
.spec-sheet__v--todo { color: var(--graphite); font-weight: 400; font-style: italic; }
@media (max-width: 720px) { .usluge__list { grid-template-columns: 1fr; } }

/* Two-column solution blocks (resenja) */
.solutions { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(30px, 4vw, 52px); }
.solution { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.solution:nth-child(even) .solution__media { order: 2; }
.solution__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.solution__media img { width: 100%; height: 100%; object-fit: cover; }
.solution__tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.solution__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.01em; margin: 10px 0 14px; line-height: 1.05; }
.solution__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.solution__list li { position: relative; padding-left: 26px; color: var(--graphite); }
.solution__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 2px; background: var(--orange); }
.solution__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.solution__count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--graphite); }
@media (max-width: 820px) { .solution { grid-template-columns: 1fr; } .solution:nth-child(even) .solution__media { order: 0; } }

/* ============================ 23. REFERENCE GALLERY + LIGHTBOX ============================ */
button.ref-item { border: 0; padding: 0; background: var(--paper); cursor: zoom-in; font: inherit; color: inherit; text-align: left; display: block; width: 100%; }
.ref-item__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 18px 16px; display: grid; gap: 3px; color: #fff; background: linear-gradient(to top, rgba(12, 20, 40, 0.85), transparent); opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.ref-item:hover .ref-item__cap, .ref-item:focus-visible .ref-item__cap { opacity: 1; transform: none; }
.ref-item__sector { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
.ref-item__name { font-weight: 500; font-size: 0.98rem; }
.refs__grid .ref-item.is-hidden { display: none; }

.glb { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); cursor: default; }
.glb.is-open { display: flex; }
.glb__backdrop { position: absolute; inset: 0; background: rgba(8, 12, 20, 0.9); backdrop-filter: blur(6px); cursor: default; }
.glb__fig { position: relative; z-index: 1; margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: 12px; justify-items: center; }
.glb__img { max-width: min(94vw, 1100px); max-height: 82vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--paper); cursor: zoom-out; }
.glb__cap { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; text-align: center; }
.glb__close, .glb__prev, .glb__next { position: absolute; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.glb__close:hover, .glb__prev:hover, .glb__next:hover { background: var(--orange); border-color: var(--orange); }
.glb__close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.glb__prev { left: clamp(8px, 2vw, 22px); top: 50%; transform: translateY(-50%); }
.glb__next { right: clamp(8px, 2vw, 22px); top: 50%; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .ref-item__cap { transition: none; } }

/* ============================ 24. O NAMA (timeline + stats) ============================ */
.onama__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(30px, 4vw, 54px); }
@media (max-width: 720px) { .onama__grid { grid-template-columns: 1fr; } .stat-band { grid-template-columns: 1fr 1fr; gap: 26px 20px; } }

.timeline { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline__fill { position: absolute; left: 0; top: 6px; width: 2px; background: var(--orange); height: 0; will-change: height; }
.tl-item { position: relative; padding: 0 0 clamp(26px, 3.4vw, 40px); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -34px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.tl-item.is-on::before { background: var(--orange); border-color: var(--orange); }
.tl-year { font-family: var(--font-mono); font-size: 0.82rem; color: var(--orange-text); letter-spacing: 0.06em; }
.tl-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 4px 0 6px; }
.tl-text { color: var(--graphite); font-size: 0.96rem; max-width: 52ch; }

.machine-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.machine-list li { position: relative; padding-left: 26px; color: var(--ink); }
.machine-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 2px; background: var(--orange); }

/* Podaci o PDV-u */
.pdv-table { width: 100%; border-collapse: collapse; margin-top: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pdv-table th, .pdv-table td { text-align: left; padding: 15px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.pdv-table tr:first-child th, .pdv-table tr:first-child td { border-top: 0; }
.pdv-table th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); font-weight: 500; width: 240px; }
.pdv-table td { color: var(--ink); font-weight: 400; overflow-wrap: anywhere; }
.pdv-table td.todo { color: var(--graphite); font-style: italic; font-weight: 400; }
/* Bank accounts — one row per account, so a company with four of them does not
   have to hide three to keep the table on one line. The number stays on its own
   line above the bank on a phone, and the two sit side by side once there is
   room; `tabular-nums` keeps the digit groups aligned down the column. */
.pdv-accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pdv-accounts li { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
/* The number scales down rather than breaking: an account number split across
   two lines is harder to read back and harder to copy by eye. It still wraps at
   its own hyphens if a screen is narrower than the clamp can absorb. */
.pdv-accounts__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: clamp(0.74rem, 3.3vw, 0.95rem); overflow-wrap: break-word; }
.pdv-accounts__bank { color: var(--graphite); font-weight: 400; font-size: 0.92rem; }
@media (min-width: 720px) { .pdv-accounts__num { min-width: 20ch; } }
.pdv-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.copied-note { font-size: 0.85rem; color: var(--blue); opacity: 0; transition: opacity 0.3s var(--ease); }
.copied-note.show { opacity: 1; }
@media (max-width: 600px) { .pdv-table th { width: 38%; } .pdv-table th, .pdv-table td { padding: 13px 14px; } }

/* 404 */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: clamp(60px, 12vh, 140px) 0; }
.nf__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 18vw, 12rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--blue-deep); }
.nf__code .accent { color: var(--orange); }
.nf__search { display: flex; gap: 10px; max-width: 460px; margin: 26px auto 8px; }
.nf__search input { flex: 1; }

/* Print-friendly (podaci-o-pdv) */
@media print {
  .header, .footer, .mcta, .to-top, .assistant, .cta-band, .breadcrumb, .pdv-actions, .grain, .scroll-progress { display: none !important; }
  .page-hero { background: #fff !important; padding-top: 20px !important; }
  .page-hero::after, .page-hero::before, .page-hero__bg { display: none !important; }
  body { color: #000; }
  .pdv-table { border-color: #999; }
}

/* O-nama machine park gallery */
.machine-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.machine-gallery figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.machine-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.machine-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 720px) { .machine-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Screen-reader-only helper */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================ 25. TASK 6 POLISH ============================ */
/* Page-transition wipe — off-screen by default (no-JS safe: never covers content) */
.page-wipe { position: fixed; inset: 0; z-index: 400; background: linear-gradient(135deg, var(--blue-deep), var(--blue)); transform: translateY(100%); pointer-events: none; }
.has-motion .page-wipe.is-in { transform: translateY(0); transition: transform 0.42s var(--ease); }
@media (prefers-reduced-motion: reduce) { .page-wipe { display: none; } }

/* Measurement-line hover on product cards — thin orange dimension line w/ tick ends */
.pcard__media::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 12px; height: 7px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--orange), var(--orange)) left center / 100% 1.5px no-repeat,
    linear-gradient(var(--orange), var(--orange)) left center / 1.5px 7px no-repeat,
    linear-gradient(var(--orange), var(--orange)) right center / 1.5px 7px no-repeat;
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.pcard:hover .pcard__media::after,
.pcard__link:focus-visible .pcard__media::after { transform: scaleX(1); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .pcard__media::after { transition: none; } }

/* Section corner crosshair accents on blueprint sections */
.blueprint > .container::before {
  content: ""; position: absolute; top: -6px; left: calc(var(--gutter) * -0.5); width: 12px; height: 12px; z-index: 1; opacity: 0.5;
  background: linear-gradient(var(--orange), var(--orange)) center / 100% 1px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 1px 100% no-repeat;
}