/* Leier Hrvatska — dijeljeni dizajn-sustav (tokeni + atomi + komponente)
   Izvor istine: izvučeno iz dokazane naslovne (leier-hr-v2). Sve mjere fluidne. */

:root {
  /* ===== Brand palette ===== */
  --color-leier-blue: #0070BE;
  --color-navy: #0A1622;
  --color-navy-mid: #0E1D2D;
  --color-white-warm: #FAFAF8;
  --color-gray-light: #F3F4F5;
  --color-text-primary: #111111;
  --color-text-secondary: #2B2B2B;
  --color-text-muted: #5A5A56;
  --color-on-dark-primary: #FAFAF8;
  --color-on-dark-secondary: rgba(250,250,248,0.80);
  --color-on-dark-muted: rgba(250,250,248,0.60);
  --color-on-dark-faint: rgba(250,250,248,0.13);
  --color-on-dark-border: rgba(250,250,248,0.20);
  --color-blue-light: #7BB8E5;
  --color-border: rgba(17,17,17,0.07);
  --color-border-strong: rgba(17,17,17,0.21);
  --color-cream: #F4EFE5;

  --font-display: 'Funnel Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* ===== FLUID TYPE — display (hero / section headlines) =====
     Every value interpolates linearly across the 360px → 1440px range,
     so there is no breakpoint at which the type "jumps". */
  --text-display-xl: clamp(3rem, 0.27rem + 12.13vw, 10.3rem);
  --text-display-lg: clamp(2.75rem, 0.92rem + 8.15vw, 8rem);
  --text-display-md: clamp(2.25rem, 0.81rem + 6.30vw, 6.5rem);
  --text-display-sm: clamp(2rem, 0.83rem + 5.19vw, 5.5rem);
  --text-display-xs: clamp(1.6rem, 0.63rem + 4.30vw, 4.5rem);

  /* ===== FLUID TYPE — component titles (cards, feature blocks) ===== */
  --fs-title-xl: clamp(2rem, 1.33rem + 2.96vw, 4rem);         /* 32 → 64 */
  --fs-title-lg: clamp(2.25rem, 1.875rem + 1.67vw, 3.375rem); /* 36 → 54 */
  --fs-title-md: clamp(1.875rem, 1.625rem + 1.11vw, 2.625rem);/* 30 → 42 */
  --fs-title-sm: clamp(1.75rem, 1.583rem + 0.74vw, 2.25rem);  /* 28 → 36 */

  /* ===== FLUID TYPE — headings ===== */
  --text-heading-xl: clamp(2.25rem, 1.875rem + 1.67vw, 3.375rem);
  --text-heading-lg: clamp(1.875rem, 1.625rem + 1.11vw, 2.625rem);
  --text-heading-md: clamp(1.5rem, 1.333rem + 0.74vw, 2rem);
  --text-heading-sm: clamp(1.3125rem, 1.21rem + 0.46vw, 1.625rem);
  --text-heading-xs: clamp(1.1875rem, 1.10rem + 0.37vw, 1.375rem);

  /* ===== FLUID TYPE — body ===== */
  --text-body-xl: clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
  --text-body-lg: clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem);
  --text-body-md: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --text-body-sm: 1rem;
  --text-body-xs: 0.9375rem;

  /* ===== Line-height / tracking ===== */
  --leading-display: 0.93;
  --leading-heading: 1.05;
  --leading-body: 1.6;
  --leading-loose: 1.75;
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-label: 0.16em;
  --tracking-kicker: 0.18em;

  /* ===== FLUID SPACING — section rhythm (360px → 1440px) ===== */
  --section-pt: clamp(4rem, 2rem + 8.89vw, 10rem);        /* 64 → 160 */
  --section-pb: clamp(3.5rem, 1.75rem + 7.78vw, 8.75rem); /* 56 → 140 */
  --section-padding-y: var(--section-pt);
  --section-padding-y-sm: clamp(3rem, 1.67rem + 5.93vw, 5rem); /* 48 → 80 */
  --section-header-gap: clamp(2.5rem, 1.17rem + 5.93vw, 5rem); /* 40 → 80 */
  --container-px: clamp(1.5rem, 1rem + 2.22vw, 3rem);         /* 24 → 48 — same gutter everywhere */

  /* ===== FLUID GAPS — scale continuously, incl. grid gutters ===== */
  --gap-xs: clamp(0.375rem, 0.33rem + 0.19vw, 0.5rem);   /* 6 → 8 */
  --gap-sm: clamp(0.625rem, 0.54rem + 0.37vw, 0.875rem); /* 10 → 14 */
  --gap-md: clamp(1rem, 0.83rem + 0.74vw, 1.5rem);       /* 16 → 24 */
  --gap-lg: clamp(1.5rem, 1.17rem + 1.48vw, 2.5rem);     /* 24 → 40 */
  --gap-xl: clamp(2rem, 1.33rem + 2.96vw, 4rem);         /* 32 → 64 */
  --gap-grid: clamp(1rem, 0.59rem + 1.85vw, 1.5rem);     /* 16 → 24 card gutters */
  --gap-grid-tight: clamp(0.75rem, 0.49rem + 1.11vw, 1.125rem); /* 12 → 18 */

  /* ===== FLUID CARD PADDING / CONTENT INSET =====
     On mobile these collapse to 24px — the same value as the page
     gutter (--container-px) and the footer, so nothing is inconsistent. */
  --card-pad: clamp(1.5rem, 1.06rem + 1.94vw, 2.25rem);  /* 24 → 36 */
  --card-pad-lg: clamp(1.5rem, 0.83rem + 2.96vw, 3rem);  /* 24 → 48 */
  --inset: clamp(1.5rem, 1.28rem + 0.93vw, 2rem);        /* 24 → 32 */
}

/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  background: var(--color-white-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
ol, ul { list-style: none; margin: 0; padding: 0; }
dl, dt, dd { margin: 0; padding: 0; }
address { font-style: normal; }
svg { display: block; }

/* Shared container */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--container-px); }

/* Reusable atoms */
.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-leier-blue);
}
.kicker--on-dark { color: var(--color-blue-light); }
.kicker--on-blue { color: var(--color-on-dark-secondary); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  min-width: 200px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: opacity 180ms ease, transform 180ms ease;
}
.btn__icon { flex-shrink: 0; font-weight: 700; }
.btn--primary { background: var(--color-leier-blue); color: var(--color-on-dark-primary); }
.btn--ghost-on-dark { background: transparent; color: var(--color-on-dark-primary); border: 1px solid rgba(250,250,248,0.53); }
.btn--on-blue { background: var(--color-white-warm); color: var(--color-leier-blue); }
.btn--lg { padding: 18px 28px; font-size: 1rem; min-width: 240px; gap: 32px; }
.btn:hover { opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* ===== HEADER ===== */
.site-header {
  background: var(--color-leier-blue);
  color: var(--color-on-dark-primary);
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow 220ms ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(0,0,0,0.18); }
.site-header__inner {
  max-width: calc(1440px + 2 * var(--container-px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px var(--container-px);
  gap: 32px;
  transition: padding 220ms ease;
}
.site-header.is-scrolled .site-header__inner { padding-top: 9px; padding-bottom: 9px; }
.site-header__logo { justify-self: start; }
.site-header__logo img { height: clamp(52px, 2.583rem + 2.96vw, 84px); width: auto; transition: height 220ms ease; }
.site-header.is-scrolled .site-header__logo img { height: 60px; }
.site-nav { display: flex; gap: clamp(20px, 0.5rem + 2.2vw, 44px); justify-self: center; font-family: var(--font-display); font-size: 1rem; font-weight: 500; transition: font-size 220ms ease, gap 220ms ease; }
.site-header.is-scrolled .site-nav { font-size: 0.875rem; gap: 32px; }
.site-nav a { padding-bottom: 8px; border-bottom: 2px solid transparent; transition: padding-bottom 220ms ease; }
.site-header.is-scrolled .site-nav a { padding-bottom: 4px; }
.site-nav a:hover { border-bottom-color: rgba(250,250,248,0.4); }
.site-nav a.is-current { border-bottom-color: var(--color-on-dark-primary); }
.site-header__actions { display: flex; gap: 24px; align-items: center; justify-self: end; }
.site-header__search {
  width: 36px; height: 36px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.625rem; line-height: 1;
  transition: font-size 220ms ease, width 220ms ease, height 220ms ease;
}
.site-header.is-scrolled .site-header__search { font-size: 1.375rem; width: 30px; height: 30px; }
.site-header__cta {
  padding: 16px 28px; background: var(--color-white-warm); color: var(--color-leier-blue);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700;
  transition: opacity 220ms ease, transform 220ms ease, max-width 220ms ease;
}
.site-header.is-scrolled .site-header__cta {
  padding: 10px 18px;
  font-size: 0.8125rem;
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .site-header__logo img, .site-header__cta, .site-nav, .site-nav a, .site-header__search { transition: none; }
}
.site-header__hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.site-header__hamburger span { display: block; width: 24px; height: 2px; background: var(--color-on-dark-primary); transition: transform 220ms ease, opacity 220ms ease; }
@media (max-width: 1023px) {
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .site-header__logo { margin-right: auto; }
  .site-nav { display: none; }
  .site-header__cta { display: none; }
  .site-header__hamburger { display: flex; margin-left: 4px; }
  .site-header__actions { gap: 8px; }
}
/* Drawer-only footer (CTA + contact) — hidden in the desktop horizontal nav */
.site-nav__foot { display: none; }
@media (max-width: 1023px) {
  /* Full-screen drawer. The blue header bar (logo + close) stays on top
     via z-index, so the menu reads as one coherent component. */
  .site-header.is-open .site-nav {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: 78px; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none; margin: 0; justify-self: stretch;
    background: var(--color-white-warm); color: var(--color-text-primary);
    padding: calc(env(safe-area-inset-top, 0px) + 28px) var(--container-px) calc(env(safe-area-inset-bottom, 0px) + 32px);
    z-index: 99; overflow-y: auto;
    counter-reset: navlink;
  }
  /* Lock the header bar to a stable 78px while the drawer is open so the
     white drawer (which starts at top:78px) always meets it cleanly. */
  .site-header.is-open .site-header__inner { padding-top: 11px; padding-bottom: 11px; }
  .site-header.is-open .site-header__logo img { height: 56px; }
  .site-header.is-open .site-nav > a {
    display: flex; align-items: baseline; gap: 16px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 2px;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
  }
  .site-header.is-open .site-nav > a::before {
    counter-increment: navlink;
    content: counter(navlink, decimal-leading-zero);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
    color: var(--color-leier-blue); min-width: 26px;
  }
  .site-header.is-open .site-nav > a::after {
    content: '→'; margin-left: auto; color: var(--color-border-strong); font-weight: 700;
    transition: transform .15s ease, color .15s ease;
  }
  .site-header.is-open .site-nav > a.is-current { color: var(--color-leier-blue); }
  .site-header.is-open .site-nav > a.is-current::after,
  .site-header.is-open .site-nav > a:hover::after { color: var(--color-leier-blue); transform: translateX(4px); }

  /* Drawer footer */
  .site-header.is-open .site-nav__foot {
    display: flex; flex-direction: column; gap: 18px;
    margin-top: auto; padding-top: 32px;
  }
  .site-nav__cta {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 24px; background: var(--color-leier-blue); color: var(--color-on-dark-primary);
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    transition: opacity .15s ease;
  }
  .site-nav__cta:hover { opacity: 0.92; }
  .site-nav__contact { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: 0.9375rem; }
  .site-nav__contact-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
  .site-nav__contact a { color: var(--color-text-secondary); font-weight: 600; }

  /* Hide the search glyph while the drawer is open — only the × shows */
  .site-header.is-open .site-header__search { display: none; }

  /* Clean white × on the blue header bar */
  .site-header.is-open .site-header__hamburger {
    position: fixed; top: 22px; right: var(--container-px); margin: 0; z-index: 101;
  }
  .site-header.is-open .site-header__hamburger span { background: var(--color-on-dark-primary); }
  .site-header.is-open .site-header__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .site-header__hamburger span:nth-child(2) { opacity: 0; }
  .site-header.is-open .site-header__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 767px) {
  .site-header__inner { padding: 12px var(--container-px); gap: 16px; }
}

/* ===== HERO ===== */
.hero-full-bleed {
  position: relative;
  min-height: clamp(480px, 86vh, 880px);
  background-color: var(--color-navy);
  background-position: center 55%;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--color-on-dark-primary);
}
.hero-full-bleed__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,30,55,0.45) 0%, rgba(0,30,55,0.05) 30%, rgba(0,30,55,0.75) 100%);
}
.hero-full-bleed__content {
  position: absolute; left: var(--container-px); right: var(--container-px); bottom: clamp(32px, 0.5rem + 5vw, 88px);
  max-width: 1440px;
  margin: 0 auto;
}
.hero-full-bleed__pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: var(--color-leier-blue);
  font-family: var(--font-display); font-size: 0.75rem;
  font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  margin-bottom: clamp(20px, 0.5rem + 3.7vw, 48px);
}
.hero-full-bleed__pill-dot { width: 6px; height: 6px; background: var(--color-on-dark-primary); border-radius: 50%; }
.hero-full-bleed__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-display-xl);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin: 0 0 clamp(24px, 0.5rem + 4.6vw, 56px);
  max-width: 1280px;
}
.hero-full-bleed__title-accent {
  color: var(--color-leier-blue);
  text-decoration: underline;
  text-decoration-color: var(--color-on-dark-primary);
  text-decoration-thickness: clamp(6px, 0.9vw, 13px);
  text-underline-offset: clamp(6px, 0.8vw, 12px);
}
.hero-full-bleed__footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.hero-full-bleed__lede { font-family: var(--font-body); font-size: var(--text-body-xl); line-height: 1.5; max-width: 560px; color: var(--color-on-dark-secondary); }
.hero-full-bleed__ctas { display: flex; gap: 12px; align-items: center; }
@media (max-width: 767px) {
  .hero-full-bleed__lede { max-width: none; }
  .hero-full-bleed__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-full-bleed__ctas .btn { justify-content: center; }
}

/* ===== Section base ===== */
.section { padding: var(--section-pt) var(--container-px) var(--section-pb); background: var(--color-white-warm); }
.section--dark { background: var(--color-navy); color: var(--color-on-dark-primary); }
.section--blue { background: var(--color-leier-blue); color: var(--color-on-dark-primary); position: relative; overflow: hidden; }
.section--gray { background: var(--color-gray-light); }
.section__inner { max-width: 1440px; margin: 0 auto; }
.section__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--section-header-gap); gap: var(--gap-xl); flex-wrap: wrap; }
.section__aside { max-width: 360px; }
.section__header--right { text-align: right; }
/* section header: aside stays beside heading on desktop (heading wraps within remaining space, aside pinned right) */
.section__header > :first-child { flex: 1 1 0; min-width: 0; }
.section__header > .section__aside { flex: 0 0 auto; }
.section__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-display-md);
  line-height: 0.9; letter-spacing: var(--tracking-tighter);
  margin: 0; max-width: 1100px; color: var(--color-text-primary);
}
.section--dark .section__title, .section--blue .section__title { color: var(--color-on-dark-primary); }
.section__title-accent { color: var(--color-leier-blue); }
.section--dark .section__title-accent { color: var(--color-blue-light); }
.section__kicker { margin-bottom: 24px; }
.section__aside { max-width: 360px; }
.section__aside p { font-size: var(--text-body-md); line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 20px; }
.section--dark .section__aside p { color: var(--color-on-dark-secondary); }
.section--blue .section__aside p { color: var(--color-on-dark-secondary); }
@media (max-width: 767px) {
  .section__header { gap: 20px; flex-direction: column; align-items: flex-start; }
  .section__aside { max-width: 100%; width: 100%; }
  .section__header--right { text-align: left; }
  .hero-full-bleed__footer { gap: 20px; }
  .docs-hub__strip { gap: 16px; }
  .docs-hub__strip-label-group { gap: 8px 16px; }
  .docs-hub__strip-label, .docs-hub__strip-item { line-height: 1.2; }
  .section-cta-blue__phone { gap: 12px; }
  .section-cta-blue__phone-group { gap: 8px 16px; line-height: 1.2; }
  .section-cta-blue__phone-lede { line-height: 1.3; }
  .references__feature-meta { gap: 20px; }
  .european-presence__country-list { gap: 4px 10px; line-height: 1.3; flex-wrap: wrap; }
  .site-footer__bottom { gap: 12px; line-height: 1.3; }
  .site-footer__legal { gap: 8px 16px; line-height: 1.3; }
  .site-footer__contact { gap: 4px; line-height: 1.3; }
  .trust-strip__body, .docs-hub__card-body, .section-cta-blue__card-body { line-height: 1.45; }
}

/* ===== PRODUCT CATEGORIES ===== */
.discovery-widget {
  background: var(--color-navy); color: var(--color-on-dark-primary);
  padding: 32px 36px; margin-bottom: 48px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.discovery-widget__lead { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 360px; }
.discovery-widget__icon { font-family: var(--font-display); font-size: 2rem; color: var(--color-blue-light); line-height: 1; }
.discovery-widget__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.discovery-widget__meta { font-size: 0.8125rem; color: rgba(250,250,248,0.53); margin-top: 4px; }
.discovery-widget__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.discovery-widget__tag {
  padding: 12px 18px; background: var(--color-on-dark-faint); color: var(--color-on-dark-primary);
  border: 1px solid var(--color-on-dark-border);
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
}
@media (max-width: 767px) {
  .discovery-widget { padding: 20px; gap: 18px; flex-direction: column; align-items: stretch; }
  .discovery-widget__lead { min-width: 0; }
  .discovery-widget__title { font-size: 1.25rem; }
  .discovery-widget__icon { font-size: 1.5rem; }
  .discovery-widget__tag { padding: 8px 12px; font-size: 0.75rem; }
  .category-label-row__meta { display: none; }
}

.category-label-row {
  display: flex; align-items: center; gap: 18px; margin-bottom: 24px;
}
.category-label-row__divider { height: 1px; background: var(--color-border); flex: 1; }
.category-label-row__kicker { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-leier-blue); font-weight: 700; }
.category-label-row__meta { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }

.category-grid--primary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-grid); margin-bottom: var(--section-header-gap); }
.category-grid--secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); }
.category-grid--primary.category-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.category-grid--cols-3 .category-card__media, .category-grid--cols-3 .category-card__media--placeholder { height: clamp(190px, 8rem + 6vw, 240px); }
.category-grid--ratio32 .category-card__media, .category-grid--ratio32 .category-card__media--placeholder { height: auto; aspect-ratio: 3 / 2; }
.category-grid--contain .category-card__media { background-size: 100% auto; background-color: #fff; }
@media (max-width: 1023px) {
  .category-grid--primary { grid-template-columns: 1fr; }
  .category-grid--secondary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .category-grid--secondary { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) { .category-grid--primary.category-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .category-grid--primary.category-grid--cols-3 { grid-template-columns: 1fr; } }
.category-grid--secondary.category-grid--sec-cols-2 { grid-template-columns: repeat(2, 1fr); }
.category-grid--secondary.category-grid--sec-cols-3 { grid-template-columns: repeat(3, 1fr); }
.category-grid--secondary.category-grid--sec-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .category-grid--secondary.category-grid--sec-cols-3, .category-grid--secondary.category-grid--sec-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .category-grid--secondary.category-grid--sec-cols-2, .category-grid--secondary.category-grid--sec-cols-3, .category-grid--secondary.category-grid--sec-cols-4 { grid-template-columns: 1fr; } }

/* ===== U-value calculator (Vodič za odabir) ===== */
.ucalc { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 1.5rem + 3vw, 64px); align-items: start; }
.ucalc__controls { display: flex; flex-direction: column; gap: clamp(22px, 1rem + 2vw, 38px); }
.ucalc__step { display: flex; flex-direction: column; gap: 14px; }
.ucalc__step-head { display: flex; align-items: baseline; gap: 12px; }
.ucalc__step-num { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--color-leier-blue); letter-spacing: var(--tracking-label); }
.ucalc__step-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-sm); color: var(--color-text-primary); letter-spacing: -0.01em; }
.ucalc__step-label em { font-style: normal; font-weight: 500; font-size: 0.8125rem; color: var(--color-text-muted); }
.ucalc__field { display: flex; gap: 10px; }
.ucalc__field[hidden] { display: none; }
.ucalc__toggle-btn:disabled, .ucalc__toggle-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.ucalc__select { -webkit-appearance: none; appearance: none; width: 100%; padding: 14px 40px 14px 16px; font-family: var(--font-body); font-size: 1rem; color: var(--color-text-primary); background: var(--color-white-warm); border: 1px solid var(--color-border); border-radius: 0; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23006fba' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; transition: border-color 160ms ease; }
.ucalc__select:focus { outline: none; border-color: var(--color-leier-blue); }
.ucalc__select--cm { width: 130px; flex: none; }
.ucalc__chip { align-self: flex-start; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-label); color: var(--color-text-muted); background: var(--color-gray-light); padding: 5px 12px; }
.ucalc__chip:empty { display: none; }
.ucalc__toggle { display: inline-flex; border: 1px solid var(--color-border); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.ucalc__toggle-btn { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; padding: 11px 20px; background: var(--color-white-warm); color: var(--color-text-secondary); border: 0; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.ucalc__toggle-btn + .ucalc__toggle-btn { border-left: 1px solid var(--color-border); }
.ucalc__toggle-btn.is-active { background: var(--color-leier-blue); color: var(--color-on-dark-primary); }
.ucalc__field--row { gap: 10px; }
/* custom dropdown */
.ucalc__select--hidden { display: none !important; }
.ucalc__dd { position: relative; width: 100%; }
.ucalc__field--row .ucalc__dd:first-child { flex: 1; }
.ucalc__field--row .ucalc__dd:last-child { width: 130px; flex: none; }
.ucalc__dd-btn { width: 100%; text-align: left; padding: 14px 42px 14px 16px; font-family: var(--font-body); font-size: 1rem; color: var(--color-text-primary); background: var(--color-white-warm); border: 1px solid var(--color-border); cursor: pointer; transition: border-color 160ms ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23006fba' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.ucalc__dd.is-open .ucalc__dd-btn, .ucalc__dd-btn:focus-visible { outline: none; border-color: var(--color-leier-blue); }
.ucalc__dd.is-open .ucalc__dd-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%23006fba' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.ucalc__dd-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--color-leier-blue); max-height: 300px; overflow-y: auto; display: none; box-shadow: 0 14px 34px rgba(0,30,55,0.14); }
.ucalc__dd.is-open .ucalc__dd-list { display: block; }
.ucalc__dd-opt { padding: 12px 16px; font-family: var(--font-body); font-size: 1rem; color: var(--color-text-secondary); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.ucalc__dd-opt:hover { background: var(--color-gray-light); color: var(--color-text-primary); }
.ucalc__dd-opt.is-sel { background: var(--color-leier-blue); color: #fff; }

.ucalc__result { background: var(--color-white-warm); border: 1px solid var(--color-border); padding: clamp(24px, 1rem + 2.5vw, 44px); display: flex; flex-direction: column; gap: clamp(24px, 1rem + 2vw, 36px); }
.ucalc__scale-track { position: relative; height: 12px; border-radius: 7px; background: linear-gradient(90deg, #1a9850 0%, #41ab5d 30%, #a6d96a 49%, #fee08b 63%, #fdae61 78%, #d73027 100%); margin-top: 42px; }
.ucalc__scale-pointer, .ucalc__scale-target { position: absolute; top: -38px; transform: translateX(-50%); transition: left 320ms cubic-bezier(.4,0,.2,1); }
.ucalc__scale-pointer::after, .ucalc__scale-target::after { content: ''; position: absolute; left: 50%; top: 30px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-text-primary); }
.ucalc__scale-target::after { border-top-color: var(--color-leier-blue); }
.ucalc__scale-pointer-label, .ucalc__scale-target-label { font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: var(--tracking-label); white-space: nowrap; color: var(--color-text-primary); }
.ucalc__scale-target-label { color: var(--color-leier-blue); }
.ucalc__scale-marks { position: relative; height: 40px; margin-top: 8px; }
.ucalc__scale-mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.ucalc__scale-mark-tick { width: 1px; height: 8px; background: var(--color-border-strong, #bbb); }
.ucalc__scale-mark-label { font-family: var(--font-body); font-size: 0.625rem; line-height: 1.2; color: var(--color-text-muted); text-align: center; margin-top: 4px; }
.ucalc__scale-mark.is-target { z-index: 2; }
.ucalc__scale-mark.is-target .ucalc__scale-mark-tick { background: var(--color-leier-blue); width: 2px; height: 13px; }
.ucalc__scale-mark.is-target .ucalc__scale-mark-label { color: var(--color-leier-blue); font-weight: 700; }
.ucalc__scale-mark.is-target .ucalc__scale-mark-label::before { content: 'CILJ'; display: block; font-family: var(--font-display); font-size: 0.5625rem; letter-spacing: 0.08em; color: var(--color-leier-blue); margin-bottom: 2px; }
.ucalc__readout { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: clamp(20px, 1rem + 1.5vw, 30px); }
.ucalc__uvalue { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.2rem + 3vw, 3rem); color: var(--color-text-primary); letter-spacing: -0.03em; line-height: 1; }
.ucalc__uvalue strong { color: var(--color-leier-blue); }
.ucalc__uunit { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--color-text-muted); letter-spacing: 0; }
.ucalc__rating { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: var(--tracking-label); padding: 8px 14px; color: #fff; }
.ucalc__rating.r-pass { background: #1a9850; } .ucalc__rating.r-low { background: #66a61e; } .ucalc__rating.r-ok { background: #e6a700; } .ucalc__rating.r-hi { background: #d73027; }
.ucalc__wall-wrap { display: flex; justify-content: center; align-items: flex-end; min-height: clamp(200px, 14rem + 8vw, 320px); }
.ucalc__wall { max-width: 100%; max-height: clamp(220px, 15rem + 10vw, 380px); object-fit: contain; }
@media (max-width: 900px) { .ucalc { grid-template-columns: 1fr; } }
.ucalc__products { margin-top: clamp(32px, 1.5rem + 2vw, 56px); padding-top: clamp(26px, 1rem + 2vw, 40px); border-top: 1px solid var(--color-border); }
.ucalc__products-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ucalc__products-hint { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-muted); }
.ucalc__products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--gap-grid-tight); }
.ucalc__product-card { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--color-border); background: var(--color-white-warm); text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.ucalc__product-card:hover { border-color: var(--color-leier-blue); box-shadow: 0 10px 26px rgba(0,30,55,0.10); }
.ucalc__product-thumb { width: 76px; height: 76px; flex: none; background: var(--color-gray-light) center/cover no-repeat; }
.ucalc__product-thumb--empty { background: var(--color-gray-light); }
.ucalc__product-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ucalc__product-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--color-text-primary); }
.ucalc__product-cta { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; color: var(--color-leier-blue); letter-spacing: var(--tracking-label); }
.ucalc__products-cta { margin-top: 22px; }
.ucalc__products-cta:empty { display: none; }
.ucalc__products-browse { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: var(--tracking-label); color: var(--color-leier-blue); text-decoration: none; padding: 12px 22px; border: 1px solid var(--color-leier-blue); transition: background 160ms ease, color 160ms ease; }
.ucalc__products-browse:hover { background: var(--color-leier-blue); color: #fff; }

.category-card { background: var(--color-white-warm); display: flex; flex-direction: column; }
.category-card__media { height: clamp(280px, 11.67rem + 25.9vw, 560px); background-position: center; background-size: 100% auto; background-repeat: no-repeat; background-color: #fff; }
a.category-card__media, a.category-card__media--placeholder { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.category-card__media:focus-visible, a.category-card__media--placeholder:focus-visible { outline: 2px solid var(--color-leier-blue); outline-offset: -2px; }
.category-card__media--placeholder { position: relative; height: clamp(280px, 11.67rem + 25.9vw, 560px); background: linear-gradient(155deg, #EFE8DB 0%, #D8CFBE 100%); overflow: hidden; }
.category-card__placeholder-label { position: absolute; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-kicker); color: rgba(0,0,0,0.33); text-transform: uppercase; }
.category-card__placeholder-label--tl { left: 24px; top: 24px; }
.category-card__placeholder-label--br { right: 24px; bottom: 20px; }
.category-card__body { padding: 36px 4px 16px; display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; }
.category-card__meta-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-label); }
.category-card__index { color: var(--color-leier-blue); }
.category-card__count { color: var(--color-text-muted); }
.category-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-lg); line-height: 0.95; letter-spacing: -0.035em; color: var(--color-text-primary); margin: 0 0 14px; }
.category-card__lede { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-text-secondary); max-width: 560px; }
.category-card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--color-border); gap: 24px; flex-wrap: wrap; }
.category-card__tags { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-muted); }
.category-card__tag-sep { color: rgba(17,17,17,0.33); }
.category-card__link { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--color-leier-blue); }

.category-card--small .category-card__media,
.category-card--small .category-card__media--placeholder { height: clamp(220px, 12.08rem + 7.4vw, 300px); }
.category-card--small .category-card__placeholder-label { font-size: 0.5625rem; }
.category-card--small .category-card__placeholder-label--tl { left: 16px; top: 16px; }
.category-card--small .category-card__placeholder-label--br { right: 16px; bottom: 14px; }
.category-card--small .category-card__body { padding: 24px 4px 8px; gap: 12px; }
.category-card--small .category-card__meta-row { font-size: 0.6875rem; }
.category-card--small .category-card__title { font-size: 1.75rem; line-height: 0.95; letter-spacing: var(--tracking-tight); margin-bottom: 6px; }
.category-card--small .category-card__lede { font-size: 0.8125rem; line-height: 1.5; }
.category-card--small .category-card__link { margin-top: 2px; }
@media (max-width: 767px) {
  .category-card__body { padding: 24px 0 8px; gap: 16px; }
  .category-card__footer { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ===== WHY LEIER (dark) ===== */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--color-on-dark-border); }
.benefits-grid__item { padding: 56px 40px; border-bottom: 1px solid var(--color-on-dark-border); border-right: 1px solid var(--color-on-dark-border); }
.benefits-grid__item:nth-child(3n) { border-right: 0; padding-right: 0; padding-left: 40px; }
.benefits-grid__item:nth-child(3n+1) { padding-left: 0; padding-right: 40px; }
.benefits-grid__item:nth-last-child(-n+3) { border-bottom: 0; padding-bottom: 56px; }
.benefits-grid__index { font-family: var(--font-display); font-weight: 800; font-size: 0.875rem; letter-spacing: var(--tracking-kicker); color: var(--color-blue-light); margin-bottom: 32px; }
.benefits-grid__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-md); line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 16px; color: var(--color-on-dark-primary); }
.benefits-grid__body { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: rgba(250,250,248,0.67); }
@media (max-width: 1023px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid__item, .benefits-grid__item:nth-child(3n), .benefits-grid__item:nth-child(3n+1) { padding: 40px 24px; border-right: 1px solid var(--color-on-dark-border); }
  .benefits-grid__item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .benefits-grid__item:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 480px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-grid__item, .benefits-grid__item:nth-child(3n), .benefits-grid__item:nth-child(3n+1), .benefits-grid__item:nth-child(2n) { padding: 32px 0; border-right: 0; }
}

/* ===== EUROPEAN PRESENCE ===== */
.european-presence { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap-grid); }
.european-presence__map-card {
  background: var(--color-navy); color: var(--color-on-dark-primary);
  padding: var(--card-pad-lg); position: relative; overflow: hidden; min-height: clamp(480px, 16rem + 16.7vw, 620px);
}
.european-presence__map-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; }
.european-presence__map-frame { position: relative; width: 100%; }
.european-presence__map-graphic { position: relative; width: 100%; max-width: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.european-presence__map-graphic svg { display: block; width: 100%; height: auto; }
.european-presence__map-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.european-presence__zoom-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--color-on-dark-primary); background: rgba(0,0,0,0.45); border: 1px solid var(--color-on-dark-border); cursor: pointer; }
.european-presence__zoom-btn:hover { background: var(--color-leier-blue); border-color: var(--color-leier-blue); }
.european-presence__legend { list-style: none; margin: 18px 0 0; padding-top: 24px; border-top: 1px solid var(--color-on-dark-border); display: flex; flex-wrap: wrap; gap: 12px 28px; }
.european-presence__legend-item { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.3; color: rgba(250,250,248,0.85); }
.european-presence__legend-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; margin-top: 2px; border: 1px solid rgba(250,250,248,0.4); }
@media (min-width: 768px) {
  .european-presence__map-frame { aspect-ratio: 15 / 10; }
  .european-presence__map-graphic { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 72%; }
  .european-presence__map-graphic svg { height: 100%; width: auto; max-width: 100%; }
}
.european-presence__marker { position: absolute; }
.european-presence__marker-dot { width: 14px; height: 14px; background: var(--color-on-dark-primary); border-radius: 50%; box-shadow: 0 0 0 5px var(--color-leier-blue); outline: 1px solid var(--color-leier-blue); }
.european-presence__marker--hr .european-presence__marker-dot { width: 18px; height: 18px; background: var(--color-leier-blue); border: 2px solid var(--color-on-dark-primary); box-shadow: 0 0 0 8px rgba(0,112,190,0.23); outline: 0; }
.european-presence__marker-label { position: absolute; left: 24px; top: -4px; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: var(--color-on-dark-primary); white-space: nowrap; }
.european-presence__marker--hr .european-presence__marker-label { left: 28px; color: var(--color-blue-light); }
.european-presence__marker--small { width: 8px; height: 8px; background: var(--color-leier-blue); border-radius: 50%; }
.european-presence__country-list {
  position: absolute; left: 0; top: 6%; width: 27%; z-index: 1;
  display: flex; flex-direction: column; gap: 7px;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  color: rgba(250,250,248,0.85);
}
.european-presence__country-sep { display: none; }
@media (max-width: 767px) { .european-presence__country-list { display: none; } }
.european-presence__country--accent { color: var(--color-blue-light); }
.european-presence__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.european-presence__stat-value { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 1; letter-spacing: -0.035em; }
.european-presence__stat-value sup { font-size: 1.25rem; vertical-align: top; color: var(--color-blue-light); }
.european-presence__stat-label { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,250,248,0.53); margin-top: 10px; font-weight: 600; line-height: 1.4; }

.european-presence__hr-card {
  position: relative; min-height: clamp(480px, 16rem + 16.7vw, 620px);
  background-color: var(--color-navy);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  overflow: hidden;
}
.european-presence__hr-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,30,55,0.35) 0%, rgba(0,30,55,0.85) 100%); }
.european-presence__hr-badge { position: absolute; top: 32px; left: 32px; padding: 10px 16px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-label); }
.european-presence__hr-content { position: absolute; left: var(--inset); right: var(--inset); bottom: var(--inset); color: var(--color-on-dark-primary); }
.european-presence__hr-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-md); line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 24px; }
.european-presence__hr-lede { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.55; color: rgba(250,250,248,0.85); margin: 0 0 32px; max-width: 480px; }
.european-presence__hr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding-top: 24px; border-top: 1px solid rgba(250,250,248,0.20); }
.european-presence__hr-stat-value { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.european-presence__hr-stat-label { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,250,248,0.67); margin-top: 6px; font-weight: 600; }
@media (max-width: 1023px) {
  .european-presence { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .european-presence__stats { grid-template-columns: 1fr; }
  /* Decorative satellite dots cluster on a narrow card — the two
     labelled markers (Austrija, Hrvatska) carry the meaning. */
  .european-presence__marker--small { display: none; }

}

/* ===== DOCUMENTATION HUB (blue) ===== */
.section--blue .docs-hub-decor-1 { position: absolute; right: -200px; top: -150px; width: 560px; height: 560px; border-radius: 50%; background: rgba(250,250,248,0.04); pointer-events: none; }
.docs-hub__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); }
.docs-hub__card {
  background: var(--color-white-warm); color: var(--color-text-primary);
  padding: var(--card-pad) var(--inset); min-height: 360px; display: flex; flex-direction: column; justify-content: space-between;
}
.docs-hub__card-tag { font-family: var(--font-display); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.22em; color: var(--color-leier-blue); margin-bottom: 32px; }
.docs-hub__card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-sm); line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 14px; color: var(--color-text-primary); }
.docs-hub__card-body { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; color: var(--color-text-secondary); }
.docs-hub__card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--color-border); }
.docs-hub__card-meta { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.12em; }
.docs-hub__card-cta { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--color-leier-blue); }
.docs-hub__strip {
  position: relative; margin-top: 18px; padding: 24px 32px;
  background: rgba(250,250,248,0.08); border: 1px solid rgba(250,250,248,0.20);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.docs-hub__strip-label-group { display: flex; align-items: center; gap: 8px 32px; flex-wrap: wrap; line-height: 1.3; }
.docs-hub__strip-label { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: rgba(250,250,248,0.67); letter-spacing: 0.12em; text-transform: uppercase; }
.docs-hub__strip-item { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--color-on-dark-primary); }
.docs-hub__strip-cta { padding: 12px 22px; background: var(--color-white-warm); color: var(--color-leier-blue); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 1023px) { .docs-hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .docs-hub__card, .section-cta-blue__card { min-height: 0; } }
@media (max-width: 480px) { .docs-hub__grid { grid-template-columns: 1fr; } }

/* ===== DEALER LOCATOR ===== */
.dealer-locator__title-accent { color: var(--color-leier-blue); }
.dealer-locator__panel {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-grid);
  background: var(--color-white-warm); padding: clamp(16px, 0.5rem + 2.2vw, 32px); border: 1px solid var(--color-border);
}
.dealer-locator__map { position: relative; height: clamp(360px, 12rem + 33.3vw, 660px); background: #E8EDF2; overflow: hidden; }
.dealer-locator__map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,112,190,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,112,190,0.05) 1px, transparent 1px); background-size: 40px 40px; }
.dealer-locator__map-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.dealer-locator__map-dot { position: absolute; background: var(--color-leier-blue); border-radius: 50%; }
.dealer-locator__map-tag {
  position: absolute; padding: 6px 12px; background: var(--color-text-primary); color: var(--color-on-dark-primary);
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
}
.dealer-locator__map-caption { position: absolute; right: 20px; bottom: 20px; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-secondary); font-weight: 600; }
.dealer-locator__list-panel { background: var(--color-white-warm); padding: 8px 0; display: flex; flex-direction: column; gap: 18px; }
.dealer-locator__filter {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); margin-top: 6px;
  text-align: left; width: 100%;
}
.dealer-locator__filter-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; color: rgba(250,250,248,0.67); letter-spacing: var(--tracking-kicker); text-transform: uppercase; display: block; }
.dealer-locator__filter-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; display: block; margin-top: 4px; }
.dealer-locator__filter-arrow { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.dealer-locator__list-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.dealer-locator__list-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--color-text-primary); }
.dealer-locator__list-meta { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.14em; }
.dealer-locator__list { display: flex; flex-direction: column; gap: 0; max-height: 480px; overflow-y: auto; border-top: 1px solid var(--color-border); }
.dealer-locator__dealer { padding: 18px 4px; border-bottom: 1px solid var(--color-border); }
.dealer-locator__dealer:last-child { border-bottom: 0; }
.dealer-locator__dealer-name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--color-text-primary); margin-bottom: 8px; }
.dealer-locator__dealer-info { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 12px; }
.dealer-locator__dealer-email { color: var(--color-leier-blue); }
.dealer-locator__dealer-cta { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: var(--color-leier-blue); }
@media (max-width: 1023px) {
  .dealer-locator__panel { grid-template-columns: 1fr; }
}

.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); margin-top: var(--gap-md); }
.trust-strip__card { background: var(--color-white-warm); padding: var(--card-pad) var(--inset); border: 1px solid var(--color-border); }
.trust-strip__icon { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -0.025em; color: var(--color-leier-blue); margin-bottom: 14px; }
.trust-strip__icon sup { font-size: 1.25rem; vertical-align: top; }
.trust-strip__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-text-primary); margin-bottom: 6px; }
.trust-strip__body { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.55; color: var(--color-text-secondary); }
@media (max-width: 1023px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-strip { grid-template-columns: 1fr; } }

/* ===== REFERENCES ===== */
.references__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap-grid-tight); }
.references__feature { position: relative; height: clamp(420px, 20rem + 27.8vw, 720px); background-position: center 40%; background-size: cover; background-repeat: no-repeat; }
.references__feature-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%); }
.references__feature-badge { position: absolute; top: 24px; left: 24px; padding: 8px 14px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-label); }
.references__feature-body { position: absolute; left: var(--inset); right: var(--inset); bottom: var(--inset); color: var(--color-on-dark-primary); }
.references__feature-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-xl); line-height: 0.95; letter-spacing: -0.035em; margin-bottom: 18px; max-width: 760px; }
.references__feature-meta { display: flex; gap: 14px 28px; padding-top: 20px; border-top: 1px solid rgba(250,250,248,0.20); flex-wrap: wrap; }
.references__feature-meta-label { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue-light); }
.references__feature-meta-value { font-family: var(--font-body); font-size: 1rem; margin-top: 6px; }

.references__stack { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap-grid-tight); }
.references__small { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 350px; }
.references__small--brick { background: linear-gradient(150deg, #B85842 0%, #6B2D1E 100%); overflow: hidden; }
.references__small-stripes { position: absolute; inset: 0; background-image: repeating-linear-gradient(110deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 22px); }
.references__small-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); }
.references__small-badge { position: absolute; top: 20px; left: 20px; padding: 6px 12px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; }
.references__small-placeholder-tag { position: absolute; top: 20px; right: 20px; padding: 5px 10px; background: rgba(250,250,248,0.15); color: var(--color-on-dark-primary); font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; }
.references__small-body { position: absolute; left: 24px; right: 24px; bottom: 24px; color: var(--color-on-dark-primary); }
.references__small-title { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: var(--tracking-tight); }
.references__small-meta { font-family: var(--font-body); font-size: 0.8125rem; margin-top: 6px; color: rgba(250,250,248,0.80); }
@media (max-width: 1023px) {
  .references__grid { grid-template-columns: 1fr; }
}

.references__categories {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 48px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.references__category { padding: 32px; border-right: 1px solid var(--color-border); }
.references__category:first-child { padding-left: 0; }
.references__category:last-child { padding-right: 0; border-right: 0; }
.references__category-value { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--color-leier-blue); letter-spacing: var(--tracking-tight); }
.references__category-label { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--color-text-secondary); margin-top: 8px; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 767px) {
  .references__categories { grid-template-columns: 1fr 1fr; }
  .references__category { padding: 24px; border-bottom: 1px solid var(--color-border); }
  .references__category:nth-child(2n) { border-right: 0; padding-right: 0; }
  .references__category:nth-child(2n+1) { padding-left: 0; }
}

/* ===== BIG BLUE CTA ===== */
.section-cta-blue__decor-1 { position: absolute; right: -300px; top: -300px; width: 800px; height: 800px; border-radius: 50%; background: rgba(250,250,248,0.05); pointer-events: none; }
.section-cta-blue__decor-2 { position: absolute; left: -200px; bottom: -200px; width: 500px; height: 500px; border-radius: 50%; background: rgba(250,250,248,0.04); pointer-events: none; }
.section-cta-blue__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid-tight); }
.section-cta-blue__card { background: var(--color-white-warm); color: var(--color-text-primary); padding: var(--card-pad-lg) var(--inset) var(--card-pad); display: flex; flex-direction: column; gap: var(--gap-md); min-height: 360px; }
.section-cta-blue__card-tag { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--color-leier-blue); letter-spacing: 0.22em; }
.section-cta-blue__card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-md); line-height: 0.95; letter-spacing: -0.03em; }
.section-cta-blue__card-body { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.6; color: var(--color-text-secondary); }
.section-cta-blue__card-link { margin-top: auto; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-leier-blue); }
.section-cta-blue__phone { position: relative; margin-top: 32px; padding: 28px 36px; background: rgba(250,250,248,0.08); border: 1px solid rgba(250,250,248,0.20); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-cta-blue__phone-lede { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-on-dark-primary); }
.section-cta-blue__phone-group { display: flex; gap: 8px 36px; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--color-on-dark-primary); flex-wrap: wrap; line-height: 1.3; }
.section-cta-blue__phone-sep { opacity: 0.5; }
@media (max-width: 1023px) { .section-cta-blue__grid { grid-template-columns: 1fr; } }

/* ===== FOOTER ===== */
.site-footer { background: var(--color-navy); color: var(--color-on-dark-primary); padding: 80px var(--container-px) 36px; }
.site-footer__inner { max-width: 1440px; margin: 0 auto; }
.site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--color-on-dark-border); }
.site-footer__brand img { height: 64px; width: auto; }
.site-footer__about { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; color: rgba(250,250,248,0.53); margin: 24px 0 24px; max-width: 360px; }
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); font-size: 0.875rem; color: var(--color-on-dark-secondary); margin-bottom: 28px; }
.site-footer__contact-email { color: var(--color-on-dark-primary); }
.site-footer__social { display: flex; gap: 16px; align-items: center; }
.site-footer__social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-on-dark-secondary); transition: color 160ms ease;
}
.site-footer__social-icon svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.site-footer__social-icon:hover { color: var(--color-on-dark-primary); }
.site-footer__col-title { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-blue-light); font-weight: 700; margin-bottom: 20px; }
.site-footer__col-list { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-body); font-size: 0.875rem; color: var(--color-on-dark-secondary); }
.site-footer__country { display: flex; align-items: center; gap: 10px; }
.site-footer__flag { width: 20px; height: 14px; border: 1px solid var(--color-on-dark-border); flex-shrink: 0; }
.site-footer__flag--at { background-image: url(../images/flags/flag-at.png); background-size: cover; background-position: center; }
.site-footer__flag--pl { background-image: url(../images/flags/flag-pl.png); background-size: cover; background-position: center; }
.site-footer__flag--ro { background-image: url(../images/flags/flag-ro.png); background-size: cover; background-position: center; }
.site-footer__flag--hu { background-image: url(../images/flags/flag-hu.png); background-size: cover; background-position: center; }
.site-footer__flag--sk { background-image: url(../images/flags/flag-sk.png); background-size: cover; background-position: center; }
.site-footer__flag--ua { background-image: url(../images/flags/flag-ua.png); background-size: cover; background-position: center; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-family: var(--font-body); font-size: 0.75rem; color: rgba(250,250,248,0.40); flex-wrap: wrap; gap: 16px; }
.site-footer__legal { display: flex; gap: 28px; flex-wrap: wrap; }
@media (max-width: 1023px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .site-footer { padding: 56px var(--container-px) 28px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
}

/* Inline-style escape hatch for hero background images. Keep this comment.
   The remaining inline styles in the markup are background-image only. */

/* ============================================================
   CATEGORY-PAGE COMPONENTS (introduced with the Oplo\010dnici page).
   All fluid, token-based — reused by subcategory and other pages.
   ============================================================ */

/* --- Breadcrumb --- */
.breadcrumb { background: var(--color-gray-light); border-bottom: 1px solid var(--color-border); }
.breadcrumb__inner { max-width: 1440px; margin: 0 auto; padding: 16px var(--container-px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); line-height: 1.4; }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-leier-blue); }
.breadcrumb__current { color: var(--color-text-primary); font-weight: 600; }

/* --- Intro + 2x2 stats --- */
.intro-stats__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gap-xl); align-items: start; }
.intro-stats__lead { font-family: var(--font-body); font-size: var(--text-body-xl); line-height: 1.55; color: var(--color-text-secondary); margin: 0; }
.intro-stats__stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border); }
.intro-stats__stat { padding: var(--card-pad) var(--inset) var(--card-pad) 0; border-bottom: 1px solid var(--color-border); }
.intro-stats__stat:nth-child(odd) { border-right: 1px solid var(--color-border); }
.intro-stats__stat:nth-child(even) { padding-left: var(--inset); padding-right: 0; }
.intro-stats__stat:nth-last-child(-n+2) { border-bottom: 0; }
.intro-stats__value { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-xl); line-height: 1; letter-spacing: -0.03em; color: var(--color-leier-blue); }
.intro-stats__label { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.5; color: var(--color-text-secondary); margin-top: 12px; }
@media (max-width: 1023px) { .intro-stats__grid { grid-template-columns: 1fr; gap: var(--gap-lg); } }
@media (max-width: 480px) {
  .intro-stats__stats { grid-template-columns: 1fr; }
  .intro-stats__stat, .intro-stats__stat:nth-child(odd), .intro-stats__stat:nth-child(even) { border-right: 0; padding: var(--card-pad) 0; }
}

/* --- Editorial split (media + numbered advantages) --- */
.editorial-split { display: flex; gap: var(--gap-xl); align-items: stretch; }
.editorial-split--reverse { flex-direction: row-reverse; }
.editorial-split__media { flex: 1; min-height: clamp(22rem, 14rem + 22vw, 46rem); background-position: center 35%; background-size: cover; background-repeat: no-repeat; position: relative; }
.editorial-split__media-caption { position: absolute; left: var(--inset); bottom: var(--inset); padding: 8px 14px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.editorial-split__list { flex: 1; display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.editorial-split__list > p { max-width: 72ch; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 1.15em; }
.editorial-split__list > p:first-child { margin-top: 28px; }
.editorial-split__list > p:last-child { margin-bottom: 0; }
.editorial-split__item { padding: var(--card-pad) 0; border-bottom: 1px solid var(--color-border); display: flex; gap: var(--gap-lg); align-items: flex-start; }
.editorial-split__item:last-child { border-bottom: 0; }
.editorial-split__num { font-family: var(--font-display); font-weight: 800; font-size: 0.875rem; letter-spacing: var(--tracking-kicker); color: var(--color-leier-blue); min-width: 36px; padding-top: 6px; }
.editorial-split__item-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-md); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-text-primary); margin-bottom: 10px; }
.editorial-split__item-body { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-text-secondary); }
@media (max-width: 1023px) { .editorial-split, .editorial-split--reverse { flex-direction: column; } }

/* --- Project cards (3-up references) --- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.project-card__media { position: relative; height: clamp(260px, 12rem + 16vw, 380px); background-position: center; background-size: cover; background-repeat: no-repeat; }
.project-card__badge { position: absolute; top: 18px; left: 18px; padding: 6px 12px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; }
.project-card__body { padding: 28px 2px 12px; }
.project-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 0.95; letter-spacing: -0.025em; color: var(--color-text-primary); }
.project-card__meta { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); margin-top: 8px; }
.project-card__desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-secondary); margin-top: 14px; }
.project-card__link { display: inline-block; margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--color-leier-blue); }
@media (max-width: 1023px) { .project-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .project-grid { grid-template-columns: 1fr; } }

/* --- FAQ accordion (native <details>/<summary>) --- */
.faq { background: var(--color-white-warm); border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-lg); padding: 28px var(--inset); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q-row { display: flex; align-items: baseline; gap: 18px; }
.faq__num { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.14em; flex-shrink: 0; }
.faq__item[open] .faq__num { color: var(--color-leier-blue); }
.faq__q-text { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-primary); }
.faq__icon { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; color: var(--color-text-primary); line-height: 1; flex-shrink: 0; }
.faq__item[open] .faq__icon { color: var(--color-leier-blue); }
.faq__icon::after { content: '+'; }
.faq__item[open] .faq__icon::after { content: '\2212'; }
.faq__a { padding: 0 var(--inset) 32px calc(var(--inset) + 38px); font-family: var(--font-body); font-size: var(--text-body-md); line-height: 1.65; color: var(--color-text-secondary); max-width: 920px; }
@media (max-width: 600px) { .faq__a { padding-left: var(--inset); } }

/* --- CTA distributor (dark split band) --- */
.cta-distributor { background: var(--color-navy); color: var(--color-on-dark-primary); position: relative; overflow: hidden; }
.cta-distributor__decor { position: absolute; right: -200px; bottom: -200px; width: 600px; height: 600px; border-radius: 50%; background: rgba(0,112,190,0.13); pointer-events: none; }
.cta-distributor__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-xl); align-items: center; }
.cta-distributor__lede { font-family: var(--font-body); font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-on-dark-secondary); margin: 32px 0 0; max-width: 560px; }
.cta-distributor__actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
@media (max-width: 1023px) { .cta-distributor__grid { grid-template-columns: 1fr; } }

/* --- 3-up category grid (medium cards) + flush-top utility --- */
.category-grid--trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
@media (max-width: 1023px) { .category-grid--trio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .category-grid--trio { grid-template-columns: 1fr; } }
.section--flush-top { padding-top: 0; }
.hero-full-bleed + .section--flush-top, .product-hero + .section--flush-top { padding-top: var(--section-pt); }

/* ============================================================
   SUBCATEGORY-PAGE COMPONENTS (introduced with the Opeka page).
   ============================================================ */

/* --- Selection guide (decision scenario cards) --- */
.selection-guide__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); }
.selection-guide__card { background: var(--color-gray-light); border-top: 3px solid var(--color-leier-blue); padding: var(--inset); display: flex; flex-direction: column; gap: 18px; min-height: 28rem; }
.selection-guide__tag { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-leier-blue); letter-spacing: var(--tracking-kicker); }
.selection-guide__q { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-text-primary); }
.selection-guide__desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-secondary); }
.selection-guide__rec { margin-top: auto; padding: 18px 20px; background: var(--color-white-warm); border-left: 3px solid var(--color-leier-blue); }
.selection-guide__rec-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); margin-bottom: 6px; }
.selection-guide__rec-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-xs); color: var(--color-text-primary); letter-spacing: -0.02em; margin-bottom: 4px; }
.selection-guide__rec-spec { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); }
.selection-guide__link { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); }
.selection-guide__strip { margin-top: var(--gap-md); padding: 24px var(--inset); background: var(--color-leier-blue); color: var(--color-on-dark-primary); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; }
.selection-guide__strip-text { font-family: var(--font-display); font-weight: 600; font-size: var(--text-body-md); }
.selection-guide__strip-cta { padding: 14px 24px; background: var(--color-white-warm); color: var(--color-leier-blue); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 1023px) { .selection-guide__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .selection-guide__grid { grid-template-columns: 1fr; } .selection-guide__card { min-height: 0; } }

/* --- Comparison table (dark, horizontally scrollable on mobile) --- */
.compare { background: var(--color-navy-mid); border: 1px solid var(--color-on-dark-faint); }
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__table { min-width: 760px; }
.compare__row { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); }
.compare__head { background: var(--color-leier-blue); padding: 22px var(--inset); }
.compare__head-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-muted); text-transform: uppercase; align-self: center; }
.compare__head-sys { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; color: var(--color-on-dark-primary); }
.compare__r { padding: 28px var(--inset); border-top: 1px solid var(--color-on-dark-faint); align-items: center; }
.compare__rh-num { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-blue-light); margin-bottom: 4px; }
.compare__rh-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-xs); letter-spacing: -0.015em; color: var(--color-on-dark-primary); }
.compare__rh-unit { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-on-dark-muted); margin-top: 4px; }
.compare__cell { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.5; color: var(--color-on-dark-secondary); }
.compare__val { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; letter-spacing: -0.02em; color: var(--color-on-dark-primary); }
.compare__val--hl { color: var(--color-blue-light); }
.compare__sub { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-on-dark-muted); }
.compare__foot { background: var(--color-navy); padding: 22px var(--inset); border-top: 1px solid var(--color-on-dark-border); align-items: center; }
.compare__foot-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-muted); text-transform: uppercase; }
.compare__foot-cta { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--color-blue-light); }

/* --- Inspiration (full-bleed showcase) --- */
.inspiration { background: var(--color-white-warm); padding-top: var(--section-pt); }
.inspiration__head { max-width: 1440px; margin: 0 auto var(--gap-xl); padding: 0 var(--container-px); }
.inspiration__feature { position: relative; height: clamp(24rem, 16rem + 22vw, 46rem); background-position: center 40%; background-size: cover; background-repeat: no-repeat; }
.inspiration__feature-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.72) 100%); }
.inspiration__feature-body { position: absolute; left: var(--container-px); right: var(--container-px); bottom: var(--container-px); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-xl); color: var(--color-on-dark-primary); flex-wrap: wrap; }
.inspiration__kicker { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-muted); text-transform: uppercase; margin-bottom: 18px; }
.inspiration__feature-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-xl); line-height: 0.95; letter-spacing: -0.035em; max-width: 760px; }
.inspiration__stat-box { display: flex; gap: var(--gap-lg); padding: 18px 24px; background: rgba(250,250,248,0.10); border: 1px solid var(--color-on-dark-border); flex-wrap: wrap; }
.inspiration__stat-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-muted); }
.inspiration__stat-val { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--color-on-dark-primary); margin-top: 6px; }
.inspiration__pair { display: grid; grid-template-columns: 1fr 1fr; }
.inspiration__sub { position: relative; height: clamp(18rem, 12rem + 16vw, 32rem); background-position: center 40%; background-size: cover; background-repeat: no-repeat; }
.inspiration__sub-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%); }
.inspiration__sub-body { position: absolute; left: var(--inset); right: var(--inset); bottom: var(--inset); color: var(--color-on-dark-primary); }
.inspiration__sub-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-md); line-height: 1; letter-spacing: -0.025em; max-width: 460px; }
.inspiration__cta { max-width: 1440px; margin: 0 auto; padding: var(--section-padding-y-sm) var(--container-px) 0; }
.inspiration__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); padding-top: var(--gap-xl); border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.inspiration__cta-text { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-md); letter-spacing: -0.025em; color: var(--color-text-primary); max-width: 760px; line-height: 1.15; }
@media (max-width: 768px) {
  .inspiration__feature-body { flex-direction: column; align-items: flex-start; gap: var(--gap-md); }
  .inspiration__pair { grid-template-columns: 1fr; }
  /* Stacked feature content reaches higher into the image — darken more. */
  .inspiration__feature-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.80) 100%); }
  .inspiration__stat-box { background: rgba(10,22,34,0.55); }
  .inspiration__stat-label { color: var(--color-on-dark-secondary); }
}

/* ============================================================
   PRODUCT-DETAIL COMPONENTS — PASS 1 (LeierPLAN 45 N+F).
   ============================================================ */

/* --- Product hero (gallery + info) --- */
.product-hero { background: var(--color-white-warm); }
.product-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
.product-hero__media { background: var(--color-gray-light); padding: clamp(2rem, 0.5rem + 5vw, 5rem) var(--container-px); display: flex; flex-direction: column; gap: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.product-hero__media-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); text-transform: uppercase; flex-wrap: wrap; }
.product-hero__stage { flex: 1; display: grid; place-items: center; min-height: clamp(18rem, 12rem + 16vw, 35rem); }
.product-hero__img { max-width: 100%; max-height: clamp(18rem, 12rem + 16vw, 35rem); object-fit: contain; }
.product-hero__thumbs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.product-hero__thumb { width: 76px; height: 76px; background: var(--color-white-warm); border: 1px solid var(--color-border-strong); display: grid; place-items: center; padding: 8px; overflow: hidden; cursor: pointer; font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-text-muted); text-align: center; transition: border-color 0.15s ease; }
.product-hero__thumb.is-active { border: 2px solid var(--color-leier-blue); }
.product-hero__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-hero__dl { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: var(--color-leier-blue); }
.product-hero__info { padding: clamp(2rem, 0.5rem + 5vw, 5rem) var(--container-px); display: flex; flex-direction: column; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); }
.product-hero__cat { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-leier-blue); text-transform: uppercase; flex-wrap: wrap; }
.product-hero__cat-sub { color: var(--color-text-muted); }
.product-hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 1.5rem + 5.5vw, 5.25rem); line-height: 0.92; letter-spacing: -0.04em; color: var(--color-text-primary); margin: 0; }
.product-hero__lede { font-family: var(--font-body); font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-text-secondary); margin: 0; max-width: 560px; }
.product-hero__chips { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.product-hero__chip { padding: 18px 22px; background: var(--color-gray-light); border-left: 3px solid var(--color-leier-blue); }
.product-hero__chip-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); margin-bottom: 6px; }
.product-hero__chip-val { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--color-text-primary); overflow-wrap: anywhere; }
.product-hero__chip-unit { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.product-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.product-hero__avail { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: rgba(0,112,190,0.05); border: 1px solid rgba(0,112,190,0.20); margin-top: auto; flex-wrap: wrap; }
.product-hero__avail-dot { width: 10px; height: 10px; background: var(--color-leier-blue); border-radius: 50%; flex-shrink: 0; }
.product-hero__avail-body { flex: 1; min-width: 12rem; }
.product-hero__avail-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-text-muted); text-transform: uppercase; }
.product-hero__avail-text { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); margin-top: 2px; }
.product-hero__avail-cta { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: var(--color-leier-blue); }
@media (max-width: 900px) { .product-hero__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .product-hero__chips { grid-template-columns: 1fr; } }

/* --- Ideal applications (numbered 6-up grid + not-for strip) --- */
.applications__grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.applications__item { padding: var(--card-pad) var(--inset); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 16px; }
.applications__item:last-child { border-right: 0; }
.applications__num { width: 32px; height: 32px; border: 1.5px solid var(--color-leier-blue); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; color: var(--color-leier-blue); }
.applications__item-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-text-primary); margin-bottom: 8px; }
.applications__item-desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-muted); }
.applications__notfor { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); padding-top: 32px; margin-top: 8px; font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); flex-wrap: wrap; }
.applications__notfor-list { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.applications__notfor-label { font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: var(--tracking-kicker); color: var(--color-text-primary); text-transform: uppercase; }
.applications__notfor-list a { color: var(--color-leier-blue); font-weight: 600; }
.applications__notfor-cta { font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-xs); color: var(--color-leier-blue); white-space: nowrap; }
@media (max-width: 1023px) {
  .applications__grid { grid-template-columns: repeat(3, 1fr); }
  .applications__item { border-bottom: 1px solid var(--color-border); }
  .applications__item:nth-child(3n) { border-right: 0; }
}
@media (max-width: 560px) {
  .applications__grid { grid-template-columns: 1fr 1fr; }
  .applications__item:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .applications__item:nth-child(2n) { border-right: 0; }
}

/* --- Product overview (text blocks + feature image) --- */
.product-overview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: start; }
.product-overview__text { display: flex; flex-direction: column; gap: var(--gap-lg); }
.product-overview__intro { font-family: var(--font-body); font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.product-overview__block { border-top: 1px solid var(--color-border); padding-top: var(--gap-lg); }
.product-overview__block-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-leier-blue); margin-bottom: 14px; }
.product-overview__block p { font-family: var(--font-body); font-size: var(--text-body-md); line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.product-overview__media { position: relative; height: clamp(24rem, 16rem + 22vw, 47.5rem); background-position: center 35%; background-size: cover; background-repeat: no-repeat; }
.product-overview__media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); }
.product-overview__media-body { position: absolute; left: var(--inset); right: var(--inset); bottom: var(--inset); color: var(--color-on-dark-primary); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; }
.product-overview__media-kicker { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-muted); text-transform: uppercase; margin-bottom: 10px; }
.product-overview__media-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1; letter-spacing: -0.025em; }
.product-overview__media-badge { padding: 8px 14px; background: var(--color-leier-blue); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; flex-shrink: 0; }
@media (max-width: 900px) { .product-overview__grid { grid-template-columns: 1fr; } }

/* --- Why choose (5-up feature cards) --- */
.why5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-grid-tight); }
.why5__card { background: var(--color-gray-light); border-top: 3px solid var(--color-leier-blue); padding: var(--inset); display: flex; flex-direction: column; gap: 18px; min-height: 21rem; }
.why5__num { font-family: var(--font-display); font-size: 0.875rem; font-weight: 800; letter-spacing: var(--tracking-kicker); color: var(--color-leier-blue); }
.why5__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-text-primary); }
.why5__body { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-secondary); margin-top: auto; }
@media (max-width: 1023px) { .why5 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .why5 { grid-template-columns: 1fr 1fr; } .why5__card { min-height: 0; } }
@media (max-width: 440px) { .why5 { grid-template-columns: 1fr; } }

/* --- Technical data (dark spec-card grid) --- */
.techdata__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid-tight); }
.techdata__card { background: var(--color-navy-mid); border: 1px solid var(--color-on-dark-faint); padding: var(--inset); }
.techdata__card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--color-on-dark-faint); }
.techdata__card-num { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; color: var(--color-blue-light); letter-spacing: var(--tracking-kicker); }
.techdata__card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-xs); letter-spacing: -0.02em; color: var(--color-on-dark-primary); }
.techdata__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-on-dark-faint); }
.techdata__row:last-child { border-bottom: 0; }
.techdata__row-label { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-on-dark-muted); }
.techdata__row-val { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--color-on-dark-primary); text-align: right; }
.techdata__row-val--hl { color: var(--color-blue-light); }
@media (max-width: 768px) { .techdata__grid { grid-template-columns: 1fr; } }

/* Dark-outline button on light backgrounds */
.btn--outline { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-text-primary); }
.btn--outline:hover { background: var(--color-text-primary); color: var(--color-white-warm); }

/* ============================================================
   PRODUCT-DETAIL COMPONENTS — PASS 2 (LeierPLAN 45 N+F).
   ============================================================ */

/* --- Product comparison (light, with highlighted "this product" column) --- */
.pcompare { background: var(--color-white-warm); border: 1px solid var(--color-border); }
body.postid-585 .pcompare, body.postid-585 .pcompare__head > div, body.postid-585 .pcompare__r > * { background: #ffffff; }
.pcompare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pcompare__table { min-width: 820px; }
.pcompare__row { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); }
.pcompare__r > *, .pcompare__foot > * { border-top: 1px solid var(--color-border); }
.pcompare__row > * { border-right: 1px solid var(--color-border); padding: 22px var(--inset); }
.pcompare__row > *:last-child { border-right: 0; }
.pcompare__head-label, .pcompare__foot-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); text-transform: uppercase; align-self: center; }
.pcompare__hcol-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); margin-bottom: 8px; }
.pcompare__hcol-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--color-text-primary); }
.pcompare__head > :nth-child(2) { background: var(--color-leier-blue); }
.pcompare__head > :nth-child(2) .pcompare__hcol-label { color: var(--color-on-dark-muted); }
.pcompare__head > :nth-child(2) .pcompare__hcol-name { color: var(--color-on-dark-primary); }
.pcompare__rh { display: flex; flex-direction: column; gap: 4px; }
.pcompare__rh-num { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-leier-blue); }
.pcompare__rh-title { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.015em; color: var(--color-text-primary); }
.pcompare__rh-unit { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); }
.pcompare__val { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--color-text-primary); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3em; }
.pcompare__val-unit { font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; letter-spacing: 0; color: var(--color-text-muted); line-height: 1.2; }
.pcompare__val--img { padding: 10px 6px; }
.pcompare__val--img img { display: block; margin: 0 auto; width: auto; height: auto; max-width: 100%; max-height: 96px; }
body.prodcat-potporni-zidovi .pcompare__val--img img { max-height: 150px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 34px); margin-bottom: 30px; }
.color-swatch { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.color-swatch__dot { width: clamp(58px, 5vw, 82px); height: clamp(58px, 5vw, 82px); border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,0.14); }
.color-swatch__name { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-secondary); }
.pcompare__text { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-secondary); display: flex; align-items: center; }
.pcompare__r > :nth-child(2), .pcompare__foot > :nth-child(2) { background: rgba(0,112,190,0.05); }
.pcompare__r > :nth-child(2) .pcompare__val { color: var(--color-leier-blue); }
.pcompare--plain .pcompare__head > :nth-child(2) { background: transparent; }
.pcompare--plain .pcompare__head > :nth-child(2) .pcompare__hcol-name { color: var(--color-text-primary); }
.pcompare--plain .pcompare__r > :nth-child(2), .pcompare--plain .pcompare__foot > :nth-child(2) { background: transparent; }
.pcompare--plain .pcompare__r > :nth-child(2) .pcompare__val { color: var(--color-text-primary); }
.pcompare__foot { background: var(--color-gray-light); }
.cat-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.cat-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pcompare--cmp .pcompare__hcol-name--cmp { font-size: 0.8125rem; line-height: 1.2; font-weight: 700; }
.pcompare__val--cmp { justify-content: center; font-size: 1.15rem; }
.cmp-yes { color: var(--color-leier-blue); font-weight: 700; }
.cmp-no { color: var(--color-text-muted); }
.cmp-txt { font-size: 0.8125rem; font-family: var(--font-body); font-weight: 600; color: var(--color-text-secondary); text-align: center; }
.faq__group { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.15; color: var(--color-leier-blue); margin: 38px 0 12px; padding: 0 var(--inset); letter-spacing: -0.015em; }
.faq__group:first-child { margin-top: 4px; }
.roofacc__overview { position: relative; margin-bottom: 44px; }
.roofacc__overview-frame { overflow: auto; aspect-ratio: 3.25 / 1; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; cursor: grab; user-select: none; -webkit-user-select: none; }
.roofacc__overview-frame.is-grabbing { cursor: grabbing; }
.roofacc__overview-frame picture { display: contents; }
.roofacc__overview-frame img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-user-drag: none; user-drag: none; }
.roofacc__zoom-controls { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 7px; }
.roofacc__zoom-controls button { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 7px; background: var(--color-leier-blue); color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.roofacc__zoom-controls button:hover { filter: brightness(1.08); }
.roofacc__group { margin-bottom: 40px; }
.roofacc__group-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); color: var(--color-leier-blue); margin-bottom: 14px; letter-spacing: -0.015em; }
.roofacc__table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 8px; }
.roofacc__table { width: 100%; border-collapse: collapse; background: #fff; }
.roofacc__table th { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; text-align: left; padding: 12px 14px; background: var(--color-gray-light); border-bottom: 2px solid var(--color-border); color: var(--color-text-primary); white-space: nowrap; }
.roofacc__table td { padding: 8px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.roofacc__table tr:last-child td { border-bottom: 0; }
.roofacc__cell-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-text-primary); }
.roofacc__cell-sm { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.35; color: var(--color-text-secondary); }
.roofacc__table { min-width: 680px; }
.roofacc__th-icon, .roofacc__cell-icon { width: 124px; min-width: 124px; text-align: center; }
.roofacc__cell-icon img { width: 92px; max-width: none; height: auto; display: inline-block; }
.roofacc + section { padding-top: clamp(56px, 6vw, 96px); }
.pcompare__foot-cta { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); align-self: center; }

/* docs-hub 3-up variant (download centre, 6 cards) */
.docs-hub__grid--trio { grid-template-columns: repeat(3, 1fr); }
.docs-hub__grid--trio .docs-hub__card { min-height: 0; }
@media (max-width: 1023px) { .docs-hub__grid--trio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .docs-hub__grid--trio { grid-template-columns: 1fr; } }

/* --- Wall cross-section (technical diagram) --- */
.wall__frame { background: var(--color-gray-light); border: 1px solid var(--color-border); padding: clamp(20px, 0.5rem + 3vw, 48px); }
.wall__temps { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-muted); flex-wrap: wrap; }
.wall__temp { display: flex; align-items: center; gap: 12px; color: var(--color-text-primary); }
.wall__temp-dot { width: 10px; height: 10px; border-radius: 50%; }
.wall__temp-dot--warm { background: #D97757; }
.wall__temp-dot--cold { background: #5C7AA8; }
.wall__temp-note { font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: none; }
.wall__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wall__diagram { min-width: 600px; }
.wall__nums, .wall__bars, .wall__dims { display: flex; gap: 4px; }
.wall__nums { margin-bottom: 12px; }
.wall__nums > * { text-align: center; }
.wall__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--color-text-primary); background: var(--color-white-warm); font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; color: var(--color-text-primary); }
.wall__num--hl { width: 32px; height: 32px; border: 0; background: var(--color-leier-blue); color: var(--color-on-dark-primary); }
.wall__bars { height: 340px; }
.wall__layer { position: relative; border: 1px solid rgba(17,17,17,0.22); }
.wall__layer-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-text-muted); white-space: nowrap; }
.wall__layer--plaster-in { background: repeating-linear-gradient(135deg, #FAFAF8 0 6px, #E7E2D5 6px 8px); }
.wall__layer--insul { background: repeating-linear-gradient(45deg, #FFF6D9 0 6px, #F4E89E 6px 8px); border: 1px dashed #B59A2A; }
.wall__layer--plaster-out { background: repeating-linear-gradient(135deg, #D8D3C8 0 4px, #C8C2B5 4px 6px); }
.wall__layer--brick { background: linear-gradient(180deg, #C66C4F 0%, #A8543B 100%); border: 2px solid var(--color-leier-blue); box-shadow: 0 0 0 4px rgba(0,112,190,0.15); }
.wall__layer--brick::before { content: ''; position: absolute; inset: 18px; background-image: linear-gradient(rgba(250,250,248,0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(250,250,248,0.13) 1px, transparent 1px); background-size: 18px 22px; }
.wall__brick-callout { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background: var(--color-white-warm); color: var(--color-leier-blue); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; border: 2px solid var(--color-leier-blue); white-space: nowrap; }
.wall__brick-name { position: absolute; left: 24px; right: 24px; bottom: 24px; color: var(--color-on-dark-primary); }
.wall__brick-kicker { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: rgba(250,250,248,0.7); text-transform: uppercase; margin-bottom: 8px; }
.wall__brick-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wall__brick-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2vw, 2rem); line-height: 0.95; letter-spacing: -0.025em; }
.wall__brick-spec { font-family: var(--font-body); font-size: 0.8125rem; color: rgba(250,250,248,0.8); }
.wall__insul-tag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 3px 8px; background: #B59A2A; color: var(--color-white-warm); font-family: var(--font-display); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.wall__dims { margin-top: 8px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-text-muted); }
.wall__dims > * { text-align: center; padding: 10px 0; border-top: 1px solid var(--color-border); }
.wall__dim--hl { border-top: 1px solid var(--color-leier-blue); color: var(--color-leier-blue); }
.wall__nums > :nth-child(1), .wall__bars > :nth-child(1), .wall__dims > :nth-child(1) { flex: 18; min-width: 28px; }
.wall__nums > :nth-child(2), .wall__bars > :nth-child(2), .wall__dims > :nth-child(2) { flex: 810; min-width: 320px; }
.wall__nums > :nth-child(3), .wall__bars > :nth-child(3), .wall__dims > :nth-child(3) { flex: 144; min-width: 60px; }
.wall__nums > :nth-child(4), .wall__bars > :nth-child(4), .wall__dims > :nth-child(4) { flex: 27; min-width: 28px; }
.wall__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); padding-top: 24px; margin-top: 16px; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.wall__summary-stats { display: flex; gap: var(--gap-xl); flex-wrap: wrap; }
.wall__stat-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 4px; }
.wall__stat-val { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--color-text-primary); }
.wall__stat-val--blue { color: var(--color-leier-blue); }
.wall__summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wall__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); margin-top: var(--gap-lg); }
.wall__card { background: var(--color-gray-light); padding: var(--inset); }
.wall__card--hl { border-top: 3px solid var(--color-leier-blue); box-shadow: inset 0 0 0 1px rgba(0,112,190,0.13); }
.wall__card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wall__card-num { width: 24px; height: 24px; border: 1.5px solid var(--color-text-primary); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.625rem; color: var(--color-text-primary); flex-shrink: 0; }
.wall__card-num--hl { border: 0; background: var(--color-leier-blue); color: var(--color-on-dark-primary); }
.wall__card-zone { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); text-transform: uppercase; }
.wall__card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--color-text-primary); margin-bottom: 10px; }
.wall__card-rows { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-muted); }
.wall__card-row { display: flex; justify-content: space-between; gap: 12px; }
.wall__card-row span:last-child { color: var(--color-text-primary); font-weight: 600; }
@media (max-width: 1023px) { .wall__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .wall__cards { grid-template-columns: 1fr; } }

/* --- Related products (4-up placeholder cards) --- */
.related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); }
.related__media { height: clamp(200px, 10rem + 8vw, 280px); background: #EDE6D8; display: grid; place-items: center; position: relative; overflow: hidden; }
.related__badge { position: absolute; top: 14px; left: 14px; padding: 5px 10px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; }
.related__ph { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-kicker); color: rgba(0,0,0,0.33); text-transform: uppercase; }
.related__body { padding: 24px 2px 12px; display: flex; flex-direction: column; gap: 10px; }
.related__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-primary); }
.related__desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-secondary); }
.related__link { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); }
@media (max-width: 1023px) { .related__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related__grid { grid-template-columns: 1fr; } }

/* Compact button (utility / inline actions) */
.btn--sm { min-width: 0; padding: 13px 22px; gap: 10px; font-size: 0.8125rem; justify-content: center; }

/* ============================================================
   CONTACT-PAGE COMPONENTS (Kontakt).
   ============================================================ */

/* --- Contact hero (text + blue info card) --- */
.contact-hero { background: var(--color-white-warm); padding: clamp(2.5rem, 1rem + 6vw, 5rem) var(--container-px) clamp(2.5rem, 1rem + 4vw, 3.5rem); }
.contact-hero__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-xl); align-items: end; }
.contact-hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-md); line-height: 0.9; letter-spacing: var(--tracking-tighter); color: var(--color-text-primary); margin: 0 0 24px; }
.contact-hero__lede { font-family: var(--font-body); font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-text-secondary); margin: 0; max-width: 680px; }
.contact-hero__card { display: flex; flex-direction: column; gap: 14px; padding: 24px 28px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); }
.contact-hero__card-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-on-dark-secondary); text-transform: uppercase; margin-bottom: 6px; }
.contact-hero__card-val { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; }
.contact-hero__card-divider { height: 1px; background: var(--color-on-dark-border); }
@media (max-width: 900px) { .contact-hero__inner { grid-template-columns: 1fr; gap: var(--gap-lg); } }

/* --- Department cards (who to contact) --- */
.deptcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); }
.deptcard { background: var(--color-white-warm); border: 1px solid var(--color-border); border-top: 3px solid var(--color-leier-blue); padding: var(--inset); display: flex; flex-direction: column; gap: 18px; min-height: 17rem; }
.deptcard__tag { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-leier-blue); letter-spacing: var(--tracking-kicker); }
.deptcard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-text-primary); }
.deptcard__desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-secondary); }
.deptcard__contacts { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: var(--text-body-xs); }
.deptcard__email { color: var(--color-leier-blue); font-weight: 600; }
.deptcard__phone { color: var(--color-text-muted); }
@media (max-width: 1023px) { .deptcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .deptcards { grid-template-columns: 1fr; } .deptcard { min-height: 0; } }

/* --- Contact form --- */
.contact-form__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--gap-xl); align-items: start; }
.contact-form__intro-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-sm); line-height: 0.92; letter-spacing: var(--tracking-tighter); color: var(--color-text-primary); margin: 0 0 24px; }
.contact-form__intro-text { font-family: var(--font-body); font-size: var(--text-body-md); line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 32px; max-width: 480px; }
.contact-form__checklist { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.contact-form__check { display: flex; align-items: center; gap: 14px; }
.contact-form__check-icon { width: 36px; height: 36px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; flex-shrink: 0; }
.contact-form__check-text { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-secondary); }
.contact-form__card { background: var(--color-white-warm); border: 1px solid var(--color-border); padding: clamp(24px, 1rem + 2.5vw, 48px); }
.contact-form__topic { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--color-leier-blue); margin-bottom: 32px; }
.contact-form__topic-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-on-dark-secondary); flex-shrink: 0; }
.contact-form__topic-select { flex: 1; background: transparent; border: 0; color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; outline: none; cursor: pointer; }
.contact-form__topic-select option { color: var(--color-text-primary); }
.contact-form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.contact-form__field { margin-bottom: 18px; }
.contact-form__label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-text-muted); text-transform: uppercase; display: block; margin-bottom: 8px; }
.contact-form__input, .contact-form__textarea { display: block; width: 100%; padding: 14px 18px; background: var(--color-white-warm); border: 1px solid var(--color-border-strong); font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--color-text-primary); border-radius: 0; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.15s ease; }
.contact-form__input:focus, .contact-form__textarea:focus { border-color: var(--color-leier-blue); }
.contact-form__textarea { min-height: 140px; line-height: 1.55; resize: vertical; }
.contact-form__gdpr { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 24px; }
.contact-form__checkbox { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--color-leier-blue); }
.contact-form__gdpr-text { font-family: var(--font-body); font-size: 0.75rem; line-height: 1.55; color: var(--color-text-muted); }
.contact-form__gdpr-text a { color: var(--color-leier-blue); font-weight: 600; }
.contact-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 24px; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.contact-form__note { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); }
@media (max-width: 900px) { .contact-form__grid { grid-template-columns: 1fr; gap: var(--gap-lg); } }
@media (max-width: 460px) { .contact-form__row2 { grid-template-columns: 1fr; } }

/* --- Location cards (dark) --- */
.loccards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid-tight); }
.loccard { background: var(--color-navy-mid); border: 1px solid var(--color-on-dark-faint); padding: clamp(28px, 1rem + 2.5vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.loccard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.loccard__badge { padding: 6px 12px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; }
.loccard__badge--ghost { background: transparent; border: 1px solid var(--color-on-dark-border); }
.loccard__region { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-blue-light); letter-spacing: 0.14em; }
.loccard__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-on-dark-primary); }
.loccard__details { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-on-dark-secondary); }
.loccard__email { color: var(--color-blue-light); }
.loccard__foot { display: flex; gap: 14px; padding-top: 14px; border-top: 1px solid var(--color-on-dark-faint); }
.loccard__link { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-blue-light); }
@media (max-width: 768px) { .loccards { grid-template-columns: 1fr; } }

/* --- Contact map (illustrative Croatia map) --- */
.contactmap { position: relative; height: clamp(360px, 14rem + 26vw, 640px); background: #E8EDF2; overflow: hidden; border: 1px solid var(--color-border); }
.contactmap__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,112,190,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,112,190,0.05) 1px, transparent 1px); background-size: 40px 40px; }
.contactmap__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.contactmap__marker { position: absolute; }
.contactmap__dot { width: 16px; height: 16px; background: var(--color-leier-blue); border: 2px solid var(--color-white-warm); border-radius: 50%; }
.contactmap__dot--hq { width: 22px; height: 22px; border: 3px solid var(--color-white-warm); box-shadow: 0 0 0 8px rgba(0,112,190,0.16), 0 0 0 14px rgba(0,112,190,0.08); }
.contactmap__tag { position: absolute; left: 30px; top: -10px; padding: 8px 14px; background: var(--color-text-primary); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.contactmap__tag-kicker { font-size: 0.5625rem; color: var(--color-blue-light); letter-spacing: 0.18em; margin-bottom: 4px; }
.contactmap__tag--light { background: var(--color-white-warm); color: var(--color-text-primary); border: 1px solid var(--color-border); top: -6px; left: 26px; }
.contactmap__tag-label { color: var(--color-leier-blue); }
.contactmap__legend { position: absolute; left: 20px; top: 20px; padding: 16px 20px; background: var(--color-white-warm); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 12px; }
.contactmap__legend-title { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); text-transform: uppercase; }
.contactmap__legend-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-secondary); }
.contactmap__legend-dot { width: 14px; height: 14px; background: var(--color-leier-blue); border: 2px solid var(--color-white-warm); border-radius: 50%; flex-shrink: 0; }
.contactmap__legend-dot--hq { box-shadow: 0 0 0 4px rgba(0,112,190,0.16); }
.contactmap__open { position: absolute; right: 20px; top: 20px; padding: 12px 20px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; }
@media (max-width: 600px) { .contactmap__tag, .contactmap__tag--light { display: none; } .contactmap__open { left: 20px; right: auto; top: auto; bottom: 20px; } }

/* ============================================================
   ABOUT-PAGE COMPONENTS (O nama).
   ============================================================ */

/* --- Timeline (horizontal milestones) --- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); padding-top: 60px; }
.timeline__line { position: absolute; left: 0; right: 0; top: 103px; height: 1px; background: var(--color-border); }
.timeline__item { position: relative; padding: 0 24px; border-right: 1px solid var(--color-border); }
.timeline__item:first-child { padding-left: 0; }
.timeline__item:last-child { padding-right: 0; border-right: 0; }
.timeline__year { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.16em; color: var(--color-leier-blue); margin-bottom: 18px; }
.timeline__dot { width: 18px; height: 18px; background: var(--color-leier-blue); border-radius: 50%; box-shadow: 0 0 0 6px var(--color-white-warm), 0 0 0 7px var(--color-leier-blue); margin-bottom: 24px; }
.timeline__dot--now { width: 20px; height: 20px; border: 2px solid var(--color-white-warm); box-shadow: 0 0 0 6px var(--color-white-warm), 0 0 0 8px var(--color-leier-blue); }
.timeline__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-text-primary); margin-bottom: 10px; }
.timeline__desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-muted); }
@media (max-width: 1023px) {
  .timeline { grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-lg) 0; padding-top: 0; }
  .timeline__line { display: none; }
  .timeline__item:nth-child(3n) { border-right: 0; padding-right: 0; }
  .timeline__item:nth-child(3n+1) { padding-left: 0; }
}
@media (max-width: 600px) {
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline__item:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .timeline__item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .timeline__item:nth-child(2n+1) { padding-left: 0; }
}

/* --- Euro stats (2x2 big numbers, pairs with .european-presence map-card) --- */
.eurostats { display: grid; grid-template-columns: 1fr 1fr; }
.eurostats__cell { background: var(--color-white-warm); padding: clamp(28px, 1rem + 2vw, 36px) clamp(24px, 1rem + 1.5vw, 32px); border: 1px solid var(--color-border); }
.eurostats__cell:nth-child(1) { border-right: 0; }
.eurostats__cell:nth-child(3) { border-top: 0; border-right: 0; }
.eurostats__cell:nth-child(4) { border-top: 0; }
.eurostats__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.035em; color: var(--color-leier-blue); }
.eurostats__label { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); margin-top: 12px; letter-spacing: 0.04em; }
.eurostats__sub { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); margin-top: 4px; }
@media (max-width: 560px) {
  .eurostats { grid-template-columns: 1fr; }
  .eurostats__cell, .eurostats__cell:nth-child(1), .eurostats__cell:nth-child(3) { border: 1px solid var(--color-border); border-top: 0; }
  .eurostats__cell:first-child { border-top: 1px solid var(--color-border); }
}

/* --- Reasons (4-up dark numbered) --- */
.reasons { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-on-dark-border); }
.reasons__item { padding: 56px 40px 40px; border-right: 1px solid var(--color-on-dark-border); }
.reasons__item:first-child { padding-left: 0; }
.reasons__item:last-child { padding-right: 0; border-right: 0; }
.reasons__num { font-family: var(--font-display); font-weight: 800; font-size: 0.875rem; letter-spacing: var(--tracking-kicker); color: var(--color-blue-light); margin-bottom: 32px; }
.reasons__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-md); line-height: 0.95; letter-spacing: -0.025em; color: var(--color-on-dark-primary); margin-bottom: 16px; }
.reasons__body { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.6; color: var(--color-on-dark-muted); }
@media (max-width: 900px) {
  .reasons { grid-template-columns: 1fr 1fr; }
  .reasons__item { padding: 40px 32px; border-bottom: 1px solid var(--color-on-dark-border); }
  .reasons__item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .reasons__item:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 520px) {
  .reasons { grid-template-columns: 1fr; }
  .reasons__item, .reasons__item:nth-child(2n) { padding: 32px 0; border-right: 0; }
}

/* --- Certificate cards (4-up) --- */
.certgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); }
.certcard { background: var(--color-white-warm); border: 1px solid var(--color-border); padding: var(--inset); display: flex; flex-direction: column; gap: 18px; min-height: 15rem; }
.certcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.certcard__badge { padding: 5px 10px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; }
.certcard__meta { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.14em; }
.certcard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-xs); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-primary); }
.certcard__desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-text-secondary); }
.certcard__link { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); }
@media (max-width: 1023px) { .certgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .certgrid { grid-template-columns: 1fr; } .certcard { min-height: 0; } }
.european-presence__map-card-meta { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-on-dark-muted); font-weight: 600; }

/* Hero action button column (compact page heroes) */
.contact-hero__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 560px) { .contact-hero__actions { align-items: stretch; } .contact-hero__actions .btn { justify-content: center; } }

/* Dealer-locator county <select> (functional filter) */
.dealer-locator__filter-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dealer-locator__filter-select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; width: 100%; color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; outline: none; cursor: pointer; }
.dealer-locator__filter-select option { color: var(--color-text-primary); }
.dealer-locator__filter:focus-within { outline: 2px solid rgba(250,250,248,0.55); outline-offset: 2px; }

/* Leaflet map fills the locator map cell */
.dealer-locator__leaflet { position: absolute; inset: 0; z-index: 0; background: #E8EDF2; }
.dealer-locator__leaflet .leaflet-popup-content-wrapper { border-radius: 2px; }
.dealer-locator__leaflet .leaflet-popup-content { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-secondary); margin: 12px 16px; }
.dealer-locator__leaflet .leaflet-popup-content strong { font-family: var(--font-display); font-size: 0.9375rem; color: var(--color-text-primary); }

/* ============================================================
   REFERENCE-PAGE COMPONENTS.
   ============================================================ */
/* Filter bar */
.reffilter { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--gap-grid-tight); align-items: stretch; padding: var(--inset); background: var(--color-white-warm); border: 1px solid var(--color-border); }
.reffilter__field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--color-gray-light); border: 1px solid var(--color-border); }
.reffilter__field-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.16em; text-transform: uppercase; display: block; }
.reffilter__field-val { font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--color-text-primary); font-weight: 500; margin-top: 2px; display: block; }
.reffilter__arrow { color: var(--color-leier-blue); font-family: var(--font-display); font-weight: 700; }
.reffilter__submit { padding: 16px 28px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; white-space: nowrap; display: grid; place-items: center; }
.refchips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.refchips__label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: var(--tracking-kicker); text-transform: uppercase; margin-right: 8px; }
.refchip { padding: 9px 16px; background: var(--color-white-warm); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.refchip--active { background: var(--color-leier-blue); color: var(--color-on-dark-primary); border-color: var(--color-leier-blue); }
.refchips__count { margin-left: auto; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 900px) { .reffilter { grid-template-columns: 1fr 1fr; } .reffilter__submit { grid-column: 1 / -1; } }
@media (max-width: 560px) { .reffilter { grid-template-columns: 1fr; } }

/* Featured project */
.reffeature { position: relative; height: clamp(22rem, 14rem + 22vw, 40rem); background-position: center 35%; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.reffeature__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.10) 30%, rgba(0,20,40,0.78) 100%); }
.reffeature__badge { position: absolute; top: var(--inset); left: var(--inset); padding: 8px 14px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.reffeature__open { position: absolute; top: var(--inset); right: var(--inset); padding: 16px 26px; background: var(--color-white-warm); color: var(--color-leier-blue); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; }
.reffeature__body { position: absolute; left: var(--inset); right: var(--inset); bottom: var(--inset); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-xl); color: var(--color-on-dark-primary); flex-wrap: wrap; }
.reffeature__meta { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-secondary); text-transform: uppercase; margin-bottom: 22px; flex-wrap: wrap; }
.reffeature__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-xl); line-height: 0.92; letter-spacing: -0.04em; margin: 0 0 22px; max-width: 1100px; }
.reffeature__lede { font-family: var(--font-body); font-size: var(--text-body-md); line-height: 1.55; color: var(--color-on-dark-secondary); margin: 0; max-width: 680px; }
.reffeature__sys { padding: 16px 22px; background: rgba(250,250,248,0.08); border: 1px solid var(--color-on-dark-border); }
.reffeature__sys-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-muted); }
.reffeature__sys-val { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; margin-top: 6px; }
@media (max-width: 600px) { .reffeature__open { display: none; } }

/* Project grid + cards */
.refgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.refcard__media { position: relative; height: clamp(240px, 12rem + 14vw, 360px); background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--color-gray-light); overflow: hidden; }
.refcard__cat { position: absolute; top: 14px; left: 14px; padding: 5px 10px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; }
.refcard__year { position: absolute; right: 14px; bottom: 14px; padding: 5px 10px; background: rgba(10,22,34,0.8); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; }
.refcard__body { padding: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.refcard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-primary); margin: 0; }
.refcard__meta { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); }
.refcard__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.refcard__tag { padding: 5px 10px; background: var(--color-gray-light); color: var(--color-leier-blue); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; }
.refcard__link { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); }
.refmore { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 56px; flex-wrap: wrap; }
.refmore__note { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); }
@media (max-width: 1023px) { .refgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .refgrid { grid-template-columns: 1fr; } }

/* Dark statistics grid (big numbers) */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-on-dark-border); }
.statgrid__item { padding: 56px 40px 0; border-right: 1px solid var(--color-on-dark-border); }
.statgrid__item:first-child { padding-left: 0; }
.statgrid__item:last-child { padding-right: 0; border-right: 0; }
.statgrid__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 2rem + 5vw, 6rem); line-height: 1; letter-spacing: -0.04em; color: var(--color-on-dark-primary); }
.statgrid__val sup { font-size: 0.4em; vertical-align: top; color: var(--color-blue-light); }
.statgrid__label { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--color-on-dark-secondary); margin-top: 18px; letter-spacing: 0.04em; }
.statgrid__sub { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-on-dark-muted); margin-top: 4px; }
@media (max-width: 900px) { .statgrid { grid-template-columns: 1fr 1fr; } .statgrid__item { padding: 40px 32px; border-bottom: 1px solid var(--color-on-dark-border); } .statgrid__item:nth-child(2n) { border-right: 0; padding-right: 0; } .statgrid__item:nth-child(2n+1) { padding-left: 0; } }
@media (max-width: 480px) { .statgrid { grid-template-columns: 1fr; } .statgrid__item, .statgrid__item:nth-child(2n) { padding: 32px 0; border-right: 0; } }

/* ============================================================
   REFERENCE-SINGLE (case study) COMPONENTS.
   ============================================================ */
/* Hero stat row (inside hero-full-bleed) */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-on-dark-border); padding-top: 32px; }
.hero-stats__item { padding: 0 32px; border-right: 1px solid var(--color-on-dark-border); }
.hero-stats__item:first-child { padding-left: 0; }
.hero-stats__item:last-child { padding-right: 0; border-right: 0; }
.hero-stats__label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-on-dark-muted); text-transform: uppercase; margin-bottom: 10px; }
.hero-stats__val { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--color-on-dark-primary); }
.hero-stats__sub { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-on-dark-muted); margin-top: 4px; }
@media (max-width: 768px) { .hero-stats { grid-template-columns: 1fr 1fr; gap: 22px 0; } .hero-stats__item { padding: 0 20px; } .hero-stats__item:nth-child(2n) { border-right: 0; padding-right: 0; } .hero-stats__item:nth-child(2n+1) { padding-left: 0; } }

/* Case-study editorial (sticky intro + numbered blocks) */
.casestudy { display: grid; grid-template-columns: 1.2fr 1.5fr; gap: var(--gap-xl); align-items: start; }
.casestudy__intro { position: sticky; top: 48px; }
.casestudy__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-xs); line-height: 0.92; letter-spacing: var(--tracking-tighter); color: var(--color-text-primary); margin: 0 0 32px; }
.casestudy__lede { font-family: var(--font-body); font-size: var(--text-body-md); line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.casestudy__blocks { display: flex; flex-direction: column; gap: var(--gap-xl); }
.casestudy__label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-leier-blue); margin-bottom: 14px; }
.casestudy__block-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-md); line-height: 1.1; letter-spacing: -0.025em; color: var(--color-text-primary); margin-bottom: 18px; }
.casestudy__block-body { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.65; color: var(--color-text-secondary); margin: 0; }
@media (max-width: 900px) { .casestudy { grid-template-columns: 1fr; gap: var(--gap-lg); } .casestudy__intro { position: static; } }

/* Project gallery (full-bleed photo grid) */
.projgallery__head { max-width: 1440px; margin: 0 auto var(--gap-lg); padding: 0 var(--container-px); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-lg); flex-wrap: wrap; }
.projgallery__dl { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); }
.projgallery__hero { height: clamp(20rem, 12rem + 24vw, 48rem); background-position: center 30%; background-size: cover; background-repeat: no-repeat; position: relative; }
.projgallery__pair { display: grid; grid-template-columns: 1fr 1fr; }
.projgallery__trio { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.projgallery__wide { height: clamp(18rem, 12rem + 18vw, 38rem); background-position: center 70%; background-size: cover; background-repeat: no-repeat; position: relative; }
.projgallery__cell { height: clamp(16rem, 10rem + 14vw, 32rem); background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--color-gray-light); position: relative; }
.projgallery__cap { position: absolute; left: 20px; bottom: 20px; padding: 8px 14px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.projgallery__foot { max-width: 1440px; margin: 0 auto; padding: 24px var(--container-px) 0; }
.projgallery__foot-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding-top: 24px; border-top: 1px solid var(--color-border); flex-wrap: wrap; font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); }
.projgallery__foot-dl { display: flex; gap: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); flex-wrap: wrap; }
@media (max-width: 700px) { .projgallery__pair, .projgallery__trio { grid-template-columns: 1fr; } }

/* Used products (dark cards) */
.usedgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid-tight); }
.usedcard { background: var(--color-navy-mid); border: 1px solid var(--color-on-dark-faint); padding: var(--inset); display: flex; flex-direction: column; gap: 18px; min-height: 18rem; }
.usedcard__tag { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-blue-light); letter-spacing: var(--tracking-kicker); }
.usedcard__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-on-dark-primary); }
.usedcard__desc { font-family: var(--font-body); font-size: var(--text-body-xs); line-height: 1.55; color: var(--color-on-dark-muted); }
.usedcard__link { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-blue-light); }
@media (max-width: 1023px) { .usedgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .usedgrid { grid-template-columns: 1fr; } .usedcard { min-height: 0; } }

/* Technical summary (dark key/value) */
.summary { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-on-dark-faint); }
.summary__row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--color-on-dark-faint); }
.summary__row:nth-child(odd) { padding-right: 48px; }
.summary__row:nth-child(even) { padding-left: 48px; border-left: 1px solid var(--color-on-dark-faint); }
.summary__key { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-on-dark-muted); text-transform: uppercase; }
.summary__val { font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-md); color: var(--color-on-dark-primary); }
.summary__val--hl { color: var(--color-blue-light); }
@media (max-width: 768px) { .summary { grid-template-columns: 1fr; } .summary__row, .summary__row:nth-child(even) { padding: 18px 0; padding-left: 0; border-left: 0; } .summary__row { grid-template-columns: 1fr; gap: 6px; } }
.summary-wrap { border-top: 1px solid var(--color-on-dark-border); padding-top: clamp(2rem, 1rem + 3vw, 3rem); margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.summary-wrap__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-xs); line-height: 0.95; letter-spacing: var(--tracking-tight); color: var(--color-on-dark-primary); margin: 14px 0 40px; }
.projgallery { background: var(--color-white-warm); padding-bottom: var(--section-pb); }

/* ============================================================
   RESOURCES-PAGE COMPONENTS.
   ============================================================ */
.doccard { background: var(--color-white-warm); border: 1px solid var(--color-border); padding: 28px; display: flex; flex-direction: column; gap: 18px; min-height: 240px; }
.doccard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doccard__badge { padding: 5px 10px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; }
.doccard__size { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.14em; white-space: nowrap; }
.doccard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-primary); margin-bottom: 8px; }
.doccard__meta { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); }
.doccard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.doccard__foot-note { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); }
.doccard__dl { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.pager__info { font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-muted); }
.pager__nav { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; }
.pager__page { padding: 10px 16px; border: 1px solid var(--color-border-strong); color: var(--color-text-primary); }
.pager__page--active { background: var(--color-leier-blue); color: var(--color-on-dark-primary); border-color: var(--color-leier-blue); }
.pager__page--ghost { border: 0; color: var(--color-text-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contact-hero__sublede { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-text-muted); margin: 14px 0 0; max-width: 42ch; }

/* ============================================================
   PRODUCT-FINDER (wizard) COMPONENTS.
   ============================================================ */
.herocard__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-on-dark-primary); }
.herocard__divider { height: 1px; background: var(--color-on-dark-faint); margin: 6px 0; }
.herocard__check { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-on-dark-primary); }
.herocard__check-mark { font-weight: 700; }

.wizard__progress { display: flex; align-items: center; gap: 8px; margin-bottom: var(--gap-xl); }
.wizard__progress-seg { flex: 1; height: 4px; background: var(--color-leier-blue); }
.wizard__progress-label { margin-left: 14px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); text-transform: uppercase; white-space: nowrap; }
.wizard__rows { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.wizard__row { display: grid; grid-template-columns: 280px 1fr auto; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--color-border); }
.wizard__row:last-child { border-bottom: 0; }
.wizard__row-num { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-leier-blue); margin-bottom: 6px; }
.wizard__row-label { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--color-text-primary); }
.wizard__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.wizard__chip { padding: 10px 18px; background: var(--color-white-warm); color: var(--color-text-primary); border: 1px solid var(--color-border); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.wizard__chip--active { background: var(--color-leier-blue); color: var(--color-on-dark-primary); border-color: var(--color-leier-blue); }
.wizard__change { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); white-space: nowrap; }
.wizard__ready { margin-top: 32px; padding: 28px 36px; background: var(--color-navy); color: var(--color-on-dark-primary); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wizard__ready-text { font-family: var(--font-display); font-weight: 600; font-size: var(--text-body-md); }
@media (max-width: 768px) { .wizard__row { grid-template-columns: 1fr; gap: 14px; } .wizard__change { justify-self: start; } }

.recgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid-tight); }
.reccard { background: var(--color-white-warm); border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.reccard--best { border-color: var(--color-leier-blue); box-shadow: 0 0 0 4px rgba(0, 112, 190, 0.13); }
.reccard__head { padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-gray-light); border-bottom: 1px solid var(--color-border); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); }
.reccard__head-tag { color: var(--color-text-muted); }
.reccard__head-match { color: var(--color-leier-blue); letter-spacing: 0.14em; }
.reccard--best .reccard__head { background: var(--color-leier-blue); border-bottom: 0; }
.reccard--best .reccard__head-tag, .reccard--best .reccard__head-match { color: var(--color-on-dark-primary); }
.reccard__body { padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.reccard__cat { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--color-leier-blue); letter-spacing: var(--tracking-kicker); margin-bottom: 8px; }
.reccard__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-lg); line-height: 1; letter-spacing: -0.03em; color: var(--color-text-primary); }
.reccard__desc { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-text-secondary); }
.reccard__why { padding-top: 18px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; }
.reccard__why-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); }
.reccard__why-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--text-body-xs); color: var(--color-text-secondary); }
.reccard__why-mark { color: var(--color-leier-blue); font-weight: 700; }
.reccard__why-row--warn .reccard__why-mark { color: var(--color-text-muted); }
.reccard__actions { margin-top: auto; display: flex; gap: 10px; padding-top: 20px; }
.reccard__btn { flex: 1; text-align: center; padding: 14px 16px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: var(--text-body-sm); font-weight: 700; }
.reccard__btn--ghost { flex: 0 0 auto; background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-primary); }
.reccard:not(.reccard--best) .reccard__btn:not(.reccard__btn--ghost) { background: transparent; border: 1px solid var(--color-leier-blue); color: var(--color-leier-blue); }
@media (max-width: 1023px) { .recgrid { grid-template-columns: 1fr; } }

.compare--triple .compare__row { grid-template-columns: 1.4fr repeat(3, 1fr); }
.compare--triple .compare__table { min-width: 640px; }

.contact-hero__directline { margin-top: 20px; padding: 18px 22px; background: rgba(0, 112, 190, 0.05); border: 1px solid rgba(0, 112, 190, 0.2); display: flex; align-items: center; gap: 14px; min-width: 280px; }
.contact-hero__directline-dot { width: 10px; height: 10px; background: var(--color-leier-blue); border-radius: 50%; flex-shrink: 0; }
.contact-hero__directline-label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-text-muted); text-transform: uppercase; }
.contact-hero__directline-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-md); color: var(--color-text-primary); text-decoration: none; margin-top: 2px; }

/* ============================================================
   INSPIRATION (blog) COMPONENTS.
   ============================================================ */
/* Featured article (split image + dark panel) */
.featart { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--color-navy); color: var(--color-on-dark-primary); min-height: 32.5rem; }
.featart__media { position: relative; background-position: center 40%; background-size: cover; background-repeat: no-repeat; min-height: 16rem; }
.featart__media-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 30, 55, 0.55) 100%); }
.featart__badge { position: absolute; top: 24px; left: 24px; padding: 8px 14px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.featart__body { padding: clamp(2rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; gap: 24px; }
.featart__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-blue-light); text-transform: uppercase; }
.featart__sep { opacity: 0.4; }
.featart__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-xs); line-height: 0.95; letter-spacing: -0.035em; margin: 0; }
.featart__lede { font-family: var(--font-body); font-size: var(--text-body-md); line-height: 1.55; color: var(--color-on-dark-secondary); margin: 0; max-width: 520px; }
.featart__foot { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--color-on-dark-border); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.featart__by-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-on-dark-muted); text-transform: uppercase; }
.featart__by-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-sm); margin-top: 2px; }
@media (max-width: 860px) { .featart { grid-template-columns: 1fr; } }

/* Article cards */
.artgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid-tight); }
.artcard { background: var(--color-white-warm); border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.artcard__media { height: 15rem; background-position: center 50%; background-size: cover; background-repeat: no-repeat; background-color: var(--color-gray-light); position: relative; }
.artcard__cat { position: absolute; top: 14px; left: 14px; padding: 5px 10px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; }
.artcard__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.artcard__meta { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--color-text-muted); text-transform: uppercase; }
.artcard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm); line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: var(--color-text-primary); }
.artcard__excerpt { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-text-muted); margin: 0; }
.artcard__link { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); }
@media (max-width: 1023px) { .artgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .artgrid { grid-template-columns: 1fr; } }

/* Newsletter */
.newsletter { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap-xl); align-items: center; }
.newsletter__form { background: var(--color-white-warm); padding: clamp(28px, 1rem + 3vw, 40px) clamp(24px, 1rem + 2vw, 36px); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 18px; }
.newsletter__field-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-text-muted); text-transform: uppercase; display: block; margin-bottom: 8px; }
.newsletter__input { width: 100%; padding: 14px 18px; background: var(--color-white-warm); border: 1px solid var(--color-border); font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--color-text-primary); }
.newsletter__roles { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter__role { padding: 8px 14px; background: var(--color-white-warm); color: var(--color-text-primary); border: 1px solid var(--color-border); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.newsletter__role--active { background: var(--color-leier-blue); color: var(--color-on-dark-primary); border-color: var(--color-leier-blue); }
.newsletter__consent { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: 0.75rem; line-height: 1.55; color: var(--color-text-muted); }
.newsletter__consent a { color: var(--color-leier-blue); font-weight: 600; }
.newsletter__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--color-border); }
.newsletter__count { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); }
.newsletter__count-mark { font-weight: 700; color: var(--color-leier-blue); }
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; gap: var(--gap-lg); } }

/* Hero inline search (contact-hero__card variant) */
.contact-hero__card--search { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--color-white-warm); border: 1px solid var(--color-border); min-width: 0; }
.contact-hero__search-icon { font-family: var(--font-display); font-weight: 700; color: var(--color-leier-blue); font-size: 1.25rem; }
.contact-hero__search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: var(--text-body-sm); color: var(--color-text-primary); padding: 4px 0; }
.contact-hero__search-input::placeholder { color: var(--color-text-muted); }
.contact-hero__search-input:focus { outline: none; }
.contact-hero__search-btn { padding: 10px 16px; background: var(--color-leier-blue); color: var(--color-on-dark-primary); border: 0; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; cursor: pointer; white-space: nowrap; }

/* --- Article body (WP editor content) --- */
.article-body { max-width: 56rem; margin: 0 auto; font-family: var(--font-body); font-size: var(--text-body-md); line-height: 1.7; color: var(--color-text-secondary); }
.article-body > * + * { margin-top: 1.25em; }
.article-body h2, .article-body h3 { font-family: var(--font-display); color: var(--color-text-primary); letter-spacing: -0.02em; line-height: 1.15; }
.article-body h2 { font-size: var(--text-heading-md); margin-top: 1.8em; }
.article-body h3 { font-size: var(--text-heading-sm); margin-top: 1.5em; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: 0.4em; }
.article-body a { color: var(--color-leier-blue); }
.article-body img { max-width: 100%; height: auto; }

/* --- Document filter selects --- */
.reffilter__select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 2px 0 0; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-body-md); color: var(--color-text-primary); width: 100%; cursor: pointer; outline: none; display: block; }

/* ===== WYSIWYG naslovi: <strong> = plavi accent + podvlaka (zamjena za heading_accent polja) ===== */
.hero-full-bleed__title strong,
.contact-hero__title strong,
.section__title strong,
.section-header__heading strong,
.category-card__title strong,
.product-hero__title strong {
  color: var(--color-leier-blue);
  text-decoration: underline;
  text-decoration-color: var(--color-leier-blue);
  text-decoration-thickness: 0.13em;
  text-underline-offset: 0.15em;
  font-style: normal;
  font-weight: inherit;
}
.section--dark .section__title strong,
.section--blue .section__title strong {
  color: var(--color-blue-light);
  text-decoration-color: var(--color-on-dark-primary);
}
.hero-full-bleed__title strong {
  text-decoration-color: var(--color-on-dark-primary);
  text-decoration-thickness: clamp(6px, 0.9vw, 13px);
  text-underline-offset: 0.05em;
}
/* ===== PRODUCT INDEX (Svi sustavi i proizvodi) ===== */
.product-index__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 1rem + 2vw, 48px) var(--gap-grid); }
.product-index__col { display: flex; flex-direction: column; }
.product-index__col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--color-text-primary); }
.product-index__col-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-sm); letter-spacing: -0.02em; line-height: 1; color: var(--color-text-primary); }
.product-index__col-count { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-muted); }
.product-index__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.product-index__item a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); transition: color 0.15s; }
.product-index__item a:hover { color: var(--color-leier-blue); }
.product-index__item-count { flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); }
.product-index__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: var(--color-leier-blue); }
.product-index__cta:hover { gap: 11px; }
@media (max-width: 1023px) { .product-index__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .product-index__grid { grid-template-columns: 1fr; } .product-index__col { grid-column: auto; } }
/* Specijalizirani sustavi cards: shallower thumbnails + smaller title (per design) */
.category-grid--secondary .category-card__media,
.category-grid--secondary .category-card__media--placeholder { height: auto; aspect-ratio: 5 / 4; }
.category-grid--secondary .category-card__title { font-size: var(--fs-title-sm); line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; }
.category-grid--secondary .category-card__body { padding: 22px 4px 8px; gap: 12px; }

/* === Unificirani dropdowni — izgled kao .ucalc__select (Kalkulator U-vrijednosti) === */
.reffilter__select,
.dealer-locator__filter-select,
.contact-form__topic-select {
	-webkit-appearance: none; appearance: none;
	display: block; width: 100%; margin: 0;
	padding: 14px 40px 14px 16px;
	font-family: var(--font-body); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2;
	color: var(--color-text-primary);
	background-color: var(--color-white-warm);
	border: 1px solid var(--color-border); border-radius: 0; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23006fba' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
	transition: border-color 160ms ease;
}
.reffilter__select:focus,
.dealer-locator__filter-select:focus,
.contact-form__topic-select:focus { outline: none; border-color: var(--color-leier-blue); }
.reffilter__select option,
.dealer-locator__filter-select option,
.contact-form__topic-select option { color: var(--color-text-primary); }
.reffilter__field { display: block; background: transparent; border: 0; padding: 0; }
.reffilter__field > span:not(.reffilter__arrow) { display: block; }
.dealer-locator__filter { display: block; background: transparent; padding: 0; }
.dealer-locator__filter-main { display: block; }
.contact-form__topic { display: block; background: transparent; padding: 0; }
.reffilter__arrow, .dealer-locator__filter-arrow { display: none; }
.reffilter__field-label, .dealer-locator__filter-label, .contact-form__topic-label { display: block; margin-bottom: 8px; }
.contact-form__topic-label { color: var(--color-text-muted); }

/* === Karijera + Poslovi === */
.hero-full-bleed--page { background-color: var(--color-leier-blue); min-height: clamp(360px, 32vw, 460px); }
.karijera-intro { max-width: 760px; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 18px; }
.karijera-intro p { margin: 0; }
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid, 20px); }
@media (max-width: 1023px) { .jobs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .jobs { grid-template-columns: 1fr; } }
.job-card { display: flex; flex-direction: column; gap: 14px; background: var(--color-white-warm); border: 1px solid var(--color-border); padding: clamp(22px, 1.4vw, 30px); text-decoration: none; color: inherit; transition: border-color 160ms ease, transform 160ms ease; }
.job-card:hover { border-color: var(--color-leier-blue); transform: translateY(-2px); }
.job-card__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.job-card__status { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; padding: 4px 10px; }
.job-card__status--otvoreno { background: var(--color-leier-blue); color: #fff; }
.job-card__status--zatvoreno { background: var(--color-gray-light); color: var(--color-text-muted); }
.job-card__kicker { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-muted); }
.job-card__title { font-family: var(--font-display); font-size: var(--fs-title-sm, 1.375rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.job-card__chip { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-secondary); border: 1px solid var(--color-border); padding: 4px 10px; }
.job-card__link { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); }
.jobs__empty { font-family: var(--font-body); color: var(--color-text-secondary); }
.job-hero__pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-leier-blue); margin-bottom: 18px; }
.job-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-leier-blue); display: inline-block; }
.job-hero__dot--zatvoreno { background: var(--color-text-muted); }
.job-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 1rem + 3.4vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0 0 18px; }
.job-hero__lede { max-width: 640px; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 30px; }
.job-hero__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.job-meta-card { background: #fff; border: 1px solid var(--color-border); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.job-meta-card__label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-muted); }
.job-meta-card__val { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-text-primary); }
.job-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3vw, 56px); }
@media (max-width: 768px) { .job-body { grid-template-columns: 1fr; } }
.job-block__title { font-family: var(--font-display); font-size: var(--fs-title-sm, 1.375rem); font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 6px 0 18px; }
.job-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.job-list li { position: relative; padding-left: 26px; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; color: var(--color-text-secondary); }
.job-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--color-leier-blue); }
.karijera-cta__lede, .job-apply__text { max-width: 640px; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--color-on-dark-secondary); margin: 0 0 26px; }
.job-apply__text a, .job-apply__text strong { color: var(--color-on-dark-primary); }
.karijera-cta__row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.karijera-cta__addr { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-on-dark-secondary); }
.karijera-cta__back { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--color-on-dark-secondary); text-decoration: none; }
.karijera-cta__back:hover { color: var(--color-on-dark-primary); }
.job-apply__note { margin-top: 26px; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.5; color: var(--color-on-dark-muted); max-width: 640px; }
.btn--light { background: var(--color-white-warm); color: var(--color-leier-blue); border: 0; }
.btn--light:hover { background: #fff; }
.karijera-hero__title { font-size: var(--text-display-lg, var(--text-display-md)); }
.karijera-stats__item { padding: 6px 0; }
.karijera-stats__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1rem + 2.2vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-on-dark-primary); }
.karijera-stats__num sup { font-size: 0.45em; font-weight: 700; vertical-align: super; }
.karijera-stats__label { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-on-dark-secondary); margin-top: 8px; }

/* === Pretraga === */
.site-header__search { text-decoration: none; color: inherit; cursor: pointer; }
.contact-hero__inner--single { grid-template-columns: 1fr; align-items: start; }
.search-hero .contact-hero__inner > div { max-width: 760px; margin: 0 auto; text-align: center; }
.search-hero .contact-hero__title { max-width: none; }
.search-hero .leier-search { max-width: 560px; margin: 28px auto 0; }
.leier-search { display: flex; gap: 12px; margin-top: 28px; max-width: 640px; }
.leier-search__input { flex: 1; min-width: 0; padding: 14px 18px; font-family: var(--font-body); font-size: 1.0625rem; color: var(--color-text-primary); background: var(--color-white-warm); border: 1px solid var(--color-border-strong); border-radius: 0; outline: none; transition: border-color 0.15s ease; -webkit-appearance: none; appearance: none; }
.leier-search__input:focus { border-color: var(--color-leier-blue); }
@media (max-width: 600px) {
  /* Search form: stack so the 200px button never crams/overflows the input */
  .leier-search { flex-direction: column; }
  .leier-search .btn { width: 100%; min-width: 0; justify-content: center; }
  .search-hero .leier-search { max-width: 100%; }
  /* Long product names must wrap, never push the layout past the viewport */
  .product-hero__title { overflow-wrap: anywhere; word-break: break-word; }
}
.search-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-grid, 20px); }
@media (max-width: 768px) { .search-grid { grid-template-columns: 1fr; } }
.search-result { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 1.4vw, 28px); background: var(--color-white-warm); border: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: border-color 160ms ease, transform 160ms ease; }
.search-result:hover { border-color: var(--color-leier-blue); transform: translateY(-2px); }
.search-result__type { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-leier-blue); }
.search-result__title { font-family: var(--font-display); font-size: var(--fs-title-sm, 1.375rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0; }
.search-result__excerpt { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-secondary); margin: 0; }
.search-result__link { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-leier-blue); margin-top: 4px; }
.search-empty { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-secondary); max-width: 640px; }
.search-empty a { color: var(--color-leier-blue); }

/* === Statična / pravna stranica === */
.legal-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 1rem + 3.4vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 14px 0 0; }
.legal-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text-secondary); }
.legal-hero__meta strong { color: var(--color-text-primary); font-weight: 600; }
.legal-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-border-strong); }
.legal-body { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 4vw, 72px); align-items: start; padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
@media (max-width: 900px) { .legal-body { grid-template-columns: 1fr; } }
.legal-toc { position: sticky; top: 110px; }
@media (max-width: 900px) { .legal-toc { position: static; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); } }
.legal-toc__label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 16px; }
.legal-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-toc__list a { display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--color-border); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.35; color: var(--color-text-secondary); text-decoration: none; transition: color 140ms ease, border-color 140ms ease; }
.legal-toc__list a:hover { color: var(--color-text-primary); }
.legal-toc__list a.is-active { color: var(--color-leier-blue); border-left-color: var(--color-leier-blue); font-weight: 600; }
.legal-content { max-width: 760px; }
.legal-intro { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.7; color: var(--color-text-secondary); margin-bottom: 40px; }
.legal-section { scroll-margin-top: 110px; }
.legal-section + .legal-section { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--color-border); }
.legal-section__title { font-family: var(--font-display); font-size: var(--fs-title-md, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0 0 18px; }
.legal-section__body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-secondary); }
.legal-section__body p { margin: 0 0 1.1em; }
.legal-section__body p:last-child { margin-bottom: 0; }
.legal-section__body ul, .legal-section__body ol { margin: 0 0 1.1em; padding-left: 22px; }
.legal-section__body li { margin-bottom: 8px; }
.legal-section__body a { color: var(--color-leier-blue); }
.legal-section__body strong { color: var(--color-text-primary); }
.legal-section__body h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-text-primary); margin: 1.4em 0 0.6em; }
.legal-cbox { margin-top: 48px; padding: clamp(24px, 2vw, 36px); background: var(--color-leier-blue); color: var(--color-on-dark-primary); }
.legal-cbox__title { font-family: var(--font-display); font-size: var(--fs-title-sm, 1.375rem); font-weight: 700; letter-spacing: -0.01em; }
.legal-cbox__text { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--color-on-dark-secondary); margin: 10px 0 18px; }
.legal-cbox__contacts { display: flex; flex-wrap: wrap; gap: 20px; font-family: var(--font-display); font-weight: 700; }
.legal-cbox__email { color: #fff; text-decoration: none; }
.legal-cbox__phone { color: var(--color-on-dark-secondary); }
.news-embed { margin: 28px 0; }
.news-embed iframe { width: 100%; border: 0; display: block; }
/* Quote form: notices, file upload, honeypot */
.form-notice { border-radius: 14px; padding: 18px 22px; margin-bottom: 28px; font-size: 0.95rem; line-height: 1.55; }
.form-notice--ok { background: #eef7ee; border: 1px solid #bfe0bf; color: #1f5a2a; }
.form-notice--err { background: #fdecec; border: 1px solid #f3c2c2; color: #8a2020; }
.form-notice a { color: inherit; text-decoration: underline; }
.contact-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.file-upload { position: relative; }
.file-upload__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.file-upload__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; border: 1.5px dashed var(--color-border-strong, #c9c9c4); border-radius: 12px; background: var(--color-white-warm, #fafaf8); cursor: pointer; transition: border-color .15s, background .15s; }
.file-upload__drop:hover, .file-upload__input:focus + .file-upload__drop { border-color: var(--color-leier-blue); background: #fff; }
.file-upload__icon { font-size: 1.5rem; color: var(--color-leier-blue); line-height: 1; }
.file-upload__cta { font-weight: 600; color: var(--color-text-primary); }
.file-upload__hint { font-size: 0.8rem; color: var(--color-text-muted); }
.file-upload__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.file-upload__item { font-size: 0.82rem; color: var(--color-text-secondary); padding: 8px 12px; background: var(--color-gray-light, #f2f2ef); border-radius: 8px; word-break: break-all; }