/* --------------------------------------------------------------------------
   Inter — lokalno gostovana pisava.
   Prej se je nalagala z fonts.googleapis.com, kar je ob vsakem obisku
   poslalo IP obiskovalca Googlu (GDPR). Lokalno gostovanje to odpravi
   in prihrani dve povezavi na tujo domeno.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   M-KAISER — V3 "ATELIER"
   Čist, svež, prostoren, premium. Papir + črnilo + ena rdeča linija.
   Inter (sans-serif — naslovi + besedilo).
   ========================================================================== */

:root {
  --paper: #faf9f6;
  --paper-2: #f1efe9;
  --ink: #191a17;
  --ink-soft: #262723;
  --stone: #6f7069;
  --line: #e5e3dc;
  --line-dark: rgba(250, 249, 246, 0.14);
  --red: #e30613;
  --red-deep: #ae0003;
  --serif: "Inter", system-ui, -apple-system, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-clip: cubic-bezier(0.77, 0, 0.18, 1);
  --sec: clamp(90px, 12vw, 160px);
  --gap: clamp(24px, 4vw, 56px);
}

/* --------------------------------------------------------------------------
   Temna tema
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --paper: #111210;
  --paper-2: #191917;
  --ink: #f0efe9;
  --ink-soft: #e4e3dc;
  --stone: #9a9b94;
  --line: #2a2b28;
  --line-dark: rgba(240, 239, 233, 0.1);
}

[data-theme="dark"] .hd {
  background: rgba(17, 18, 16, 0.88);
}

/* Band in footer sta vedno temna — vse barve hardkodirane, ne sledijo temi */
[data-theme="dark"] .band,
[data-theme="dark"] .ft {
  background: #0a0b09;
  color: #f0efe9;
}

[data-theme="dark"] .band h2,
[data-theme="dark"] .ft__cta h2 { color: #f0efe9; }

[data-theme="dark"] .band p,
[data-theme="dark"] .ft__cta p { color: rgba(240, 239, 233, 0.66); }

[data-theme="dark"] .band .eyebrow--light,
[data-theme="dark"] .ft .eyebrow--light { color: #f0efe9; }

[data-theme="dark"] .band .eyebrow--light::after,
[data-theme="dark"] .ft .eyebrow--light::after { background: #f0efe9; }

[data-theme="dark"] .band .btn--paper,
[data-theme="dark"] .ft .btn--paper { background: #f0efe9; color: #111210; }

[data-theme="dark"] .band .btn--ghostlight,
[data-theme="dark"] .ft .btn--ghostlight { border-color: rgba(240, 239, 233, 0.35); color: #f0efe9; }

[data-theme="dark"] .ft__brand span { color: #f0efe9; }

/* Select dropdown options need explicit colors — browser ignores transparent in native dropdown */
[data-theme="dark"] .form select { background: var(--paper-2); }
[data-theme="dark"] .form select option { background: var(--paper-2); color: var(--ink); }

/* Gumb za preklapljanje teme */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.theme-toggle:hover { background: var(--line); }

/* Jezikovni preklopnik (izpiše ga generator, samo pri 2+ objavljenih jezikih) */
.lswitch { position: relative; flex-shrink: 0; }
.lswitch__btn {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--ink);
  padding: 8px 10px; border-radius: 4px;
  transition: background 0.2s;
}
.lswitch__btn:hover { background: var(--line); }
.lswitch__list {
  position: absolute; top: 100%; right: 0; min-width: 72px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px; display: none; z-index: 140;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.lswitch:hover .lswitch__list,
.lswitch:focus-within .lswitch__list { display: block; }
.lswitch__list a {
  display: block; padding: 7px 12px; border-radius: 4px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink);
}
.lswitch__list a:hover { background: var(--line); }
.lswitch__list a[aria-current="true"] { color: var(--red); }
.mnav__meta .lswitch { display: inline-flex; }
.mnav__meta .lswitch__list { position: static; display: inline-flex; gap: 2px; border: 0; box-shadow: none; background: transparent; padding: 0; }
.mnav__meta .lswitch__btn { display: none; }

.icon-sun { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* Native system dark mode — works without JS and without data-theme attribute */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111210;
    --paper-2: #191917;
    --ink: #f0efe9;
    --ink-soft: #e4e3dc;
    --stone: #9a9b94;
    --line: #2a2b28;
    --line-dark: rgba(240, 239, 233, 0.1);
  }
  .hd { background: rgba(17, 18, 16, 0.88); }
  .band, .ft { background: #0a0b09; color: #f0efe9; }
  .band h2, .ft__cta h2 { color: #f0efe9; }
  .band p, .ft__cta p { color: rgba(240, 239, 233, 0.66); }
  .band .eyebrow--light, .ft .eyebrow--light { color: #f0efe9; }
  .band .eyebrow--light::after, .ft .eyebrow--light::after { background: #f0efe9; }
  .band .btn--paper, .ft .btn--paper { background: #f0efe9; color: #111210; }
  .band .btn--ghostlight, .ft .btn--ghostlight { border-color: rgba(240, 239, 233, 0.35); color: #f0efe9; }
  .ft__brand span { color: #f0efe9; }
  .form select { background: #191917; }
  .form select option { background: #191917; color: #f0efe9; }
  .icon-sun { display: block; }
  .icon-moon { display: none; }
}

/* Explicit light override — user manually chose light, overrides system dark */
[data-theme="light"] {
  --paper: #faf9f6;
  --paper-2: #f1efe9;
  --ink: #191a17;
  --ink-soft: #262723;
  --stone: #6f7069;
  --line: #e5e3dc;
  --line-dark: rgba(250, 249, 246, 0.14);
}
[data-theme="light"] .hd { background: rgba(250, 249, 246, 0.86); }
[data-theme="light"] .band, [data-theme="light"] .ft { background: #1a1c18; color: #f0efe9; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* Atribut hidden mora vedno skriti element. Brez tega pravila ga povozijo
   avtorjevi slogi z lastnim display (npr. .btn { display: inline-flex }),
   zato gumbi, ki jim JS nastavi hidden, ostanejo vidni. */
[hidden] { display: none !important; }

::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}

h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); }
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--red); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; }
h4 { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; }

.wrap { width: min(1280px, calc(100% - clamp(40px, 7vw, 128px))); margin-inline: auto; }
.wrap--narrow { width: min(820px, calc(100% - clamp(40px, 7vw, 128px))); margin-inline: auto; }

.sec { padding-block: var(--sec); }
.sec--tight { padding-block: calc(var(--sec) * 0.6); }
.sec--alt { background: var(--paper-2); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.65; color: var(--stone); max-width: 56ch; }

/* --------------------------------------------------------------------------
   Nadnaslov (eyebrow) z indeksom in linijo
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  margin-bottom: clamp(20px, 3vw, 34px);
}

.eyebrow i { font-style: normal; color: var(--red); }

.eyebrow::after {
  content: "";
  height: 1px;
  width: 64px;
  background: var(--ink);
  opacity: 0.35;
  transform-origin: left;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }
.eyebrow--light { color: var(--paper); }
.eyebrow--light::after { background: var(--paper); }

/* --------------------------------------------------------------------------
   Gumbi in povezave
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 32px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.btn .arr { transition: transform 0.3s var(--ease-out); }
.btn:hover .arr { transform: translateX(5px); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--red); color: #fff; }

.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-deep); }

.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--red); color: #fff; }

.btn--ghostlight { border-color: var(--line-dark); color: var(--paper); }
.btn--ghostlight:hover { border-color: var(--paper); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.94rem;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: color 0.25s, border-color 0.25s;
}

.tlink .arr { transition: transform 0.3s var(--ease-out); }
.tlink:hover { color: var(--red); border-color: var(--red); }
.tlink:hover .arr { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Glava
   -------------------------------------------------------------------------- */

.hd {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(250, 249, 246, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.hd.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(25, 26, 23, 0.02); }

.hd__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 86px; }

.hd__brand { display: flex; align-items: center; gap: 13px; }
.hd__brand img { width: 32px; height: auto; }
.hd__brand span {
  font-family: var(--sans);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hd__nav ul { display: flex; gap: clamp(8px, 1.6vw, 26px); }
/* Spustni meni mora biti navpicen — pravilo zgoraj velja za vse sezname
   v navigaciji, zato ga je treba tu izrecno preglasiti. */
.hd__nav ul.dd, .hd__nav ul.dd__seznam { display: block; gap: 0; }

.hd__nav a {
  position: relative;
  display: block;
  padding: 10px 4px;
  font-size: 0.93rem;
  font-weight: 500;
  white-space: nowrap;
}

.hd__nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--ink);
  transition: right 0.35s var(--ease-out);
}

.hd__nav > ul > li > a:hover::after,
.hd__nav > ul > li > a[aria-current="page"]::after { right: 4px; }

/* spustni meni */
.has-dd { position: relative; }

.dd {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 250px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(25, 26, 23, 0.1);
  padding: 10px;
  padding-top: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0s 0.22s;
}

.has-dd:hover .dd, .has-dd:focus-within .dd {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0s;
}

.dd a { padding: 12px 14px; font-size: 0.92rem; transition: background 0.2s, color 0.2s; }
.dd a:hover { background: var(--paper-2); color: var(--red); }

/* Spustni meni v obliki vrstic — pomanjsana razlicica sekcije "Kaj gradimo".
   Selektor .dd a.ddrow je nujen, da premaga .dd a zgoraj (ta velja za
   preprosti spustni meni Materiali, ki ostaja nespremenjen). */
.dd--plosca {
  display: grid;
  grid-template-columns: 300px clamp(190px, 16vw, 240px);
  gap: 14px;
  min-width: 0;
  padding: 12px;
}
.dd__seznam { min-width: 0; }

/* Fiksna kvadratna slika ob seznamu */
.dd__slika {
  position: relative;          /* raztegne se cez celo visino plosce */
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-2);
}
.dd__slika img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.dd__slika img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dd__slika img { transition: none; } }

.dd a.ddrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  font-size: 0.95rem;
  border-top: 1px solid var(--line);
  transition: padding-left 0.32s var(--ease-out), background 0.2s;
}
.dd--plosca li:first-child a.ddrow { border-top: 0; }

/* Ikona namesto zaporedne stevilke — iste ikone kot v obrazcu */
.ddrow__ico { display: flex; color: var(--stone); transition: color 0.25s; }
.ddrow__ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ddrow__body { display: flex; min-width: 0; }
.ddrow__body > span {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.25s;
}
.ddrow__arr {
  color: var(--stone);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.3s;
}

.dd a.ddrow:hover { background: var(--paper-2); padding-left: 20px; }
.dd a.ddrow:hover .ddrow__body > span { color: var(--red); }
.dd a.ddrow:hover .ddrow__ico { color: var(--red); }
.dd a.ddrow:hover .ddrow__arr { opacity: 1; transform: none; color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .dd a.ddrow, .ddrow__arr { transition: none; }
  .dd a.ddrow:hover { padding-left: 14px; }
}

.hd__right { display: flex; align-items: center; gap: 22px; }

.hd__tel { font-size: 0.93rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: color 0.2s; white-space: nowrap; }
.hd__tel:hover { color: var(--red); }

.hd__cta { padding: 13px 24px; }

/* hamburger */
.burger { display: none; position: relative; width: 44px; height: 44px; z-index: 130; }
.burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), background 0.3s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* mobilni meni — celozaslonski */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 84px clamp(28px, 8vw, 64px) 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(127,127,127,.35) transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.mnav::-webkit-scrollbar { width: 5px; }
.mnav::-webkit-scrollbar-track { background: transparent; }
.mnav::-webkit-scrollbar-thumb { background: rgba(127,127,127,.35); border-radius: 4px; }
.mnav::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,.55); }

.mnav__close {
  position: fixed;
  top: 20px;
  right: clamp(20px, 6vw, 48px);
  z-index: 121;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--paper);
  border-radius: 50%;
  transition: background 0.2s;
}
.mnav__close:hover { background: var(--line); }

body.menu-open .mnav { opacity: 1; visibility: visible; }

.mnav a {
  display: block;
  font-family: var(--sans);
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.2s;
}

.mnav a:hover { color: var(--red); }

body.menu-open .mnav a { opacity: 1; transform: none; }
body.menu-open .mnav a:nth-child(1) { transition-delay: 0.06s; }
body.menu-open .mnav a:nth-child(2) { transition-delay: 0.1s; }
body.menu-open .mnav a:nth-child(3) { transition-delay: 0.14s; }
body.menu-open .mnav a:nth-child(4) { transition-delay: 0.18s; }
body.menu-open .mnav a:nth-child(5) { transition-delay: 0.22s; }
body.menu-open .mnav a:nth-child(6) { transition-delay: 0.26s; }
body.menu-open .mnav a:nth-child(7) { transition-delay: 0.3s; }
body.menu-open .mnav a:nth-child(8) { transition-delay: 0.34s; }
body.menu-open .mnav a:nth-child(9) { transition-delay: 0.38s; }

.mnav__meta {
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--stone);
  opacity: 0;
  transition: opacity 0.5s 0.4s;
}
body.menu-open .mnav__meta { opacity: 1; }
.mnav__meta a { font-family: var(--sans); font-size: inherit; border: 0; padding: 0; display: inline; opacity: 1; transform: none; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Hero — domov
   -------------------------------------------------------------------------- */

.hero { padding-top: clamp(56px, 9vw, 120px); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap);
  align-items: end;
}

.hero h1 { margin: 0 0 clamp(24px, 3vw, 40px); }
.hero h1 em { font-style: italic; font-weight: 480; color: var(--red); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }

.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.hero__media figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stone);
}

/* statistika pod herojem */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats > div { padding: clamp(28px, 4vw, 48px) clamp(16px, 2.5vw, 40px); border-left: 1px solid var(--line); }
.stats > div:first-child { border-left: 0; }

.stats b {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(3.6rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.stats b i { font-style: normal; color: var(--red); font-size: 0.55em; }
.stats > div > span { display: block; margin-top: 14px; font-size: 0.86rem; color: var(--stone); }

/* tekoči trak */
.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
  user-select: none;
}

.marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 38s linear infinite;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--stone);
  white-space: nowrap;
}

.marquee__track i { font-style: normal; color: var(--red); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Hero — podstrani
   -------------------------------------------------------------------------- */

.phero { padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 80px); }
.phero h1 { max-width: 16ch; margin-bottom: clamp(20px, 3vw, 32px); }
.phero .lead { max-width: 62ch; }

.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: var(--stone); margin-bottom: clamp(24px, 4vw, 44px); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 10px; opacity: 0.5; }
.crumbs a:hover { color: var(--red); }

.phero__media { margin-top: clamp(36px, 6vw, 72px); }
.phero__media img { width: 100%; aspect-ratio: 3 / 2; max-height: min(78vh, 720px); object-fit: cover; object-position: center 45%; }

/* --------------------------------------------------------------------------
   Naslovi sekcij
   -------------------------------------------------------------------------- */

.sechead { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.sechead h2 { max-width: 18ch; }
.sechead .tlink { margin-bottom: 8px; }
.sechead p { max-width: 52ch; color: var(--stone); margin-top: 16px; }

/* --------------------------------------------------------------------------
   Kartice ponudbe — editorial, cela kartica je povezava
   -------------------------------------------------------------------------- */

.offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }

.ocard { position: relative; }

.ocard .img-reveal { aspect-ratio: 4 / 5; }
.ocard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ocard:hover img { transform: scale(1.045); }

.ocard__body { padding-top: 22px; }

.ocard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.ocard__top h3 { transition: color 0.25s; }
.ocard:hover h3 { color: var(--red); }

.ocard__price { font-size: 0.82rem; font-weight: 600; white-space: nowrap; color: var(--stone); font-variant-numeric: tabular-nums; }
.ocard__price b { color: var(--ink); font-weight: 600; }

.ocard p { margin-top: 10px; font-size: 0.96rem; color: var(--stone); }

.ocard__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; font-size: 0.9rem; }
.ocard__go .arr { transition: transform 0.3s var(--ease-out); }
.ocard:hover .ocard__go .arr { transform: translateX(6px); }
.ocard:hover .ocard__go { color: var(--red); }

.ocard > a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* --------------------------------------------------------------------------
   Zakaj mi — lepljiv levi stolpec + številčen seznam
   -------------------------------------------------------------------------- */

.why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap); align-items: start; }

.why__sticky { position: sticky; top: 130px; }
.why__sticky h2 { max-width: 14ch; }
.why__sticky p { margin-top: 20px; color: var(--stone); max-width: 44ch; }

.wlist > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: clamp(16px, 3vw, 36px);
  padding-block: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}

.wlist > div:last-child { border-bottom: 1px solid var(--line); }

.wlist i {
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--red);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Ikona namesto zaporedne stevilke */
.wlist__ico { display: block; color: var(--red); }
.wlist__ico svg {
  width: clamp(30px, 3.4vw, 42px);
  height: clamp(30px, 3.4vw, 42px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wlist h3 { margin-bottom: 10px; }
.wlist p { color: var(--stone); font-size: 0.98rem; max-width: 52ch; }

/* --------------------------------------------------------------------------
   Proces — 4 koraki
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5vw, 36px); }

.step { border-top: 1px solid var(--ink); padding-top: 22px; }
.step i { display: block; font-family: var(--sans); font-style: normal; font-size: 1.05rem; color: var(--red); margin-bottom: clamp(20px, 4vw, 48px); }
.step h3 { font-size: 1.22rem; margin-bottom: 10px; }
.step p { font-size: 0.94rem; color: var(--stone); }
.step b { display: block; margin-top: 14px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); }

/* --------------------------------------------------------------------------
   Uredniške vrstice (slika + besedilo, izmenično)
   -------------------------------------------------------------------------- */

.edrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(36px, 6vw, 72px);
}

.edrow + .edrow { border-top: 1px solid var(--line); }

.edrow:nth-child(even) .edrow__media { order: 2; }

.edrow__media .img-reveal { aspect-ratio: 4 / 3; }
.edrow__media img { width: 100%; height: 100%; object-fit: cover; }

.edrow h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 16px; }
.edrow .price { display: inline-block; margin-bottom: 18px; font-size: 0.86rem; font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; }
.edrow p { color: var(--stone); max-width: 50ch; }
.edrow ul { margin-top: 18px; display: grid; gap: 9px; }
.edrow li { position: relative; padding-left: 22px; font-size: 0.96rem; color: var(--ink-soft); }
.edrow li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 1px; background: var(--red); }
.edrow .tlink { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Galerija
   -------------------------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 32px); }

.gallery figure { position: relative; overflow: hidden; }
.gallery figure.je-skrit { display: none; }
.gal-vec { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
.gal-vec button { min-width: 220px; }
.gallery a { display: block; }

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.gallery figure:hover img { transform: scale(1.05); }

.gallery figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 2px 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.gallery .loc { font-size: 0.8rem; font-weight: 500; color: var(--stone); letter-spacing: 0.02em; }

/* filtri galerije */
.gfilter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 5vw, 56px); }

.gfilter button {
  padding: 11px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}

.gfilter button:hover { border-color: var(--ink); }
.gfilter button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Citat / mnenja
   -------------------------------------------------------------------------- */

.quote { max-width: 880px; margin-inline: auto; text-align: center; }

.quote blockquote {
  font-family: var(--sans);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.quote blockquote::before { content: "„"; color: var(--red); }
.quote blockquote::after { content: "“"; color: var(--red); }

.quote figcaption { margin-top: 28px; font-size: 0.86rem; color: var(--stone); }
.quote figcaption b { display: block; color: var(--ink); font-size: 0.95rem; }

.quote .stars { color: var(--red); letter-spacing: 6px; margin-bottom: 22px; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Blog kartice
   -------------------------------------------------------------------------- */

.posts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }

.post { position: relative; }
.post .img-reveal { aspect-ratio: 16 / 9; }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.post:hover img { transform: scale(1.04); }

.post__body { padding-top: 20px; }
.post__meta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone); }
.post__meta i { font-style: normal; color: var(--red); }
.post h3 { margin-top: 12px; max-width: 24ch; transition: color 0.25s; }
.post:hover h3 { color: var(--red); }
.post p { margin-top: 12px; color: var(--stone); font-size: 0.97rem; max-width: 56ch; }
.post > a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* --------------------------------------------------------------------------
   Članek
   -------------------------------------------------------------------------- */

.article { max-width: 760px; margin-inline: auto; }
.article > * + * { margin-top: 1.35em; }

.article h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.article h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-top: 2em; }
.article h3 { font-size: 1.18rem; margin-top: 1.8em; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }
.article p, .article li { color: var(--ink-soft); }
.article a { border-bottom: 1px solid var(--red); transition: color 0.2s; }
.article a:hover { color: var(--red); }

.article ul, .article ol { padding-left: 6px; display: grid; gap: 10px; }
.article ul li { position: relative; padding-left: 24px; }
.article ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 13px; height: 1px; background: var(--red); }
.article ol { counter-reset: n; }
.article ol li { position: relative; padding-left: 34px; counter-increment: n; }
.article ol li::before { content: counter(n) "."; position: absolute; left: 0; font-family: var(--sans); color: var(--red); }

.article table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.article th { text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 13px 14px; border-bottom: 1px solid var(--ink); }
.article td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.article tr td:last-child { font-variant-numeric: tabular-nums; }

.article .note { border-left: 2px solid var(--red); background: var(--paper-2); padding: 22px 26px; font-size: 0.97rem; }

.article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.article-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone); }
.article-meta i { font-style: normal; color: var(--red); }

/* --------------------------------------------------------------------------
   FAQ — harmonika
   -------------------------------------------------------------------------- */

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

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

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: clamp(22px, 3vw, 32px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  transition: color 0.25s;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }

.faq summary .x {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
}

.faq summary .x::before, .faq summary .x::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out);
}

.faq summary .x::after { transform: rotate(90deg); }
.faq details[open] summary .x::after { transform: rotate(0deg); }
.faq details[open] summary { color: var(--red); }

.faq .a { padding: 0 0 clamp(22px, 3vw, 32px); color: var(--stone); max-width: 64ch; }
.faq .a a { border-bottom: 1px solid var(--red); }

/* --------------------------------------------------------------------------
   Tabele primerjav (kritine, konstrukcije)
   -------------------------------------------------------------------------- */

.cmp { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cmp th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 14px 16px; border-bottom: 1px solid var(--ink); }
.cmp td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp td:first-child { font-weight: 600; }
.cmp .dot { color: var(--red); }

/* --------------------------------------------------------------------------
   Temna pasica CTA (vmesna)
   -------------------------------------------------------------------------- */

.band {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(64px, 9vw, 120px);
}

.band h2 { color: var(--paper); max-width: 22ch; }
.band h2 em { font-style: italic; color: var(--red); }
.band p { color: rgba(250, 249, 246, 0.66); max-width: 54ch; margin-top: 18px; }
.band__in { display: grid; grid-template-columns: 1.2fr auto; gap: var(--gap); align-items: center; }
.band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   Kontakt — obrazec
   -------------------------------------------------------------------------- */

.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }

/* Konfigurator v okvirju z rahlim ozadjem, da se loči od strani */
.form--okvir {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(22px, 3.5vw, 44px);
}
[data-theme="dark"] .form--okvir { border-color: rgba(240, 239, 233, 0.09); }
@media (prefers-color-scheme: dark) {
  .form--okvir { border-color: rgba(240, 239, 233, 0.09); }
}
[data-theme="light"] .form--okvir { border-color: var(--line); }

/* Polja v okvirju morajo biti vidna sama po sebi, ne sele ob kliku.
   Zato dobijo polno ozadje, ki se loci od plosce, in vidno obrobo.
   Barve so navedene za obe temi po vzorcu ostale datoteke. */
.form.form--okvir input,
.form.form--okvir select,
.form.form--okvir textarea {
  background: #ffffff;
  border-color: rgba(25, 26, 23, 0.20);
  color: var(--ink);
}
.form.form--okvir input::placeholder,
.form.form--okvir textarea::placeholder { color: rgba(25, 26, 23, 0.42); }

@media (prefers-color-scheme: dark) {
  .form.form--okvir input,
  .form.form--okvir select,
  .form.form--okvir textarea {
    background: rgba(240, 239, 233, 0.07);
    border-color: rgba(240, 239, 233, 0.22);
  }
  .form.form--okvir input::placeholder,
  .form.form--okvir textarea::placeholder { color: rgba(240, 239, 233, 0.42); }
}

[data-theme="dark"] .form.form--okvir input,
[data-theme="dark"] .form.form--okvir select,
[data-theme="dark"] .form.form--okvir textarea {
  background: rgba(240, 239, 233, 0.07);
  border-color: rgba(240, 239, 233, 0.22);
}
[data-theme="dark"] .form.form--okvir input::placeholder,
[data-theme="dark"] .form.form--okvir textarea::placeholder { color: rgba(240, 239, 233, 0.42); }

[data-theme="light"] .form.form--okvir input,
[data-theme="light"] .form.form--okvir select,
[data-theme="light"] .form.form--okvir textarea {
  background: #ffffff;
  border-color: rgba(25, 26, 23, 0.20);
}

.form.form--okvir input:hover,
.form.form--okvir select:hover,
.form.form--okvir textarea:hover { border-color: var(--red); }

.form.form--okvir input:focus,
.form.form--okvir select:focus,
.form.form--okvir textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.18);
}
.form .full { grid-column: 1 / -1; }

.form label, .form legend {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 9px;
}

.form input, .form select, .form textarea {
  width: 100%;
  padding: 15px 16px;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.25s;
}

.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form textarea { min-height: 130px; resize: vertical; }

.form fieldset { border: 0; }

/* Izbire v obrazcu: enako široke kartice v mreži, da so berljive in
   se ne zlijejo v strnjeno vrsto značk. */
.choice-group {
  display: grid;
  /* Najvec 4 stolpci: spodnja meja je vecja od 205 px in cetrtine razpolozljive
     sirine, zato se na sirokih zaslonih ustavi pri stirih, na ozjih pa sama
     preide na 3, 2 ali 1 stolpec. */
  grid-template-columns: repeat(auto-fit, minmax(max(205px, calc((100% - 30px) / 4)), 1fr));
  gap: 10px;
}

.choice { position: relative; }
.choice[hidden] { display: none; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }

.choice > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 78px;
  padding: 15px 17px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}

/* Ikona ob izbiri — pomaga hitremu razlikovanju med možnostmi */
.choice__ico {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--stone);
  transition: color 0.25s;
}
.choice:hover .choice__ico { color: var(--ink); }
.choice input:checked + span .choice__ico { color: #fff; }

.choice__txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.choice small {
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--stone);
  letter-spacing: 0.01em;
}
.choice:hover span { border-color: var(--ink); }
.choice input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.choice input:checked + span small { color: rgba(255, 255, 255, 0.78); }
.choice input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

/* Legenda nad skupino izbir naj se loči od oznak polj */
/* Naslovi sklopov v obrazcu prevzamejo jezik nadnaslovov na strani:
   verzalke, razmaknjene crke in tanka crta ob strani. */
.form fieldset legend {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
}
.form fieldset legend::after {
  content: "";
  flex: 0 0 auto;
  height: 1px;
  width: 64px;
  background: var(--ink);
  opacity: 0.35;
}
.form fieldset { padding-block: clamp(4px, 1vw, 10px); }
.form fieldset + fieldset { margin-top: clamp(40px, 5vw, 62px); }

@media (max-width: 560px) {
  .choice-group { grid-template-columns: 1fr 1fr; gap: 8px; }
  .choice > span { min-height: 64px; padding: 12px 12px; gap: 9px; font-size: 0.9rem; }
  .choice__ico { width: 25px; height: 25px; }
}

/* Past za bote: za cloveka nedosegljiva, a ne display:none, ker
   nekateri boti taka polja preskocijo. */
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 0.84rem; color: var(--stone); }
.form-success { font-weight: 600; color: #1a7a3a; }

/* Koraki obrazca */
.fsteps {
  display: flex;
  align-items: flex-start;
  margin-top: clamp(8px, 1.5vw, 20px);
  margin-bottom: clamp(48px, 6vw, 76px);
}

.fstep-dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.fstep-dot::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 1px;
  background: var(--line);
  transition: background 0.3s;
}
.fstep-dot:last-child::after { display: none; }
.fstep-dot.done::after { background: var(--red); }

.fstep-dot span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  color: var(--stone);
}

.fstep-dot small {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone);
  text-align: center;
  transition: color 0.3s;
}

.fstep-dot.active span { background: var(--red); border-color: var(--red); color: #fff; }
.fstep-dot.active small { color: var(--ink); }
.fstep-dot.done span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fstep-dot.done small { color: var(--ink); }

/* Paneli korakov */
.fstep {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
  animation: fadeUp 0.35s var(--ease-out) both;
}
.fstep--active, .fstep.fstep--active { display: grid; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Validacija — polje z napako */
.form input.finvalid, .form select.finvalid, .form textarea.finvalid { border-color: var(--red); }
.fstep fieldset.finvalid > legend { color: var(--red); }
.finvalid-msg { font-size: 0.82rem; color: var(--red); margin-top: 6px; display: none; }
.finvalid .finvalid-msg { display: block; }

/* Navigacijski gumbi */
.fnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.fnav__back { margin-right: auto; }
.fnav__next { margin-left: auto; }

/* Nalaganje datotek */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px;
  border: 1.5px dashed var(--line);
  border-radius: 4px;
  color: var(--stone);
  font-size: 0.94rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--red); background: rgba(227, 6, 19, 0.04); }
.upload-zone p { margin: 0; }
.upload-link { color: var(--red); text-decoration: underline; }
.upload-hint { font-size: 0.8rem; opacity: 0.7; }

.upload-list { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.upload-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--paper-2);
  border-radius: 3px;
  font-size: 0.9rem;
}
.upload-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-list li button {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--stone);
  transition: color 0.2s;
}
.upload-list li button:hover { color: var(--red); }

/* Izbirnik galerije */
.gpick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.gpick__loading { color: var(--stone); font-size: 0.9rem; }
.gpick figure {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  margin: 0;
}
.gpick figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; display: block; }
.gpick figure:hover img { transform: scale(1.05); }
.gpick figure.selected { border-color: var(--red); }
.gpick figure.selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gpick__zoom {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s;
}
.gpick figure:hover .gpick__zoom,
.gpick__zoom:focus-visible { opacity: 1; }
.gpick__zoom:hover { background: var(--red); }
.gpick__count {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
}
.gpick figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  font-size: 0.74rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.2s;
}
.gpick figure:hover figcaption { opacity: 1; }

.cbox { border-top: 1px solid var(--ink); }
.cbox > div { padding-block: 26px; border-bottom: 1px solid var(--line); }
.cbox h3 { font-size: 0.78rem; font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; }
.cbox p { color: var(--stone); font-size: 0.97rem; }
.cbox a { font-weight: 600; color: var(--ink); }
.cbox a:hover { color: var(--red); }

/* Vodoravna razlicica za sirse strani (npr. O podjetju) */
.cbox--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cbox--grid > div { border-bottom: 0; padding-right: clamp(20px, 3vw, 56px); }
@media (max-width: 700px) {
  .cbox--grid > div { border-bottom: 1px solid var(--line); padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Noga — temna, velik napis
   -------------------------------------------------------------------------- */

.ft { background: var(--ink); color: var(--paper); padding-top: clamp(48px, 6vw, 88px); overflow: hidden; }

.ft__cta { max-width: 920px; margin-bottom: clamp(56px, 8vw, 100px); }
.ft__cta h2 { color: var(--paper); margin-top: 0; }
.ft__cta h2 em { font-style: italic; color: var(--red); }
.ft__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 44px); }

.ft__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.ft:has(.ft__cta) .ft__grid { padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line-dark); }

.ft__grid h4 { color: rgba(250, 249, 246, 0.5); margin-bottom: 18px; }
.ft__grid ul { display: grid; gap: 11px; }
.ft__grid a { color: rgba(250, 249, 246, 0.82); font-size: 0.95rem; transition: color 0.2s; }
.ft__grid a:hover { color: var(--red); }
.ft__grid li { color: rgba(250, 249, 246, 0.82); font-size: 0.95rem; }
.ft__grid p { color: rgba(250, 249, 246, 0.6); font-size: 0.95rem; max-width: 34ch; }

.ft__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ft__brand img { width: 30px; }
.ft__brand span { font-family: var(--sans); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; }

.ft__btm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8rem;
  color: rgba(250, 249, 246, 0.45);
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 21, 18, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.lbox.open { opacity: 1; visibility: visible; }
.lbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lbox button { position: absolute; top: 22px; right: 28px; color: #fff; font-size: 2rem; line-height: 1; padding: 8px; }

/* --------------------------------------------------------------------------
   Mobilna lepljiva vrstica
   -------------------------------------------------------------------------- */

.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}

.mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; font-size: 0.92rem; font-weight: 600; }
.mbar a:first-child { background: var(--paper); color: var(--ink); }
.mbar a:last-child { background: var(--red); color: #fff; }

/* --------------------------------------------------------------------------
   Animacije ob drsenju
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}

[data-reveal].in-view { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

[data-stagger].in-view > * { opacity: 1; transform: none; }
[data-stagger].in-view > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 0.13s; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 0.21s; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 0.29s; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 0.37s; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 0.45s; }
[data-stagger].in-view > *:nth-child(7) { transition-delay: 0.53s; }
[data-stagger].in-view > *:nth-child(8) { transition-delay: 0.61s; }

.img-reveal { overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--ease-clip); transition-delay: var(--d, 0s); }
.img-reveal img { transform: scale(1.14); transition: transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.img-reveal.in-view { clip-path: inset(0 0 0 0); }
.img-reveal.in-view img { transform: scale(1); }

/* slike v karticah z lastnim hover zoomom: hover preglasi reveal po koncu */
.ocard .img-reveal.in-view img, .post .img-reveal.in-view img { transition: transform 0.9s var(--ease-out); }

.hr-draw { height: 1px; background: var(--ink); opacity: 0.3; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-clip); }
.hr-draw.in-view { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Odzivnost
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .hd__tel { display: none; }
}

@media (max-width: 1060px) {
  .why__sticky { position: static; margin-bottom: 40px; }
  .why { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }
}

@media (max-width: 1080px) {
  .hd__nav, .hd__cta { display: none; }
  .burger { display: block; }
  .hd__in { height: 72px; }
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media img { aspect-ratio: 16 / 11; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(odd) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }

  .sechead { grid-template-columns: 1fr; align-items: start; }
  .edrow { grid-template-columns: 1fr; }
  .edrow:nth-child(even) .edrow__media { order: 0; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .band__in { grid-template-columns: 1fr; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  /* na ozkih zaslonih strop višine ni potreben — 3/2 se ohrani iz osnovnega pravila */
  .phero__media img { max-height: none; }

  .mbar { display: grid; }
  body { padding-bottom: 56px; }
  .ft { padding-bottom: 10px; }
}

@media (max-width: 560px) {
  .offer { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .wlist > div { grid-template-columns: 48px 1fr; }
}

/* --------------------------------------------------------------------------
   Zmanjšano gibanje
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .img-reveal { clip-path: none; transition: none; }
  .img-reveal img { transform: none; transition: none; }
  .hr-draw { transform: none; transition: none; }
  .marquee__track { animation: none; }
  .mnav a { transition: none; }
}