/* Naslovnica in stran z delom (»Kino«: uredniška, mirna, draga).
   Dve pisavi: Archivo Black samo za napis AGENCY 27 po vzoru logotipa
   STUDIO 27 (težka verzalka, zbito razmikanje) in Manrope: tanka (200–300)
   za velike stavke, 400–500 za tekoče besedilo, drobne razprte verzalke za
   opombe ob robovih. Ploskve se izmenjujejo: papir (vrh z ustanoviteljema),
   črna, papir, črna, barva projekta. Gibanje vodi drsenje (CSS scroll-driven,
   JS kot rezerva). */

:root {
  --black: #0a0a0a;
  --black-2: #141414;
  --paper: #ebe9e3;
  --paper-2: #e2e0d9;
  --ink: #f2f0ea;
  --ink-dark: #121210;
  --muted: #8f8d85;
  --muted-dark: #6d6b64;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.28);
  --line-dark: rgba(0, 0, 0, 0.14);
  --sans: "Manrope", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --black-face: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 64px);
  --c: #2a2a2e;
  --a: #8a8a8a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0; background: var(--black); color: var(--ink);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
figure { margin: 0; }
.k-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.k-muted { color: var(--muted); }
.k-paper .k-muted { color: var(--muted-dark); }

/* Drobne razprte verzalke: opombe ob robovih, oznake, navigacija. */
.k-caps {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em;
  line-height: 1.6; margin: 0;
}

/* --- težka znamka in tanki veliki stavki ---------------------------------- */
.k-wordmark {
  font-family: var(--black-face); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.82; font-size: clamp(52px, 13.8vw, 230px);
  margin: 0; white-space: nowrap;
}
/* Naslov povpraševanja ostane v tanki uredniški pisavi; težka je samo znamka. */
.k-wordmark--contact { font-family: var(--sans); font-weight: 200; text-transform: none; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(56px, 13vw, 210px); white-space: normal; margin-bottom: 40px; text-wrap: balance; }
.k-big {
  font-weight: 300; letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(34px, 5vw, 76px); margin: 0 0 56px; max-width: 18ch; text-wrap: balance;
}
/* Diagnoza: dva stavka, vsak v svoji vrstici (filter `sentences`). */
.k-statement {
  font-weight: 300; letter-spacing: -0.035em; line-height: 1.06;
  font-size: clamp(36px, 4.9vw, 72px); margin: 0 0 clamp(32px, 4vw, 52px); max-width: 26ch; text-wrap: pretty;
}
.k-lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--muted); margin: 0; max-width: 52ch; text-wrap: pretty; }
.k-paper .k-lead { color: var(--muted-dark); }
.k-small { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 40ch; }
.k-note { font-size: 14px; color: var(--muted-dark); margin: 0 0 8px; }
.k-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.k-actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.k-head-row { display: flex; justify-content: space-between; gap: 24px; margin-bottom: clamp(48px, 6vw, 96px); }
.k-head-row--more { margin-top: clamp(80px, 9vw, 140px); margin-bottom: 40px; }

/* --- gumbi ---------------------------------------------------------------- */
.k-btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px; text-decoration: none;
  background: var(--ink); color: var(--black) !important; font-size: 14px; font-weight: 600;
  transition: transform 250ms, box-shadow 250ms;
}
.k-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgba(255,255,255,0.5); }
.k-btn--small { padding: 9px 16px; font-size: 12.5px; }
.k-arrow { font-size: 14px; font-weight: 600; text-decoration: none; padding: 12px 0; }
.k-arrow::after { content: " →"; display: inline-block; transition: transform 250ms; }
.k-arrow:hover::after { transform: translateX(5px); }

/* --- tanka glava, vidna šele po vrhu -------------------------------------- */
.k-head {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 56px;
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter);
  background: rgba(10,10,10,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); transition: transform 400ms cubic-bezier(.2,.7,.2,1);
}
.k-head.is-on { transform: none; }
.k-head-brand { font-family: var(--black-face); font-weight: 900; font-size: 17px; letter-spacing: -0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.k-head-nav { display: flex; gap: 22px; margin-left: auto; }
.k-head-nav a { color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; transition: color 200ms; }
.k-head-nav a:hover { color: var(--ink); }

/* --- vrh: ustanovitelja pred napisom ---------------------------------------
   Tri plasti: svetla ploskev (izrez je črno-bela fotografija na svetlem
   platnu, na črnem se ne izide) → napis v <h1> → izrezana figura. Figura je
   absolutno postavljena (bottom 0, sredina), ne grid element: grid jo je na
   ozkem zaslonu potisnil iz sredine. */
.k-hero {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #f4f4f2 0%, var(--paper) 55%, var(--paper-2) 100%);
  color: var(--ink-dark);
}
.k-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.k-hero-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}
.k-hero-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; gap: 26px; align-items: center; padding: 26px var(--gutter) 0;
}
.k-hero-nav a { text-decoration: none; color: var(--ink-dark); opacity: 0.75; transition: opacity 200ms; }
.k-hero-nav a:hover { opacity: 1; }
.k-hero-nav .k-hero-cta { margin-left: auto; opacity: 1; padding: 9px 16px; border: 1px solid var(--ink-dark); border-radius: 999px; }
.k-hero-tag { position: absolute; top: 11%; left: var(--gutter); right: var(--gutter); z-index: 3; text-align: center; color: var(--muted-dark); }
/* Napis stoji ZA figurama, v višini trupa — ne nad glavama. Brez stranskega
   odmika, da gre od roba do roba; pri 15vw je 'AGENCY 27' natanko široka kot
   okno in se '27' ne odreže. */
.k-hero .k-wordmark {
  position: absolute; left: 0; right: 0; top: 45%; z-index: 1; text-align: center;
  color: var(--ink-dark); user-select: none; padding: 0;
  font-size: 15vw;
}
.k-hero-figure {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  height: 88%; width: auto; max-width: none;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.13));
}
.k-hero-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; z-index: 3;
  display: flex; justify-content: space-between; align-items: end; gap: 24px; color: var(--muted-dark);
}
.k-hero-line { max-width: 34ch; }
.k-enter { text-decoration: none; color: var(--ink-dark); white-space: nowrap; }

/* --- črne in papirnate ploskve ------------------------------------------- */
.k-black { background: var(--black); color: var(--ink); padding: clamp(96px, 11vw, 168px) 0; position: relative; }
.k-paper { background: var(--paper); color: var(--ink-dark); padding: clamp(96px, 11vw, 168px) 0; position: relative; }
.k-paper--flush { padding-bottom: 0; }
.k-paper .k-caps { color: var(--ink-dark); }
.k-paper .k-caps.k-muted { color: var(--muted-dark); }
.k-black--alt { background: var(--black-2); border-top: 1px solid var(--line); }
.k-black--projects { padding-bottom: clamp(96px, 11vw, 168px); }

/* --- diagnoza: pilula + panoge, dva stavka, letev z dejstvi --------------- */
.k-diag { padding-bottom: 0; }
.k-sectors {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin: 0 0 clamp(32px, 4vw, 48px); color: var(--muted); letter-spacing: 0.18em;
}
.k-sectors-sep { width: 1px; height: 16px; background: var(--line-strong); margin: 0 6px; }
.k-dot { color: var(--muted); }
.k-bar { margin-top: clamp(72px, 9vw, 130px); border-top: 1px solid var(--line); }
.k-bar-inner { display: grid; grid-template-columns: 160px repeat(auto-fit, minmax(0, 1fr)); align-items: center; }
.k-bar-inner > .k-caps { padding: 24px 0; }
.k-bar-item { margin: 0; padding: 22px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.k-bar-item b { font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* --- od kod znanje: svetel, dihajoč, dva stolpca potreba → zgrajeno ------- */
.k-origin { padding: clamp(120px, 14vw, 220px) 0; }
.k-origin-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.k-origin-text { position: sticky; top: 96px; }
.k-origin-text > .k-caps { margin-bottom: clamp(32px, 4vw, 56px); }
.k-origin-text .k-big { margin-bottom: 28px; max-width: 12ch; }
.k-origin-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding-bottom: 16px; }
.k-origin-list ol { list-style: none; margin: 0; padding: 0; }
.k-origin-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--line-dark); }
.k-origin-list li:last-child { border-bottom: 1px solid var(--line-dark); }
.k-need { margin: 0; font-weight: 300; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.k-built { margin: 0; font-size: 17px; line-height: 1.55; max-width: 44ch; text-wrap: pretty; padding-top: 5px; }

/* --- kaj delamo: šest programov v dveh stolpcih --------------------------- */
.k-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.k-areas li { padding: 36px 0 44px; border-top: 1px solid var(--line); }
.k-areas .k-caps { display: block; margin-bottom: 28px; }
.k-areas h3 { font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 14px; text-wrap: balance; }
.k-for { margin: 0 0 14px; font-size: 17px; font-weight: 500; color: var(--ink); max-width: 40ch; text-wrap: pretty; }
.k-area-body { margin: 0; color: var(--muted); font-size: 15px; max-width: 46ch; text-wrap: pretty; }

/* --- kdo sva: dva enakovredna profila ------------------------------------ */
.k-team-intro { margin: -24px 0 clamp(48px, 6vw, 80px); }
.k-team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; border-top: 1px solid var(--line); }
.k-team-grid li { padding: 36px 0 44px; }
.k-team-grid li + li { border-left: 1px solid var(--line); padding-left: 64px; margin-left: -64px; }
.k-team-grid .k-caps.k-muted { display: block; margin-bottom: 26px; }
.k-team-grid h3 { font-weight: 200; font-size: clamp(40px, 4.6vw, 68px); line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 14px; }
.k-team-role { color: var(--ink); margin: 0 0 18px; }
.k-team-bio { margin: 0; color: var(--muted); font-size: 16px; max-width: 46ch; text-wrap: pretty; }
.k-team-note { margin: clamp(24px, 3vw, 40px) 0 0; padding-top: 28px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 300; color: var(--muted); }

/* --- študija primera: besedilo levo, posnetka na barvi projekta desno ----- */
.k-cases { padding-bottom: 0; }
.k-cases > .k-wrap > .k-head-row { margin-bottom: clamp(32px, 4vw, 56px); }
.k-case { border-top: 1px solid var(--line); }
.k-case-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.k-case-text { padding: clamp(56px, 7vw, 110px) 0; align-self: center; }
.k-case-name { margin: 0 0 6px; font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.1; }
.k-case-name a { text-decoration: none; }
.k-case-name a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.k-case-area { margin: 0 0 clamp(28px, 3vw, 44px); color: var(--muted); font-size: 14px; }
.k-case-problem {
  margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line);
  font-weight: 300; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; text-wrap: pretty;
}
.k-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.k-tags li { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); padding: 5px 10px 4px; }
.k-case-media {
  position: relative; overflow: clip; display: grid; align-items: center;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px);
  background:
    radial-gradient(80% 90% at 70% 30%, color-mix(in oklab, var(--c) 55%, transparent), transparent 75%),
    color-mix(in oklab, var(--c) 28%, var(--black-2));
}
.k-case-media .k-frame--desktop { width: 88%; margin-left: auto; box-shadow: 0 60px 120px -40px rgba(0,0,0,0.9); }
.k-case-media .k-frame--phone { position: absolute; left: clamp(16px, 2.5vw, 40px); bottom: clamp(24px, 3vw, 48px); width: 22%; max-width: 190px; border-width: 4px; border-radius: 26px; }
.k-case-media .k-frame--phone img { border-radius: 20px; }
.k-case:nth-of-type(even) .k-case-media { order: -1; }
.k-cases-more { border-top: 1px solid var(--line); }
.k-cases-more-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

/* --- zakaj midva: pet točk v vrsticah ------------------------------------- */
.k-why .k-head-row { margin-bottom: clamp(32px, 4vw, 56px); }
.k-why-list { list-style: none; margin: 0; padding: 0; }
.k-why-list li { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--line-dark); align-items: start; }
.k-why-list li:last-child { border-bottom: 1px solid var(--line-dark); }
.k-why-list h3 { margin: 0; font-weight: 300; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.k-why-list p { margin: 0; color: var(--muted-dark); font-size: 16px; max-width: 52ch; text-wrap: pretty; padding-top: 5px; }

/* --- oder: posnetek z opombami ob robovih (stran z delom) ----------------- */
.k-stage {
  position: relative; max-width: 1180px; margin: clamp(72px, 9vw, 130px) auto 0;
  padding: 0 var(--gutter); perspective: 1800px;
}
.k-stage .k-frame--desktop {
  transform: rotateX(14deg) scale(0.95); transform-origin: 50% 100%;
  box-shadow: 0 80px 160px -50px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,0.06);
}
.k-stage .k-frame--phone {
  position: absolute; right: calc(var(--gutter) + 3%); bottom: -8%; width: 20%; max-width: 240px;
  transform: translateY(18%) rotate(-3deg);
}
.k-ed { position: absolute; top: 50%; width: 140px; z-index: 2; color: var(--muted); }
.k-ed span { display: block; color: var(--ink); margin-bottom: 4px; }
.k-ed--l { left: var(--gutter); transform: translate(-100%, -50%) translateX(-28px); text-align: right; }
.k-ed--r { right: var(--gutter); transform: translate(100%, -50%) translateX(28px); }
.k-stage .k-ed--l { top: 32%; }
.k-stage .k-ed--r { top: 32%; }

/* --- okvirji -------------------------------------------------------------- */
.k-frame { position: relative; background: #111; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.k-frame img { width: 100%; height: auto; }
.k-frame--desktop { border-radius: 12px; }
.k-frame-bar { display: flex; gap: 6px; padding: 9px 12px; background: #1b1b1c; border-bottom: 1px solid rgba(255,255,255,0.06); }
.k-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.k-frame--phone {
  border-radius: 34px; border: 5px solid #1a1a1c; background: #1a1a1c;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 40px 90px -30px rgba(0,0,0,0.9);
}
.k-frame--phone img { border-radius: 26px; }

/* --- poglavja projektov (stran z delom) ----------------------------------- */
.k-chapter {
  position: relative; padding: clamp(80px, 10vw, 150px) 0;
  background:
    radial-gradient(70% 90% at 80% 20%, color-mix(in oklab, var(--c) 40%, transparent), transparent 70%),
    color-mix(in oklab, var(--c) 20%, var(--black-2));
  border-top: 1px solid rgba(255,255,255,0.06); overflow: clip;
}
.k-chapter-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.k-chapter-text { position: sticky; top: 96px; }
.k-chapter-text .k-caps { margin-bottom: 18px; }
.k-chapter-name { font-weight: 200; font-size: clamp(56px, 7vw, 112px); line-height: 0.9; letter-spacing: -0.045em; margin: 0 0 12px; text-transform: lowercase; }
.k-chapter-name a { text-decoration: none; }
.k-chapter-name a:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.k-tagline { font-weight: 300; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.25; letter-spacing: -0.02em; margin: 18px 0 16px; text-wrap: pretty; }
.k-body { margin: 0 0 28px; color: var(--muted); font-size: 15px; max-width: 48ch; text-wrap: pretty; }
.k-facts { margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.k-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.k-facts dt { color: var(--muted); padding-top: 3px; }
.k-facts dd { margin: 0; font-size: 14.5px; }

.k-chapter-media { position: relative; min-height: 420px; padding: 20px 0 80px; }
.k-chapter-media .k-frame--desktop { width: 90%; margin-left: auto; box-shadow: 0 70px 140px -40px rgba(0,0,0,0.95); }
.k-chapter-media .k-frame--phone { position: absolute; width: 26%; max-width: 250px; left: 0; bottom: 0; }
.k-chapter-media .k-frame--phone.k-frame--extra { left: 27%; bottom: 8%; }
.k-chapter-media .k-frame--phone.k-frame--extra + .k-frame--extra { left: 54%; bottom: 14%; }
.k-chapter-media .k-ed { top: 14%; width: 120px; }
.k-chapter-media .k-ed--l { left: 0; transform: none; text-align: left; top: auto; bottom: 20px; left: 30%; }
.k-chapter-media .k-ed--r { right: 0; transform: none; top: -34px; text-align: right; }
.k-chapter-media:not(:has(.k-frame--desktop)) { display: flex; gap: 6%; align-items: flex-end; justify-content: center; padding: 60px 0 20px; }
.k-chapter-media:not(:has(.k-frame--desktop)) .k-frame--phone { position: static; width: 28%; }
.k-chapter-media:not(:has(.k-frame--desktop)) .k-ed--l { display: none; }

.k-more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.k-more li { padding: 30px 28px 28px; background: var(--black-2); border: 1px solid var(--line); border-radius: 16px; transition: transform 300ms, border-color 300ms; }
.k-more li:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.3); }
.k-more .k-caps.k-muted { margin-bottom: 26px; }
.k-more h3 { font-weight: 200; font-size: 38px; line-height: 1; letter-spacing: -0.04em; margin: 0 0 8px; text-transform: lowercase; }
.k-more h3 a { text-decoration: none; }
.k-more .k-tagline { font-size: 19px; margin-top: 14px; }
.k-more .k-body { font-size: 14px; margin-bottom: 18px; }
.k-more .k-meta { font-size: 13px; color: var(--muted); margin: 0 0 8px; }

/* --- kartice dela (zidana mreža strank na /delo/) -------------------------- */
.k-card {
  width: min(500px, 62vw); flex: none; border-radius: 18px; overflow: hidden;
  background: color-mix(in oklab, var(--c) 30%, var(--black));
  border: 1px solid rgba(255,255,255,0.08); display: grid; grid-template-rows: auto 1fr;
}
.k-card-media { position: relative; padding: 28px 28px 0; height: 290px; overflow: hidden; }
.k-card-media .k-frame--desktop { width: 84%; margin-left: auto; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9); }
.k-card-media .k-frame--phone { position: absolute; left: 24px; bottom: -30px; width: 30%; max-width: 150px; border-width: 4px; border-radius: 24px; }
.k-card-media .k-frame--phone img { border-radius: 18px; }
.k-card-text { padding: 24px 28px 28px; background: linear-gradient(transparent, rgba(0,0,0,0.3)); }
.k-card-text .k-caps { margin-bottom: 10px; }
.k-card-text h3 { font-weight: 200; font-size: 36px; line-height: 1; letter-spacing: -0.04em; margin: 0 0 8px; text-transform: lowercase; }
.k-card-text h3 a { text-decoration: none; }
.k-card-text .k-body { margin-bottom: 8px; font-size: 14px; }
.k-card--text { justify-content: end; background: var(--black); width: min(340px, 62vw); }
.k-card--text .k-card-text { background: none; align-self: end; }
.k-card--text h3 { font-size: 44px; }

/* --- tehnologije: tekoči trakovi ----------------------------------------- */
.k-marquees { border-top: 1px solid var(--line-dark); margin-top: clamp(56px, 7vw, 96px); }
.k-marquee { overflow: hidden; border-bottom: 1px solid var(--line-dark); padding: 16px 0; }
.k-marquee-track { display: flex; width: max-content; }
.k-marquee-group { display: flex; gap: 40px; padding-right: 40px; white-space: nowrap; font-weight: 200; font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -0.03em; text-transform: lowercase; }
.k-marquee-group b { align-self: center; font-weight: 500; text-transform: uppercase; color: var(--muted-dark); }

/* --- povpraševanje in noga ----------------------------------------------- */
.k-contact { padding-bottom: clamp(96px, 12vw, 180px); border-top: 1px solid var(--line); }
.k-contact > .k-wrap > .k-caps { margin-bottom: clamp(40px, 6vw, 80px); }
.k-foot { background: var(--black); border-top: 1px solid var(--line); padding: 32px 0; color: var(--muted); }
.k-foot .k-wrap { display: flex; gap: 12px 32px; flex-wrap: wrap; align-items: baseline; }
.k-foot .k-head-brand { color: var(--ink); }
.k-foot a { text-decoration: none; }
.k-foot a:hover { color: var(--ink); }
.k-foot a:last-child { margin-left: auto; }
.k-foot-about { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.k-foot-about p { margin: 0; max-width: 72ch; font-size: 13.5px; line-height: 1.6; }

/* --- podstran z delom ------------------------------------------------------ */
.k-work-top { padding-top: calc(56px + clamp(56px, 8vw, 120px)); padding-bottom: 0; }
.k-work-top .k-big { margin-bottom: 24px; }
.k-back { display: inline-block; text-decoration: none; color: var(--muted); margin-bottom: 40px; }
.k-back:hover { color: var(--ink); }
.k-work-top .k-stage { margin-bottom: clamp(72px, 9vw, 130px); }

/* Stranke v zidani mreži: stolpci, kartica se ne lomi. */
.k-masonry { columns: 3; column-gap: 20px; }
.k-masonry > div { break-inside: avoid; margin-bottom: 20px; gap: 20px; display: grid; }
.k-masonry .k-card { width: auto; }
.k-paper .k-card { color: var(--ink); border-color: rgba(0,0,0,0.08); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.5); }
.k-paper .k-card .k-arrow { color: var(--ink); }
.k-paper .k-card .k-muted { color: var(--muted); }
.k-card--shop .k-card-text { padding-top: 20px; }
.k-paper .k-note { margin-top: 32px; }

/* --- gibanje -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  html.js .rv.in { opacity: 1; transform: none; }
  html.js .k-hero .k-wordmark { animation: k-in 1400ms cubic-bezier(.2,.7,.2,1) both; }
  html.js .k-hero-figure { animation: k-rise 1400ms 200ms cubic-bezier(.2,.7,.2,1) both; }
  html.js .k-hero-tag, html.js .k-hero-foot { animation: k-in 1400ms 500ms cubic-bezier(.2,.7,.2,1) both; }

  .k-marquee-track { animation: k-marquee 46s linear infinite; }
  .k-marquee--rev .k-marquee-track { animation-direction: reverse; }
  .k-marquee:hover .k-marquee-track { animation-play-state: paused; }

  @supports (animation-timeline: scroll()) {
    .k-stage { view-timeline-name: --stage; }
    .k-stage .k-frame--desktop { animation: k-straighten linear both; animation-timeline: --stage; animation-range: entry 20% entry 100%; }
    .k-stage .k-frame--phone { animation: k-phone-rise linear both; animation-timeline: --stage; animation-range: entry 20% entry 100%; }
    .k-par { animation: k-par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .k-par--slow { --d: 40px; }
    .k-par--mid { --d: 80px; }
    .k-par--fast { --d: 130px; }
  }
  @supports not (animation-timeline: scroll()) {
    .k-stage .k-frame--desktop { transform: rotateX(calc(14deg * (1 - var(--p, 0)))) scale(calc(0.95 + 0.05 * var(--p, 0))); }
    .k-stage .k-frame--phone { transform: translateY(calc(18% * (1 - var(--p, 0)))) rotate(-3deg); }
  }
}
@keyframes k-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes k-rise { from { opacity: 0; transform: translate(-50%, 4%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes k-straighten { to { transform: rotateX(0) scale(1); } }
@keyframes k-phone-rise { to { transform: translateY(0) rotate(-3deg); } }
@keyframes k-par { from { transform: translateY(var(--d, 60px)); } to { transform: translateY(calc(var(--d, 60px) * -1)); } }
@keyframes k-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .k-stage .k-frame--desktop { transform: none; }
  .k-stage .k-frame--phone { transform: rotate(-3deg); }
  .k-marquee { overflow-x: auto; }
}

/* --- odzivnost ------------------------------------------------------------ */
@media (max-width: 1279px) {
  .k-ed--l, .k-ed--r { display: none; }
  .k-chapter-media .k-ed--r { display: block; }
}
@media (max-width: 1023px) {
  .k-chapter-inner { grid-template-columns: 1fr; gap: 48px; }
  .k-chapter-text { position: static; }
  .k-more { grid-template-columns: repeat(2, 1fr); }
  .k-cols { grid-template-columns: 1fr; gap: 28px; }
  .k-masonry { columns: 2; }
  .k-origin-grid { grid-template-columns: 1fr; gap: 48px; }
  .k-origin-text { position: static; }
  .k-origin-text .k-big { max-width: 18ch; }
  .k-case-inner { grid-template-columns: 1fr; gap: 0; }
  .k-case-text { padding: clamp(48px, 6vw, 72px) 0 40px; }
  .k-case:nth-of-type(even) .k-case-media { order: 0; }
  .k-case-media { margin-bottom: clamp(48px, 6vw, 72px); }
}
@media (max-width: 767px) {
  .k-head { height: 52px; gap: 16px; }
  .k-head-nav { display: none; }
  .k-head .k-btn { margin-left: auto; }
  .k-black, .k-paper { padding: 80px 0; }
  /* Telefon: platno je pokončno. Figura manjša in niže, napis tik nad
     glavi (bottom, ne top), sicer zija praznina na sredini. */
  .k-hero { min-height: 0; }
  .k-hero-nav { gap: 14px; padding-top: 20px; font-size: 10px; }
  .k-hero-nav a[hreflang], .k-hero-nav a:nth-child(3) { display: none; }
  .k-hero-tag { top: 13%; font-size: 9px; letter-spacing: 0.22em; }
  .k-hero .k-wordmark { top: 47%; bottom: auto; font-size: 16vw; letter-spacing: -0.03em; }
  .k-hero-figure { height: 58%; bottom: 4%; }
  .k-hero-foot { bottom: 16px; font-size: 9px; }
  .k-hero-line { display: none; }
  .k-big { margin-bottom: 36px; }
  .k-head-row { margin-bottom: 36px; }
  .k-diag { padding-bottom: 0; }
  .k-sectors { font-size: 10px; letter-spacing: 0.16em; gap: 8px 10px; }
  .k-bar { margin-top: 64px; }
  .k-bar-inner { grid-template-columns: 1fr 1fr; }
  .k-bar-inner > .k-caps { grid-column: 1 / -1; padding: 18px 0 0; }
  .k-bar-item { border-left: 0; padding: 16px 0; gap: 6px; }
  .k-bar-item:nth-child(odd) { padding-left: 16px; border-left: 1px solid var(--line); }
  .k-origin { padding: 96px 0; }
  .k-origin-head { display: none; }
  .k-origin-list li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .k-built { padding-top: 0; }
  .k-stage { margin-top: 56px; }
  .k-stage .k-frame--phone { width: 30%; right: 8px; bottom: -14%; }
  .k-areas { grid-template-columns: 1fr; }
  .k-areas li { padding: 24px 0 28px; }
  .k-areas .k-caps { margin-bottom: 14px; }
  .k-case-media { padding: 28px 16px 36px; }
  .k-case-media .k-frame--desktop { width: 92%; }
  .k-case-media .k-frame--phone { width: 26%; left: 8px; bottom: 16px; }
  .k-cases-more-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .k-why-list li { grid-template-columns: 40px 1fr; gap: 12px 16px; padding: 24px 0; }
  .k-why-list p { grid-column: 2; padding-top: 0; }
  .k-chapter { padding: 64px 0; }
  .k-chapter-media { min-height: 0; padding: 40px 0 60px; }
  .k-chapter-media .k-frame--desktop { width: 100%; }
  .k-chapter-media .k-frame--phone { width: 32%; bottom: 0; left: 0; }
  .k-chapter-media .k-frame--phone.k-frame--extra { left: 34%; }
  .k-chapter-media .k-frame--phone.k-frame--extra + .k-frame--extra { left: 68%; }
  .k-chapter-media .k-ed--r { top: 0; }
  .k-more { grid-template-columns: 1fr; }
  .k-masonry { columns: 1; }
  .k-team-grid { grid-template-columns: 1fr; }
  .k-team-grid li { padding: 28px 0 32px; }
  .k-team-grid li + li { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--line); }
  .k-team-intro { margin-top: -8px; }
  .k-work-top { padding-top: 96px; }
  .k-card-media { height: 230px; padding: 20px 20px 0; }
  .k-card-text { padding: 20px; }
  .k-foot a:last-child { margin-left: 0; }
}


/* --- hero: izjava na prvem zaslonu -------------------------------------- */
/* Napis AGENCY 27 se umakne više in postane ozadje; spodaj levo stoji
   diagnoza, ki je bila prej en zaslon niže. */
.k-hero .k-wordmark { top: 26%; font-size: 13vw; }
.k-hero-figure { height: 74%; }

/* Širino je treba povedati izrecno: absolutno postavljen grid se sicer skrči
   na vsebino in dolga beseda se lomi po črkah. */
.k-hero-say {
  position: absolute; left: var(--gutter); bottom: 86px; z-index: 3;
  width: min(46ch, 48vw); display: grid; gap: 14px; justify-items: start;
}
/* Pilula z napisom »Panoge« je v svetlem herou brala kot šum, zato je ni.
   line-height mora ostati, sicer se oviti vrstici prekrivata. */
.k-hero-sectors {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px;
  line-height: 1.8; color: var(--muted-dark); font-size: 11px;
}
.k-hero-claim {
  margin: 0; font-weight: 300; letter-spacing: -0.025em; line-height: 1.04;
  font-size: clamp(26px, 3.3vw, 50px); color: var(--ink-dark);
}
.k-hero-sub { margin: 0; max-width: 46ch; color: var(--muted-dark); font-size: 15px; line-height: 1.55; }
.k-hero-go {
  justify-self: start; text-decoration: none; color: var(--ink-dark);
  border-bottom: 1px solid currentColor; padding-bottom: 2px; font-size: 15px;
}

@media (max-width: 900px) {
  .k-hero .k-wordmark { top: 17%; font-size: 15vw; }
  .k-hero-figure { height: 44%; }
  .k-hero-say { left: 18px; right: 18px; bottom: 64px; width: auto; gap: 10px; }
  .k-hero-claim { font-size: clamp(22px, 6.4vw, 34px); }
  .k-hero-sub { font-size: 13px; }
  .k-hero-sectors { font-size: 9px; gap: 6px; }
}


/* --- hero: abstraktno ozadje namesto portreta ---------------------------- */
/* Marko: celozaslonski portret bere kot osebna stran, ne kot agencija.
   Fotografija gre v razdelek »kdo sva«, hero dobi abstrakt. */
.k-hero {
  background: #0d0d0c url("../hero/abstract.e8688dc34d74.jpg") center / cover no-repeat;
  color: #f2f2ec;
}
.k-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,7,.55) 0%, rgba(8,8,7,.18) 42%, rgba(8,8,7,.78) 100%);
}
/* NE nastavljaj position na vseh otrocih — hero jih postavlja absolutno in
   relative jim vzame postavitev. Dvignemo samo sloj prekrivala. */
.k-hero-nav, .k-hero-tag, .k-hero .k-wordmark, .k-hero-say, .k-hero-foot { z-index: 3; }
.k-hero .k-wordmark { color: #f4f4ee; top: 24%; font-size: 13.5vw; mix-blend-mode: normal; }
.k-hero-nav a, .k-hero-tag, .k-hero-foot, .k-hero-sectors,
.k-hero-claim, .k-hero-sub, .k-hero-go, .k-enter { color: #efefea; }
.k-hero-nav a { opacity: .78; }
.k-hero-nav .k-hero-cta { border-color: #efefea; opacity: 1; }
.k-hero-sectors, .k-hero-sub, .k-hero-line { color: rgba(239,239,234,.72); }
.k-hero-go { border-bottom-color: rgba(239,239,234,.6); }
.k-hero-say { bottom: 92px; }

/* Nizko okno (prenosnik s povečanim oknom, deljen zaslon, kartica za deljenje
   v družbenih omrežjih): napis AGENCY 27 se je zaletel v besedilo spodaj
   levo. Velikost napisa določa širina okna, višino besedila pa njegova
   vsebina — pri nizkem oknu mora napis upoštevati tudi višino. */
@media (min-width: 901px) and (max-height: 820px) {
  .k-hero .k-wordmark { top: 15%; font-size: min(13.5vw, 15vh); }
  .k-hero-say { bottom: 56px; }
}

/* --- portret v razdelku o ekipi ----------------------------------------- */

@media (max-width: 900px) {
  .k-hero .k-wordmark { top: 16%; font-size: 16vw; }
}


/* --- hero: ozadje diha ---------------------------------------------------
   Gibanje brez videa in brez tujih datotek: ista generirana ploskev se zelo
   počasi premika in rahlo poveča, zato svetlobna linija potuje čez kader.
   Nič se ne nalaga, nič ne zastara in nič ni tuje avtorsko delo. */
.k-hero { background-attachment: scroll; overflow: hidden; }
.k-hero::before {
  content: ""; position: absolute; inset: -8%; z-index: 0; pointer-events: none;
  background: inherit; background-size: cover; background-position: center;
  animation: k-drift 44s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes k-drift {
  from { transform: scale(1.04) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.12) translate3d(2%, 1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .k-hero::before { animation: none; }
}

.k-hero-flow {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; opacity: .9;
}


/* --- ekipa: izvirna široka fotografija kot ozadje ------------------------ */
/* Izrez PNG je bil obrezan in je lebdel; izvirnik ima platno in senco.
   Levi rob je potemnjen v sami datoteki, zato besedilo bere brez prekrivala. */
.k-team--photo {
  position: relative;
  background: #0b0b0a url("../hero/team-wide.0202e45c924a.jpg") center center / cover no-repeat;
}
/* Zavesa je v CSS in ne vpečena v sliko, da se jo da uravnavati brez
   ponovnega generiranja datoteke. */
.k-team--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(9,9,8,.94) 0%, rgba(9,9,8,.90) 38%, rgba(9,9,8,.62) 54%, rgba(9,9,8,.08) 68%, transparent 80%);
}
.k-team--photo > .k-wrap { position: relative; z-index: 2; }
.k-team--photo .k-team-grid { max-width: 54%; }
.k-team--photo .k-team-intro, .k-team--photo .k-big { max-width: 48%; }
.k-team--photo .k-team-note { max-width: 54%; }

@media (max-width: 900px) {
  .k-team--photo {
    background-position: 72% center;
  }
  .k-team--photo::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,10,9,.82) 0%, rgba(10,10,9,.92) 60%);
  }
  .k-team--photo .k-team-grid,
  .k-team--photo .k-team-intro,
  .k-team--photo .k-big { max-width: none; }
}


/* --- študiji primera od roba do roba ------------------------------------ */
/* Vsak primer je svoj pas v barvi, potegnjeni iz posnetka projekta. Prej je
   bil posnetek na barvi, okoli pa črnina; zdaj barva nosi cel pas. */
.k-case {
  position: relative;
  background: #0c0c0b;
  padding: clamp(56px, 7vw, 110px) 0;
  overflow: hidden;
}
.k-case::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(255,255,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.38) 100%);
}
.k-case > .k-case-inner { position: relative; z-index: 2; }
.k-case + .k-case { margin-top: 0; }
.k-case .k-case-name a, .k-case .k-case-name { color: #fff; }
.k-case .k-case-problem { color: rgba(255,255,255,.92); }
.k-case .k-case-area { color: rgba(255,255,255,.62); }
.k-case .k-tags li { border-color: rgba(255,255,255,.32); color: rgba(255,255,255,.78); }


/* --- vprašalnik (templates/intake/) --------------------------------------
   Isti jezik kot naslovnica: črna ploskev, tanki veliki naslovi korakov,
   drobne verzalke za položaj, tanke črte namesto okvirjev. Levo lepljiv
   stolpec pove, kje je obiskovalec (številčen trak osmih korakov), desno
   vprašanja. Zahvala je na papirju, da se bere kot zaključek. */
:root { --err: #e6a38c; }
[hidden] { display: none !important; }

/* Glava: spodnji rob je napredek, ki se polni s koraki (--p od --n). */
.k-q-head { gap: 20px; }
.k-q-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px;
  width: calc(100% * var(--p, 1) / var(--n, 1)); background: var(--ink);
  transition: width 600ms cubic-bezier(.2,.7,.2,1);
}
.k-q-head-step { margin-left: 8px; white-space: nowrap; }
/* Nad papirjem (zahvala) je glava papirnata, ne motno siva. */
.k-q-head--paper { background: rgba(235, 233, 227, 0.88); color: var(--ink-dark); border-bottom-color: var(--line-dark); }
.k-q-head--paper .k-head-brand { color: var(--ink-dark); }
.k-q-head--paper .k-head-nav a { color: var(--muted-dark); }
.k-q-head--paper .k-head-nav a:hover { color: var(--ink-dark); }
.k-q-head--paper::after { background: var(--ink-dark); }
.k-q-head .k-head-nav a { white-space: nowrap; }

.k-q { padding-top: calc(56px + clamp(48px, 7vw, 104px)); padding-bottom: clamp(96px, 12vw, 180px); min-height: 100svh; }
.k-q-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.k-q-aside { position: sticky; top: 96px; }
.k-q-aside > .k-caps { margin-bottom: 18px; }
.k-q-title {
  margin: 0 0 22px; font-weight: 200; letter-spacing: -0.035em; line-height: 0.98;
  font-size: clamp(40px, 5.2vw, 80px); max-width: 11ch; text-wrap: balance;
}
.k-q-intro { margin-bottom: 28px; max-width: 36ch; }
.k-q-notes { max-width: 36ch; color: var(--muted); padding-top: 22px; border-top: 1px solid var(--line); }

/* Trak napredka: osem tankih črt, opravljene in trenutna polne. */
.k-q-progress { list-style: none; margin: 0 0 clamp(36px, 4vw, 56px); padding: 0; display: flex; gap: 6px; max-width: 420px; }
.k-q-progress li { flex: 1; padding-top: 10px; border-top: 1px solid var(--line-strong); color: var(--muted); transition: border-color 300ms, color 300ms; }
.k-q-progress li.is-done { border-top-color: var(--ink); }
.k-q-progress li.is-now { border-top-color: var(--ink); border-top-width: 2px; padding-top: 9px; color: var(--ink); }
.k-q-progress .k-caps { font-size: 10px; letter-spacing: 0.14em; }

/* Vprašanja: vrstice med tankimi črtami. */
.k-q-form { max-width: 680px; padding-top: 6px; }
.k-q-fields { border-top: 1px solid var(--line); }
.k-f { padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.k-f-q { display: block; font-weight: 300; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; text-wrap: balance; }
.k-f--key .k-f-q { font-size: clamp(22px, 2vw, 28px); }
.k-req { color: var(--muted); font-weight: 300; }
.k-f-help { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.k-f-help--after { margin: 10px 0 0 38px; }
.k-f-q + input, .k-f-q + textarea, .k-f-q + .k-choices { margin-top: 10px; }

/* Polja: rahlo dvignjena ploskev na črnini, ki je ob osredotočenju svetlejša. */
.k-q input[type="text"], .k-q input[type="email"], .k-q input[type="tel"], .k-q input[type="url"],
.k-q textarea {
  display: block; width: 100%; min-height: 54px; padding: 14px 18px;
  font: 400 17px/1.5 var(--sans); color: var(--ink); caret-color: var(--ink);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); border-radius: 8px;
  transition: border-color 200ms, background-color 200ms; appearance: none; -webkit-appearance: none;
}
.k-q textarea { resize: vertical; line-height: 1.55; }
.k-q input::placeholder, .k-q textarea::placeholder { color: var(--muted); opacity: 0.8; }
.k-q input:hover, .k-q textarea:hover { border-color: rgba(255, 255, 255, 0.4); }
.k-q input:focus, .k-q textarea:focus { outline: none; border-color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.k-q input:focus-visible, .k-q textarea:focus-visible { box-shadow: 0 0 0 1px var(--ink); }
.k-q input:-webkit-autofill, .k-q textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px #1a1a19 inset; caret-color: var(--ink);
}

/* Izbire: vsaka vrstica je klikljiva po celi širini, med njimi tanke črte. */
.k-choices { display: block; margin-top: 6px; border-top: 1px solid var(--line); }
.k-choice {
  display: flex; gap: 16px; align-items: center; min-height: 54px; padding: 13px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 17px; line-height: 1.4;
  color: var(--ink); transition: color 200ms;
}
.k-choice:hover { color: #fff; }
.k-choice > span { flex: 1; }
.k-choice input[type="radio"], .k-choice input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 22px; height: 22px;
  border: 1px solid var(--line-strong); border-radius: 50%; background: transparent;
  display: grid; place-content: center; cursor: pointer;
  transition: border-color 200ms, background-color 200ms;
}
.k-choice input[type="checkbox"] { border-radius: 5px; }
.k-choice:hover input { border-color: rgba(255, 255, 255, 0.6); }
.k-choice input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.k-choice input[type="radio"]::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.k-choice input[type="radio"]:checked { border-color: var(--ink); }
.k-choice input[type="radio"]:checked::before { transform: scale(1); }
.k-choice input[type="checkbox"]::before {
  content: ""; width: 12px; height: 7px; border-left: 2px solid var(--black); border-bottom: 2px solid var(--black);
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
.k-choice input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.k-choice input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.k-choice--other { gap: 18px; }
.k-choice--other > .k-caps { flex: none; }
.k-q .k-choice--other input[type="text"] { flex: 1; min-height: 44px; padding: 8px 14px; font-size: 16px; }
.k-choice--consent { font-size: 15.5px; line-height: 1.5; align-items: flex-start; border-bottom: 0; padding: 4px 0 0; min-height: 0; }
.k-choice--consent input { margin-top: 1px; }
.k-choice--consent > span { padding-top: 1px; }

/* Napaka: topla opomba pod vprašanjem, polje dobi obrobo v isti barvi. */
.k-f-error { margin: 12px 0 0; font-size: 14.5px; color: var(--err); }
.k-f.has-error input[type="text"], .k-f.has-error input[type="email"], .k-f.has-error input[type="tel"],
.k-f.has-error input[type="url"], .k-f.has-error textarea { border-color: var(--err); }
.k-f.has-error .k-choice input { border-color: var(--err); }
.k-f.has-error .k-f-q, .k-f.has-error .k-req { color: var(--err); }

.k-q-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 48px); }
.k-q-actions .k-btn { border: 0; font-family: var(--sans); cursor: pointer; line-height: 1.4; min-height: 48px; }
.k-q-back { margin: 0; text-decoration: none; }

/* Past za robote: ni je na zaslonu, bralnik je preskoči. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- zahvala na papirju ---------------------------------------------------- */
.k-q-done { padding-top: calc(56px + clamp(64px, 9vw, 140px)); min-height: 100svh; }
.k-q-done-title {
  margin: 0 0 clamp(40px, 6vw, 88px); font-weight: 200; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(56px, 11vw, 176px); text-wrap: balance;
}
.k-q-done-cols { padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-dark); }
.k-q-done-next-title { margin-bottom: 14px; }
.k-q-next { list-style: none; margin: 0; padding: 0; }
.k-q-next li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-dark); align-items: baseline; }
.k-q-next li:last-child { border-bottom: 1px solid var(--line-dark); }
.k-q-next p { margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.k-q-ref { margin-top: clamp(56px, 8vw, 120px); padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.k-q-ref .k-caps { margin-bottom: 14px; }
.k-q-ref-code {
  margin: 0 0 14px; font-weight: 200; letter-spacing: 0.02em; line-height: 1;
  font-size: clamp(40px, 6vw, 96px); user-select: all;
}
.k-q-done .k-small { color: var(--muted-dark); max-width: 52ch; }
.k-q-done-home { margin: clamp(32px, 4vw, 48px) 0 0; }
.k-q-blocked .k-lead { max-width: 44ch; }

@media (max-width: 1023px) {
  .k-q-grid { grid-template-columns: 1fr; gap: 40px; }
  .k-q-aside { position: static; }
  .k-q-notes { display: none; }
  .k-q-form { max-width: none; }
  .k-q-actions { flex-direction: column; align-items: stretch; gap: 20px; }
  .k-q-actions .k-btn { text-align: center; }
  .k-q-back { align-self: center; }
  .k-q-done-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .k-q-head { gap: 12px; }
  .k-q-head-step { margin-left: auto; }
  .k-q-head .k-head-nav { display: flex; margin-left: 0; gap: 14px; }
  .k-q-head .k-head-nav a:first-child { display: none; }
  .k-q { padding-top: 92px; padding-bottom: 80px; }
  .k-q-grid { gap: 20px; }
  .k-q-aside > .k-caps { display: none; }
  .k-q-progress { max-width: none; margin-bottom: 28px; }
  .k-q-title { font-size: clamp(38px, 11vw, 48px); margin-bottom: 14px; }
  .k-q-intro { font-size: 16px; }
  .k-f { padding: 22px 0; }
  .k-f-q { font-size: 20px; }
  .k-choice { font-size: 16px; }
  .k-choice--other { flex-wrap: wrap; gap: 10px 18px; }
  .k-choice--other > .k-caps { width: 100%; }
  .k-q-done { padding-top: 100px; }
  .k-q-done-title { font-size: clamp(52px, 15vw, 72px); }
  .k-q-ref-code { font-size: clamp(30px, 9.5vw, 40px); letter-spacing: 0.01em; }
}


/* --- oznake brez škatlic ------------------------------------------------- */
/* Obrobljeni kvadratki berejo kot predloga. Webtic ima oznake kot golo
   razprto verzalko in enako velja tu. */
.k-case-tags {
  margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 0 10px;
  color: rgba(255,255,255,.62); font-size: 11px;
}
.k-case-tags span { opacity: .45; }



/* --- oba primera na črnem ------------------------------------------------ */
/* Naročnik je izbral črno za oba. Da se pasova ne zlijeta v enega, ima drugi
   komaj zaznavno drugačno črno in med njima teče lasna črta. */
.k-case { background: #0c0c0b; }
.k-case:nth-of-type(even) { background: #100f0e; }
.k-case + .k-case { border-top: 1px solid rgba(255,255,255,.07); }
.k-case::before {
  background:
    radial-gradient(130% 100% at 76% 38%, color-mix(in srgb, var(--a, #888) 16%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 42%, rgba(0,0,0,.30) 100%);
}
.k-case-media { background: rgba(255,255,255,.03); }