/* Ivan Inox Centar — the whole design system.
   Ported from the approved prototype (Handoffs/Ivan Inox/design_handoff_ivaninox_web).

   RULES THIS FILE OBEYS
   1. Every class is prefixed `iic-`. The admin part-preview loads brochure/styles.css
      globally, which defines bare .page{opacity:0}, .nav, .card, .eyebrow, .sec — an
      unprefixed class here would be silently restyled or hidden in the studio.
   2. Brand hexes appear ONCE, in the :root block below, mirrored from content.ts.
      A test fails if one shows up anywhere else.
   3. A modifier must out-specify its parent's element rule. `.iic-card p` is (0,1,1) and
      beats a bare `.iic-eyebrow` at (0,1,0) — so card-scoped modifiers are written
      `.iic-card .iic-eyebrow`. This exact collision ate every card eyebrow on sorich.hr.
   4. Display type is sized in `cqw` against its own container, never `vw`: the hero column
      is 860px inside a 1400px page, and `vw` cannot know that.
   5. Surfaces are declared in one chapter, in surface order, and the chapter is then closed.
      A surface modifier and every ink it overrides are two-class selectors, so two surfaces
      overriding the same ink tie on specificity and the later one wins for both. Therefore:
      (a) a surface's ink overrides live with the other surface inks, never in the component
      that happens to need them; (b) a new surface is added by APPENDING a block after the
      last surface, never by editing an existing one; (c) a component added below that point
      must not use a `.iic-band …` or `.iic-scrim …` descendant selector.

   ACCESSIBILITY DEVIATIONS from the handoff token table, both deliberate:
   - `--ink-3` rgba(11,11,12,.46) measures 3.23:1 on white. The design uses it for 10.5–11.5px
     mono labels, which needs 4.5:1. Text-bearing meta uses `--iic-ink-meta` (.58 → 4.88:1);
     .46 survives only for hairlines and non-text.
   - ⚠ HISTORICAL, and the reason the accent band still declares its own inks: under the OLD
     accent (#1655F3, 5.79:1 on white) white .6/.74/.82 measured 3.04/3.86/4.39:1 on the blue
     band — all short of 4.5:1 — so that surface flattened to .90–.94 and took its hierarchy
     from size and weight. #0A3D91 is 10.05:1 on white, and the same three inks now measure
     4.63/6.24/7.28:1. The deviation is GONE and the accent band was returned to the designed
     ramp on 2026-09-06. The per-surface properties stay, because the black band and the metal
     band still need different values from each other.

   Made by sorich.hr (https://sorich.hr/#top) */

/* ─────────────────────────── tokens ─────────────────────────── */

:root {
  --iic-accent: #1655f3;
  --iic-base: #ffffff;
  --iic-base-alt: #f5f6f8;
  --iic-ink-0: #0b0b0c;

  --iic-ink-1: rgba(11, 11, 12, 0.74);
  --iic-ink-2: rgba(11, 11, 12, 0.6);
  --iic-ink-3: rgba(11, 11, 12, 0.46); /* hairline/decorative only — see note above */
  --iic-ink-meta: rgba(11, 11, 12, 0.58); /* any mono label under 14px */
  --iic-line: rgba(11, 11, 12, 0.13);
  --iic-border-c: rgba(11, 11, 12, 0.14);
  --iic-tint: rgba(11, 11, 12, 0.04);
  --iic-tint-2: rgba(11, 11, 12, 0.025);
  --iic-chrome: rgba(255, 255, 255, 0.92);

  --iic-band2: #0b0b0c;
  /* ── the metal surface ────────────────────────────────────────────────
     The colour of the product itself. Hue 214deg was sampled off the client's
     2026-08-11 photographs of painted aluminium (measured 211-214deg across five
     frames) and darkened to a usable ground, rather than taken off a RAL chart.
     It is a SURFACE, deliberately distinct from --iic-band2 (#0b0b0c), which stays
     the ink and the hard commercial band: black is the COMMERCIAL moment (cjenik,
     the 48 h promise), anthracite is MATERIAL.

     Measured on #2b323b:
       #ffffff              12.95:1  AAA  — headings, lead, body
       --iic-accent-on-metal 5.21:1  AA   — eyebrows, step numbers (small text)
       --iic-accent-on-dark  3.67:1       — hairlines only (non-text needs 3:1)
       --iic-accent          2.24:1  FAIL — never as a mark on this ground

     So the accent DOES return on metal, one step lighter than it does on black
     (#4d82ff measures 5.58:1 on #0b0b0c but only 3.67:1 here). Same hue family
     throughout: 223 / 222 / 222deg, so the ramp reads as one colour.

     ⚠ These are the ORIGINAL numbers, restored 2026-09-07 with the accent. For one day the
     accent was #0A3D91 and both siblings were re-derived at 217deg; the client asked for the
     old blue back and the whole ramp went with it. */
  --iic-metal: #2b323b;
  --iic-metal-hi: #3d4652; /* lit face of a lamella — decorative gradient only */
  --iic-metal-lo: #212831; /* shadow gap between two lamellas — decorative only */
  --iic-accent-on-metal: #7ba2ff;
  --iic-metal-line: rgba(255, 255, 255, 0.18);
  /* The accent's dark-ground variant. The brand blue is 3.40:1 on #0b0b0c — fine for a
     hairline (non-text needs 3:1), short of AA for any label. Same hue, lightened until it
     clears 4.5:1: #4d82ff measures 5.58:1. This is what lets the black band carry blue
     accents at all; without it the rule "blue never sits on a dark ground" forces every
     mark on the band to white.

     ⚠ It also still carries the :focus-visible ring on every dark surface. That override was
     added on 2026-09-06 for the darker accent and KEPT when the accent reverted: the ring was
     unscoped before and cleared 3:1 only by 0.4, and a scoped one is strictly better. */
  --iic-accent-on-dark: #4d82ff;
  /* The hero watermark's tint. It used to be a raw rgba(22, 85, 243, .17) down in the
     .iic-mark rule — the one hard-coded copy of the brand colour in this file, and one the
     "brand hex in :root only" test cannot see, because it deliberately exempts rgba().
     A brand change would have left a blue watermark on a navy site with every gate green.
     Two declarations on purpose: the literal is the floor for a browser without color-mix,
     the color-mix line makes the tint FOLLOW the accent from here on. */
  --iic-mark-tint: rgba(22, 85, 243, 0.17);
  --iic-mark-tint: color-mix(in srgb, var(--iic-accent) 17%, transparent);
  --iic-band-line: rgba(255, 255, 255, 0.24);
  --iic-on-photo: #ffffff;
  --iic-on-photo-2: rgba(255, 255, 255, 0.86);

  --iic-font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --iic-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Geometry: radius 0 everywhere; only the circles are circles.

     ⚠ REVERTED TO 0 ON 2026-09-07, WITH THE LOGO. For one day these were 2 / 3 / 6px, derived
     from the client vector in Handoffs/Ivan Inox/ivan-inox-znak.svg — cap height 100 units,
     stems 22, every corner drawn with a 2.5-unit radius, so r / cap-height = 0.025, applied as
     r = 0.025 x the element long edge, snapped to a 2px grid and capped at 6. Ante approved it
     as option C of four. Then the client asked for the previous wordmark back, and Ante:
     "remove border radius we added thats the thing that follows logo and because we put first
     logo in now we need first rounded borders that were 0". The corner followed the mark in,
     so it follows the mark out. The derivation is recorded here rather than deleted because it
     is correct and because the vector is still in the repo.

     ⚠ THREE TOKENS KEPT, ALL AT 0, RATHER THAN COLLAPSED BACK TO ONE. 37 rules consume them.
     Setting three values is a three-line change that cannot go wrong; rewriting 37 selectors
     is a find-and-replace across a file that contains NINE "border-radius: 50%" circles and one
     hard-coded 1.5px, and squaring any of those is the exact failure this file has warned about
     since August. If the scale ever comes back, it comes back here and nowhere else.

     ⚠ THE NINE CIRCLES ARE NOT PART OF THIS and never were: the dot inside .iic-btn, the
     before/after knob, the footer socials, the FABs, the measure ? badge, the two order-radio
     dots, and — added with the 2026-09-06 hero and missing from every earlier version of this
     list — .iic-hero-dot and .iic-hero-pp. Nor is ".iic-snd-i span", whose 1.5px is the rounded
     cap on a 2.5px equaliser bar, an icon detail rather than a UI corner. */
  --iic-radius-sm: 0px;
  --iic-radius: 0px;
  --iic-radius-lg: 0px;
  --iic-pad: clamp(16px, 4.4vw, 44px);
  --iic-max: 1400px;
  --iic-inner: 1240px;
  /* ⚠ ROOMIER SINCE 2026-09-09 (Ante: "make sure there is enough padding between elements to
     look clean"). Every one of these went up by roughly an eighth, together, so the page
     breathes without any single band changing its relationship to its neighbours. */
  --iic-sec-y: clamp(64px, 9.5vw, 136px);
  --iic-band-y: clamp(72px, 8.5vw, 124px);
  --iic-band-mt: clamp(72px, 8.5vw, 132px);

  /* ── elevation ──────────────────────────────────────────────────────────────────────
     Ante, 2026-09-09: "add shadows and depth to all elements to get 3d feel of the page and
     moving elements" — and, in the same breath, "remove shadows from images ... client says
     he can see them clearly". Those are one instruction, not two: depth belongs to the
     FURNITURE and never to the photograph. A photograph is a window, and a window with a
     drop shadow reads as a sticker.

     ⚠ EACH LEVEL IS TWO SHADOWS, and the pair is the whole trick. The tight one (1-10px) is
     the contact shadow that says the edge is lifted off the page at all; the wide one
     (8-60px) is the ambient light it occludes. One shadow alone reads as a blur; two read as
     an object. The opacities stay low because this design is hairlines and cut edges — the
     depth has to be felt at a glance and invisible at a stare.

     1  resting furniture: cards, panels, the price table's rows
     2  the same, hovered or otherwise raised — reachable by a 200ms transition from 1
     3  things that genuinely float over the page: the FAB stack, the sticky header
     4  things that sit above everything: the sound prompt, the gallery viewer, the menu */
  --iic-lift-1: 0 1px 2px rgba(11, 11, 12, 0.05), 0 2px 8px rgba(11, 11, 12, 0.05);
  --iic-lift-2: 0 2px 4px rgba(11, 11, 12, 0.07), 0 8px 22px rgba(11, 11, 12, 0.08);
  --iic-lift-3: 0 4px 10px rgba(11, 11, 12, 0.1), 0 14px 34px rgba(11, 11, 12, 0.1);
  --iic-lift-4: 0 10px 24px rgba(11, 11, 12, 0.14), 0 26px 60px rgba(11, 11, 12, 0.14);

  /* Lamella pitch, sampled off the real product photography: a slat plus the shadow gap
     between two slats. Non-colour, so the metal band's texture (below) is the only consumer. */
  --iic-slat: 9px;
  --iic-slat-gap: 3px;

  /* Published by site.js from the real sticky header box; anchors read it. */
  --iic-hdr-h: 68px;

  /* One multiplier drives every heading, so the designed relationships between a 54px band
     head and a 34px article head survive at every width. */
  --iic-type-scale: 1;

  /* Optical tracking: large display type can sit tighter than small type and still read
     comfortably, so the 128px hero instance overrides this to -0.055em while every other
     .iic-h1 uses the default. */
  --iic-h1-track: -0.05em;
}

/* Mobile-first: the phone is the base case and min-width queries scale UP.
   Two axes because one coefficient cannot serve a 128px hero and a 21px card
   heading — see the note above. Display carries h1/h2, type carries h3 and
   anything body-adjacent. Both remain PER-HEADING via --iic-h*-size; this is a
   ramp, never a replacement for the per-heading sizes (docs/DECISIONS.md). */
:root {
  --iic-type-scale: 0.74;
  --iic-display-scale: 0.47;
}
@media (min-width: 421px)  { :root { --iic-type-scale: 0.80; --iic-display-scale: 0.56; } }
@media (min-width: 641px)  { :root { --iic-type-scale: 0.88; --iic-display-scale: 0.72; } }
@media (min-width: 901px)  { :root { --iic-type-scale: 0.94; --iic-display-scale: 0.86; } }
@media (min-width: 1181px) { :root { --iic-type-scale: 1;    --iic-display-scale: 1;    } }

/* ─────────────────────────── base ─────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--iic-hdr-h) + 16px);
}

body {
  margin: 0;
  padding: 0 0 28px;
  background: var(--iic-base);
  color: var(--iic-ink-0);
  font-family: var(--iic-font-head);
  -webkit-font-smoothing: antialiased;
  /* The design is fluid; nothing may scroll sideways. The verify harness measures element
     boxes rather than scrollWidth precisely because this line hides the evidence. */
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  color: var(--iic-accent);
  text-decoration: none;
}

a:hover {
  color: var(--iic-ink-0);
}

::selection {
  background: var(--iic-accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

/* The ring on a dark ground. It was unscoped until 2026-09-06 and got away with it because
   #1655F3 measured 3.40:1 on #0b0b0c — just over the 3:1 an outline needs. #0A3D91 measures
   1.96:1, so a keyboard user tabbing through the four dark bands, the metal band or a
   photographic scrim would have been drawing an all-but-invisible ring around the link they
   were standing on. Hands off to the same sibling the bands already use for their marks.
   Declared as a group so a scrim over an unpredictable photograph is covered too — there the
   ring is the ONE mark that must be findable whatever the photo underneath is doing. */
.iic-band--dark :focus-visible,
.iic-band--metal :focus-visible,
.iic-band--accent :focus-visible,
.iic-scrim :focus-visible,
.iic-hero--photo :focus-visible {
  outline-color: var(--iic-accent-on-dark);
}

.iic-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — Standard W6. Off-screen until it takes focus, then it lands in the top-left
   corner above the sticky header. It borrows .iic-chip's surface tokens rather than inventing
   a control: no new colour, no new type, nothing on the page changes until a keyboard user
   presses Tab. `left` (not `display`) is what hides it, because a display:none element is
   not focusable at all and the link would never work. */
.iic-skip {
  position: fixed;
  left: -9999px;
  top: 10px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--iic-base);
  border: 1px solid var(--iic-ink-0);
  border-radius: var(--iic-radius);
  font: 600 12px/1 var(--iic-font-mono);
  letter-spacing: 0.1em;
  color: var(--iic-ink-0);
  text-decoration: none;
}

.iic-skip:focus {
  left: 10px;
}

/* The skip link's landing zone. The header is sticky, so without this the heading it jumps to
   sits underneath it. Same reasoning (and the same variable) as the :root scroll-padding. */
#iic-main {
  scroll-margin-top: calc(var(--iic-hdr-h) + 16px);
}

/* The language switch in the header nav. The same chip as its six neighbours — one weight
   heavier and letter-spaced a little wider, so it reads as a control rather than a seventh
   section of the site. No new component, no new colour. */
.iic-chip--lang {
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* ─── the language menu (2026-09-28) ───────────────────────────────────────────────────
   Four languages turned the one-link chip into a <details>: the summary IS the chip, the list
   drops below it. `position: absolute`, never fixed — the header's backdrop-filter makes it
   the containing block for anything fixed inside it (see the mobile panel's note). Square
   corners and the chip's own type, so it reads as the same control opened. */
.iic-lang {
  position: relative;
}

.iic-lang > summary {
  list-style: none;
}

.iic-lang > summary::-webkit-details-marker {
  display: none;
}

.iic-lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: grid;
  min-width: 170px;
  padding: 6px;
  background: var(--iic-base);
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius);
  box-shadow: var(--iic-lift-3);
}

.iic-lang-opt {
  display: block;
  padding: 11px 14px;
  font: 500 12px/1.2 var(--iic-font-mono);
  letter-spacing: 0.12em;
  color: var(--iic-ink-0);
}

.iic-lang-opt:hover,
.iic-lang-opt[aria-current] {
  color: var(--iic-accent);
}

.iic-lang-opt[aria-current] {
  font-weight: 700;
}

/* ─────────────────────────── logo lockup ─────────────────────────── */

/* "IVAN INOX" with both I's replaced by ONE shared vertical bar spanning two stacked lines.
   Built in CSS, not SVG, so it re-sizes rather than re-exports and the VAN/NOX tracking stays
   font-relative and tuned so both lines end flush.

   ⚠ RESTORED 2026-09-07 AT THE CLIENT'S REQUEST. For one day the header and footer carried
   the client's real vector inline (`iicMark`, `IIC_MARK_PATH` in ivan-inox-web-export.tsx).
   Ivan asked for the wordmark the site had before. The vector is still in the repo and still
   correct — `Handoffs/Ivan Inox/ivan-inox-znak.svg` — and it is what `--iic-radius` is
   derived from, so do not delete it on the assumption it is unused.

   ⚠ THE TWO ARE NOT THE SAME DRAWING. The real mark is a custom geometric sans (pointed
   crossbar-less A, an O drawn as a rounded rectangle); this is Manrope with a bar. Anyone
   comparing them is looking at two different logos, which is exactly why the geometry below
   has to be derived rather than eyeballed.

   The bar stands in for a LETTER, so it spans cap-top of VAN to the baseline of NOX — not the
   words block's box height, which carries half-leading above the caps. At 106px that error put
   the bar 8.5px over the letters at the top and 4.5px short at the bottom. Both instances
   derive two numbers from the type beside them:

     ink height = line-height + row gap + cap-height
     ink top    = half-leading + (ascent − cap-height)

   Manrope's own metrics, measured at 2000px so integer rounding cannot distort them:
   ascent 1.066em, descent 0.300em, cap 0.71875em.

   ⚠ MEASURE THESE ON THE EXPORT, NEVER IN THE STUDIO PREVIEW. The preview iframe does not
   load the self-hosted woff2, so the lockup renders in the system fallback — whose metrics
   (ascent 1.075, cap 0.698) are close enough to look right and wrong enough to leave the bar
   5.75px high on every page the client actually receives. The first pass shipped exactly
   those fallback numbers. */
.iic-logo {
  --iic-lock-asc: 1.066;
  --iic-lock-desc: 0.3;
  --iic-lock-cap: 0.71875;
  --iic-lock-ink: calc(
    var(--iic-lock-line) + var(--iic-lock-gap) + var(--iic-lock-cap) * var(--iic-lock-size)
  );
  --iic-lock-top: calc(
    (var(--iic-lock-line) - (var(--iic-lock-asc) + var(--iic-lock-desc)) * var(--iic-lock-size)) / 2 +
      (var(--iic-lock-asc) - var(--iic-lock-cap)) * var(--iic-lock-size)
  );
  --iic-lock-size: 16px;
  --iic-lock-line: 12px;
  --iic-lock-gap: 4px;
  display: flex;
  align-items: flex-start;
  gap: 4.4px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--iic-accent);
  flex: none;
}

.iic-logo:hover {
  color: var(--iic-accent);
}

.iic-logo-bar {
  width: 3px;
  height: var(--iic-lock-ink);
  margin-top: var(--iic-lock-top);
  flex: none;
  background: currentColor;
}

.iic-logo-words {
  display: flex;
  flex-direction: column;
  gap: var(--iic-lock-gap);
  align-items: flex-start;
}

.iic-logo-words span {
  font: 700 var(--iic-lock-size) / var(--iic-lock-line) var(--iic-font-head);
}

/* Tuned so both lines end flush — do not change. */
.iic-logo-words span:first-child {
  letter-spacing: 0.11em;
}

.iic-logo-words span:last-child {
  letter-spacing: 0.06em;
}

/* ─────────────────────────── header ─────────────────────────── */

.iic-hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--iic-chrome);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--iic-line);
}

.iic-hdr-in {
  max-width: var(--iic-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 36px;
  padding: 14px var(--iic-pad);
}

.iic-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iic-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Text at 11px/1 plus this padding is only ~31px tall; min-height (not a fixed height)
     floors the tap target at 44px without stopping the label wrapping. */
  min-height: 44px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius);
  font: 500 11px/1 var(--iic-font-mono);
  letter-spacing: 0.12em;
  color: var(--iic-ink-0);
  cursor: pointer;
  white-space: nowrap;
}

.iic-chip:hover {
  border-color: var(--iic-ink-0);
  color: var(--iic-ink-0);
}

.iic-chip[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--iic-accent);
}

.iic-hdr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 11px padding + a 12px/1.3 line is only ~38px; floor it at 44px, same reasoning as
     .iic-chip above. */
  min-height: 44px;
  font: 700 12px/1.3 var(--iic-font-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #fff;
  background: var(--iic-accent);
  padding: 11px 18px;
  border-radius: var(--iic-radius);
}

.iic-hdr-cta:hover {
  color: #fff;
  filter: brightness(1.08);
}

/* ─────────────────────────── layout rhythm ─────────────────────────── */

.iic-sec {
  padding: var(--iic-sec-y) var(--iic-pad) 0;
}

.iic-sec--tight {
  padding-top: clamp(40px, 6vw, 72px);
}

.iic-in {
  max-width: var(--iic-inner);
  margin: 0 auto;
  container-type: inline-size;
}

.iic-in--wide {
  max-width: var(--iic-max);
  margin: 0 auto;
  container-type: inline-size;
}

/* ─────────────────────────── type ─────────────────────────── */

.iic-eyebrow {
  margin: 0;
  font: 600 11px/1 var(--iic-font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iic-accent);
}

.iic-rule-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.iic-rule-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--iic-accent);
  flex: none;
}

.iic-rule-eyebrow span {
  font: 500 10.5px/1 var(--iic-font-mono);
  letter-spacing: 0.26em;
  color: var(--iic-accent);
}

.iic-h1 {
  margin: 0;
  font-family: var(--iic-font-head);
  font-weight: 800;
  font-size: max(30px, calc(var(--iic-h1-size, 84px) * var(--iic-display-scale, 1)));
  line-height: 1.02;
  letter-spacing: var(--iic-h1-track, -0.05em);
  color: var(--iic-ink-0);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.iic-h2 {
  margin: 0;
  font-family: var(--iic-font-head);
  font-weight: 800;
  font-size: max(22px, calc(var(--iic-h2-size, 44px) * var(--iic-display-scale, 1)));
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--iic-ink-0);
  text-wrap: balance;
  max-width: 22ch;
  overflow-wrap: break-word;
}

.iic-h3 {
  margin: 0;
  font-family: var(--iic-font-head);
  font-weight: 700;
  font-size: max(19px, calc(var(--iic-h3-size, 26px) * var(--iic-type-scale, 1)));
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--iic-ink-0);
  overflow-wrap: break-word;
}

/* Step / card sub-headings. The size varies with how dense the grid is — 21px in a
   three-up, 20px in a six-up, 17px in the five-step proces band — so each caller sets
   --iic-h3-size and the ratio stays constant. */
.iic-h3--sm {
  font-size: max(16px, calc(var(--iic-h3-size, 21px) * var(--iic-type-scale, 1)));
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.iic-lead {
  margin: 0;
  max-width: 62ch;
  font: 400 19px/1.55 var(--iic-font-head);
  letter-spacing: -0.01em;
  color: var(--iic-ink-1);
  text-wrap: pretty;
}

.iic-body {
  margin: 0;
  font: 400 16.5px/1.65 var(--iic-font-head);
  color: var(--iic-ink-2);
  text-wrap: pretty;
  max-width: 72ch;
}

.iic-body--sm {
  font: 400 14.5px/1.6 var(--iic-font-head);
}

.iic-meta {
  margin: 0;
  font: 500 11.5px/1 var(--iic-font-mono);
  letter-spacing: 0.06em;
  color: var(--iic-ink-meta);
}

.iic-micro {
  font: 400 11px/1 var(--iic-font-mono);
  letter-spacing: 0.16em;
  color: var(--iic-ink-meta);
}

/* ─────────────────────────── buttons ─────────────────────────── */

.iic-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 17px 28px;
  background: var(--iic-accent);
  color: #fff;
  border: 1px solid var(--iic-accent);
  border-radius: var(--iic-radius);
  font: 700 14px/1.3 var(--iic-font-head);
  cursor: pointer;
  text-align: left;
}

/* brightness(1.08) is the hover on all four accent-filled controls (.iic-btn, .iic-hdr-cta,
   .iic-foot-social a, .iic-fab). On #1655F3 it is a ΔL* of 2.7 — 43.0 → 45.7 in CIE L*.
   Measured during the 2026-09-06 accent experiment and worth keeping: a raw-RGB reading of
   this hover is misleading, so measure L* before ever "fixing" it to a bigger multiplier. */
.iic-btn:hover {
  color: #fff;
  filter: brightness(1.08);
}

.iic-btn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.iic-btn--plain::before {
  display: none;
}

.iic-btn2 {
  display: inline-flex;
  align-items: center;
  padding: 17px 26px;
  background: transparent;
  border: 1px solid var(--iic-accent);
  border-radius: var(--iic-radius);
  font: 600 14px/1.3 var(--iic-font-head);
  color: var(--iic-accent);
  cursor: pointer;
}

.iic-btn2:hover {
  border-color: var(--iic-ink-0);
  color: var(--iic-ink-0);
}

.iic-link {
  font: 600 13px/1.3 var(--iic-font-head);
  color: var(--iic-accent);
}

.iic-link:hover {
  color: var(--iic-ink-0);
}

.iic-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ─────────────────────────── mobile menu ───────────────────────────
   A <details> disclosure, not a JS drawer — see header() and site.js for why. Above the
   breakpoint it does not exist at all; below it, it is the only navigation.

   ⚠ ONE BREAKPOINT, IN ONE PLACE: **1100px**. `site.js`'s matchMedia query must equal it.
   Change one and the panel can be left open — with the page still scroll-locked — while CSS
   has hidden it.

   ⚠ WHY 1100 AND NOT 980. Measured after Naslovnica joined the nav (2026-09-02): eight chips
   plus the logo and the CTA stop fitting one line below ~1100px, and the header silently
   became TWO ROWS — 131px of sticky chrome at 981-1024px, stealing that much from the fold on
   a small laptop. The hamburger is a better answer at those widths than a wrapped bar, so the
   handover moved up rather than the chips getting smaller. Re-measure this band with
   scripts/verify-ivan-inox.mjs if the nav ever gains another item. */
.iic-menu {
  display: none;
}

/* The button. `list-style: none` + the ::-webkit-details-marker reset kill the disclosure
   triangle browsers draw on a <summary>; without BOTH, Safari still shows it. */
.iic-burger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 44px floor, same reasoning as .iic-chip — a header control is a thumb target. */
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius);
  background: transparent;
  font: 700 11px/1 var(--iic-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iic-ink-0);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.iic-burger::-webkit-details-marker {
  display: none;
}

.iic-burger:focus-visible {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

.iic-burger-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
  flex: none;
}

.iic-burger-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  /* The three bars morph into a cross. Transform-only (no width/top animation) so it runs
     on the compositor and cannot jank on a mid-range phone. */
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.14s linear;
}

.iic-burger-bars span:nth-child(1) {
  top: 0;
}
.iic-burger-bars span:nth-child(2) {
  top: 5px;
}
.iic-burger-bars span:nth-child(3) {
  top: 10px;
}

.iic-menu[open] .iic-burger-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.iic-menu[open] .iic-burger-bars span:nth-child(2) {
  opacity: 0;
}
.iic-menu[open] .iic-burger-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* The panel hangs off the header and scrolls, so a long menu on a short phone in landscape
   still reaches its last item — the failure the scroll rail had, one axis over.

   ⚠ IT IS `absolute`, NOT `fixed`, AND THAT IS NOT A STYLE CHOICE. The first version used
   `position: fixed; top: var(--iic-hdr-h); bottom: 0` and rendered **47px tall**. A fixed
   element's containing block is the viewport ONLY while no ancestor creates one — and
   `.iic-hdr` sets `backdrop-filter: blur(20px)`, which does exactly that. So `top: 68px;
   bottom: 0` resolved against the 65px-tall HEADER instead of the screen, and the menu became
   a sliver. It survived a first pass because the check only asserted "height > 0".

   `absolute` off the sticky header is the honest version of what was wanted anyway: hang
   below the bar, travel with it, and cap the height at what is left of the screen. Any future
   `fixed` child of this header will hit the same wall — put it outside `.iic-hdr` or make it
   absolute. */
/* ⚠ A CLOSED <details> DOES NOT GUARANTEE A ZERO BOX for an absolutely positioned child.
   Chrome skips painting the slotted content (content-visibility: hidden) but the panel still
   reported a 55x68 rect at rest — enough for the harness FAB-overlap sweep to flag the menu
   CTA as covered, and enough, in principle, for a stray tab stop. Say it explicitly. */
.iic-menu:not([open]) .iic-menu-panel {
  display: none;
}

.iic-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* FULL HEIGHT, not content height. At 390px the panel came out 582px tall and the page
     showed through underneath it — a half-covered screen reads as a rendering fault, not as
     a menu. Fixing the height to what is left below the header makes it a sheet; the
     overflow keeps a short landscape phone able to reach the last row. */
  height: calc(100svh - var(--iic-hdr-h));
  z-index: 55;
  overflow-y: auto;
  /* Stops a drag inside the panel chaining to the page behind it. This is what replaced the
     JS scroll lock, which killed position:sticky on the header — see site.js's sync(). It
     does the useful half of a lock (no scroll chaining) without touching the scroll
     container, which is the half that broke everything. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--iic-base);
  border-top: 1px solid var(--iic-line);
  padding: 18px var(--iic-pad) calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* "Smooth and clean": the panel rises 10px and fades, once, on open. `transform` and
     `opacity` only. A <details> has no closing animation to hook (the browser removes the
     content immediately), so this is deliberately open-only rather than a half-finished
     two-way transition that stutters on close. */
  animation: iic-menu-in 0.24s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes iic-menu-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iic-menu-panel {
    animation: none;
  }

  .iic-burger-bars span {
    transition: none;
  }
}

.iic-menu-nav {
  display: flex;
  flex-direction: column;
}

.iic-menu-link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--iic-line);
  font: 500 20px/1.2 var(--iic-font-head);
  letter-spacing: -0.01em;
  color: var(--iic-ink-0);
  text-decoration: none;
}

.iic-menu-link[aria-current="page"] {
  color: var(--iic-accent);
}

/* The language switch is the last row and says which language it goes TO, in that language
   ("Switch to English" / "Prebaci na hrvatski") — a two-letter chip works in a dense header
   row and reads as an abbreviation nobody has to decode in a full-width list. */
.iic-menu-link--lang {
  font-size: 15px;
  color: var(--iic-ink-2);
  border-bottom: 0;
}

/* The four languages in the phone sheet (2026-09-28): one row of chip-sized codes, 44px tall
   so each is a thumb target, the current one filled. */
.iic-menu-langs {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.iic-menu-lang {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius);
  font: 700 12px/1 var(--iic-font-mono);
  letter-spacing: 0.16em;
  color: var(--iic-ink-0);
}

.iic-menu-lang[aria-current] {
  background: var(--iic-accent);
  border-color: var(--iic-accent);
  color: #fff;
}

.iic-menu-cta {
  width: 100%;
  justify-content: center;
}

.iic-menu-chan {
  /* Sits at the foot of the sheet: the links are the menu, these are the way out of it. */
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 500 15px/1.3 var(--iic-font-head);
}

.iic-menu-chan a {
  color: var(--iic-accent);
}

/* The FAB stack duplicates two of the sheet own rows (call, WhatsApp) and floats over it.
   Hide it while the menu is open. `:has()` is the only way to reach a fixed sibling of the
   header from the details state; where it is unsupported the buttons simply stay visible,
   which is the pre-2026-09-02 behaviour and harmless — a progressive enhancement, not a
   dependency. */
body:has(.iic-menu[open]) .iic-fabs {
  display: none;
}

/* ─────────────────────────── hero ─────────────────────────── */

.iic-hero {
  position: relative;
  padding: var(--iic-sec-y) var(--iic-pad) 0;
  overflow: hidden;
}

.iic-hero-in {
  max-width: var(--iic-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.iic-hero-col {
  flex: 1 1 620px;
  min-width: 0;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  container-type: inline-size;
}

.iic-hero-col .iic-h1 {
  --iic-h1-size: 128px;
  --iic-h1-track: -0.055em;
  line-height: 1;
}

/* ⚠ THE HERO MUST FIT THE FOLD, AND IT DID NOT (fixed 2026-09-02).
   Ante: *"hero section doesnt fit on screen on desktops action button requires scroll to
   open."* Measured on the export before the fix, the primary CTA's bottom edge sat at
   **942px** at every desktop width, against these viewport heights:

     1366x768   ✗ 174px below the fold   ← the single most common laptop
     1440x820   ✗ 122px below
     1536x864   ✗  78px below
     1920x1080  ✓ fits — the only size it ever fitted

   The page opened on a headline running off the bottom and nothing to do. The cause was a
   FIXED 128px headline: at that size the slogan wraps to four lines — 512px of type before
   the lead has started — and 120px of section padding sits above it.

   Two things are height-aware now, and only above 981px:
    · the headline, via `min(7vw, 12.5svh)`. `svh` is the SMALL viewport height, the stable
      one that does not change as mobile browser chrome retracts, so nothing reflows
      mid-scroll. `min()` takes whichever constraint bites first: on a wide-but-short laptop
      that is the height, on a big desktop neither and the design keeps its 128px. At 768px
      tall it resolves to ~96px, which is also where the slogan's second sentence stops
      needing a third line — 4 lines become 3, and 512px of type becomes 288px.
    · the vertical rhythm — section padding, the column gap and the facts rail's offset — so a
      short laptop tightens instead of pushing the buttons off the bottom.

   ⚠ SCOPED TO ≥981px, AND THAT MATTERS TWICE.
    1. The phone layout already fitted (both CTAs measured inside an 844px viewport), and a
       forced viewport-height hero on a phone only squeezes the headline for nothing.
    2. `--iic-h1-size` is MULTIPLIED by `--iic-display-scale` (0.47 at 320px). A clamp whose
       floor is a desktop-ish number becomes 30px on a phone. The first attempt at this fix
       set the clamp globally and did exactly that — the mobile headline collapsed from 60px
       to 30px. The base rule above keeps its flat 128px for every width this block does not
       claim.

   ⚠ DO NOT MAKE `.iic-hero` A FLEX CONTAINER to centre this. The first attempt did, and
   `.iic-hero-in` — which centres itself with `margin: 0 auto` — stopped stretching: an auto
   margin on the cross axis disables `align-self: stretch`, so the row collapsed from 1278px
   to **334px** of max-content and the headline wrapped to TWELVE lines. It is a block. */
@media (min-width: 981px) {
  .iic-hero-col .iic-h1 {
    --iic-h1-size: clamp(56px, min(7vw, 12.5svh), 128px);
  }

  .iic-hero {
    padding-top: clamp(20px, 5vh, 72px);
    padding-bottom: clamp(16px, 3vh, 40px);
  }

  .iic-hero-col {
    gap: clamp(14px, 2.6vh, 28px);
  }

  .iic-facts {
    margin-top: clamp(18px, 3.4vh, 56px);
  }
}

.iic-hero-h1 span {
  white-space: pre-line;
}

.iic-hero-lead {
  /* 46ch rather than a pixel cap: the lead is two short sentences now and the measure should
     follow the type, not the viewport. At the hero's size that lands near the old 560px on a
     desktop and stops the second sentence running the full width of a tablet. */
  max-width: 46ch;
}

/* ⚠ CURRENTLY UNRENDERED — kept, not deleted (studio rule P3). The home hero's claim strip
   read "VLASTITA RADIONA · BEZ SKRIVENIH TROŠKOVA" and came out on 2026-09-09 with the last of
   the text Ante wanted off the photograph — the same species as the facts rail deleted the day
   before. Both claims survive where they are argued rather than asserted: the workshop on
   /o-nama and /radioni, the no-hidden-costs promise beside the published price per metre on
   /ograde. The rules cost nothing and this is the right component the day a hero needs a
   caption again. (Recorded HERE and not in the template, because HTML comments in pages/ ship
   to the client bundle and a retired claim must not travel in one.) */
.iic-hero-note {
  max-width: 420px;
}

/* Full-bleed photographic hero. The photo and its scrim are absolutely positioned inside
   `.iic-hero` (already `position:relative; overflow:hidden`), so the section's height stays
   entirely content-driven — no min-height games. `.iic-hero-in` and `.iic-facts` get the
   SAME explicit `z-index:1` trick `.iic-scrim-in` already uses: the photo and the `::after`
   scrim both sit at the implicit z-index:auto (~0) level, so a real z-index:1 on the content
   always wins regardless of DOM/pseudo-element paint order. */
.iic-hero--photo {
  padding: clamp(24px, 8vw, 128px) var(--iic-pad) 176px;
}

@media (min-width: 641px) {
  /* The FAB stack is only a mobile-width hazard (it sits over the fold on a phone); past
     640px the hero is comfortably taller than the fixed stack's reach, so the reserve can
     shrink back to a normal section rhythm. */
  .iic-hero--photo {
    padding-bottom: clamp(80px, 9vw, 128px);
  }
}

/* The phone hero (2026-09-08 round 2). Ante, with a screenshot: "arange element on home
   better to fill content and dont look like a blob of text".

   Three things were wrong in that screenshot and only one of them was spacing:

     · the lead ran FOUR dense lines and repeated what the H1 and the next section already
       said — fixed in i18n.ts, not here; it is now two short sentences;
     · `gap: 8px` applied to every child of the column, so the meta note sat five pixels
       under the second button and read as welded to it. That 8px existed to buy height back
       from the lead. With the lead two lines shorter there is height to spend, and it is
       spent on the two joins that were actually broken;
     · the column was TOP-anchored inside a hero with a 176px FAB reserve at the bottom, so
       the composition was text crammed at the top over a third of a screen of empty
       photograph. Bottom-anchoring inverts it: the fence gets the open space above the type,
       which is the frame the photograph was cropped for anyway.

   ⚠ THE FLEX TRAP FROM THE BLOCK ABOVE APPLIES HERE, and it is why `width: 100%` is not
   optional. `.iic-hero-in` centres itself with `margin: 0 auto`, and an auto margin on the
   cross axis disables `align-self: stretch` — the moment its parent becomes a flex container
   the row stops filling and collapses to max-content. That collapse is documented in full at
   `.iic-hero` above, where it wrapped the headline to twelve lines. An explicit width is
   immune to it.

   ⚠ `100svh` is the SMALL viewport height on purpose: it does not change as mobile browser
   chrome retracts, so the hero cannot reflow under a finger mid-scroll. Minus the header's
   own published height, with a fallback so the rule survives scripting being off — site.js
   writes `--iic-hdr-h`, but the token also has a 68px default at the top of this file. */
@media (max-width: 640px) {
  .iic-hero--photo {
    min-height: calc(100svh - var(--iic-hdr-h, 68px));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .iic-hero--photo .iic-hero-in {
    width: 100%;
  }

  .iic-hero--photo .iic-hero-col {
    gap: 13px;
  }

  /* ⚠ Ante: "put button and text left in bottom left with small gaps from sourading
     elements". With the eyebrow and the lead gone the column is a headline and a button, and
     at full width the button stretched edge to edge under it. Held to the width of its own
     content it reads as a pair sitting in the corner, which is what was asked for. */
  .iic-hero--photo .iic-ctas {
    align-items: flex-start;
  }

  .iic-hero--photo .iic-ctas .iic-btn {
    width: auto;
    max-width: 100%;
  }

  .iic-hero--photo .iic-hero-lead {
    font-size: 15.5px;
    line-height: 1.42;
  }

  /* The link that actually needs to clear the FAB stack (not the meta line below it, which
     is decorative text, not a link or button) — a few more px off the CTA row itself. */
  .iic-hero--photo .iic-ctas {
    gap: 10px;
    margin-top: 3px;
  }

  .iic-hero--photo .iic-ctas .iic-btn,
  .iic-hero--photo .iic-ctas .iic-btn2 {
    padding: 13px 18px;
  }

  /* Was -3px, which closed the gap to about five pixels. It is a caption to the buttons, so
     it wants to sit under them rather than on them. */
  .iic-hero--photo .iic-hero-note {
    margin-top: 5px;
  }

  /* ⚠ THE 176px BOTTOM RESERVE IS TOO MUCH ONCE THE COLUMN IS BOTTOM-ANCHORED, and this is
     the arithmetic. Ante: "i still think this space between last text of hero section and
     coursel indicator and buttons is too wide make it all fit together".

     The reserve exists so hero content never hides behind the fixed FAB stack, and when the
     column was TOP-anchored it had to clear the tallest possible hero. Anchored to the
     bottom it only has to clear what is actually down there, measured from the section's
     bottom edge:

       FAB stack     54px tall at bottom: 22px (hardcoded)      -> top edge  76px up
       hero controls 36px tall at bottom: --iic-pad + 40px      -> top edge  93px up

     --iic-pad is clamp(16px, 4.4vw, 44px), so at 390px it resolves to 17px and the control
     row bottoms out at 57px. 124px therefore puts the last line of copy 31px above the dots
     — a real gap, not a void — and still 48px clear of the FABs. On a 320px phone the pad
     floors at 16px and the gap becomes 32px, which is the same reading. The old 176px left 84px of empty photograph between the
     note and the dots, which is what reads as two separate things that happen to share a
     screen.

     ⚠ It is padding on a justify-content:flex-end box, so this number IS the distance from
     the last line of text to the bottom of the section. Anything that changes the FAB size,
     the control size or their offsets has to be re-derived here. */
  .iic-hero--photo {
    padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  }
}

.iic-hero--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hero-more: the fence stands left-of-frame in shadow, the sea opens top-right. Keep the
     fence's leading edge and the horizon in frame at every crop ratio. */
  object-position: 34% 46%;
}

/* ═══════════════ NO PHOTOGRAPH ON THIS SITE IS VEILED (2026-09-09) ═══════════════
   Ante: "remove any shadeing of images in hero section or anywhere on the page if visibility
   of elements is the problem update elments to overcome obsticles and still fit the design".

   That is one instruction with two halves, and the second half is the design work. Removing a
   scrim is easy; what it costs is white type sitting on an unknown photograph, and the answer
   is NOT to put a weaker scrim back. It is to give the type a ground of its own.

   ⚠ WHAT WAS HERE. A 100deg gradient from 0.88 black at the left edge, plus a vertical one on
   phones running 0.90 up from the bottom. Between them, most of every hero frame was covered
   at some strength at all times, on a photograph that changes every 4.5 seconds. Ivan's own
   note on 2026-09-08 was "i ne lajkam to sta slova smetaju slici" — the letters get in the way
   of the picture — and a veil is the letters getting in the way of the whole picture at once.

   ⚠ WHAT REPLACES IT: A PLATE, NOT A GRADIENT. The copy sits on a solid, hard-edged block of
   ink (see .iic-plate at the foot of this file). The difference is not cosmetic:

     · a photograph is now either FULLY visible or fully covered, never dimmed. Nothing is
       "slightly darkened" — the sky is the sky the camera saw;
     · the contrast under the type is a CONSTANT, not a function of which frame is showing.
       The old gradient had to be tuned for the darkest frame and was therefore too heavy for
       the bright ones and, on a bright one, still marginal. A solid ground has no such
       tension: white on #0b0b0c is 19:1 on every frame, forever;
     · and it belongs to this design. The language here is cut edges, hairlines and zero
       radius. A hard rectangle of solid ink is that language. A soft gradient never was — it
       was the one atmospheric thing on the whole site.

   The carousel pill established the pattern two days earlier for the same reason; it is now
   solid rather than translucent so the two read as the same device. */

/* ═══════════════ the hero gradient, back and light (2026-09-09) ═══════════════
   Ante: "bring back gradients but make them not so dark like they were before for hero
   section on home page only others are good". So this is the ONE photograph on the site that
   is veiled again, and the full-bleed sections keep the plate they were given an hour ago.

   ⚠ WHY IT CAN BE THIS LIGHT NOW, AND COULD NOT BEFORE. The old values — 0.88 falling to 0.70
   across the text, 0.90 up from the bottom on a phone — were not timidity. They were sized to
   protect an EYEBROW, a LEAD and a META NOTE: three runs of small type, one of them 15.5px, on
   a photograph that changes every 4.5 seconds. Small text needs 4.5:1 and the darkest frame
   sets the number for all four.

   All three of those lines were removed on 2026-09-09. What is left on this hero is a headline
   at 84-128px in 800 weight and a button that is a solid blue fill and needs nothing. Large
   text needs 3:1, not 4.5:1, and the difference between those two thresholds is most of this
   gradient. The copy change is what paid for the lighter veil; it is not a judgement call that
   can be repeated without one.

   ⚠ SO IF ANY SMALL TYPE EVER RETURNS TO THIS HERO, THESE NUMBERS GO BACK UP. The eyebrow and
   the lead still exist in i18n.ts, unrendered, and re-rendering one of them without touching
   this rule would publish 15px white type at roughly 2.5:1 on the bright frames.

   The top of the frame is now completely clear at both widths — the last stop is 0 — which is
   where the fence, the lamellas and the water actually are. */
.iic-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Desktop: the column sits left, so the wipe runs left-to-right and only Y-free space is
     given away. 0.66 → 0.46 under the headline, against 0.88 → 0.70 before. */
  background: linear-gradient(
    100deg,
    rgba(11, 11, 12, 0.66) 0%,
    rgba(11, 11, 12, 0.46) 34%,
    rgba(11, 11, 12, 0.12) 62%,
    rgba(11, 11, 12, 0) 100%
  );
}

/* Phone: the copy is bottom-anchored, so the wipe is vertical and the top HALF of every frame
   is untouched. 0.72 at the very bottom is under the button, which is an opaque fill and does
   not need it; 0.50 at 26% is the band the headline actually occupies. */
@media (max-width: 640px) {
  .iic-hero--photo::after {
    background: linear-gradient(
      to top,
      rgba(11, 11, 12, 0.72) 0%,
      rgba(11, 11, 12, 0.5) 26%,
      rgba(11, 11, 12, 0.14) 55%,
      rgba(11, 11, 12, 0) 100%
    );
  }
}

.iic-hero--photo .iic-hero-in,
.iic-hero--photo .iic-facts {
  position: relative;
  z-index: 1;
}

/* Going full-bleed widens the column past the old 860px cap — this is what makes the 128px
   desktop headline size legible instead of cramped. */
.iic-hero--photo .iic-hero-col {
  max-width: min(calc(92vw - var(--iic-pad)), 1000px);
}

/* Mobile-first per-breakpoint override of the hero's own `--iic-h1-size` (see .iic-hero-col
   .iic-h1 above, which sets the flat 128px used everywhere ELSE this lockup appears). A
   full-bleed hero needs an even smaller starting point than that rule's 128px so "Sjajniji od
   mora." — the longer of the two slogan lines, 888px at 128px in real Manrope 800 — never
   wraps at 320px: 84 × 0.47 (the base --iic-display-scale) = 39px, and the sentence needs
   271px against a ~278px column at that width. Ties `.iic-hero-col .iic-h1` on specificity
   (two classes each); this rule sits later in the file, so it wins for --iic-h1-size while
   still inheriting that rule's track/line-height. */
.iic-hero--photo .iic-h1 {
  --iic-h1-size: 84px;
}

@media (min-width: 641px) {
  .iic-hero--photo .iic-h1 {
    --iic-h1-size: 104px;
  }
}

@media (min-width: 901px) {
  .iic-hero--photo .iic-h1 {
    --iic-h1-size: 118px;
  }
}

@media (min-width: 1181px) {
  .iic-hero--photo .iic-h1 {
    --iic-h1-size: 128px;
  }
}

/* The narrow-width release at `@media (max-width:640px) .iic-hero-h1 span` (responsive
   chapter) exists for the OLD, narrower hero column, where a forced two-line break could
   overflow. This hero is tuned so the designed break always fits — see the note above — so
   the forced break is correct again at every width. Two classes + element beats that rule's
   one class + element regardless of source order. */
.iic-hero--photo .iic-hero-h1 span {
  white-space: pre-line;
}

/* Colour law: on a photographic ground the accent role passes to white. No blue text on the
   photo — only `.iic-btn`'s filled treatment is exempt, and it needs no override here because
   its blue is a button FILL, not text sitting directly on the photograph. */
.iic-hero--photo .iic-rule-eyebrow::before {
  background: #fff;
}

.iic-hero--photo .iic-rule-eyebrow span {
  color: rgba(255, 255, 255, 0.86);
}

.iic-hero--photo .iic-h1 {
  color: #fff;
}

.iic-hero--photo .iic-lead {
  color: rgba(255, 255, 255, 0.88);
}

.iic-hero--photo .iic-hero-note {
  color: rgba(255, 255, 255, 0.7);
}

.iic-hero--photo .iic-btn2 {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.iic-hero--photo .iic-btn2:hover {
  border-color: #fff;
  color: #fff;
}

.iic-hero--photo .iic-facts {
  border-top-color: var(--iic-band-line);
  color: rgba(255, 255, 255, 0.7);
}

.iic-facts {
  max-width: var(--iic-max);
  margin: 56px auto 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--iic-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
  font: 500 11.5px/1 var(--iic-font-mono);
  letter-spacing: 0.06em;
  color: var(--iic-ink-meta);
}

/* ─────────────────────────── photo bands ─────────────────────────── */

.iic-photoband {
  position: relative;
  height: clamp(320px, 56vw, 620px);
  margin-top: 52px;
  overflow: hidden;
}

.iic-photoband img,
.iic-scrim img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.iic-photoband-fade-t,
.iic-photoband-fade-b {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.iic-photoband-fade-t {
  top: 0;
  height: 180px;
  background: linear-gradient(180deg, var(--iic-base), rgba(0, 0, 0, 0));
}

.iic-photoband-fade-b {
  bottom: 0;
  height: 220px;
  background: linear-gradient(0deg, var(--iic-base) 8%, rgba(0, 0, 0, 0));
}

/* The caption sits on photography, so it cannot rely on the picture being dark there —
   at 390px it lands on bright sky. A small scrim keeps it legible over anything. */
.iic-photoband-cap {
  position: absolute;
  right: var(--iic-pad);
  bottom: 28px;
  max-width: min(46ch, calc(100% - var(--iic-pad) * 2));
  padding: 8px 11px;
  background: rgba(11, 11, 12, 0.55);
  font: 400 11px/1.5 var(--iic-font-mono);
  letter-spacing: 0.16em;
  color: var(--iic-on-photo);
  text-align: right;
}

/* ─────────────────────────── bands ─────────────────────────── */

.iic-band {
  margin-top: var(--iic-band-mt);
  padding: var(--iic-band-y) var(--iic-pad);
  /* Per-surface inks — the ramp that works on black is illegible on blue. */
  --iic-b1: rgba(255, 255, 255, 0.82);
  --iic-b2: rgba(255, 255, 255, 0.74);
  --iic-b3: rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* Kept as a documented variant of the component; NO page uses it since 2026-08-13, when
   Ante rejected a full-blue section ("i dont like blue section as background … blue only
   for accents"). The home band that used it is now `--dark`.

   ⚠ The flattened .90/.92/.94 ramp is REQUIRED, and it came back on 2026-09-07 with the
   accent. On #1655F3 the designed white .6/.74/.82 measure 3.04/3.86/4.39:1 — all short of
   AA — so the hierarchy has to collapse into three near-identical whites and take its
   differences from size and weight instead. (On #0A3D91, which this was for one day, the same
   three inks measure 4.63/6.24/7.28:1 and the override was correctly deleted. If the accent
   ever darkens again, delete it again.) */
.iic-band--accent {
  background: var(--iic-accent);
  --iic-b1: rgba(255, 255, 255, 0.94);
  --iic-b2: rgba(255, 255, 255, 0.92);
  --iic-b3: rgba(255, 255, 255, 0.9);
}

.iic-band--dark {
  background: var(--iic-band2);
}

.iic-band--metal {
  background: var(--iic-metal);
  position: relative;
  overflow: hidden;
}

.iic-band .iic-h2 {
  color: #fff;
  --iic-h2-size: 64px;
  line-height: 1.02;
}

.iic-band .iic-in,
.iic-band .iic-in--wide {
  container-type: inline-size;
}

/* The accent rule again, and the two places it was silently broken:
   `.iic-h3` sets `color: var(--iic-ink-0)` and `a` sets `color: var(--iic-accent)`, so a
   step heading on the blue band rendered near-black (~1.5:1) and the phone link rendered
   blue-on-blue (invisible). Neither is visible in a screenshot review — the computed-style
   parity check is what caught them. On a dark ground the accent role passes to WHITE. */
.iic-band .iic-h3,
.iic-scrim .iic-h3,
.iic-band .iic-h3--sm,
.iic-scrim .iic-h3--sm {
  color: #fff;
}

.iic-band a,
.iic-scrim a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--iic-band-line);
}

.iic-band a:hover,
.iic-scrim a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* …except the inverted CTA, which is a white fill carrying band-coloured text. */
.iic-band .iic-btn,
.iic-scrim .iic-btn {
  text-decoration: none;
}

.iic-band .iic-eyebrow {
  color: var(--iic-b3);
}

.iic-band .iic-lead {
  color: var(--iic-b1);
}

.iic-band .iic-body {
  color: var(--iic-b2);
}

.iic-band .iic-meta,
.iic-band .iic-micro {
  color: var(--iic-b3);
}

/* On blue/black/photo grounds the accent role passes to white — blue never sits on a dark
   ground. The band CTA therefore inverts: white fill, band-coloured text. */
.iic-band .iic-btn {
  background: #fff;
  border-color: #fff;
  color: var(--iic-accent);
}

/* The band CTA is a white fill, so its LABEL sits on white and can be the brand blue
   itself (5.79:1) rather than the band's black — the accent's strongest legitimate
   appearance on a dark ground, because it never actually touches it. */
.iic-band--dark .iic-btn {
  color: var(--iic-accent);
}

.iic-band .iic-btn::before {
  background: currentColor;
}

.iic-band .iic-btn:hover {
  color: var(--iic-accent);
  filter: brightness(0.94);
}

.iic-band .iic-btn2 {
  border-color: var(--iic-band-line);
  color: #fff;
}

.iic-band .iic-btn2:hover {
  border-color: #fff;
  color: #fff;
}

.iic-band .iic-link {
  color: #fff;
}

/* Full-bleed photographic band with a scrim. */
.iic-scrim {
  position: relative;
  margin-top: var(--iic-band-mt);
  min-height: clamp(440px, 70vw, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  --iic-b1: rgba(255, 255, 255, 0.9);
  --iic-b2: rgba(255, 255, 255, 0.88);
  --iic-b3: rgba(255, 255, 255, 0.86);
}

.iic-scrim-in {
  position: relative;
  z-index: 1;
  max-width: var(--iic-inner);
  margin: 0 auto;
  padding: var(--iic-band-y) var(--iic-pad);
  width: 100%;
  container-type: inline-size;
}

.iic-scrim .iic-h2 {
  color: #fff;
  --iic-h2-size: 64px;
  line-height: 1.02;
}

.iic-scrim .iic-eyebrow {
  color: var(--iic-b3);
}

.iic-scrim .iic-body {
  color: var(--iic-b2);
}

.iic-scrim .iic-meta {
  color: var(--iic-b3);
}

/* ─────────────────────────── cards ─────────────────────────── */

.iic-card {
  /* ⚠ THE PADDING IS A TOKEN BECAUSE SOMETHING HAS TO CANCEL IT.
     A photo-topped card bleeds its figure to the card's edges with a negative margin, and that
     margin has to equal this padding EXACTLY. When the two were written as separate literals
     the phone breakpoint below changed one and not the other, and the breadth-band photos hung
     5px outside the card border on every phone (Ante, 2026-09-08: "home section images are
     going out of card over cards borders"). Read it, never retype it:
     margin: calc(var(--iic-card-pad) * -1). */
  --iic-card-pad: 30px;
  border: 1px solid var(--iic-line);
  border-radius: var(--iic-radius-lg);
  background: var(--iic-base);
  padding: var(--iic-card-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.iic-card--flush {
  padding: 0;
  overflow: hidden;
}

.iic-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iic-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iic-figure {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--iic-base-alt);
  border-radius: var(--iic-radius-lg);
}

.iic-figure--4x3 {
  aspect-ratio: 4 / 3;
}

.iic-figure--16x9 {
  aspect-ratio: 16 / 9;
}

.iic-figure--16x10 {
  aspect-ratio: 16 / 10;
}

.iic-figure--4x5 {
  aspect-ratio: 4 / 5;
}

.iic-figure--1x1 {
  aspect-ratio: 1 / 1;
}

.iic-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.iic-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 28px;
}

/* The /reference "other work" wall — a tighter grid than the card grids above it, since these
   are plain photos with no body copy underneath. Real order is shuffled client-side
   (data-iic-gallery, site.js); this is just the deterministic SSR order/layout. */
.iic-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}

.iic-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px;
}

/* Two products, two wide columns. The 2026-08-13 catalogue change left `/ograde` with
   exactly two cards where the grid was tuned for narrower ones sitting under a flagship
   block; a 520px floor stops them collapsing to a third column's worth of width on a wide
   screen, and the larger gutter keeps two big cards from reading as one slab. Below ~1100px
   the floor exceeds the track and it falls to one column on its own. */
.iic-grid-2--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 40px;
}

/* Exactly four equal cells. `auto-fit` would fit three across 1240px and leave the fourth
   stranded on its own row, which reads as a mistake rather than a layout. Mobile-first: one
   column is the base case, and min-width queries add tracks as room appears. */
.iic-grid-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 521px) {
  .iic-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .iic-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Mobile-first: one column is the base case; the two-column tracks only exist from 901px,
   where there is room for them. The narrow-width collapse this used to need lived at
   ~1754 as a max-width override — removed, since the ranges would otherwise overlap. */
.iic-two,
.iic-two--even,
.iic-two--copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 901px) {
  .iic-two {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
  }

  .iic-two--even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
  }

  .iic-two--copy {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  /* An unshot photo slot renders nothing (see slot() in ivan-inox-web-export.tsx), which
     leaves its two-column container holding a single child. Without this the copy would sit
     in the narrower 1.15fr column beside an empty cell — visually a hole nobody put there.
     Applies to all three variants because :only-child is checked on the child, not the
     container's modifier. */
  .iic-two > :only-child,
  .iic-two--even > :only-child,
  .iic-two--copy > :only-child {
    grid-column: 1 / -1;
  }
}

.iic-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Price chip — rendered only when IIC_PRICES_CONFIRMED; otherwise the CTA takes its place. */
.iic-price {
  font: 700 18px/1 var(--iic-font-head);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--iic-ink-0);
}

.iic-cardcta {
  font: 600 11px/1 var(--iic-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iic-accent);
}

/* ─────────────────────────── spec rows ─────────────────────────── */

.iic-specs {
  display: flex;
  flex-direction: column;
}

.iic-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--iic-line);
}

.iic-spec:first-child {
  border-top: 0;
}

.iic-spec dt,
.iic-spec-l {
  font: 600 10.5px/1.3 var(--iic-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iic-ink-meta);
  margin: 0;
}

.iic-spec dd,
.iic-spec-v {
  margin: 0;
  font: 500 14.5px/1.4 var(--iic-font-head);
  color: var(--iic-ink-0);
  text-align: right;
}

.iic-band .iic-spec {
  border-color: var(--iic-band-line);
}

.iic-band .iic-spec dt,
.iic-band .iic-spec-l {
  color: var(--iic-b3);
}

.iic-band .iic-spec dd,
.iic-band .iic-spec-v {
  color: #fff;
}

/* ─────────────────────────── stat grids ─────────────────────────── */

.iic-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: 1px;
  background: var(--iic-line);
  border: 1px solid var(--iic-line);
}

.iic-stats--tight {
  grid-template-columns: repeat(auto-fit, minmax(min(50% - 1px, 96px), 1fr));
}

.iic-stat {
  background: var(--iic-base);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.iic-stat-v {
  font: 700 20px/1 var(--iic-font-head);
  letter-spacing: -0.02em;
  color: var(--iic-ink-0);
}

.iic-stat-l {
  font: 600 9.5px/1 var(--iic-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iic-ink-meta);
}

.iic-band .iic-stats {
  background: var(--iic-band-line);
  border-color: var(--iic-band-line);
}

.iic-band .iic-stat {
  background: var(--iic-band2);
}

.iic-band .iic-stat-v {
  color: #fff;
}

.iic-band .iic-stat-l {
  color: var(--iic-b3);
}

.iic-proof {
  margin: 0;
  font: 600 14.5px/1.5 var(--iic-font-head);
  color: var(--iic-ink-0);
}

/* ─────────────────────────── numbered steps ─────────────────────────── */

.iic-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px;
}

.iic-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--iic-line);
  min-width: 0;
}

.iic-band .iic-step {
  border-color: var(--iic-band-line);
}

.iic-step-n {
  font: 700 11px/1 var(--iic-font-mono);
  letter-spacing: 0.2em;
  color: var(--iic-accent);
}

.iic-band .iic-step-n {
  color: #fff;
}

.iic-scrim .iic-step-n {
  color: #fff;
}

/* On the black band the accent comes BACK, in the two weights that stay legible:
   `--iic-accent-on-dark` for the small mono marks (5.58:1 on #0b0b0c) and the brand blue
   itself for hairlines, which are non-text and need only 3:1 (measured 3.40:1). Everything
   carrying actual sentences — headings, lead, body — stays white. That is the "blue only for
   accents" treatment, and it applies to all four dark bands rather than only the one that
   used to be solid blue: the same component must not look different from page to page.

   ⚠ For one day (2026-09-06) the hairline used the sibling too, because #0A3D91 measures
   1.96:1 here and lost the 3:1 licence. It reverted with the accent.

   THESE MUST STAY BELOW `.iic-band .iic-eyebrow` AND `.iic-band .iic-step-n`. Both are
   two-class selectors, so specificity ties and source order decides — declared up in the
   bands block (where they logically belong) they lost to the generic white and the band
   rendered with no accent at all. Photographic scrims are deliberately excluded: blue over
   an unpredictable photograph is not a contrast anyone can guarantee. */
.iic-band--dark .iic-eyebrow,
.iic-band--dark .iic-step-n {
  color: var(--iic-accent-on-dark);
}

.iic-band--dark .iic-step {
  border-top-color: var(--iic-accent);
}

/* Metal-surface inks. These MUST sit below the --dark accent return above:
   both are (0,2,0), so the two surface variants tie on specificity and the
   later one wins. Declared higher up, --metal would inherit --dark's #4d82ff
   eyebrow, which measures only 3.67:1 on this lighter ground and fails AA for
   small text. Same trap as the one directly above, one surface later. */
.iic-band--metal .iic-eyebrow,
.iic-band--metal .iic-step-n {
  color: var(--iic-accent-on-metal);
}

.iic-band--metal .iic-step {
  border-top-color: var(--iic-accent-on-dark);
}

/* The band's signature texture: the lamella pitch (--iic-slat/--iic-slat-gap) as a low-
   contrast repeating stripe, masked to a fade so it reads as material grain at the trailing
   edge rather than a picture competing with the type. Content gets an explicit stacking
   context so it always paints above the ::before layer regardless of source order. */
.iic-band--metal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    var(--iic-metal-hi) 0,
    var(--iic-metal-hi) var(--iic-slat),
    var(--iic-metal-lo) var(--iic-slat),
    var(--iic-metal-lo) calc(var(--iic-slat) + var(--iic-slat-gap))
  );
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.65) 70%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.65) 70%, #000 100%);
  pointer-events: none;
}

.iic-band--metal .iic-in,
.iic-band--metal .iic-in--wide {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────── long-form article ─────────────────────────── */

.iic-art {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  container-type: inline-size;
}

.iic-art .iic-h2 {
  --iic-h2-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.iic-artnum {
  font: 700 12px/1 var(--iic-font-mono);
  letter-spacing: 0.24em;
  color: var(--iic-accent);
}

.iic-callout {
  border-left: 2px solid var(--iic-accent);
  padding: 4px 0 4px 20px;
  font: 500 15.5px/1.6 var(--iic-font-head);
  color: var(--iic-ink-1);
}

.iic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iic-chips span {
  border: 1px solid var(--iic-line);
  padding: 9px 13px;
  font: 500 10.5px/1 var(--iic-font-mono);
  letter-spacing: 0.14em;
  color: var(--iic-ink-meta);
  border-radius: var(--iic-radius-sm);
}

/* ─────────────────────────── tables ─────────────────────────── */

.iic-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--iic-font-mono);
}

.iic-table th {
  text-align: left;
  font: 600 10px/1 var(--iic-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iic-ink-meta);
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--iic-line);
}

.iic-table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--iic-line);
  font: 400 14px/1.5 var(--iic-font-mono);
  color: var(--iic-ink-1);
  vertical-align: top;
}

.iic-table td:first-child {
  color: var(--iic-ink-0);
  font-weight: 500;
}

.iic-band .iic-table th {
  color: var(--iic-b3);
  border-color: var(--iic-band-line);
}

.iic-band .iic-table td {
  color: var(--iic-b1);
  border-color: var(--iic-band-line);
}

.iic-band .iic-table td:first-child {
  color: #fff;
}

.iic-tnote {
  margin: 18px 0 0;
  font: 400 11.5px/1.6 var(--iic-font-mono);
  letter-spacing: 0.04em;
  color: var(--iic-ink-meta);
}

.iic-band .iic-tnote {
  color: var(--iic-b3);
}

/* ─────────────────────────── konfigurator (CSS only) ─────────────────────────── */

/* Four mutually exclusive options whose outcomes are all known at bake time. A native
   radiogroup gives keyboard and screen-reader behaviour for free AND keeps working with
   JavaScript disabled — which the verify harness pins. */

.iic-konf-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
}

.iic-konf-btn {
  position: relative;
  display: block;
  padding: 16px 14px;
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius);
  font: 500 12.5px/1.3 var(--iic-font-head);
  color: var(--iic-ink-0);
  cursor: pointer;
  text-align: left;
}

.iic-konf-btn:hover {
  border-color: var(--iic-ink-0);
}

.iic-konf-panel {
  display: none;
  margin-top: 24px;
  border: 1px solid var(--iic-line);
  padding: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 26px;
  align-items: start;
  border-radius: var(--iic-radius-lg);
}

.iic-konf-panel .iic-konf-cta {
  grid-column: 1 / -1;
}

.iic-konf input:focus-visible + .iic-konf-opts .iic-konf-btn,
.iic-konf-btn:focus-within {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

/* ─────────────────────────── before / after ─────────────────────────── */

.iic-ba {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 480px;
  overflow: hidden;
  border: 1px solid var(--iic-line);
  background: var(--iic-base-alt);
  border-radius: var(--iic-radius-lg);
}

.iic-ba:focus-within {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

.iic-ba-layer {
  position: absolute;
  inset: 0;
}

.iic-ba-layer > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.iic-ba-div {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--iic-accent);
  pointer-events: none;
  transform: translateX(-1px);
}

.iic-ba-knob {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--iic-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--iic-font-head);
  pointer-events: none;
}

.iic-ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.iic-ba-tag {
  position: absolute;
  bottom: 14px;
  font: 600 10px/1 var(--iic-font-mono);
  letter-spacing: 0.16em;
  color: #fff;
  background: rgba(11, 11, 12, 0.62);
  padding: 8px 10px;
  pointer-events: none;
}

.iic-ba-tag--a {
  left: 14px;
}

.iic-ba-tag--b {
  right: 14px;
}

/* With JS off the slider cannot move, so remove the control rather than leave a dead one.
   The bake server-renders the 28% split, which stays a correct labelled comparison. */
html:not(.iic-js) .iic-ba-range,
html:not(.iic-js) .iic-ba-knob {
  display: none;
}

/* ─────────────────────────── detail callouts ─────────────────────────── */

.iic-detail {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--iic-line);
  border-radius: var(--iic-radius-lg);
}

.iic-detail img {
  display: block;
  width: 100%;
  height: auto;
}

.iic-callouts {
  display: none;
}

.iic-calloutlist {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* ─────────────────────────── image slots ─────────────────────────── */

/* ⚠ CURRENTLY UNRENDERED — kept on purpose, do not delete as "dead CSS".
   Photography the client still owes. A neutral field carrying the brand bar and the shot
   brief as REAL text — so it reads as intentional rather than broken, uses the real
   typeface, and is legible to a screen reader.

   2026-08-24: slot() stopped emitting this markup before go-live. On the client's live domain
   a grey box captioned "PRIJE — zahrđao 304 uz more" reads as an unfinished site, so the
   SECTION that needs an unshot photograph is withheld instead. The rules stay because the
   placeholder is still the right answer for an internal review build, and because this file's
   own history says an unused-looking component here may be a finished one waiting for its
   markup (see the .iic-mark note). */
.iic-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  background: var(--iic-base-alt);
  border: 1px solid var(--iic-line);
  padding: 20px;
  overflow: hidden;
  min-width: 0;
  border-radius: var(--iic-radius-lg);
}

/* The brand bar, so an empty field still reads as this site's furniture. */
.iic-slot::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 4px;
  height: 38px;
  background: var(--iic-accent);
  opacity: 0.5;
}

/* A very low-contrast diagonal wash: enough to say "placeholder" at a glance without
   the dashed-border look, which reads as broken rather than pending. */
.iic-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(11, 11, 12, 0.022) 0 10px,
    rgba(11, 11, 12, 0) 10px 20px
  );
  pointer-events: none;
}

.iic-slot > * {
  position: relative;
  z-index: 1;
}

.iic-slot-eyebrow {
  margin: 0;
  font: 600 9.5px/1 var(--iic-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iic-accent);
}

.iic-slot-cap {
  margin: 0;
  font: 500 12px/1.5 var(--iic-font-head);
  color: var(--iic-ink-meta);
  max-width: 34ch;
}

.iic-band .iic-slot,
.iic-scrim .iic-slot {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--iic-band-line);
}

.iic-band .iic-slot::after,
.iic-scrim .iic-slot::after {
  background: none;
}

.iic-band .iic-slot::before,
.iic-scrim .iic-slot::before {
  background: #fff;
}

.iic-band .iic-slot-cap,
.iic-scrim .iic-slot-cap {
  color: var(--iic-b2);
}

.iic-band .iic-slot-eyebrow,
.iic-scrim .iic-slot-eyebrow {
  color: var(--iic-b3);
}

/* ─────────────────────────── FAQ ─────────────────────────── */

.iic-faq {
  border-top: 1px solid var(--iic-line);
}

.iic-faq details {
  border-bottom: 1px solid var(--iic-line);
}

.iic-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  position: relative;
  font: 700 17px/1.4 var(--iic-font-head);
  letter-spacing: -0.02em;
  color: var(--iic-ink-0);
}

.iic-faq summary::-webkit-details-marker {
  display: none;
}

.iic-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font: 400 22px/1 var(--iic-font-head);
  color: var(--iic-accent);
}

.iic-faq details[open] summary::after {
  content: "–";
}

.iic-faq-a {
  margin: 0;
  padding: 0 0 24px;
  max-width: 68ch;
  font: 400 15.5px/1.65 var(--iic-font-head);
  color: var(--iic-ink-2);
}

/* ─────────────────────────── footer ─────────────────────────── */

/* ─────────────────────────── footer ───────────────────────────
   Rebuilt 2026-09-02. It was a single flex row that put a mono company line, a tagline, a
   right-aligned nav and three social circles on one baseline and hoped for the best — at
   1440px the last nav link ran UNDER the fixed FAB stack, and "Made by sorich.hr" sat alone
   at the bottom. Ante: *"it looks like somebody dumpoed text there."*

   Now: four labelled columns (brand · pages · contact · follow) over a bottom bar carrying
   the registration line and the signature.

   ⚠ THE RIGHT-HAND PADDING IS NOT DECORATIVE. `.iic-fabs` is `position: fixed` bottom-right
   and the footer is the last thing on the page, so it is the ONE block guaranteed to be
   under the stack when a visitor reaches the end. The reserve below keeps the final column
   clear of it — that is what the old layout was missing, and why a real link was unclickable
   at 1440px. */
.iic-foot {
  max-width: var(--iic-max);
  margin: clamp(72px, 10vw, 120px) auto 0;
  padding: clamp(32px, 4vw, 48px) var(--iic-pad) 0;
  border-top: 1px solid var(--iic-line);
}

.iic-foot-top {
  /* FLEX, NOT GRID, and the difference is a real bug this file already shipped once.
     The first version used `grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit,
     minmax(150px, 1fr))`. Both minimums are HARD: a grid track never goes below its
     `minmax()` floor, so at 320px the brand's 220px and one 150px column already exceeded
     the screen and the footer pushed the page 90px sideways — on every page, caught by the
     harness's overflow sweep at 320/360/390.

     Flex bases are hints, not floors: `flex: 1 1 <basis>` with `min-width: 0` shrinks below
     the basis instead of overflowing, and wraps when shrinking would be silly. Same visual
     result on a desktop, no horizontal scroll on a phone. */
  display: flex;
  flex-wrap: wrap;
  gap: 36px clamp(24px, 4vw, 64px);
}

.iic-foot-brand {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* The header's CSS lockup at a larger size. Same component, three variables — there is no
   second wordmark to keep in step, and no PNG that would need re-exporting. */
.iic-foot-logo {
  --iic-lock-size: 22px;
  --iic-lock-line: 17px;
  --iic-lock-gap: 5px;
  gap: 6px;
}

.iic-foot-tag {
  margin: 0;
  max-width: 30ch;
  font: 600 15px/1.35 var(--iic-font-head);
  letter-spacing: -0.01em;
  color: var(--iic-ink-0);
}

.iic-foot-col {
  /* `min-width: 0` is load-bearing: without it a flex item refuses to shrink below its
     min-content width, and the longest footer link ("Privatnost i podaci o tvrtki") would
     re-create the overflow the grid version had. */
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iic-foot-h {
  margin: 0;
  font: 700 10.5px/1 var(--iic-font-mono);
  letter-spacing: 0.14em;
  color: var(--iic-ink-3);
}

.iic-foot-col a {
  font: 500 14px/1.4 var(--iic-font-head);
  color: var(--iic-ink-1);
  text-decoration: none;
  /* Footer links are the smallest targets on the page and the ones people hunt for on a
     phone; a real tap height costs nothing here. */
  padding: 3px 0;
}

.iic-foot-col a:hover {
  color: var(--iic-accent);
}

/* ⚠ THE BOTTOM BAR IS WHAT THE FIXED FAB STACK LANDS ON. `.iic-fabs` is fixed bottom-right
   and the footer is the end of the page, so this row is the one block guaranteed to be under
   it when a visitor reaches the bottom. The right reserve keeps the signature clear of the
   stack; the bottom padding keeps the whole row above it on a phone, where the stack is
   proportionally much larger. The old footer had neither, and at 1440px its last nav link was
   genuinely unclickable. */
.iic-foot-bar {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 18px 96px clamp(22px, 14vw, 96px) 0;
  border-top: 1px solid var(--iic-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 28px;
}

/* ⚠ `.iic-foot-l` was the old left block (company line + tagline). The 2026-09-02 rebuild
   replaced it with `.iic-foot-brand`; kept as a note rather than silently vanishing, since
   the class name still appears in older screenshots and session notes. Nothing renders it. */

.iic-foot-co {
  font: 400 11px/1.5 var(--iic-font-mono);
  letter-spacing: 0.04em;
  color: var(--iic-ink-meta);
}

.iic-foot-tag {
  font: 600 13px/1.3 var(--iic-font-head);
  color: var(--iic-ink-0);
}

/* ⚠ `.iic-foot-nav` retired 2026-09-02 with the footer's page list — the sticky header
   carries the same links on every page, and now Naslovnica too. Nothing renders it. */

.iic-foot-legal {
  font: 500 13px/1.4 var(--iic-font-head);
  color: var(--iic-ink-2);
}

.iic-foot-legal:hover {
  color: var(--iic-accent);
}

.iic-foot-nav a {
  /* No padding at all previously — a 12px/1 line is a ~12px tap target. min-height alone
     (no visible box) floors the hit area at 44px without adding a background/border that
     would turn a plain text link into something that looks like a button. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 12px/1 var(--iic-font-head);
  color: var(--iic-ink-2);
}

.iic-foot-nav a:hover {
  color: var(--iic-ink-0);
}

.iic-made {
  font: 400 10.5px/1.5 var(--iic-font-mono);
  letter-spacing: 0.08em;
  color: var(--iic-ink-3);
}

.iic-made a {
  color: var(--iic-ink-meta);
}

/* Footer social bubble — same circular accent-fill treatment as the floating action
   stack (.iic-fab below), scaled down for an inline row instead of a fixed corner stack.
   Mirrors the business card's own social bubble, which today is Facebook-only for this
   client (IIC_FACEBOOK) — one real channel, not a full platform row invented for symmetry. */
/* Its own row under the wordmark and the tagline (2026-09-02). `margin-top: 4px` on top of
   the brand column's 16px gap is what separates "a row of its own" from "a third line of the
   same block"; `flex-wrap` keeps four bubbles on one line at 320px, where the brand column is
   at its narrowest. */
.iic-foot-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.iic-foot-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--iic-accent);
  color: #fff;
  border: 1px solid var(--iic-accent);
}

.iic-foot-social a:hover {
  filter: brightness(1.08);
}

.iic-foot-social svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* ─────────────────────────── floating actions ─────────────────────────── */

.iic-fabs {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iic-fab {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--iic-lift-3);
  background: var(--iic-accent);
  color: #fff;
  border: 1px solid var(--iic-accent);
}

.iic-fab:hover {
  color: #fff;
  filter: brightness(1.08);
}

.iic-fab svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ⚠ .iic-fab--star is GONE (2026-09-07) along with the review FAB it typeset. It existed only
   to size a literal ★ text glyph — the one FAB that was not an SVG. Its replacement is an
   icon like the other two, so it needs no type rule at all. */

/* ─────────────────────────── responsive ─────────────────────────── */

/* Four breakpoints, each earning its place: 980 the nav rail, 900 the price table reflow,
   760 the scrim direction and the detail overlay, 640 the hero break and touch sizing.
   Everything between them is handled by clamp() and auto-fit.

   Layout DEFINITIONS (how many columns a grid has) are mobile-first and live as min-width
   queries beside the component they belong to (.iic-grid-4, .iic-two/--even/--copy, both
   above this chapter) — the single column IS the base rule, not a collapse of a wider one.
   Everything below this line is a narrow-width ADJUSTMENT to an already-defined layout
   (nav overflow, table reflow, spacing, FAB size) and stays max-width on purpose: it only
   ever needs to say "below this width, tweak X", never "define the layout from scratch". */

@media (max-width: 1099px) {
  /* ⚠ THE SCROLL RAIL IS GONE (2026-09-02). Below this width the chips and the header CTA
     are replaced by the hamburger, which carries all of them and more.

     What the rail actually did, measured on the export: at 390px the nav overflowed its box
     by 184px and at 360px by 212px. "O NAMA", "KONTAKT" and the language switch sat off
     screen behind a fade mask, reachable only by a sideways swipe. Three of seven links
     effectively did not exist on a phone. It also cost a SECOND HEADER ROW — 127px of sticky
     chrome at 390px — which is height stolen from the fold on every page.

     The rail was chosen over a drawer because "a drawer would add a JS-off failure mode".
     That reasoning was right and the conclusion is now wrong: a <details> is a drawer with
     no JS-off failure mode, so the trade the rail was paying for does not exist. */
  .iic-nav,
  .iic-hdr-cta {
    display: none;
  }

  .iic-menu {
    display: block;
  }

  .iic-hdr-in {
    /* One row again: logo left, burger right. No wrap, no order juggling, no second row. */
    flex-wrap: nowrap;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 900px) {
  .iic-hero-in {
    gap: 0;
  }

  /* The price table becomes label/value cards; the header row has nothing left to label. */
  .iic-table thead {
    display: none;
  }

  .iic-table,
  .iic-table tbody,
  .iic-table tr,
  .iic-table td {
    display: block;
    width: 100%;
  }

  .iic-table tr {
    border-bottom: 1px solid var(--iic-line);
    padding: 16px 0;
  }

  .iic-band .iic-table tr {
    border-color: var(--iic-band-line);
  }

  .iic-table td {
    border: 0;
    padding: 4px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: baseline;
  }

  .iic-table td::before {
    content: attr(data-l);
    font: 600 9.5px/1.4 var(--iic-font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--iic-ink-meta);
  }

  .iic-band .iic-table td::before {
    color: var(--iic-b3);
  }

  .iic-table td:first-child {
    font: 700 16px/1.3 var(--iic-font-head);
    padding-bottom: 10px;
  }

  .iic-table td:first-child::before {
    content: none;
  }
}

@media (max-width: 760px) {
  /* A 90° scrim puts the white heading on the bright side of the photo once the copy
     column spans the full width. */
  /* The phone override for .iic-scrim::after went with the rule it overrode. */

  .iic-photoband {
    margin-top: 36px;
  }

  .iic-photoband-cap {
    left: var(--iic-pad);
    text-align: left;
    letter-spacing: 0.1em;
  }

  .iic-facts {
    margin-top: 36px;
    gap: 10px 24px;
  }

  .iic-stack {
    gap: 14px;
  }
}

@media (max-width: 640px) {
  /* Release the designed line break — a forced 16-character line at 320px is worse than
     letting the sentence wrap where it fits. */
  .iic-hero-h1 span {
    white-space: normal;
  }

  .iic-hero-col {
    gap: 22px;
  }

  .iic-chip {
    padding: 9px 11px;
    font-size: 10px;
  }

  .iic-btn,
  .iic-btn2 {
    padding: 15px 20px;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .iic-btn2 {
    justify-content: center;
  }

  .iic-card {
    --iic-card-pad: 22px;
  }

  .iic-card-body {
    padding: 18px 18px 22px;
  }

  .iic-konf-panel {
    padding: 20px;
  }

  .iic-foot {
    padding-top: 22px;
  }
}

@media (max-width: 480px) {
  .iic-fabs {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }

  .iic-fab {
    width: 48px;
    height: 48px;
  }

  .iic-fab svg {
    width: 19px;
    height: 19px;
  }

  /* The FAB stack must never cover the last call to action. */
  .iic-foot {
    padding-bottom: 84px;
  }
}

/* The dimension callouts are percentage-positioned over the photo and collide below ~760px.
   Above it they are the overlay; below, the same facts render as a list — one source. */
@media (min-width: 761px) {
  .iic-callouts {
    display: block;
  }

  .iic-calloutlist {
    display: none;
  }

  .iic-callout-pin {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 10px/1.3 var(--iic-font-mono);
    letter-spacing: 0.14em;
    color: #fff;
    background: rgba(11, 11, 12, 0.66);
    padding: 9px 12px;
    text-transform: uppercase;
  }
}

/* A stacked three-FAB column reaches ~184px up from the bottom edge — on a short phone in
   landscape, or a small handset like the 320×568 class, that is a third of the viewport and
   starts to compete with whatever sits at the bottom of the fold (the full-bleed hero's CTAs
   among them). The column only exists because there is usually vertical room to spare; below
   this height there is not, so the stack turns sideways instead of shrinking the tap targets
   (which would fail the 44px minimum this file floors everywhere else). Anchored bottom-right
   either way, so this is a direction change, not a reposition. */
@media (max-height: 700px) {
  .iic-fabs {
    flex-direction: row;
  }
}

/* ─────────────────────────── order wizard (/order) ───────────────────────────
   Bespoke step wizard (assets/order.js), not the shared CARTA engine — see that
   file's own header comment for why. Styled with the site's existing tokens only;
   no new colour system. Add/remove-row controls are gated behind .iic-js (set
   before first paint) so a JS-off visitor never sees a button that cannot work. */

.iic-ord-nojs {
  padding: 20px 0;
  font: 500 14px/1.5 var(--iic-font-head);
  color: var(--iic-ink-1);
}

.iic-ord-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  max-width: var(--iic-inner);
  margin: 0 auto 36px;
  padding: 0;
  list-style: none;
}

.iic-ord-marks li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--iic-border-c);
  font: 700 10px/1 var(--iic-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iic-ink-3);
  border-radius: var(--iic-radius-sm);
}

.iic-ord-marks li span {
  font: 700 12px/1 var(--iic-font-head);
}

.iic-ord-marks li[data-done] {
  color: var(--iic-ink-1);
  border-color: var(--iic-ink-3);
}

.iic-ord-marks li[data-on] {
  background: var(--iic-accent);
  border-color: var(--iic-accent);
  color: #fff;
}

.iic-ord {
  max-width: var(--iic-inner);
  margin: 0 auto;
  display: grid;
  gap: 48px;
}

.iic-ord-step {
  display: grid;
  gap: 16px;
}

/* Only the current pane is in the flow once JS runs. Without JS nothing is hidden
   and the whole form reads as one page — what a crawler indexes. */
.iic-ord-step[hidden] {
  display: none;
}

.iic-ord-step--send {
  border-top: 1px solid var(--iic-line);
  padding-top: 32px;
}

/* step 0 · model */

.iic-ord-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}

.iic-ord-model {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--iic-border-c);
  background: var(--iic-base);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--iic-radius-lg);
}

.iic-ord-model:hover {
  border-color: var(--iic-ink-0);
}

.iic-ord-model[data-on] {
  border-color: var(--iic-accent);
  box-shadow: inset 0 0 0 1px var(--iic-accent);
}

.iic-ord-model .iic-card-body {
  padding: 22px 24px;
}

.iic-ord-model--link .iic-cardcta {
  color: var(--iic-ink-2);
}

/* The "how do I measure this?" disclosure (2026-09-02). A <details>, like the FAQ and the
   mobile menu — same mechanism, third use, and it works with scripting off. Closed by default:
   the step must still read as two inputs, not as an essay with a form under it. */
.iic-measure {
  margin: 14px 0 4px;
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius-lg);
  background: var(--iic-tint-2);
}

.iic-measure-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  /* A real thumb target, same 44px floor as every other control in this wizard. */
  min-height: 44px;
  padding: 11px 14px;
  font: 600 13.5px/1.3 var(--iic-font-head);
  color: var(--iic-ink-0);
  cursor: pointer;
  list-style: none;
}

.iic-measure-btn::-webkit-details-marker {
  display: none;
}

.iic-measure-btn:focus-visible {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

/* The "?" badge is the affordance — a question mark in the accent circle reads as help at a
   glance, where a chevron reads as "more of the same". It flips to a "−" when open. */
.iic-measure-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--iic-accent);
  color: #fff;
  font: 700 13px/1 var(--iic-font-head);
}

.iic-measure[open] .iic-measure-i {
  background: var(--iic-ink-0);
}

.iic-measure[open] .iic-measure-i::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background: #fff;
}

.iic-measure[open] .iic-measure-i {
  position: relative;
  color: transparent;
}

.iic-measure-body {
  padding: 2px 14px 16px;
  display: grid;
  gap: 14px;
}

.iic-measure-row {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--iic-line);
}

.iic-measure-h {
  margin: 0;
  font: 700 12.5px/1.35 var(--iic-font-mono);
  letter-spacing: 0.02em;
  color: var(--iic-ink-0);
}

/* step 1 · dionice */

.iic-ord-rows {
  display: grid;
  gap: 16px;
}

.iic-ord-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: end;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--iic-line);
  background: var(--iic-tint-2);
  border-radius: var(--iic-radius-lg);
}

.iic-ord-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.iic-ord-lab {
  font: 700 10.5px/1 var(--iic-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iic-ink-meta);
}

.iic-ord-row input[type="number"] {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--iic-border-c);
  background: var(--iic-base);
  font: 600 15px/1 var(--iic-font-head);
  color: var(--iic-ink-0);
  border-radius: var(--iic-radius);
}

.iic-ord-row input[type="number"]:focus-visible {
  outline: 2px solid var(--iic-accent);
  outline-offset: 1px;
}

.iic-ord-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iic-ord-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--iic-border-c);
  font: 600 13px/1 var(--iic-font-head);
  color: var(--iic-ink-1);
  cursor: pointer;
  border-radius: var(--iic-radius);
}

.iic-ord-chip:hover {
  border-color: var(--iic-ink-0);
}

.iic-ord-row input[type="radio"]:checked + .iic-ord-chip {
  background: var(--iic-accent);
  border-color: var(--iic-accent);
  color: #fff;
}

.iic-ord-row input[type="radio"]:focus-visible + .iic-ord-chip {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

.iic-ord-custom-h {
  margin-top: 8px;
  width: 100%;
  max-width: 160px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--iic-border-c);
  background: var(--iic-base);
  font: 600 14px/1 var(--iic-font-head);
  border-radius: var(--iic-radius);
}

.iic-ord-rm {
  width: 36px;
  height: 36px;
  border: 1px solid var(--iic-border-c);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--iic-ink-2);
  cursor: pointer;
  border-radius: var(--iic-radius);
}

.iic-ord-rm:hover {
  border-color: var(--iic-ink-0);
  color: var(--iic-ink-0);
}

/* Add/remove a row is JS-only — with scripting off there is exactly one row and no
   button that could not work. .iic-js is set on <html> before first paint.

   The `:not([hidden])` on both rules is load-bearing, not decoration: `.iic-btn`/
   `.iic-btn2` (and this pair) declare `display` directly, which — at EQUAL selector
   specificity — beats the UA stylesheet's `[hidden]{display:none}` regardless of
   source order, because author rules always win ties over user-agent ones. Without
   the guard, `order.js` setting `.hidden = true` on the Back/Next/add-row/remove-row
   buttons would silently do nothing: confirmed live — the "Dalje ›" button stayed
   visible on the final step until this was added. */
.iic-ord-rm,
.iic-ord-addrow {
  display: none;
}

.iic-js .iic-ord-rm:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.iic-js .iic-ord-addrow:not([hidden]) {
  display: inline-flex;
}

.iic-ord-total {
  font: 700 13px/1 var(--iic-font-mono);
  letter-spacing: 0.06em;
  color: var(--iic-ink-0);
}

.iic-ord-overflow {
  padding: 16px 18px;
  border: 1px solid var(--iic-border-c);
  background: var(--iic-tint);
  font: 500 14px/1.5 var(--iic-font-head);
  color: var(--iic-ink-1);
  border-radius: var(--iic-radius-lg);
}

/* step 2 · vrata */

.iic-ord-gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  /* Only jednokrilna has an example photo, so the cards are genuinely different heights.
     Without this they all stretch to the tallest and the two photo-less ones read as
     half-empty boxes waiting for an image that is never coming. */
  align-items: start;
}

.iic-ord-gate {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--iic-line);
  background: var(--iic-tint-2);
  border-radius: var(--iic-radius-lg);
}

.iic-ord-stepctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.iic-ord-stepctl button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--iic-border-c);
  background: var(--iic-base);
  color: var(--iic-ink-0);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--iic-radius);
}

.iic-ord-stepctl button:hover:not(:disabled) {
  border-color: var(--iic-accent);
}

.iic-ord-stepctl button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ⚠ CURRENTLY UNRENDERED — kept, not deleted (studio rule P3), same as its photo map
   IIC_GATE_PHOTOS_UNRENDERED in ivan-inox-web-export.tsx.
   Each gate type used to carry its own example photo above its counter (2026-08-14). Square,
   because the one real gate photo is of a near-square single leaf — a 4:3 box around it
   would have to clip the top or bottom rail to keep wall visible on both sides. The images
   came out on 2026-09-02 when vrata was folded into the dionice step. */
.iic-ord-gate-fig {
  margin: -16px -18px 4px;
  border-bottom: 1px solid var(--iic-line);
}

/* −/+ steppers beside the dužina and custom-visina number inputs. Same visual language as
   .iic-ord-stepctl above, but the middle cell is a real editable <input>, not an <output>. */
.iic-ord-numctl {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Capped, not stretchy: the two controls sit in grid columns of very different widths, so
     a free-growing input made dužina too narrow to read "12" while the custom height sprawled
     the full row. A fixed ceiling makes both read the same. */
  max-width: 220px;
}

.iic-ord-numctl button {
  width: 44px;
  height: 46px;
  flex: none;
  border: 1px solid var(--iic-border-c);
  background: var(--iic-base);
  color: var(--iic-ink-0);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--iic-radius);
}

.iic-ord-numctl button:hover {
  border-color: var(--iic-accent);
}

.iic-ord-numctl input {
  min-width: 0;
  flex: 1 1 auto;
  height: 46px;
  text-align: center;
}

/* The native number spinner is redundant now that there are real −/+ buttons either side,
   and on desktop it sat on top of the value in the wider of the two controls. */
.iic-ord-numctl input::-webkit-outer-spin-button,
.iic-ord-numctl input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.iic-ord-numctl input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* The wrapper is JS-toggled, and `display:flex` above would otherwise beat the UA
   [hidden] rule at equal specificity — the trap documented in the nested CLAUDE.md. */
.iic-ord-numctl[hidden],
.iic-ord-addr[hidden] {
  display: none;
}

/* step 4 · adresa */

.iic-ord-addr {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--iic-line);
}

.iic-ord-stepctl output {
  min-width: 44px;
  text-align: center;
  font: 700 16px/1 var(--iic-font-head);
  color: var(--iic-ink-0);
}

/* steps 3–4 · lokacija / montaža */

.iic-ord-radios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}

.iic-ord-radio {
  display: block;
  padding: 15px 16px;
  border: 1px solid var(--iic-border-c);
  font: 500 13.5px/1.3 var(--iic-font-head);
  color: var(--iic-ink-0);
  cursor: pointer;
  border-radius: var(--iic-radius-sm);
}

.iic-ord-radio:hover {
  border-color: var(--iic-ink-0);
}

.iic-ord-radios input[type="radio"]:checked + .iic-ord-radio {
  border-color: var(--iic-accent);
  box-shadow: inset 0 -3px 0 var(--iic-accent);
}

.iic-ord-radios input[type="radio"]:focus-visible + .iic-ord-radio {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

.iic-ord-note {
  margin: 0;
  font: 500 13.5px/1.5 var(--iic-font-head);
  color: var(--iic-ink-2);
}

/* A sub-block inside a merged step (2026-09-02): vrata under dionice, kontakt under
   isporuka. The rule is a divider, not a card — two questions on one screen still have to
   read as two questions, and a border box around each would make the step look like a form
   inside a form. */
.iic-ord-sub {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--iic-line);
  display: grid;
  gap: 12px;
}

/* The bespoke escape hatch under step 0's two model cards — the replacement for the retired
   third "Po mjeri" card. Deliberately a paragraph, not a card: it must not read as a third
   product you could pick. */
.iic-ord-pomjeri {
  margin-top: 22px;
  max-width: 78ch;
}

.iic-ord-pomjeri-ctas {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

/* /reference — the Trogir riva benches. Two labelled columns, never the .iic-ba wipe
   slider: the "being made" frames and the "installed" frames do not share a viewpoint, and
   wiped over each other they would read as a broken image rather than as progress. */
.iic-riva {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px;
}

.iic-riva-col {
  display: grid;
  gap: 14px;
  align-content: start;
}

.iic-riva-tag {
  margin: 0;
}

/* step 5 · kontakt */

.iic-ord-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.iic-ord-inp-wide {
  grid-column: 1 / -1;
}

.iic-ord-inp {
  display: grid;
  gap: 8px;
  font: 600 12px/1 var(--iic-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iic-ink-meta);
}

.iic-ord-inp input,
.iic-ord-inp textarea {
  padding: 12px 14px;
  border: 1px solid var(--iic-border-c);
  background: var(--iic-base);
  font: 500 14px/1.5 var(--iic-font-head);
  color: var(--iic-ink-0);
  text-transform: none;
  letter-spacing: normal;
  resize: vertical;
  border-radius: var(--iic-radius);
}

.iic-ord-inp input:focus-visible,
.iic-ord-inp textarea:focus-visible {
  outline: 2px solid var(--iic-accent);
  outline-offset: 1px;
}

/* step 6 · pregled/send */

.iic-ord-estimate {
  font: 700 22px/1.2 var(--iic-font-head);
  color: var(--iic-ink-0);
}

.iic-ord-discount {
  margin: -8px 0 0;
  font: 500 13.5px/1.5 var(--iic-font-head);
  color: var(--iic-ink-2);
}

.iic-ord-msg {
  padding: 18px 20px;
  border: 1px solid var(--iic-line);
  background: var(--iic-tint-2);
  white-space: pre-wrap;
  font: 500 13px/1.6 var(--iic-font-mono);
  color: var(--iic-ink-1);
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--iic-radius-lg);
}

.iic-ord-disclaimer {
  margin: 0;
  font: 500 12.5px/1.5 var(--iic-font-head);
  color: var(--iic-ink-3);
}

/* nav */

.iic-ord-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--iic-line);
}

/* Same trap as the add/remove-row buttons just above: `.iic-btn`/`.iic-btn2` set
   `display` directly, which at equal specificity beats the UA `[hidden]` rule
   regardless of source order — so `order.js` hiding Back on step 0 or Next on the
   last step would silently do nothing without this. */
.iic-ord-nav [hidden] {
  display: none;
}

.iic-ord-hint {
  flex: 1;
  margin: 0;
  text-align: center;
  font: 700 11px/1.3 var(--iic-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iic-ink-meta);
}

.iic-ord-hint[data-warn] {
  color: var(--iic-accent);
  text-transform: none;
  font-size: 13px;
  letter-spacing: normal;
}

/* ⚠ THE PERSISTENT ESTIMATE BAR IS GONE (2026-09-02) — `.iic-ord-bar`, `-bar-in`, `-bar-k`
   and `-bar-v` were deleted, not archived, because the component itself was the bug: a fixed
   element pinned to the bottom of the viewport covers the END of whatever step is under it,
   and the end of step 1 is where the vrata selector lives. See the note in pages/order.html.

   Its 96px bottom reserve went with it. That reserve existed only because the bar was
   `position: fixed` and nothing in normal flow knew it was there — 2026-08-14, taller dionice
   rows pushed a height chip into the dead zone under it and it stopped being clickable at
   all. With no fixed bar there is no dead zone; the wizard keeps a normal section rhythm.

   The lesson generalises: a fixed bottom bar buys visibility for ONE thing by hiding whatever
   the page put last. Before adding one, name what it will cover. */
.iic-ord {
  padding-bottom: 24px;
}

@media (max-width: 640px) {
  .iic-ord-row {
    grid-template-columns: 1fr;
  }

  .iic-ord-rm {
    justify-self: end;
  }

  /* ⚠ THE FAB STACK OWNS THE BOTTOM-RIGHT CORNER, AND "Dalje ›" IS A BOTTOM-RIGHT BUTTON.
     `.iic-fabs` is fixed at `right: 22px` with 54px circles, so it occupies the right ~76px
     of the viewport whenever it is on screen — and at 390px the wizard's forward button ran
     straight under it. Reserving that column is the same move `.iic-hero--photo`'s 176px
     bottom padding already makes for the hero, one axis over.

     This is NOT the same thing as the sticky estimate bar that was removed on 2026-09-02.
     That bar was OURS and covered the step's own content; the FAB stack is a deliberate,
     site-wide affordance. The answer to a permanent overlay is to lay out around it. */
  .iic-ord-nav {
    padding-right: 84px;
  }
}

/* ── the gallery viewer ───────────────────────────────────────────────────────
   Product standard point 8. Not a plugin's look: the site's own black ground
   (--iic-ink-0), the on-dark accent tint that measures 5.58:1 on it, the square
   corners of --iic-radius, and Plex Mono for the counter — because a viewer that
   looks like somebody else's widget is worse than none on a page whose whole job
   is showing the work.

   Everything below only matters once site.js has wired the viewer, which it does
   by stamping data-iic-lb on <html>. With scripting off the grid keeps exactly the
   look the bake gave it and no affordance is advertised that would not work. */

.iic-shot-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ⚠ THE DROP-SHADOW IS GONE TOO (2026-09-09). It was a legibility rim under a white glyph
   sitting on an unknown photograph — the thumbnail behind it can be a pale sky — and without
   something the icon disappears on roughly a third of the gallery. But a shadow cast onto a
   photograph is still a mark on the photograph, and this round took every one of those off
   the site. The glyph gets the same answer the hero copy got: a small solid plate. It is also
   a firmer target than a 22px glyph was.

   The surviving shadows on this site are the three `inset` rules on the order wizard, which
   draw a ring and an underline rather than an elevation: `.iic-ord-model[data-on]` and the
   two `.iic-ord-radio:checked` rules, where the inset underline is documented as the
   NON-COLOUR selection cue a colour-blind visitor depends on. */
.iic-shot-open svg {
  width: 22px;
  height: 22px;
  padding: 7px;
  box-sizing: content-box;
  background: var(--iic-ink-0);
}

[data-iic-lb] .iic-figure:has(.iic-shot-open) {
  position: relative;
}

/* The cue used to wash the bottom half of the thumbnail with a gradient on hover — a veil on
   a photograph, and the exact thing this round removed everywhere else. The icon gets its own
   small plate instead, which is also a firmer target. */
.iic-shot-open:hover,
.iic-shot-open:focus-visible {
  opacity: 1;
}

/* A pointer that cannot hover — a phone — never gets the hover state, so the cue
   has to be permanently visible there or the frames look inert. */
@media (hover: none) {
  .iic-shot-open {
    opacity: 0.86;
  }
}

.iic-shot-open:focus-visible {
  outline: 2px solid var(--iic-accent-on-dark);
  outline-offset: -3px;
}

.iic-lb {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--iic-ink-0);
  color: #fff;
}

.iic-lb::backdrop {
  background: rgba(11, 11, 12, 0.94);
}

.iic-lb-in {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 56px 16px 64px;
  box-sizing: border-box;
}

.iic-lb-fig {
  margin: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}

.iic-lb-img {
  display: block;
  max-width: 100%;
  /* Room for the caption under it and the controls above; the figure is centred so
     the remainder is split evenly. */
  max-height: calc(100dvh - 190px);
  object-fit: contain;
  border-radius: var(--iic-radius-lg);
  /* THE point of the viewer: pinch zooms the PHOTOGRAPH. The page's own pinch-zoom is
     untouched anywhere in this stylesheet — nothing here goes near the viewport meta. */
  touch-action: pinch-zoom;
}

.iic-lb-cap {
  max-width: 68ch;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.iic-lb-x,
.iic-lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--iic-radius);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}

.iic-lb-x svg,
.iic-lb-nav svg {
  width: 20px;
  height: 20px;
}

.iic-lb-x:hover,
.iic-lb-nav:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--iic-accent-on-dark);
}

.iic-lb-x:focus-visible,
.iic-lb-nav:focus-visible {
  outline: 2px solid var(--iic-accent-on-dark);
  outline-offset: 2px;
}

.iic-lb-x {
  top: 12px;
  right: 12px;
}

.iic-lb-prev {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.iic-lb-next {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.iic-lb-count {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--iic-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--iic-accent-on-dark);
}

/* `.iic-lb-nav` sets `display: grid`, which at EQUAL specificity beats the UA
   stylesheet's [hidden]{display:none} — author rules always win a tie against
   user-agent ones. Without this the single-photo case would still show both arrows.
   Same trap the order wizard's nav buttons hit; see the note in ivan-inox/CLAUDE.md. */
.iic-lb-nav[hidden],
.iic-lb-count[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .iic-lb-in {
    padding: 52px 8px 58px;
  }

  .iic-lb-prev {
    left: 8px;
  }

  .iic-lb-next {
    right: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORDER · ISPORUKA — the choice has to LOOK like a choice
   2026-09-03. Ante: "make it visible that those are buttons and selections so no
   users are confused."

   What was there: a bare bordered box whose only selected state was a hairline
   colour change plus a 3px inset underline. On a phone that reads as a card —
   something to read, not something to pick between — and the wizard's third step
   is exactly where a wrong assumption costs Ivan a delivery address he never
   needed. A real radio dot, a filled selected state and a pressable surface say
   "pick one" without a word of copy.

   The dot is drawn, not a native input: the input itself stays visually hidden
   (.iic-sr) so the whole 15px-padded label remains the hit target, which is what
   makes this comfortable to tap. Keyboard and screen readers still get a real
   radiogroup — the same trade the konfigurator makes.
   ───────────────────────────────────────────────────────────────────────────── */

.iic-ord-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--iic-tint-2);
  transition: background 0.12s ease, border-color 0.12s ease;
  border-radius: var(--iic-radius-sm);
}

/* The dot. 20px is the smallest that still reads as a radio at arm's length. */
.iic-ord-radio-dot {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--iic-ink-3);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.12s ease;
}

.iic-ord-radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--iic-accent);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.iic-ord-radio-t {
  min-width: 0;
}

.iic-ord-radios input[type="radio"]:checked + .iic-ord-radio {
  background: color-mix(in srgb, var(--iic-accent) 7%, #fff);
  border-color: var(--iic-accent);
  /* The old inset underline stays as the non-colour cue: a selected state that is
     only a colour change is invisible to a colour-blind visitor. */
  box-shadow: inset 0 -3px 0 var(--iic-accent);
}

.iic-ord-radios input[type="radio"]:checked + .iic-ord-radio .iic-ord-radio-dot {
  border-color: var(--iic-accent);
}

.iic-ord-radios input[type="radio"]:checked + .iic-ord-radio .iic-ord-radio-dot::after {
  transform: scale(1);
}

.iic-ord-radio:hover .iic-ord-radio-dot {
  border-color: var(--iic-ink-0);
}

/* ── the workshop panel, inside the step ──────────────────────────────────────
   Ante: "put info inside". The address used to live only behind a link, so the
   person choosing had to leave the page to learn where they would be driving. */

.iic-ord-pickup {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--iic-border-c);
  border-left: 3px solid var(--iic-accent);
  background: var(--iic-tint-2);
  border-radius: var(--iic-radius);
}

/* ⚠ .iic-ord-pickup sets no `display`, so the UA's [hidden]{display:none} still
   applies — but its CHILD .iic-btn2 does, and that is the author-vs-UA
   specificity trap this part has hit twice (see the wizard notes in CLAUDE.md).
   Belt and braces, because a panel that will not hide is a delivery address
   showing under "collect from the workshop". */
.iic-ord-pickup[hidden] {
  display: none !important;
}

.iic-ord-pickup-h {
  margin: 0 0 6px;
  font: 700 11.5px/1 var(--iic-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iic-accent);
}

.iic-ord-pickup-a {
  margin: 0 0 4px;
  font: 600 15px/1.4 var(--iic-font-head);
  color: var(--iic-ink-0);
}

.iic-ord-pickup-n {
  margin: 0 0 12px;
  font: 500 13.5px/1.5 var(--iic-font-head);
  color: var(--iic-ink-2);
}

.iic-ord-pickup-map {
  display: inline-flex;
}

/* ═════════════════════ the hero slideshow, the word, the sound ═════════════════════
   Appended at the very end of the file on purpose — the surface chapter above is closed by
   contract (see rule 5 in the header), and nothing below it may use a `.iic-band …` or
   `.iic-scrim …` descendant selector. Nothing here does. */

/* ─── the slides ───────────────────────────────────────────────────────────────────────
   Four <picture> elements stacked in the same box. `.iic-hero--photo img` above already
   makes any img inside the hero `position:absolute; inset:0; object-fit:cover` — that rule
   was written for a single photo and it happens to be exactly right for a stack, so the
   slides need no positioning of their own, only opacity.

   ⚠ THE <picture> ELEMENT NEEDS THE POSITIONING TOO, not just its img. A <picture> is an
   inline box that wraps the img; left in flow it would sit in the document, give the hero
   real height and push the headline down the page. */
.iic-hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
}

.iic-hero-slide.is-on {
  opacity: 1;
}

/* ═══════════════ the hero crops, one per photograph, one per axis ═══════════════
   ⚠ object-fit: cover ONLY EVER CROPS THE AXIS THAT OVERFLOWS, so a single percentage cannot
   art-direct both layouts and a "phone version of the desktop value" is meaningless. The two
   layouts crop on DIFFERENT AXES, so they need different properties, not different numbers:

     DESKTOP  hero ≈ 1440 x 820 = 1.76 : most frames are wider-than-tall but LESS wide than
              that, so cover fills the WIDTH and the vertical is trimmed. Only Y matters.
     PHONE    hero ≈ 390 x 700 = 0.56 : every frame is far wider than that, so cover fills the
              HEIGHT and the horizontal is trimmed. Only X matters.

   ⚠ AND THE TRIM IS SEVERE, which is the part that is invisible until it is measured. Visible
   fraction of each frame, computed from its real dimensions:

     hero-ograde   1536x2048 (0.75)   phone: 74% of the width   desktop: 43% of the height
     hero-pergole  1600x1200 (1.33)   phone: 42%                desktop: 76%
     hero-nautika  1536x2048 (0.75)   phone: 74%                desktop: 43%
     hero-klupe    1536x2048 (0.75)   phone: 74%                desktop: 43%
   (ograde and klupe are new photographs since 2026-09-28 — IMG_2272 and IMG_2319, Ante's
   picks from the breadth-band cards — the same portrait shape, so the arithmetic stands.)

   ⚠ THREE OF THE FOUR ARE PORTRAIT SINCE 2026-09-09 (Ante: "find something that fits mobile
   first"), and that is what changed the arithmetic. The landscape frames they replaced showed
   18% and 32% of their width on a phone — a sliver of a panorama and the flattest stretch of a
   bench. A 0.75 source shows 74%, so on a phone there is barely a crop left to art-direct and
   every phone rule below is simply `center`.

   The cost moved to the DESKTOP, where a portrait frame in a 1.76 hero loses 57% of its
   height. That is where the numbers now live: each one places the subject inside the band
   that survives, and centre would cut all three off at an edge.

   PERGOLE is the last landscape frame and the only one still cropping hard on a phone. It
   holds up because its subject — the lamella ceiling — spans the entire width, so any vertical
   slice contains it. Replace it only with another frame that is true of.

   ⚠ KEYED TO THE PHOTOGRAPH (data-iic-hero), NOT TO THE SLIDE INDEX. A crop is a fact about an
   image, so if IIC_HERO_SLIDES is reordered these follow, and if a photograph is REPLACED the
   selector stops matching and it falls back to centre — visibly wrong rather than silently
   wrong, which is what an index would have given. Re-derive the number when you swap a frame;
   do not carry the old one over. */
.iic-hero-slide img {
  object-position: center;
}

/* Desktop — the vertical trim, which is now the only trim that matters for three of four. */
.iic-hero-slide[data-iic-hero="hero-nautika"] img {
  /* The steps sit low in the frame; centre cut them off at the bottom edge. */
  object-position: center 58%;
}

.iic-hero-slide[data-iic-hero="hero-ograde"] img {
  /* 2026-09-28 — IMG_2272, the stainless stair railing (re-derived, not carried over from the
     lamella gate it replaced). The bars run the full height; the marble flight they guard
     fills the lower half, so the surviving 43% band sits over the steps, not the bare ceiling. */
  object-position: center 60%;
}

.iic-hero-slide[data-iic-hero="hero-klupe"] img {
  /* 2026-09-28 — IMG_2319, the curved bench on the Trogir riva. The curve crosses the frame
     from a quarter down to three quarters; the band centred just above the middle keeps the
     rail's sweep and the seat run, with the palms' feet at the top edge. */
  object-position: center 48%;
}

/* Phone — the horizontal trim. Same four frames, the other axis. */
@media (max-width: 640px) {
  /* ⚠ ONLY PERGOLE NEEDS A NUMBER HERE NOW. The other three are portrait sources in a
     portrait viewport, so 74% of each is visible and the subject is inside it either way —
     moving them would push a subject OUT of frame rather than into it. The rules are written
     out rather than left to the shared default so that swapping any frame for a landscape one
     lands on an explicit line to reconsider, not on silence. */
  .iic-hero-slide[data-iic-hero="hero-ograde"] img {
    object-position: center;
  }

  .iic-hero-slide[data-iic-hero="hero-pergole"] img {
    /* Where the lamellas converge on the beam, and the terrace under them. */
    object-position: 56% center;
  }

  .iic-hero-slide[data-iic-hero="hero-nautika"] img {
    object-position: center;
  }

  .iic-hero-slide[data-iic-hero="hero-klupe"] img {
    object-position: center;
  }
}

/* ─── the rotating word ────────────────────────────────────────────────────────────────
   `inline-grid` with every word stacked in cell 1/1 rather than `position:absolute`: the
   swap box then takes the width of the WIDEST word and the second line never shifts
   sideways as the words change. The hidden ones are still laid out (`visibility`, not
   `display`) for the same reason — a `display:none` word contributes no width.

   ⚠ `[hidden]` on the words is what a screen reader reads, and it is set by site.js. The
   rule below deliberately does NOT hide them with `display:none` — but it must still respect
   `hidden` for the accessible name to be one word, so visibility does both jobs at once. */
/* ⚠ BLOCK-level grid, not inline-grid. Inline, the swap box and the second half of the
   headline share a line and the hero reads "Ograde. Inox / i aluminij, / od 1957." — the
   rotating word glued to the sentence that follows it. The word owns its own line; the
   `\n` inside the slogan (rendered by that span's `white-space: pre-line`) breaks the rest. */
.iic-hero-swap {
  display: grid;
  justify-items: start;
}

.iic-hero-word {
  grid-area: 1 / 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, transform 420ms ease;
}

.iic-hero-word[hidden] {
  display: block; /* out-specifies the UA sheet so the widest word still sets the box */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.12em);
}

/* ─── the pager and the pause ──────────────────────────────────────────────────────────
   WCAG 2.2.2: anything that moves by itself for more than five seconds needs a way to stop
   it. This rotates every seven, so the pause button is a requirement.

   ⚠ HIDDEN UNTIL site.js STAMPS `.iic-js`. With scripting off there is nothing to pause and
   no second slide to page to. Gated on the class rather than on `[hidden]` because this
   container sets its own `display`, and an author rule that sets display beats the UA
   sheet's `[hidden]{display:none}` on a specificity tie — the trap that has already cost
   this part its order-wizard Next button and its viewer arrows. */
.iic-hero-ctl {
  display: none;
}

/* ⚠ TOP CENTRE on every width since 2026-09-09 (Ante: "put navigation for carousel in top
   center"). It has now been in three places and each move was for a stated reason, so the
   history is worth keeping:

     bottom-right  →  the FAB stack owns that corner permanently.
     top-RIGHT     →  correct while the hero copy was top-anchored on the left; the desktop
                      hero is ~1003px tall on a 900px viewport, so anything anchored to the
                      BOTTOM edge landed below the fold — a pause control for something moving
                      right now that you have to scroll to find.
     top-CENTRE    →  the copy is bottom-anchored now, and Ivan's note on 2026-09-08 was that
                      the type is in the way of the photograph. Dead centre at the top is the
                      one place on this hero that carries neither: the headline is at the
                      bottom, the FABs are bottom-right, the header is above. It also reads as
                      what it is — a pager for the picture, sitting on the picture.

   It still clears the sticky header by reading the header's own published height rather than
   guessing at it. `translateX(-50%)` rather than flex centring, because the element is
   absolutely positioned and has no line box to centre inside. */
.iic-js .iic-hero-ctl {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  /* ⚠ 12px FROM THE HERO'S OWN TOP, NOT FROM THE HEADER'S. This read
     calc(var(--iic-hdr-h) + 12px) and was wrong by a whole header — 80px instead of 12.

     .iic-hdr is position:STICKY, so it occupies layout space and the hero box already begins
     underneath it. .iic-hero-ctl is absolutely positioned inside .iic-hero, so its top is
     measured from that box, and adding the header height again counts it twice. The error
     shipped unnoticed for as long as the controls sat in the top-RIGHT corner, where an
     empty sky looks the same at 12px as at 80. Centred, it is the first thing you see.

     ⚠ Do NOT reintroduce --iic-hdr-h here. If the header is ever made position:fixed it will
     stop taking space and this becomes correct again — but that is a change to make in one
     place, deliberately, not a hedge to leave in this rule. */
  top: 12px;
  display: flex;
  align-items: center;
  gap: 13px;
  /* Its own ground, so a row of small controls does not have to survive whatever the
     photograph is doing behind it — four of the frames are bright at the top.

     ⚠ SOLID, AND NO BACKDROP BLUR. It was rgba(…, 0.34) over a 6px blur, which is a veil on a
     photograph however small: everything behind it was dimmed and smeared. Opaque ink covers
     a 150px pill completely and leaves every other pixel of the frame untouched, which is the
     rule the whole page now follows. */
  padding: 5px 12px;
  background: var(--iic-ink-0);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.iic-hero-dots {
  display: flex;
  /* The gap is the visible one. Each dot's real target is larger than its ink (see below),
     and the targets are allowed to touch — a 5px visual gap between 29px targets means no
     dead pixels between them, which is what makes a row of small dots usable with a thumb. */
  gap: 5px;
}

/* ⚠ THE INK IS 12px AND THE TARGET IS 32px, and they are different on purpose. Ante: "make
   it ... a bit bigger and esier to navigate". Growing the dot itself to thumb size would put
   four heavy circles across the bottom of a photograph; growing only the target makes them
   easy to hit and leaves the design alone. The ink is drawn by a pseudo-element centred in a
   transparent 32px button, which is above the 24px minimum for a pointer target and close to
   the 44px comfort figure once the row's gap is counted in.

   ⚠ background/border live on ::before, so `.iic-hero-dot.is-on` below must target ::before
   too — styling the button paints nothing visible. */
.iic-hero-dot {
  position: relative;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.iic-hero-dot::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

/* Pressing a dot should feel like pressing something, given the ink is a third of the target
   and nothing else moves. */
.iic-hero-dot:active::before {
  transform: scale(0.82);
}

.iic-hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  border-radius: 50%;
}

/* Paints the INK, not the button — the button is a transparent 32px target, so styling it
   would paint nothing a visitor can see. The active dot also grows a touch: at 12px the
   fill-versus-outline difference alone is thin, and the extra 15% is what makes "which one
   am I on" readable at arm length in sunlight. */
.iic-hero-dot.is-on::before {
  background: #fff;
  border-color: #fff;
  transform: scale(1.15);
}

.iic-hero-dot.is-on:active::before {
  transform: scale(0.95);
}

.iic-hero-pp {
  display: grid;
  place-items: center;
  /* Matched to the dots' ink weight rather than to their target: this one is a single
     control with a visible edge, so its box IS its target. 10% down from 36 with the rest. */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.28);
  cursor: pointer;
}

/* Two bars = pause. One CSS triangle = play. Drawn rather than iconed: two shapes at 10px
   are cheaper as borders than as a second SVG, and they inherit the ink. */
.iic-hero-pp-i {
  width: 8px;
  height: 10px;
  border-left: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
}

.iic-hero-pp[data-paused] .iic-hero-pp-i {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left: 8px solid #fff;
  border-right: 0;
  margin-left: 3px;
}

/* ⚠ THE PHONE OVERRIDE IS GONE (2026-09-09) and this comment is what is left of it. The
   controls used to drop to the bottom-LEFT on a phone, to keep a 30px target from having to
   dodge the 56px FAB stack. Top centre solves that better: it is nowhere near the FABs, it is
   nowhere near the bottom-anchored copy, and one position on every width is one thing to
   reason about instead of two. The targets are 32px now rather than 30, and they no longer
   share an edge with anything. */

/* ─── the sound toggle ─────────────────────────────────────────────────────────────────
   Three bars that animate into an equaliser while the music plays, and sit still — with the
   middle one struck through — while it does not. It has to read as a SOUND control at a
   glance and with no label, because it is the one thing on the page a visitor might want to
   switch off in a hurry.

   ⚠ Also hidden until `.iic-js`. An <audio> element with no script behind it cannot be
   started by this button, and a dead control is worse than no control. */
.iic-snd {
  display: none;
}

.iic-js .iic-snd {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  margin-right: 10px;
  padding: 0;
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius);
  background: transparent;
  color: var(--iic-accent);
  cursor: pointer;
}

.iic-snd:hover {
  border-color: var(--iic-accent);
}

.iic-snd-i {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 15px;
}

.iic-snd-i span {
  width: 2.5px;
  height: 5px;
  border-radius: 1.5px;
  background: currentColor;
}

.iic-snd-i span:nth-child(2) {
  height: 13px;
}

.iic-snd-i span:nth-child(3) {
  height: 8px;
}

/* Playing: the bars breathe. Three offsets so it reads as level meters rather than a pulse. */
.iic-snd[aria-pressed="true"] .iic-snd-i span {
  animation: iic-eq 900ms ease-in-out infinite alternate;
}

.iic-snd[aria-pressed="true"] .iic-snd-i span:nth-child(2) {
  animation-delay: 180ms;
}

.iic-snd[aria-pressed="true"] .iic-snd-i span:nth-child(3) {
  animation-delay: 360ms;
}

@keyframes iic-eq {
  from {
    transform: scaleY(0.45);
  }
  to {
    transform: scaleY(1);
  }
}

/* Off: a hairline through the bars, so "no sound" is a SHAPE and not only an absence of
   motion. A state told by animation alone is invisible in a screenshot, on a slow phone,
   and under prefers-reduced-motion. */
.iic-snd[aria-pressed="false"] .iic-snd-i::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-38deg);
}

.iic-js .iic-snd-i {
  position: relative;
}

/* The audio element itself never renders. It is in the header markup only so that one
   element exists per page for site.js to own. */
.iic-snd-a {
  display: none;
}

/* Below the hamburger breakpoint the header CTA and the chip row are gone, so the sound
   button sits beside the burger — still visible, which is the whole point of it. */
@media (max-width: 1099px) {
  .iic-js .iic-snd {
    margin-left: auto;
  }
}

/* ─── motion ───────────────────────────────────────────────────────────────────────────
   OPT-IN (`no-preference`), not opt-out. The reduce block higher up in this file covers two
   properties and was already leaving four transitions unguarded; adding to it would make a
   new feature depend on a list somebody has to remember to extend. Written this way the
   default is stillness and motion is the exception, so a visitor who has asked for less of
   it gets a hero that cross-fades instantly, a word that swaps instantly and an equaliser
   that holds — and still gets every photograph, every word and the music if they want it.
   Nothing is withheld; only the movement is. */
@media (prefers-reduced-motion: reduce) {
  .iic-hero-slide,
  .iic-hero-word {
    transition: none;
  }

  .iic-snd[aria-pressed="true"] .iic-snd-i span {
    animation: none;
  }
}

/* ─── the gallery category filter ──────────────────────────────────────────────────────
   Five categories plus "all", as a native radiogroup. No script: the inputs are visually
   hidden (.iic-sr) and their <label>s are the chips, so a click, a tap, Tab and the arrow
   keys all work exactly as a radiogroup should, and the whole thing still filters with
   JavaScript disabled — which the harness runs and checks.

   ⚠ THE SELECTOR IS THE DESIGN. `#iic-gf-<cat>:checked ~ .iic-gallery [data-iic-cat]:not(...)`
   reaches forward from a checked input to the grid that follows it, so the inputs MUST be
   siblings of .iic-gallery and MUST come before it in the source. The bake emits them that
   way (see gallery() in ivan-inox-web-export.tsx); moving either into a wrapper silently
   turns the filter off — every chip would still highlight, and nothing would ever hide. */
.iic-gal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.iic-gal-chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius);
  background: var(--iic-base);
  font: 600 11.5px/1 var(--iic-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iic-ink-meta);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.iic-gal-chip:hover {
  color: var(--iic-ink-0);
  border-color: var(--iic-ink-0);
}

/* The selected chip is filled, not merely tinted. At 11.5px a colour-only change of state is
   the kind of thing that reads clearly on a designer's monitor and disappears on a phone in
   sunlight, which is where this page is actually opened.

   ⚠ Six explicit selectors rather than one "input:checked + label", because the inputs are NOT
   next to their labels. They are bare siblings of the grid — that is what lets the rule below
   reach the photographs at all (see gallery() in ivan-inox-web-export.tsx) — and the chip each
   one belongs to is reached across the row by its `for` attribute instead. */
#iic-gf-all:checked ~ .iic-gal-filter [for="iic-gf-all"],
#iic-gf-ograde:checked ~ .iic-gal-filter [for="iic-gf-ograde"],
#iic-gf-rukohvati:checked ~ .iic-gal-filter [for="iic-gf-rukohvati"],
#iic-gf-javni-prostor:checked ~ .iic-gal-filter [for="iic-gf-javni-prostor"],
#iic-gf-nautika:checked ~ .iic-gal-filter [for="iic-gf-nautika"],
#iic-gf-pergole:checked ~ .iic-gal-filter [for="iic-gf-pergole"] {
  background: var(--iic-accent);
  border-color: var(--iic-accent);
  color: #fff;
}

/* Focus lands on the INPUT, which is visually hidden, so the ring has to be drawn on the chip
   the visitor can actually see. Without this a keyboard user tabs through six invisible
   controls with no indication of where they are. */
#iic-gf-all:focus-visible ~ .iic-gal-filter [for="iic-gf-all"],
#iic-gf-ograde:focus-visible ~ .iic-gal-filter [for="iic-gf-ograde"],
#iic-gf-rukohvati:focus-visible ~ .iic-gal-filter [for="iic-gf-rukohvati"],
#iic-gf-javni-prostor:focus-visible ~ .iic-gal-filter [for="iic-gf-javni-prostor"],
#iic-gf-nautika:focus-visible ~ .iic-gal-filter [for="iic-gf-nautika"],
#iic-gf-pergole:focus-visible ~ .iic-gal-filter [for="iic-gf-pergole"] {
  outline: 2px solid var(--iic-accent);
  outline-offset: 2px;
}

#iic-gf-ograde:checked ~ .iic-gallery [data-iic-cat]:not([data-iic-cat="ograde"]),
#iic-gf-rukohvati:checked ~ .iic-gallery [data-iic-cat]:not([data-iic-cat="rukohvati"]),
#iic-gf-javni-prostor:checked ~ .iic-gallery [data-iic-cat]:not([data-iic-cat="javni-prostor"]),
#iic-gf-nautika:checked ~ .iic-gallery [data-iic-cat]:not([data-iic-cat="nautika"]),
#iic-gf-pergole:checked ~ .iic-gallery [data-iic-cat]:not([data-iic-cat="pergole"]) {
  display: none;
}

/* ─── the homepage breadth band ────────────────────────────────────────────────────────
   Five cards, each a whole-card link into the gallery filtered to that trade. Card, not
   tile: it carries a photograph, a heading, a line and a call to action, and it has to read
   as one target rather than four things that happen to be adjacent — which is why the <a>
   IS the card rather than sitting inside it.

   auto-fit rather than a fixed five: at 1240px five 228px cards fit, at 900px it becomes
   three, on a phone one. A hardcoded five-column track would overflow at every width the
   design did not anticipate, which is the failure the footer already had once. */
.iic-djel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 22px;
}

.iic-djel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* The belt to the calc()'s braces. The card clips its own contents, so an over-long bleed
     can only ever crop the photograph — it can never draw outside the border again. Safe
     here: nothing inside a breadth-band card is sticky. */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}

.iic-djel:hover {
  border-color: var(--iic-accent);
  transform: translateY(-2px);
}

/* The photo is the top of the card and bleeds to its edges, so the card's own radius has to
   be clipped onto it — `.iic-figure` carries the panel radius, and the negative margins undo
   the card's padding on three sides. Without this the image sits inside a 1px inset frame
   with four square corners against six rounded ones.

   ⚠ DERIVED, NEVER RETYPED. This was `-26px` written out, which was right at the desktop
   padding and wrong at the phone one: `.iic-card` drops to 20px under 640px, so a −26px bleed
   overshot by 6px and the photograph crossed the card's own border on every phone. The
   calc() cannot drift, because there is now only one number. */
.iic-djel .iic-figure {
  margin: calc(var(--iic-card-pad) * -1) calc(var(--iic-card-pad) * -1) 0;
  border-radius: var(--iic-radius-lg) var(--iic-radius-lg) 0 0;
}

.iic-djel .iic-h3 {
  margin: 0;
}

.iic-djel .iic-body {
  margin: 0;
  flex: 1;
}

/* Not a button: a card that is already a link does not need a second control inside it, and
   a nested interactive element inside an <a> is invalid. It is a cue, styled like the link
   it belongs to. */
.iic-djel-cta {
  font: 600 11.5px/1 var(--iic-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iic-accent);
}

@media (prefers-reduced-motion: reduce) {
  .iic-djel {
    transition: none;
  }

  .iic-djel:hover {
    transform: none;
  }
}

/* ═══════════════════════ the blue tint surface (2026-09-07) ═══════════════════════
   Ante: "arange places for sections to have some kind of design patern and add a little blue
   color as background if possible to use it right".

   ⚠ "A LITTLE" IS THE WHOLE SPEC, AND THERE IS HISTORY BEHIND IT. On 2026-08-13 he rejected a
   full-blue section outright — "i dont like blue section as background … blue only for
   accents" — and `.iic-band--accent` has been defined-but-unused ever since. This is NOT that
   coming back. It is a 5% wash of the accent on white: the ink, the headings and every
   component on it are unchanged and still measure against a near-white ground (#0b0b0c on
   #f3f5fe is 19.4:1), so nothing needs a per-surface override the way the black and metal
   bands do. It reads as a change of paper, not a change of colour.

   ⚠ IT IS A RHYTHM DEVICE, NOT DECORATION. The homepage alternates HEAVY (a photograph or a
   dark ground) and LIGHT, and before today it ran hero-photo → scrim-photo → three flat
   whites → black band → scrim-photo. Two pictures collided at the top and the middle went
   flat. The order changed (see the note in pages/index.html) and this surface breaks the
   remaining flat runs. Two sections carry it — jamstvo and nautika — and they are deliberately
   never adjacent, because two tinted sections in a row merge into one long tinted block and
   the device stops meaning anything.

   ⚠ APPENDED, not inserted. The surface chapter higher up is closed by contract (rule 5 in
   this file's header): a new surface goes after the last one, and a component declared below
   that point must not use a `.iic-band …` or `.iic-scrim …` descendant selector. This uses
   neither — it is a `.iic-sec` modifier and it sets exactly one property. */
:root {
  /* Literal first as the floor for a browser without color-mix; the mix keeps the wash tied
     to whatever the accent is, so a brand change carries it. Same two-declaration pattern as
     --iic-mark-tint. At #1655F3 this resolves to about #f3f5fe. */
  --iic-surface-blue: #f3f5fe;
  --iic-surface-blue: color-mix(in srgb, var(--iic-accent) 5%, #fff);
}

.iic-sec--tint {
  background: var(--iic-surface-blue);
}

/* A tinted section that lands directly against the metal or dark band would put a coloured
   edge against a near-black one with no breathing space; the band's own top margin is white
   by default. Neutralise it so the two grounds meet cleanly when the running order puts them
   together — which today it does not, but the order is the kind of thing that changes. */
.iic-sec--tint + .iic-band {
  margin-top: 0;
}

/* ═══════════════════════ the on-arrival sound question ═══════════════════════
   A small card in the bottom-left corner, not a modal. It asks once, per browser, ever.

   ⚠ DELIBERATELY NOT A GATE. A full-screen overlay in front of a client's homepage costs more
   than a background track is worth, and it is the kind of thing a visitor dismisses without
   reading — which would defeat the point, because the whole reason this exists is that a real
   click is the only way a browser will let unmuted audio start. So: a card that can be
   ignored, that never returns, and that answers "no" if you press Escape or simply scroll past
   and leave. `aria-modal="false"` says the same thing to a screen reader — the rest of the
   page is still there and still usable.

   ⚠ TOP-CENTRE, UNDER THE HEADER, and it took a screenshot to get there. The first version sat
   bottom-left and landed squarely on top of "Sastavi ogradu i zatraži ponudu" — the single most
   important button on the page — because that is where the hero's CTA row ends at 1440×900.
   Every other edge is spoken for too: `.iic-fabs` owns bottom-right permanently, and the hero's
   own pager and pause sit top-right. The strip directly under the sticky header is the one
   place nothing else claims at any width, and it reads as a notification rather than a
   dialogue box, which is what this is. It follows the header on scroll because it is fixed;
   that is fine — it is gone within a few seconds either way. */
.iic-ask {
  position: fixed;
  z-index: 90;
  top: calc(var(--iic-hdr-h) + 14px);
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  max-width: min(560px, calc(100vw - var(--iic-pad) * 2));
  padding: 12px 14px;
  background: var(--iic-base);
  border: 1px solid var(--iic-border-c);
  border-radius: var(--iic-radius-lg);
  box-shadow: var(--iic-lift-4);
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.iic-ask[data-in] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.iic-ask[data-out] {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
}

.iic-ask-t {
  margin: 0;
  flex: 1 1 240px;
  min-width: 0;
  font: 600 14px/1.35 var(--iic-font-head);
  letter-spacing: -0.01em;
  color: var(--iic-ink-0);
}

.iic-ask-b {
  display: flex;
  flex: none;
  gap: 8px;
}

/* The two buttons are the site's own .iic-btn / .iic-btn2 at a smaller size — a dialog is
   not a place to invent a third button style. */
.iic-ask-b .iic-btn,
.iic-ask-b .iic-btn2 {
  padding: 9px 13px;
  font-size: 12.5px;
  /* ⚠ nowrap, or "Pusti glazbu" breaks over two lines and the pill doubles in height — which
     on a phone is the difference between clearing the headline and sitting on top of it.
     .iic-btn is text-align:left by design, so a wrapped label also looks like a mistake. */
  white-space: nowrap;
}

/* ⚠ ON A PHONE THIS SITS OVER THE HEADLINE, so it has to be SHORT. The hero eyebrow starts
   about 30px under the header and the H1 about 60px after that, which leaves roughly 90px of
   room. The copy was shortened to one line for the same reason (see soundAskTitle) — with the
   original sentence the pill wrapped to three rows, stacked its buttons and covered the word
   "Ograde." outright. Text on its own row, buttons on the next, nothing taller. */
@media (max-width: 640px) {
  .iic-ask {
    left: var(--iic-pad);
    right: var(--iic-pad);
    max-width: none;
    padding: 11px 12px;
    gap: 8px;
    transform: translateY(-10px);
  }

  .iic-ask-t {
    flex: 1 1 100%;
    font-size: 13.5px;
  }

  .iic-ask-b .iic-btn,
  .iic-ask-b .iic-btn2 {
    padding: 8px 12px;
    font-size: 12px;
  }

  .iic-ask[data-in] {
    transform: translateY(0);
  }

  .iic-ask[data-out] {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iic-ask,
  .iic-ask[data-in],
  .iic-ask[data-out] {
    transition: none;
  }
}

/* ═══════════════════════ the install card (2026-09-28) ═══════════════════════
   The studio's web-app standard. It IS an .iic-ask — same card, same strip under the header,
   same entrance — because that strip is the one free place on this site (see the note above),
   and site.js shows it only once the music question is gone, so the two never stack.

   ⚠ [hidden] NEEDS AN EXPLICIT OVERRIDE, THREE TIMES. `.iic-ask` sets `display: flex`, and
   `.iic-btn` sets `display: inline-flex`; at equal specificity an author rule beats the UA's
   [hidden]{display:none}. Without these the card would show on every page load, and the
   Install button — which cannot work on an iPhone — would show on one. The same trap this part
   has hit with the order wizard's Next button and the viewer's arrows. */
.iic-app[hidden],
.iic-app [hidden] {
  display: none !important;
}

.iic-app-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: block;
}

.iic-app-body {
  flex: 1 1 220px;
  min-width: 0;
}

.iic-app .iic-ask-t {
  flex: none;
}

.iic-app-x,
.iic-app-steps {
  margin: 3px 0 0;
  font: 400 13px/1.4 var(--iic-font-head);
  color: var(--iic-ink-2);
  overflow-wrap: anywhere;
}

.iic-app-steps {
  font-weight: 700;
  color: var(--iic-ink-0);
}

@media (max-width: 640px) {
  /* Icon and words on one row, the two buttons under them — the music card's phone shape. */
  .iic-app-body {
    flex: 1 1 0;
  }

  .iic-app .iic-ask-b {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}

/* The contact page's "Save contact" (2026-09-28): an outline button carrying the card's
   person-plus glyph, so it needs the gap .iic-btn2 does not have. */
.iic-btn2--card {
  gap: 10px;
}

.iic-btn2--card svg {
  flex: none;
  display: block;
}

/* ⚠ THE SOURCE FAILED, AND THAT MUST NOT LOOK LIKE "OFF". If the mp3 is missing, served as
   the wrong type, or refused by the codec, play() rejects and the button would otherwise flip
   silently back to its resting state — a control that does nothing, with no way for anybody to
   tell why. site.js sets this attribute instead. */
.iic-snd[data-iic-snd-dead] {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--iic-border-c);
}

.iic-snd[data-iic-snd-dead]:hover {
  border-color: var(--iic-border-c);
}

/* ═══════════════════ the measuring diagrams on /ograde (2026-09-07) ═══════════════════
   Three line drawings over a tinted panel, then the numbers strip. Ante asked for the
   ordering flow's measuring hints as a section on the railings page, "with images and
   numbers" — the drawings are the images, the strip is the numbers, and both come from the
   same constants the wizard validates against.

   ⚠ The diagrams are inline SVG and inherit `currentColor`, so they need no colour of their
   own — the card's ink is the drawing's ink. The ONE thing that takes the accent is the
   measurement being taken (`.iic-mjera-dim`), which is what makes each drawing readable at a
   glance: the fence is context, the blue line is the answer. */
.iic-mjere-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 22px;
}

.iic-mjera {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--iic-base);
  border: 1px solid var(--iic-line);
  border-radius: var(--iic-radius-lg);
}

/* The drawing sits on the page's own alt ground so the white card reads as the frame and the
   drawing as the thing inside it. aspect-ratio matches the viewBox, so the box never jumps
   height while the SVG paints. */
.iic-mjera-fig {
  aspect-ratio: 200 / 116;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  background: var(--iic-base-alt);
  border-radius: var(--iic-radius);
}

.iic-mjera-svg {
  width: 100%;
  height: auto;
  color: var(--iic-ink-0);
}

.iic-mjera-dim {
  color: var(--iic-accent);
  stroke: currentColor;
}

/* The 1 / 2 badges in the second drawing. `stroke: none` because a filled numeral inherits
   the group's stroke otherwise and renders outlined at this size. */
.iic-mjera-n {
  font: 700 12px/1 var(--iic-font-mono);
  fill: var(--iic-accent);
  stroke: none;
}

.iic-mjera .iic-h3 {
  margin: 0;
}

.iic-mjera .iic-body {
  margin: 0;
}

@media (max-width: 640px) {
  .iic-mjera {
    padding: 18px;
  }
}

/* ═══════════════════════ the note panel (2026-09-08) ═══════════════════════
   A small titled panel that sits inside a longer argument: an eyebrow, a line of body copy,
   and an accent rule marking it as an aside rather than the main thread. Two of them sit in
   a .iic-grid-2 under the "zavjetrina" scrim on /posolica.

   ⚠ WHY THIS EXISTS INSTEAD OF .iic-slot. Those two panels were written as `.iic-slot` with
   an inline `display:block` and an inline background — borrowing the WITHHELD-PHOTOGRAPH
   placeholder for a panel that has no photograph pending. Two things went wrong. First,
   `.iic-slot::before` is a 4x38px accent bar absolutely positioned at `left:20px; top:20px`,
   which is exactly the content-box origin of a 20px-padded box — so the bar and the first
   line of text are drawn in the same place. The placeholder gets away with it because it is
   `justify-content: flex-end` and its text sits at the BOTTOM; the inline `display:block`
   threw that away and the text came back up onto the bar. Ante, 2026-09-08: "there is line
   overlaping with text in cards should that line be before and gap between it and text."
   Second, editing `.iic-slot` to fix it would have silently changed the real placeholder the
   day a photograph lands and `shot: true` flips.

   So the rule is not drawn on top of the text — it IS the panel's left border, and the text
   clears it by the padding. The two cannot overlap, because it is one box, not two layers.
   Same geometry as `.iic-callout` above (2px accent rule, 20px gap), which is this file's
   existing idiom for "an aside with a rule"; this is its panelled sibling, for when the note
   sits on a photograph and needs a ground of its own to stay legible. */
.iic-note {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--iic-base-alt);
  border: 1px solid var(--iic-line);
  border-left: 2px solid var(--iic-accent);
  border-radius: var(--iic-radius-lg);
}

/* (0,1,1), so it out-specifies .iic-eyebrow and .iic-body at (0,1,0) rather than relying on
   source order — house rule 3 at the top of this file. The gap does the spacing. */
.iic-note > p {
  margin: 0;
}

/* On a photograph or a dark band: the same translucent ground .iic-slot uses there, and the
   rule steps up to the on-metal accent, which is the AA-rated one for small elements against
   dark (see the contrast table at the top of this file). */
.iic-band .iic-note,
.iic-scrim .iic-note {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--iic-band-line);
  border-left-color: var(--iic-accent-on-metal);
}

/* ═══════════════════════ the actionable card (2026-09-08) ═══════════════════════
   A .iic-card that IS a link. Three of them sit on /kontakt: the workshop (to the Google
   Business listing), WhatsApp (to a chat with Ivan) and the phone (to tel:). Ante, 2026-09-08:
   "all cards listed like that should all bi linked to actions".

   ⚠ THE WHOLE CARD IS THE <a>, NOT A LINK INSIDE IT. Those cards used to carry an <a> in
   their body — a map link, a mailto. Once the card itself became the target that construction
   became invalid markup, and the cue line at the foot of each card is now plain text. Same
   decision, same reasoning and the same hover as .iic-djel on the home page; the two are
   deliberately identical so a card that can be clicked always looks like the other cards that
   can be clicked. */
.iic-act {
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}

.iic-act:hover,
.iic-act:focus-visible {
  border-color: var(--iic-accent);
  transform: translateY(-2px);
}

/* The body takes the slack so the cue sits on the card's floor and the three cues line up
   across the row, whatever length the copy above them runs to. Margins are left alone: the
   8px the markup puts above the body is the card's own eyebrow rhythm, not a stray. */
.iic-act .iic-body {
  flex: 1;
}

/* Not a button — a card that is already a link does not need a control inside it. Same
   declarations as .iic-djel-cta, written out rather than shared: the two chapters are far
   apart and a joint selector would tie the contact page's styling to the home page's band. */
.iic-act-cue {
  margin: 0;
  font: 600 11.5px/1 var(--iic-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iic-accent);
}

@media (prefers-reduced-motion: reduce) {
  .iic-act {
    transition: none;
  }

  .iic-act:hover,
  .iic-act:focus-visible {
    transform: none;
  }
}

/* ═══════════════════════ motion (2026-09-08) ═══════════════════════
   Four briefs, each correcting the last. The final one is the design:

     1. "animations visible and smooth ... not overwhelming ... use it to make some content
        parts more important and guide user to getting his products from ivan"
     2. "more animation on every element but not bold just simple smooth soothing with violin
        that feels like you are dreaming your new fence into existence"
     3. "make sure all element on the web page content wise are animated ... some element fade
        some dont and make it not fading sliding or appearing something simple but smooth"
     4. "i want whole content to get bluer and focused and make it faster than now it makes
        client wait to see what atracted atention and i dont want that"

   ⚠ BRIEF 4 KILLED THE STAGGER, AND THAT IS THE POINT OF IT. Every version before this
   resolved a block CHILD BY CHILD — the eyebrow, then the heading, then the copy, then the
   card. It looked considered and it was wrong, because a stagger is a queue: something on the
   page catches the eye, the eye goes to it, and the thing it went to is the one still waiting
   its turn. Ante: "it makes client wait to see what atracted atention and i dont want that."
   A reader is never made to wait for the thing that pulled them in.

   So the unit is the BLOCK, not the element. One filter on the container, one transition,
   everything inside it resolving together — which is also what he asked for literally: the
   whole content gets blurred and focused, as one thing.

   ⚠ IT IS A FOCUS PULL, NOT A FADE, A SLIDE OR A POP-IN — brief 3 ruled out all three by
   name. The block is on the page the whole time at full opacity and final position; what
   changes is whether it is RESOLVED. Nothing is ever invisible on this site, so the old
   failure mode where a dead script strands content at opacity 0 cannot happen. The worst case
   is a soft page: legible, screen-readable, printable, indexable.

   ⚠ 420ms, WHICH IS NOT THE VIOLIN'S TEMPO ANY MORE, AND SHOULD NOT BE. The adagio timing
   (--iic-beat, one beat at BWV 1001's ~40/min pulse) was right when motion was a mood laid
   over the page. It is wrong for a reveal that stands between a reader and the thing they
   just looked at. The beat token stays and still governs the drawn rule below, where nothing
   is being waited for; the focus pull is a third of it.

   ⚠ AND IT FIRES EARLY. site.js expands the observer's root 14% past the bottom of the
   viewport, so a block starts resolving while it is still below the fold and is sharp by the
   time it has been scrolled to. Between that and 420ms, the effect is something a reader
   catches at the edge of vision rather than something they watch.

   ⚠ ONE LEVEL. site.js drops any group with a marked ancestor, so the outermost wins and
   the section's whole content is one unit. Nested groups would blur a block inside an already
   blurred block — visible as a patch resolving at a different rate, which is the "some
   element fade some dont" complaint in another costume.

   ⚠ NO FULL-BLEED PHOTOGRAPH IS EVER INSIDE A MARKED GROUP, and that is what makes a filter
   affordable at this size. The hero's slides are absolutely positioned SIBLINGS of
   .iic-hero-col, and every .iic-scrim photo is a sibling of .iic-scrim-in — neither descends
   from anything carrying the marker, so the largest images on the site are never rasterised
   through a blur. One filtered layer per section for 420ms is cheaper than the per-child
   version it replaces, which put a separate layer on every card.

   ⚠ NOTHING position:fixed MAY EVER SIT INSIDE A MARKED GROUP. A filtered ancestor becomes
   the containing block for fixed descendants and would trap them. This holds by construction
   today — the gallery <dialog>, the sound prompt, the FAB stack and the skip link are all
   children of <body>, outside <main>. Check it again before marking anything new. */

:root {
  /* Declared here rather than with the palette at the top of the file: they belong to this
     chapter and to nothing else.

     The focus pull uses a plain decelerating curve. A symmetric ease was right at adagio
     length, where the point was that nothing had impulse; at 420ms a slow start is just
     latency, and the block should be most of the way resolved in the first third. */
  --iic-ease-focus: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Kept from the adagio pass, and still correct for the one thing on the site that is
     deliberately slow — the drawn rule below, which nobody is waiting to read. One beat of
     the Adagio from BWV 1001, whose pulse sits near 40 to the minute. */
  --iic-beat: 1300ms;
  --iic-ease-draw: cubic-bezier(0.33, 0, 0.15, 1);
}

/* The container, not its children. 9px is chosen against the BLOCK: a whole section softened
   by 9px is unmistakable at a glance, where the same radius on a single line of type reads as
   a rendering fault. */
.iic-motion [data-iic-rise] {
  filter: blur(9px);
}

.iic-motion [data-iic-rise][data-in] {
  filter: none;
  transition: filter 420ms var(--iic-ease-focus);
}

/* ── the arrival ───────────────────────────────────────────────────────────────────────
   The hero column is marked like everything else, so it resolves the moment site.js observes
   it — on load, because it is already in view. The page does not appear, it comes to.
   Quicker still than the rest and a shade softer to start: this is the block a visitor is
   most impatient with, and the headline is this page's largest contentful paint. Because
   nothing here is ever transparent, that paint is not delayed at all — the type is on screen
   from the first frame, briefly unresolved. */
.iic-motion .iic-hero-col[data-iic-rise] {
  filter: blur(7px);
}

.iic-motion .iic-hero-col[data-iic-rise][data-in] {
  filter: none;
  transition: filter 340ms var(--iic-ease-focus);
}

/* ── the ordering flow draws its own rules ──────────────────────────────────────────────
   The one place motion says something rather than presents something: on the 48-hour band
   each step's hairline extends from the left, 01 · 02 · 03, which is the order in which you
   buy a fence. It is slow on purpose and it is the exception to brief 4 — nobody is waiting
   to read a rule, and it happens under copy that is already sharp.

   ⚠ IT DRAWS FROM NOTHING, IT IS NOT OVERLAID. `.iic-band--dark .iic-step` already sets
   `border-top-color: var(--iic-accent)`, so an accent line animated on top of an accent line
   is invisible — in the one section where the effect was actually wanted. While a group is
   armed the real border goes transparent and `::after` draws the rule instead.

   ⚠ THE HAND-BACK MUST BE PIXEL-IDENTICAL. site.js removes `data-iic-rise` once a group has
   landed; at that instant `::after` stops existing and the border returns. Each surface's
   `::after` is given that surface's own border colour below precisely so nobody can see the
   swap. Change one of these without its partner above and the line will blink.

   ⚠ ALL THREE DRAW TOGETHER. They used to be staggered with the cards; with the block
   resolving as one unit, three lines arriving one after another would be the only thing left
   on the site that queues. */
/* ⚠ EVERY SELECTOR BELOW IS WRITTEN TWICE — once for a step INSIDE a marked group, once
   for a step that IS one. On a phone the three steps stack vertically and `.iic-steps` grows
   past 80% of the viewport, so site.js hands the marker down to the steps themselves and the
   descendant form stops matching. Without the second half the effect would simply vanish on
   the width where it is doing the most work — silently, with nothing broken to see. */
.iic-motion [data-iic-rise] .iic-step,
.iic-motion .iic-step[data-iic-rise] {
  position: relative;
  border-top-color: transparent;
}

.iic-motion [data-iic-rise] .iic-step::after,
.iic-motion .iic-step[data-iic-rise]::after {
  content: "";
  position: absolute;
  left: 0;
  /* -1px against the PADDING box puts it exactly on the border it is standing in for. */
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--iic-line);
  transform: scaleX(0);
  transform-origin: left center;
}

/* One per surface, each matching what `.iic-step`'s border-top-color is on that ground.
   (0,4,1) beats the base rule's (0,3,1) outright rather than relying on source order. */
.iic-motion .iic-band [data-iic-rise] .iic-step::after,
.iic-motion .iic-band .iic-step[data-iic-rise]::after {
  background: var(--iic-band-line);
}

.iic-motion .iic-band--dark [data-iic-rise] .iic-step::after,
.iic-motion .iic-band--dark .iic-step[data-iic-rise]::after {
  background: var(--iic-accent);
}

.iic-motion .iic-band--metal [data-iic-rise] .iic-step::after,
.iic-motion .iic-band--metal .iic-step[data-iic-rise]::after {
  background: var(--iic-accent-on-dark);
}

.iic-motion [data-iic-rise][data-in] .iic-step::after,
.iic-motion .iic-step[data-iic-rise][data-in]::after {
  transform: scaleX(1);
  /* Starts as the block finishes resolving, then takes its time. */
  transition: transform var(--iic-beat) var(--iic-ease-draw) 380ms;
}

/* ── the buttons answer ─────────────────────────────────────────────────────────────────
   The lift is 1px, not the 2px the cards use: a button is small and already the loudest thing
   on its row, so it needs a smaller gesture to read as the same language. The dot is
   `.iic-btn::before`, the mark this site puts on every filled control — growing it is the
   cheapest way to make the primary action feel alive without inventing anything. */
.iic-btn,
.iic-btn2 {
  transition:
    filter 200ms var(--iic-ease-focus),
    transform 200ms var(--iic-ease-focus),
    background 200ms var(--iic-ease-focus),
    color 200ms var(--iic-ease-focus),
    border-color 200ms var(--iic-ease-focus);
}

.iic-btn::before {
  transition: transform 200ms var(--iic-ease-focus);
}

.iic-btn:hover,
.iic-btn2:hover {
  transform: translateY(-1px);
}

.iic-btn:hover::before {
  transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
  /* The focus pull is already gone — .iic-motion is never stamped in this case, so none of
     the rules above match and nothing is ever softened. What is left is the hover language,
     which is plain CSS and would otherwise still run. */
  .iic-btn,
  .iic-btn2,
  .iic-btn::before {
    transition: none;
  }

  .iic-btn:hover,
  .iic-btn2:hover {
    transform: none;
  }

  .iic-btn:hover::before {
    transform: none;
  }
}

/* Paper has no scroll position, so no group would ever resolve. Soft type on paper is a
   defect, not a mood. */
@media print {
  .iic-motion [data-iic-rise] {
    filter: none !important;
  }

  .iic-motion [data-iic-rise] .iic-step::after,
  .iic-motion .iic-step[data-iic-rise]::after {
    display: none;
  }

  .iic-motion [data-iic-rise] .iic-step,
  .iic-motion .iic-step[data-iic-rise] {
    border-top-color: var(--iic-line);
  }
}
/* ═══════════════════════ depth (2026-09-09) ═══════════════════════
   Ante: "add shadows and depth to all elements to get 3d feel of the page and moving
   elements", immediately after clarifying "i ment remove shadows from images on web page
   client says he can see them clearly".

   ⚠ READ THOSE TWO AS ONE RULE: DEPTH IS FOR FURNITURE, NEVER FOR A PHOTOGRAPH. A card, a
   panel, a button, a dialog — those are objects sitting on a surface and they may cast. An
   image is a window cut into that surface; a window with a drop shadow reads as a sticker
   stuck to the page. The last block in this chapter enforces it rather than trusting nobody
   will add one, because "add shadows to everything" is exactly the instruction that gets
   applied to an <img> by the next person in a hurry.

   ⚠ THE SCALE IS IN :root, NOT HERE. --iic-lift-1..4 and why each level is a PAIR of shadows
   is documented with the palette at the top of this file.

   ⚠ NOTHING HERE FIRES ON A DARK OR PHOTOGRAPHIC GROUND. A black shadow on the anthracite
   band or over a photograph is either invisible or a grey smear; those surfaces get their
   separation from the band line they already carry. Every selector below is scoped away from
   them with :not(), which is cheaper to read than four override blocks further down. */

.iic-card:not(.iic-band .iic-card):not(.iic-scrim .iic-card),
.iic-note:not(.iic-band .iic-note):not(.iic-scrim .iic-note),
.iic-mjera,
.iic-ord-panel,
.iic-konf-panel {
  box-shadow: var(--iic-lift-1);
}

/* "and moving elements" — the depth has to answer the pointer, or it is a texture rather
   than a dimension. Cards that are already links get the full move: the existing 2px rise
   plus a step up the elevation scale, on one transition so the two read as one object being
   picked up rather than two effects firing. */
.iic-djel,
.iic-act {
  transition:
    border-color 200ms var(--iic-ease-focus),
    transform 200ms var(--iic-ease-focus),
    box-shadow 200ms var(--iic-ease-focus);
}

.iic-djel:hover,
.iic-djel:focus-visible,
.iic-act:hover,
.iic-act:focus-visible {
  box-shadow: var(--iic-lift-2);
}

/* The header is the one permanently floating surface on every page, and until now it was
   separated from the content scrolling under it by a single hairline. */
.iic-hdr {
  box-shadow: var(--iic-lift-3);
}

/* The order wizard's own furniture, where a sense of layers is doing real work: the pane you
   are on should sit above the ribbon that tracks it. */
.iic-ord-model,
.iic-ord-radio,
.iic-ord-card {
  box-shadow: var(--iic-lift-1);
}

.iic-ord-model:hover,
.iic-ord-radio:hover {
  box-shadow: var(--iic-lift-2);
}

/* The gallery viewer sits above the whole page and should look it. */
.iic-lb-in {
  box-shadow: var(--iic-lift-4);
}

.iic-menu-panel {
  box-shadow: var(--iic-lift-4);
}

/* ⚠ THE ENFORCEMENT. Not defensive tidiness — the instruction that produced this chapter and
   the instruction that produced this block were the same sentence, and the second half is the
   one that gets forgotten. If a photograph on this site is ever casting a shadow, something
   above this line is wrong; fix that rather than weakening this. */
img,
picture,
.iic-figure,
.iic-figure img,
.iic-card img,
.iic-hero-slide,
.iic-hero-slide img,
.iic-scrim img,
.iic-gallery a,
.iic-gallery img,
.iic-detail img,
.iic-lb-img {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .iic-djel,
  .iic-act {
    transition: border-color 200ms var(--iic-ease-focus), box-shadow 200ms var(--iic-ease-focus);
  }
}

/* Paper is flat. */
@media print {
  * {
    box-shadow: none !important;
  }
}

/* ═══════════════════════ the plate (2026-09-09) ═══════════════════════
   The ground that copy stands on when it sits over a photograph. It exists because every
   scrim on this site was removed on the same day — see the block above .iic-hero--photo — and
   the type had to keep its contrast without the picture paying for it.

   ⚠ SOLID, SQUARE-EDGED, NO BLUR, NO TRANSPARENCY. All four of those are the point. A
   translucent plate is a small scrim; a blurred one is a scrim that also costs a repaint; a
   rounded one stops being this brand, whose radius has been 0 since the day the logo went
   back. What is left is a block of ink laid on a photograph, which is a poster, and posters
   are what this trade's own signage has always looked like.

   ⚠ IT IS SIZED TO ITS CONTENT, NOT TO THE COLUMN. A full-width plate is a scrim with hard
   edges — it would cover the same third of the frame the gradient did. Held to the text it
   wraps, it covers only what it must, and the picture keeps everything else. That is also why
   .iic-hero-col drops its flex-grow here: as a flex item it would otherwise stretch. */
/* ⚠ THE HOME HERO IS NOT ON A PLATE. It had one for about an hour on 2026-09-09 and Ante
   preferred the gradient there: "bring back gradients ... for hero section on home page only
   others are good". The two solutions are alternatives, never a pair — a plate under a
   gradient is a plate, and the gradient is then only costing the photograph.

   Everything below therefore covers the full-bleed SECTIONS only. They keep the plate for the
   reason the hero no longer needs it: their copy is an eyebrow, a heading and a paragraph of
   real body text, at sizes where 4.5:1 is the requirement and a gradient light enough to be
   worth having cannot reach it. */
.iic-scrim-in > * {
  background: var(--iic-ink-0);
  padding: 28px 30px;
}

/* On a photograph the accent is white — the colour law at the top of this file — but ON THE
   PLATE the accent is itself again, because the plate is a controlled ground and not a
   picture. */
.iic-scrim-in > * .iic-eyebrow {
  color: var(--iic-accent-on-metal);
}

@media (max-width: 640px) {
  .iic-scrim-in > * {
    padding: 20px 22px;
  }
}