/* =====================================================================================================
   Oblika 2 – »Izdaja«: stran kot sodobna uredniška izdaja. Sloj nad stran.css.
   Brez črt in obrob: sklope ločijo ploskve (siva, bela in barve iz palete), vsebino nosijo ravne ploščice
   z mehko senco, glava in gumbi na temni podlagi pa so iz stekla (prosojni, z zabrisanim ozadjem).
   Zaobljeni so le gumbi, oznake in oblački. Apertura Regular za velike naslove. Barve so semantične
   (--color-*), zato deluje tudi v temni temi.
   ===================================================================================================== */
.o2 {
  --container: 1600px;
  --gutter-fluid: clamp(20px, 4.4vw, 80px);
  --space-section: clamp(80px, 9.5vw, 192px);
  --space-section-sm: clamp(56px, 6vw, 112px);
  --space-stack: clamp(32px, 3.6vw, 72px);
  --text-display: clamp(3.125rem, 9.2vw, 10.75rem);
  --text-h1: clamp(2.75rem, 7.2vw, 8.25rem);
  --text-h2: clamp(2.25rem, 4.8vw, 5.5rem);
  --text-h3: clamp(1.375rem, 1vw + 1.05rem, 2rem);
  --text-lead: clamp(1.125rem, .55vw + .98rem, 1.5rem);
  --text-body-fluid: clamp(1rem, .2vw + .96rem, 1.125rem);
  --tracking-tight: -0.035em;
  --o2-stolpci: repeat(12, minmax(0, 1fr));        /* mreža z 12 stolpci */
  --o2-crna: #1a1a1a;                              /* temna ploskev (izbrana vrstica, temna plošča) */
  --o2-razmik: clamp(8px, .9vw, 16px);             /* razmik med ploščicami */
  --o2-rob: clamp(20px, 2.3vw, 40px);              /* notranji rob ploščice */
  /* Globina: površine ležijo na štirih ravneh. Dlje od gledalca je senca kratka in ostra, bliže dolga in mehka;
     površina, ki leži zadaj, je vdolbljena (senca navznoter). */
  --o2-senca-1: 0 1px 2px rgba(26, 26, 26, .08), 0 5px 12px -5px rgba(26, 26, 26, .14);                                              /* 1 · zadaj */
  --o2-senca: 0 2px 4px rgba(26, 26, 26, .06), 0 16px 30px -14px rgba(26, 26, 26, .24);                                             /* 2 · ploščica */
  --o2-senca-3: 0 4px 8px rgba(26, 26, 26, .06), 0 30px 50px -20px rgba(26, 26, 26, .32), 0 60px 84px -44px rgba(26, 26, 26, .24);  /* 3 · blizu */
  --o2-senca-dvig: 0 6px 12px rgba(26, 26, 26, .07), 0 44px 68px -24px rgba(26, 26, 26, .4), 0 96px 124px -54px rgba(26, 26, 26, .32); /* 4 · tik pred gledalcem */
  --o2-vdolbina: inset 0 2px 5px rgba(26, 26, 26, .1), inset 0 14px 26px -18px rgba(26, 26, 26, .2);
  /* Mlečno steklo: bela koprena, močna zameglitev ozadja, mehak odsev čez površino in senca pod njo. */
  --o2-steklo: rgba(255, 255, 255, .56);
  --o2-steklo-zameglitev: saturate(1.9) blur(30px);
  --o2-steklo-odsev: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 44%, rgba(255, 255, 255, .28));
  --o2-steklo-senca: 0 2px 6px rgba(26, 26, 26, .06), 0 26px 50px -22px rgba(26, 26, 26, .36);
  --o2-ton: color-mix(in srgb, var(--color-text) 6%, transparent);  /* nežna ploskev brez sence: polja, oznake, zavihki */
  --o2-ploscica: var(--color-surface);             /* ploščica na sivi podlagi: bela s senco */
  --o2-ploscica-senca: var(--o2-senca);
}
.o2[data-theme="dark"] {
  --o2-crna: #262626;
  --o2-senca-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .6);
  --o2-senca: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 34px -14px rgba(0, 0, 0, .8);
  --o2-senca-3: 0 4px 8px rgba(0, 0, 0, .45), 0 32px 54px -20px rgba(0, 0, 0, .88), 0 62px 88px -44px rgba(0, 0, 0, .7);
  --o2-senca-dvig: 0 6px 12px rgba(0, 0, 0, .5), 0 46px 72px -24px rgba(0, 0, 0, .95), 0 98px 128px -54px rgba(0, 0, 0, .8);
  --o2-vdolbina: inset 0 2px 6px rgba(0, 0, 0, .5), inset 0 14px 26px -18px rgba(0, 0, 0, .7);
  --o2-steklo: rgba(40, 40, 40, .56);
  --o2-steklo-odsev: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 44%, rgba(255, 255, 255, .08));
  --o2-steklo-senca: 0 2px 6px rgba(0, 0, 0, .4), 0 26px 50px -22px rgba(0, 0, 0, .9);
  --o2-ton: color-mix(in srgb, var(--color-text) 10%, transparent);
}
/* Črte in obrobe osnovnega sloja ugasnemo na enem mestu (tudi v temnih ploščah, ki imajo svoje žetone). */
.o2, .o2 [data-theme] { --stroke: 0 solid transparent; --stroke-strong: 0 solid transparent; --stroke-heavy: 0 solid transparent; }
/* Na beli podlagi je ploščica siva ploskev brez sence. */
.o2 .pas-bel { --o2-ploscica: var(--color-canvas); --o2-ploscica-senca: none; }
.o2[data-theme="dark"] .pas-bel { --o2-ploscica: var(--color-surface-alt); }

.o2 ::selection { background: var(--dz-azure); color: var(--dz-ink); }
/* Tanka črta napredka branja na vrhu strani v obliki brez črt odpade. */
.o2 .napredek { display: none; }
.o2 .nadnaslov { font-size: 13px; letter-spacing: .14em; }
.o2 .vodilo { line-height: 1.45; }

/* --- Gumbi: ploskve brez obrob; drugi gumb je bela ploščica s senco, na temni podlagi steklo ------------ */
.o2 .gumb { padding: 16px 28px; font-size: 17px; border-color: transparent; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.o2 .gumb-velik { padding: 20px 34px; font-size: 19px; }
.o2 .gumb-majhen { padding: 10px 18px; font-size: 14px; }
.o2 .gumb-glavni:hover, .o2 .gumb-crn:hover { border-color: transparent; box-shadow: var(--o2-senca); }
.o2 .gumb-obroba { border-color: transparent; background: var(--color-surface); box-shadow: var(--o2-senca); }
.o2 .pas-bel .gumb-obroba { background: var(--color-canvas); box-shadow: none; }
.o2 .gumb-obroba:hover, .o2 .pas-bel .gumb-obroba:hover { border-color: transparent; background: var(--color-text); box-shadow: none; }
.o2 [data-theme="dark"] .gumb-obroba, .o2 .poziv-pas .gumb-obroba, .o2[data-theme="dark"] .gumb-obroba {
  background: linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, .14)), rgba(255, 255, 255, .1); color: #ffffff;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .7); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
}
.o2 [data-theme="dark"] .gumb-obroba:hover, .o2 .poziv-pas .gumb-obroba:hover, .o2[data-theme="dark"] .gumb-obroba:hover { background: #ffffff; color: var(--dz-ink); }
.o2 .cip { background: var(--o2-ton); }
.o2 .cip:hover { background: var(--color-text); }

/* --- Glava iz stekla ------------------------------------------------------------------------------ */
/* Steklo je na psevdoelementu, da glava ne postane okvir za meni čez ves zaslon (position: fixed) na telefonu. */
.o2 .glava { background: none; border-bottom: 0; }
/* Vsebina, ki zdrsne pod glavo, se nad stekleno tabletko postopoma zamegli (brez ostrega pasu nad njo). */
.o2 .glava::after {
  content: ""; position: absolute; inset: 0 0 -18px; z-index: -2; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent); mask-image: linear-gradient(to bottom, #000 34%, transparent);
}
.o2 .glava::before {
  content: ""; position: absolute; inset: 9px clamp(8px, 1.3vw, 22px); z-index: -1; border-radius: var(--radius-pill);
  background: var(--o2-steklo-odsev), var(--o2-steklo);
  -webkit-backdrop-filter: var(--o2-steklo-zameglitev); backdrop-filter: var(--o2-steklo-zameglitev); box-shadow: var(--o2-steklo-senca);
}
.o2 .znak, .o2 .znak:hover { color: var(--color-text); }
.o2 .glava .gumb-obroba { color: var(--color-text); background: var(--color-surface); border-color: transparent; box-shadow: var(--shadow-sm); }
.o2 .glava .gumb-obroba:hover { background: var(--color-text); color: var(--color-canvas); border-color: transparent; box-shadow: none; }
.o2[data-theme="dark"] .glava .gumb-obroba { background: rgba(255, 255, 255, .12); color: #ffffff; }
.o2[data-theme="dark"] .glava .gumb-obroba:hover { background: #ffffff; color: var(--dz-ink); }
.o2 .nacin { border-color: transparent; background: var(--o2-ton); }
.o2 .nacin a { color: var(--color-text); }
.o2 .nacin a:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text); }
.o2 .nacin a[aria-current="page"] { background: var(--color-text); color: var(--color-canvas); }
.o2 .burger { border-color: transparent; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.o2[data-theme="dark"] .burger { background: rgba(255, 255, 255, .12); }
.o2 .burger span { background: var(--color-text); }
/* Telefon: višja tabletka; logotip in gumbi imajo v njej dovolj prostora, gumb menija je enako oddaljen od vseh robov. */
@media (max-width: 767px) {
  html.o2 { --header-h: 70px; }
  .o2 .glava { padding: 0 clamp(12px, 4vw, 16px) 0 clamp(18px, 5.6vw, 24px); }
  .o2 .glava::before { inset: 7px 8px; }
}
@media (max-width: 350px) {
  .o2 .znak svg { height: 22px; }
  .o2 .nacin a { padding: 6px; font-size: 12px; }
}
@media (min-width: 1081px) {
  /* Meni: izbrana stran je bela ploščica, ne podčrtaj. */
  .o2 .meni { gap: clamp(2px, .5vw, 8px); margin-left: clamp(4px, 1.4vw, 28px); }
  .o2 .meni > a { color: var(--color-text); font-size: 16px; padding: 9px 15px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-standard); }
  .o2 .meni > a::after { display: none; }
  .o2 .meni > a:hover { color: var(--color-text); background: var(--o2-ton); }
  .o2 .meni > a[aria-current="page"] { background: var(--color-surface); box-shadow: var(--shadow-sm); }
  .o2[data-theme="dark"] .meni > a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
}

/* --- Sklopi in njihovi naslovi --------------------------------------------------------------------
   Sklope ločita ploskev in prostor. Nad naslovom sta številka in oznaka, uvod stoji desno ob dnu. */
.o2 main { counter-reset: sklop; }
.o2 .glava-razdelka {
  counter-increment: sklop; display: grid; grid-template-columns: var(--o2-stolpci); column-gap: var(--grid-gap);
  row-gap: clamp(20px, 3.2vw, 56px); align-items: end; margin-bottom: var(--space-stack);
}
.o2 .glava-razdelka > div { display: contents; }
.o2 .glava-razdelka .nadnaslov { grid-column: 1 / span 8; grid-row: 1; margin: 0; align-self: start; }
.o2 .glava-razdelka > .puscica { grid-column: 9 / -1; grid-row: 1; justify-self: end; align-self: start; }
.o2 .glava-razdelka h2 { grid-column: 1 / span 8; grid-row: 2; font-size: var(--text-h2); line-height: .98; letter-spacing: -0.04em; max-width: none; }
.o2 .glava-razdelka:not(:has(.vodilo)) h2 { grid-column: 1 / span 10; }
.o2 .glava-razdelka .vodilo { grid-column: 9 / -1; grid-row: 2; margin: 0 0 .35em; max-width: none; font-size: var(--text-lead); }
.o2 .glava-razdelka .nadnaslov::before, .o2 .manifest-domov .okvir-razdelka > .nadnaslov::before, .o2 .zakaj-glava > .nadnaslov::before,
.o2 .vodoravno-uvod .nadnaslov::before {
  content: counter(sklop, decimal-leading-zero); margin-right: 1.4em; color: var(--color-text); font-variant-numeric: tabular-nums;
}

/* =====================================================================================================
   Naslovnica
   ===================================================================================================== */
/* 1 · Junak: naslov čez vso širino, spodaj uvod in gumba, na robu tekoči trak ploščic brez razmikov. */
.o2 .n2-junak { min-height: calc(100svh - var(--header-h-lg)); justify-content: space-between; border-bottom: 0; }
.o2 .n2-junak-notranjost {
  flex: 1; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter-fluid)); margin: 0 auto;
  padding: clamp(36px, 5.2vw, 96px) var(--gutter-fluid) clamp(32px, 3.6vw, 64px);
  display: grid; align-content: space-between; gap: clamp(36px, 5vw, 88px);
}
.o2 .n2-junak h1 { margin: 0; max-width: 11.5em; font-size: clamp(3rem, 7.9vw, 9.5rem); line-height: .94; letter-spacing: -0.05em; text-wrap: balance; }
.o2 .n2-junak-spodaj { display: grid; grid-template-columns: var(--o2-stolpci); column-gap: var(--grid-gap); row-gap: var(--space-6); align-items: end; }
.o2 .n2-junak-spodaj .vodilo { grid-column: 1 / span 5; max-width: 34em; color: var(--color-text); font-size: var(--text-lead); }
.o2 .n2-junak-spodaj .gumbi { grid-column: 7 / -1; justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
.o2 .n2-trak-ploscic { --trak-razmik: 0px; }
.o2 .n2-trak-ploscic .trak-ploscica { width: clamp(64px, 8.334vw, 150px); border-radius: 0; }

/* 2 · Trak besed na indigo ploskvi. */
.o2 .n2-trak-besed { padding-block: clamp(22px, 2.8vw, 48px); border-bottom: 0; background: var(--dz-indigo); color: #ffffff; }
.o2 .n2-trak-besed .trak-besede { --trak-razmik: clamp(24px, 3vw, 56px); }
.o2 .n2-trak-besed .trak-beseda { font-size: clamp(48px, 8.4vw, 144px); letter-spacing: -0.045em; line-height: 1.05; }
.o2 .n2-trak-besed .trak-krog { width: clamp(36px, 5.4vw, 92px); }

/* 3 · Kdo smo: velika izjava, uvod v desni polovici, tri številke na barvnih ploščicah iz palete. */
.o2 .manifest-domov .okvir-razdelka { counter-increment: sklop; display: grid; grid-template-columns: var(--o2-stolpci); column-gap: var(--grid-gap); }
.o2 .manifest-domov .okvir-razdelka > .nadnaslov { grid-column: 1 / -1; margin: 0; }
.o2 .manifest-domov-izjava { grid-column: 1 / span 11; max-width: none; margin-top: clamp(24px, 3.4vw, 64px); font-size: clamp(30px, 4.5vw, 84px); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.o2 .manifest-domov-vodilo { grid-column: 7 / -1; max-width: none; margin-top: clamp(32px, 4vw, 72px); color: var(--color-text); }
.o2 .dejstva { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o2-razmik); container-type: inline-size; margin-top: clamp(56px, 7vw, 128px); padding-top: 0; border: 0; }
.o2 .dejstva > div { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 6cqi, 112px); padding: var(--o2-rob); border: 0; background: var(--dz-sky); color: var(--dz-ink); }
.o2 .dejstva > div:nth-child(3n + 2) { background: var(--dz-yellow); }
.o2 .dejstva > div:nth-child(3n) { background: var(--dz-pink); }
.o2 .dejstva dt { font-size: clamp(72px, 12.4cqi, 264px); line-height: .84; letter-spacing: -0.06em; color: inherit; }
.o2 .dejstva dd { max-width: 17em; margin: 0; font-size: var(--text-lead); line-height: 1.3; color: inherit; }

/* 4 · Izzivi: vrstice so ploščice, izbrana je temna in se zlije s temno ploščo na desni. */
.o2 .izbirnik { gap: 0; }
.o2 .izbirnik-seznam { gap: 6px; border: 0; }
.o2 .izbirnik-seznam button {
  grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: clamp(16px, 1.5vw, 24px) clamp(14px, 1.6vw, 26px); border: 0;
  background: var(--o2-ploscica); font-size: clamp(17px, .5vw + 14px, 22px); line-height: 1.3;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.o2 .izbirnik-seznam button:hover, .o2 .pas-bel .izbirnik-seznam button:hover { background: color-mix(in srgb, var(--color-text) 10%, var(--o2-ploscica)); }
.o2 .izbirnik[data-izbirnik] .izbirnik-seznam button[aria-selected="true"] { background: var(--o2-ploscica); }
@media (min-width: 1081px) {
  .o2 .izbirnik[data-izbirnik] .izbirnik-seznam button[aria-selected="true"], .o2 .pas-bel .izbirnik-seznam button[aria-selected="true"] {
    background: var(--o2-crna); color: #f2f2f2; box-shadow: none; padding-left: clamp(14px, 1.6vw, 26px); font-weight: var(--weight-regular);
  }
  .o2 .izbirnik-seznam button[aria-selected="true"] .st, .o2 .izbirnik-izzivi .izbirnik-seznam button[aria-selected="true"] .st { color: var(--dz-azure); }
}
.o2 .izbirnik-ni { padding-left: 0; }
.o2 .izbirnik-plosca, .o2 .pas-bel .izbirnik-plosca {
  top: var(--header-h-lg); border: 0; border-radius: 0; padding: clamp(28px, 3.8vw, 72px);
  background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca);
}
.o2 .izbirnik-plosca[data-theme="dark"], .o2 .pas-bel .izbirnik-plosca[data-theme="dark"] { background: var(--o2-crna); color: var(--color-text); align-self: stretch; box-shadow: var(--o2-senca-dvig); }
/* Menjava izbire: plošča ostane polna ploskev, prelije se samo njena vsebina. Če se prelije cela plošča, se skozi
   prosojno temno ploskev vidi temna izbrana vrstica pod njo. */
.o2 .izbirnik-plosca.prihaja { animation: none; }
.o2 .izbirnik-plosca.prihaja > * { animation: prihod var(--dur-slow) var(--ease-out) both; }
.o2 .izbirnik-plosca.prihaja > :nth-child(2) { animation-delay: 50ms; }
.o2 .izbirnik-plosca.prihaja > :nth-child(n + 3) { animation-delay: 100ms; }
.o2 .list-vsebina .izbirnik-plosca > * { animation: none; }
.o2 .izziv-pristop { font-size: clamp(22px, 2.2vw, 40px); line-height: 1.14; letter-spacing: -0.025em; }
.o2 .izziv-projekt { padding: clamp(18px, 2vw, 32px); background: rgba(255, 255, 255, .06); }
.o2 .izziv-projekt h3 { font-size: clamp(20px, 1.5vw, 28px); font-weight: var(--weight-medium); }
.o2 .izziv-primer { padding: 0; border: 0; border-radius: 0; background: none; grid-template-columns: clamp(96px, 10vw, 168px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.o2 .izziv-primer:hover { box-shadow: none; }
.o2 .izziv-primer:hover .izziv-primer-naslov { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.o2 .izziv-primer-naslov { font-size: clamp(17px, 1.2vw, 22px); }
.o2 dialog.list { border-radius: 0; box-shadow: var(--o2-senca-dvig); }
/* Za oknom stran ni zatemnjena, ampak zastrta z mlečnim steklom. */
.o2 dialog.list::backdrop, .o2 dialog.profil::backdrop, .o2 dialog.povecava::backdrop {
  background: color-mix(in srgb, var(--color-canvas) 46%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(24px); backdrop-filter: saturate(1.5) blur(24px);
}
.o2 .list-zapri, .o2 .profil-zapri { border: 0; background: var(--o2-ton); }
.o2 .list-zapri:hover, .o2 .profil-zapri:hover { background: var(--color-text); color: var(--color-bg); }
.o2 dialog.list:has([data-theme="dark"]) { background: var(--o2-crna); color: #f2f2f2; }
.o2 dialog.list:has([data-theme="dark"]) .list-zapri { background: rgba(255, 255, 255, .12); color: #f2f2f2; }
.o2 dialog.list:has([data-theme="dark"]) .list-rocaj { background: rgba(255, 255, 255, .28); }
.o2 .list-vsebina .izbirnik-plosca, .o2 .list-vsebina .izbirnik-plosca[data-theme="dark"] { background: none; min-height: 0; padding: 0; box-shadow: none; }

/* 5 · Štiri ravni: polne barvne plošče, ki se zlagajo druga na drugo; senca pokaže plasti. */
.o2 .sklad { gap: clamp(20px, 2.4vw, 40px); }
.o2 .sklad > li { top: calc(var(--header-h-lg) + var(--i, 0) * 22px); }
.o2 .sklad-karta { min-height: clamp(340px, 64vh, 620px); padding: clamp(24px, 3.4vw, 64px); border-radius: 0; box-shadow: 0 -20px 48px -30px rgba(26, 26, 26, .55); }
.o2 .sklad-st { font-family: inherit; font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .14em; opacity: 1; }
.o2 .sklad-ime { font-size: clamp(40px, 7.6vw, 136px); line-height: .92; letter-spacing: -0.05em; }
.o2 .sklad-opis { max-width: 30em; font-size: var(--text-lead); line-height: 1.35; opacity: 1; }
.o2 .sklad-povezava { font-size: 17px; }

/* 6 · Kviz: dvignjena ploščica, odgovori so ploščice v njej; izbrani odgovor se obrne v temno. */
.o2 .kviz, .o2 .pas-bel .kviz { border: 0; border-radius: 0; background: var(--o2-ploscica); box-shadow: var(--o2-senca-dvig); --o2-odgovor: var(--color-canvas); }
.o2 .pas-bel .kviz { box-shadow: none; --o2-odgovor: var(--color-surface); }
.o2 .kviz-napredek { height: 6px; background: var(--o2-ton); }
.o2 .kviz-oder { min-height: 540px; padding: clamp(24px, 4.6vw, 88px); }
.o2 .kviz-st span { font-size: clamp(64px, 8.4vw, 152px); letter-spacing: -0.06em; }
.o2 .kviz-st span[data-vseh] { font-size: clamp(18px, 1.6vw, 26px); letter-spacing: 0; }
.o2 .kviz-vprasanje { font-size: clamp(30px, 3.4vw, 60px); line-height: 1; letter-spacing: -0.04em; }
.o2 .kviz-moznosti { display: grid; gap: 6px; border: 0; }
.o2 .kviz-moznosti-vec { gap: 6px; }
.o2 .kviz-moznost, .o2 .kviz-moznosti-vec .kviz-moznost {
  padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.6vw, 24px); border: 0; background: var(--o2-odgovor);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.o2 .kviz-moznost::before { display: none; }
.o2 .kviz-moznost:hover { box-shadow: var(--o2-senca); }
.o2 .kviz-moznost:has(input:focus-visible) { border-radius: 0; }
.o2 .kviz-moznost:has(input:checked) { background: var(--color-text); color: var(--color-bg); }
.o2 .kviz-tipka { border-radius: 0; background: var(--o2-ton); }
.o2 .kviz-moznost:has(input:checked) .kviz-tipka { background: var(--color-bg); color: var(--color-text); }
.o2 .kviz-znak { background: var(--o2-ton); }
.o2 .kviz-moznost:has(input[type=checkbox]) .kviz-znak { border-radius: 0; }
.o2 .kviz-ime { font-size: clamp(19px, 1.2vw + 10px, 27px); }
.o2 .kviz-kombinacija { font-size: clamp(26px, 2.6vw, 48px); line-height: 1.16; letter-spacing: -0.03em; }
.o2 .kviz-projekt h3 { font-size: clamp(22px, 1.8vw, 32px); }
@media (max-width: 767px) {
  .o2 .kviz-oder { min-height: 0; padding: var(--space-6) var(--space-5); }
  .o2 .kviz-st span { font-size: 56px; }
  .o2 .kviz-st span[data-vseh] { font-size: 18px; }
}

/* 7 · Primeri (vodoravni trak). */
.o2 .vodoravno-uvod { counter-increment: sklop; max-width: calc(var(--container) + 2 * var(--gutter-fluid)); }
.o2 .vodoravno-uvod h2 { font-size: var(--text-h2); line-height: .98; letter-spacing: -0.04em; }
.o2 .vodoravno-uvod .nadnaslov::before { color: var(--color-text); }
.o2 .vodoravno-proga { gap: clamp(20px, 2.4vw, 40px); }
.o2 .vodoravno-karta { width: clamp(300px, 40vw, 680px); }
.o2 .vodoravno-slika { border-radius: 0; aspect-ratio: 3 / 2; }
.o2 .vodoravno-podatki { margin-top: 20px; padding-top: 0; border: 0; }
.o2 .vodoravno-narocnik { font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); }
.o2 .vodoravno-naslov { font-size: clamp(22px, 2vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.o2 .vodoravno-st { font-family: inherit; font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .14em; }
/* Kazalnik pomika je kratka tabletka, ne črta čez ves zaslon; okrogli gumb na koncu je v barvi iz palete. */
.o2 .vodoravno-napredek { width: clamp(120px, 14vw, 220px); height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16); }
.o2 .vodoravno-napredek span { border-radius: var(--radius-pill); background: #ffffff; }
.o2 .vodoravno-vsi { background: var(--dz-sky); color: var(--dz-ink); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.o2 .vodoravno-vsi:hover { transform: none; background: var(--dz-ink); color: var(--dz-sky); box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, .08); }

/* 8 · Rezultati: štiri velike številke, vsaka na svoji ploščici. */
.o2 .stevilke-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o2-razmik); border: 0; }
.o2 .stevilke-mreza > div { container-type: inline-size; gap: 14px; padding: var(--o2-rob); border: 0; background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); }
.o2 .stevilke-mreza dt { font-size: clamp(52px, 17.5cqi, 176px); line-height: .9; letter-spacing: -0.055em; color: var(--color-text); }
.o2 .stevilke-mreza dd { max-width: 26em; font-size: var(--text-lead); line-height: 1.35; }
.o2 .stevilke-mreza a { font-size: 15px; }

/* 9 · Zakaj: izjava čez vso širino, poslanstvo desno, primerjava v parih ploščic, načela kot ploščice. */
.o2 .zakaj-glava { counter-increment: sklop; max-width: none; display: grid; grid-template-columns: var(--o2-stolpci); column-gap: var(--grid-gap); }
.o2 .zakaj-glava > .nadnaslov { grid-column: 1 / -1; margin: 0; }
.o2 .zakaj-izjava { grid-column: 1 / span 11; margin-top: clamp(24px, 3.4vw, 64px); font-size: var(--text-h2); line-height: .98; letter-spacing: -0.04em; }
.o2 .zakaj-poslanstvo { grid-column: 7 / -1; max-width: none; margin-top: clamp(32px, 4vw, 72px); color: var(--color-text); }
.o2 .zakaj-razlike h3, .o2 .zakaj-nacela h3 { font-size: clamp(22px, 1.8vw, 32px); font-weight: var(--weight-regular); letter-spacing: -0.02em; }
/* Levo siva ploščica (klasična agencija), desno svetlo modra (mi); brez prečrtanega besedila. */
.o2 .zakaj-razlike table { width: calc(100% + 2 * var(--o2-razmik)); margin: calc(-1 * var(--o2-razmik)); border-collapse: separate; border-spacing: var(--o2-razmik); }
.o2 .zakaj-razlike th { padding: 0 var(--o2-rob) 2px; border: 0; }
.o2 .zakaj-razlike td { padding: var(--o2-rob); border: 0; vertical-align: middle; }
.o2 .zakaj-razlike td:first-child { background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); font-size: var(--text-lead); padding-top: var(--o2-rob); text-decoration: none; }
.o2 .zakaj-razlike td:last-child { background: var(--dz-sky); color: var(--dz-ink); font-size: clamp(22px, 2.3vw, 40px); line-height: 1.12; letter-spacing: -0.025em; }
.o2 .zakaj-nacela-glava { margin-bottom: var(--space-6); }
.o2 .nacela-mreza { gap: var(--o2-razmik); }
.o2 .nacela-mreza a {
  justify-content: space-between; gap: clamp(20px, 2.4vw, 40px); min-height: clamp(150px, 13vw, 230px); padding: var(--o2-rob); border: 0; border-radius: 0;
  background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.o2 .nacela-mreza a:hover { transform: none; box-shadow: none; background: var(--color-text); color: var(--color-bg); }
.o2 .nacela-mreza a:hover span:last-child { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.o2 .nacela-mreza strong { font-size: clamp(22px, 1.8vw, 32px); font-weight: var(--weight-regular); letter-spacing: -0.02em; }
.o2 .nacela-mreza span:last-child { font-size: 16px; }

/* 10 · Ekipa. */
.o2 .ekipa-trak { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: clamp(28px, 3vw, 48px) var(--grid-gap); }
.o2 .oseba-foto, .o2 .oseba img { border-radius: 0; }
.o2 .oseba-foto { margin-bottom: 14px; }
.o2 .oseba:hover img { transform: scale(1.03); box-shadow: none; }
.o2 .oseba img { transition: transform var(--dur-slow) var(--ease-out); }
.o2 .oseba strong { font-size: clamp(18px, 1.3vw, 22px); font-weight: var(--weight-medium); letter-spacing: -0.01em; }
.o2 .oseba span { font-size: 15px; line-height: 1.35; }

/* --- Poziv in noga --------------------------------------------------------------------------------- */
.o2 .poziv-notranjost { grid-template-columns: var(--o2-stolpci); column-gap: var(--grid-gap); row-gap: clamp(28px, 3.4vw, 56px); align-items: end; padding-block: var(--space-section); }
.o2 .poziv-notranjost > div:first-child { grid-column: 1 / span 9; }
.o2 .poziv-notranjost h2 { max-width: none; font-size: clamp(2.5rem, 5.7vw, 6.75rem); line-height: .96; letter-spacing: -0.045em; }
.o2 .poziv-gumbi .gumb { padding: 20px 34px; font-size: 19px; }
.o2 .poziv-notranjost .vodilo { max-width: 34em; margin-top: clamp(20px, 2.4vw, 40px); }
.o2 .poziv-gumbi { grid-column: 1 / span 9; }
.o2 .poziv-vzorec { position: static; grid-column: 10 / -1; grid-row: 1 / span 2; align-self: start; justify-self: end; grid-template-columns: repeat(2, clamp(64px, 8vw, 140px)); border-radius: 0; }
.o2 .noga { border: 0; }
.o2 .noga-notranjost { padding-top: var(--space-section-sm); }
.o2 .noga-email { font-size: clamp(20px, 1.6vw, 28px); }
.o2 .avtorske { padding-top: 0; }

/* --- Ozki zasloni: ena kolona ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
}
@media (max-width: 900px) {
  .o2 .glava-razdelka h2, .o2 .glava-razdelka:not(:has(.vodilo)) h2, .o2 .glava-razdelka .vodilo { grid-column: 1 / -1; grid-row: auto; }
  .o2 .glava-razdelka .nadnaslov { grid-column: 1 / -1; }
  .o2 .glava-razdelka > .puscica { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .o2 .n2-junak-spodaj .vodilo, .o2 .n2-junak-spodaj .gumbi { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .o2 .manifest-domov-izjava, .o2 .manifest-domov-vodilo, .o2 .zakaj-izjava, .o2 .zakaj-poslanstvo { grid-column: 1 / -1; }
  .o2 .poziv-notranjost > div:first-child, .o2 .poziv-gumbi { grid-column: 1 / -1; }
  .o2 .poziv-vzorec { display: none; }
}
@media (max-width: 767px) {
  .o2 .n2-junak { min-height: 0; }
  .o2 .n2-junak h1 { letter-spacing: -0.04em; line-height: .98; }
  .o2 .dejstva { grid-template-columns: minmax(0, 1fr); }
  /* Stolpec s številko je širok vsaj dobro tretjino, daljša številka (npr. »100+«) pa si vzame, kolikor potrebuje. */
  .o2 .dejstva > div { display: grid; grid-template-columns: minmax(36%, auto) minmax(0, 1fr); align-items: end; gap: 16px; padding: 20px; }
  .o2 .dejstva dt { font-size: clamp(56px, 18.5vw, 100px); white-space: nowrap; }
  .o2 .dejstva dd { margin: 0 0 .3em; font-size: 16px; }
  .o2 .stevilke-mreza { grid-template-columns: minmax(0, 1fr); }
  .o2 .stevilke-mreza dt { font-size: clamp(48px, 16vw, 88px); }
  .o2 .sklad > li { top: calc(var(--header-h) + var(--i, 0) * 14px); }
  /* Primerjava: par ploščic drug pod drugim. */
  .o2 .zakaj-razlike table, .o2 .zakaj-razlike tbody, .o2 .zakaj-razlike tr, .o2 .zakaj-razlike td { display: block; width: auto; }
  .o2 .zakaj-razlike table { margin: 0; }
  .o2 .zakaj-razlike thead { display: none; }
  .o2 .zakaj-razlike tr { margin-bottom: var(--o2-razmik); }
  .o2 .zakaj-razlike td { padding: 18px 20px; }
  .o2 .zakaj-razlike td:first-child { font-size: 16px; }
}

/* Velike začetnice s strešico (Š, Č, Ž) pri tesnem razmiku vrstic ne smejo biti odrezane z masko naslova. */
.o2 .split-enota.maska { padding-top: .16em; margin-top: -.16em; }

/* Fotografije in slike so povsod ravne (tudi maska ob razkritju). */
.o2 [data-maska], .o2 [data-maska] * { border-radius: 0 !important; }
@media (min-width: 1081px) {
  /* Ekipa vedno v eni vrsti, načela v štirih stolpcih. */
  .o2 .ekipa-trak { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .o2 .nacela-strnjena { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 1080px) { .o2 .ekipa-trak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .o2 .ekipa-trak { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================================================
   Podstrani
   ===================================================================================================== */
/* Uvod strani: oznaka, zelo velik naslov, uvod in skoki po strani kot oštevilčene tabletke. */
.o2 .junak { border-bottom: 0; }
.o2 .junak-notranjost { padding-top: clamp(48px, 6.4vw, 120px); padding-bottom: clamp(40px, 5vw, 96px); align-items: start; gap: var(--grid-gap); }
.o2 .junak h1, .o2 .junak-podstran h1 { max-width: 13em; font-size: var(--text-h1); line-height: .95; letter-spacing: -0.045em; }
.o2 .junak .nadnaslov { margin-bottom: clamp(16px, 2vw, 32px); }
.o2 .junak .vodilo { max-width: 30em; margin-top: clamp(24px, 3vw, 56px); color: var(--color-text); font-size: clamp(1.25rem, 1vw + 1rem, 2rem); line-height: 1.25; letter-spacing: -0.015em; }
.o2 .manifest-odstavek { max-width: 40em; font-size: var(--text-lead); line-height: 1.45; }
.o2 .junak-vzorec { grid-template-columns: repeat(3, clamp(56px, 7vw, 124px)); border-radius: 0; box-shadow: var(--o2-senca-dvig); }
.o2 .junak-vzorec-mali { grid-template-columns: repeat(2, clamp(64px, 8vw, 140px)); }
.o2 .skoki { counter-reset: skok; gap: 8px; margin-top: clamp(32px, 4.4vw, 80px); padding: 0; border: 0; }
.o2 .skoki a {
  counter-increment: skok; padding: 11px 18px; border: 0; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-sm);
  font-size: 16px; font-weight: var(--weight-medium); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.o2 .skoki a::before { content: counter(skok, decimal-leading-zero); margin-right: .7em; font-size: 12px; font-weight: var(--weight-bold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.o2 .skoki a:hover { background: var(--color-text); color: var(--color-bg); text-decoration: none; box-shadow: none; }
.o2 .skoki a:hover::before { color: inherit; }

/* Kartice so ploščice (za koga, koraki, trajanje, priprava, stebri). */
.o2 .mreza-kartic, .o2 .koraki, .o2 .trajanje, .o2 .priprava, .o2 .blok-stebri ol { gap: var(--o2-razmik); }
.o2 .mala-kartica, .o2 .pas:not(.pas-bel) .mala-kartica, .o2 .koraki li, .o2 .trajanje-karta, .o2 .priprava div, .o2 .blok-stebri li {
  padding: var(--o2-rob); border: 0; border-radius: 0; background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca);
}
.o2 .mala-kartica h3, .o2 .koraki h3, .o2 .trajanje-karta h3 { font-size: clamp(22px, 1.8vw, 32px); font-weight: var(--weight-regular); letter-spacing: -0.02em; line-height: 1.1; }
.o2 .mala-kartica p, .o2 .koraki p, .o2 .trajanje-karta p { font-size: 17px; }
.o2 .koraki .st { font-size: clamp(56px, 6vw, 112px); line-height: .85; letter-spacing: -0.05em; color: var(--color-text); margin-bottom: clamp(12px, 1.4vw, 24px); }
/* Trajanje: debel ploskovni stolpec namesto tanke črte. */
.o2 .trajanje-trak { height: 16px; border-radius: 0; background: var(--o2-ton); }
.o2 .trajanje-trak span { border-radius: 0; background: var(--dz-indigo); }
.o2 .priprava dt { font-size: clamp(20px, 1.5vw, 26px); font-weight: var(--weight-regular); letter-spacing: -0.015em; }
.o2 .blok-stebri li { padding-top: calc(var(--o2-rob) + 38px); }
.o2 .blok-stebri li .nadnaslov { top: var(--o2-rob); left: var(--o2-rob); }
/* Seznami brez mehurčkov in brez črt: pred vrstico majhen azurni kvadrat (kaj dobite) oziroma vprašaj (kaj nas zanima). */
.o2 .kljukice, .o2 .vprasalnik { gap: 10px; }
.o2 .kljukice li, .o2 .vprasalnik li { padding: 0 0 0 24px; border: 0; line-height: 1.35; }
.o2 .kljukice li::before { top: calc(.675em - 3.5px); width: 7px; height: 7px; border-radius: 0; background: var(--color-accent); }
.o2 .vprasalnik li::before { top: 0; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: .78em; line-height: 1.73; text-align: left; }
/* Zaveze: vsaka obljuba je oštevilčena ploščica, »česa ne obljubljamo« pa temna ploskev z enakim ritmom. */
.o2 .zaveze { gap: var(--o2-razmik); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.o2 .zaveze-da .kljukice { counter-reset: zaveza; gap: 6px; border: 0; font-size: clamp(20px, 1.75vw, 30px); letter-spacing: -0.02em; }
.o2 .zaveze-da .kljukice li {
  counter-increment: zaveza; display: grid; grid-template-columns: clamp(40px, 4.4vw, 80px) minmax(0, 1fr);
  padding: clamp(16px, 1.7vw, 28px) var(--o2-rob); border: 0; background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); line-height: 1.2;
}
.o2 .zaveze-da .kljukice li::before {
  content: counter(zaveza, decimal-leading-zero); position: static; width: auto; height: auto; border-radius: 0; background: none;
  padding-top: .55em; font-size: 13px; line-height: 1; font-weight: var(--weight-bold); letter-spacing: .04em; color: var(--color-accent-text); font-variant-numeric: tabular-nums;
}
.o2 .zaveze-ne { border-radius: 0; border: 0; background: var(--o2-crna); color: #f2f2f2; padding: var(--o2-rob); box-shadow: var(--o2-senca-dvig); }
.o2 .zaveze-ne h3 { max-width: 11em; margin-bottom: clamp(24px, 2.8vw, 48px); color: #ffffff; font-size: clamp(26px, 2.3vw, 40px); font-weight: var(--weight-regular); letter-spacing: -0.03em; line-height: 1.05; }
.o2 .zaveze-ne .krizci { gap: 6px; border: 0; font-size: clamp(16px, 1.15vw, 19px); }
.o2 .zaveze-ne .krizci li { padding: clamp(14px, 1.3vw, 20px) clamp(16px, 1.6vw, 24px) clamp(14px, 1.3vw, 20px) clamp(46px, 3.6vw, 60px); border: 0; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .86); line-height: 1.4; }
.o2 .zaveze-ne .krizci li::before {
  left: clamp(16px, 1.6vw, 24px); top: calc(clamp(14px, 1.3vw, 20px) + .32em); width: 13px; height: 13px; border: 0; border-radius: 0; background: var(--dz-rust);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 1l12 12M13 1L1 13'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 1l12 12M13 1L1 13'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kaj delamo: katalog storitev. Zavihki in storitve so ploščice; izbrani zavihek je temen. */
.o2 .iskalnik, .o2 .izbirnik-filtra select { border: 0; box-shadow: var(--o2-senca); }
.o2 .pas-bel .iskalnik, .o2 .pas-bel .izbirnik-filtra select { background: var(--color-canvas); box-shadow: none; }
.o2 .zavihki-ravni { gap: 6px; border: 0; }
.o2 .zavihki-ravni button {
  padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px); border: 0; background: var(--o2-ploscica); color: var(--color-text);
  font-size: clamp(17px, 1.3vw, 22px); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.o2 .zavihki-ravni button::after { display: none; }
.o2 .zavihki-ravni button:hover { background: color-mix(in srgb, var(--color-text) 10%, var(--o2-ploscica)); }
.o2 .zavihki-ravni button[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
.o2 .zavihki-ravni button[aria-selected="true"] .st, .o2 .zavihki-ravni button[aria-selected="true"] .stevec { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.o2 .zavihki-ravni .stevec { align-self: start; padding-top: .35em; }
.o2 .raven-plosca { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--grid-gap); }
.o2 .raven-uvod blockquote { font-size: clamp(24px, 2.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.o2 .storitve-seznam { display: grid; gap: 6px; }
.o2 .storitev { border: 0; padding-inline: var(--o2-rob); background: var(--o2-ploscica); transition: box-shadow var(--dur-fast) var(--ease-standard); }
.o2 .storitev:hover, .o2 .storitev[open] { box-shadow: var(--o2-senca); }
.o2 .storitev summary { padding-block: clamp(18px, 1.8vw, 28px); }
.o2 .storitev-ime { font-size: clamp(20px, 1.6vw, 28px); font-weight: var(--weight-regular); letter-spacing: -0.015em; }
.o2 .storitev-namen { font-size: 16px; }
.o2 .storitev-telo { padding-bottom: var(--o2-rob); }
.o2 .plus { border: 0; background: var(--o2-ton); }
.o2 .potek { gap: 6px; }
.o2 .potek li { padding: 14px 16px; border: 0; background: var(--o2-ton); }
.o2 .potek li::after { display: none; }

/* Dobra komunikacija. */
.o2 .manifest-glava h1 { font-size: var(--text-h1); line-height: .95; letter-spacing: -0.045em; }
.o2 .manifest-izjava { max-width: 22em; font-size: clamp(28px, 3.2vw, 60px); line-height: 1.1; letter-spacing: -0.03em; }
.o2 .naloge-vrtiljak, .o2 .naloge-sklep { font-size: clamp(28px, 3.6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
.o2 .preizkus { border: 0; border-radius: 0; padding: clamp(24px, 3.4vw, 56px); background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); }
.o2 .sestavina { border: 0; border-radius: 0; background: var(--o2-ton); box-shadow: none; }
.o2 .sestavina:hover { transform: none; box-shadow: var(--o2-senca); }
.o2 .sestavina[aria-pressed="true"] { background: var(--color-text); }
.o2 .sestavina-znak { border: 0; background: var(--o2-ton); }
.o2 .preizkus-izid { border: 0; border-radius: 0; background: var(--o2-ton); box-shadow: none; }
.o2 .merilo span { border-radius: 0; background: var(--o2-ton); }
.o2 .preizkus-manjka li { padding-left: 0; border-left: 0; }
.o2 .nacela-uvod { max-width: none; }
.o2 .nacela-uvod h2 { font-size: var(--text-h2); line-height: .98; letter-spacing: -0.04em; }
.o2 .nacela-stavek { max-width: 34em; font-size: clamp(22px, 2vw, 36px); line-height: 1.22; letter-spacing: -0.02em; }
.o2 .nacela-postavitev { grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr); gap: var(--grid-gap); }
.o2 .nacela-seznam { gap: var(--o2-razmik); }
.o2 .nacelo-clanek { padding: clamp(28px, 4vw, 72px) var(--o2-rob); border: 0; border-radius: 0; background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); }
.o2 .nacelo-st { font-size: clamp(56px, 6vw, 112px); letter-spacing: -0.05em; }
.o2 .nacelo-vrh h3 { font-size: clamp(36px, 4.6vw, 84px); line-height: .95; letter-spacing: -0.04em; }
.o2 .nacelo-vodilo { font-size: clamp(22px, 2vw, 36px); line-height: 1.16; letter-spacing: -0.02em; }
.o2 .nacelo-brez, .o2 .nacelo-z { border: 0; border-radius: 0; padding: clamp(20px, 2.4vw, 36px); }
.o2 .nacelo-brez { background: var(--o2-ton); }
.o2 .nacelo-primeri a { border: 0; border-radius: 0; }

/* Filtri in mreža primerov. */
.o2 .mreza-primerov { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: clamp(36px, 4vw, 72px) var(--grid-gap); }
.o2 .kartica-primera { border: 0; border-radius: 0; background: none; }
.o2 .kartica-primera:hover { transform: none; box-shadow: none; }
.o2 .kartica-primera-slika { aspect-ratio: 3 / 2; border: 0; transition: box-shadow var(--dur-base) var(--ease-standard); }
.o2 .kartica-primera:hover .kartica-primera-slika { box-shadow: var(--o2-senca-dvig); }
.o2 .kartica-primera-telo { padding: 16px 0 0; }
.o2 .kartica-primera .nadnaslov { margin-bottom: 8px; }
.o2 .kartica-primera-naslov { font-size: clamp(22px, 1.7vw, 30px); font-weight: var(--weight-regular); line-height: 1.1; letter-spacing: -0.02em; }
.o2 .filter-prazno { border: 0; border-radius: 0; }

/* Stran primera. */
.o2 .primer { --siroko: calc(var(--container) + 2 * var(--gutter-fluid)); }
.o2 .primer-glava { padding-top: clamp(24px, 3vw, 48px); }
.o2 .drobtine { margin-bottom: clamp(40px, 5vw, 96px); font-size: 13px; font-weight: var(--weight-medium); letter-spacing: .1em; text-transform: uppercase; }
.o2 .primer-uvod h1 { max-width: 14em; font-size: clamp(2.75rem, 6.4vw, 7.25rem); line-height: .95; letter-spacing: -0.045em; }
.o2 .primer-uvod .vodilo { max-width: 32em; margin-top: clamp(20px, 2.6vw, 44px); color: var(--color-text); font-size: clamp(1.25rem, 1vw + 1rem, 2rem); line-height: 1.22; letter-spacing: -0.015em; }
.o2 .grozd { grid-template-columns: repeat(2, clamp(64px, 7.4vw, 128px)); border-radius: 0; box-shadow: var(--o2-senca-dvig); }
/* Podatki o primeru so majhne ploščice. */
.o2 .primer-podatki { margin-top: clamp(40px, 5vw, 88px); padding: 0; border: 0; gap: var(--o2-razmik); }
.o2 .primer-podatki > div { padding: 16px 22px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.o2 .primer-podatki dt { font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; }
.o2 .primer-podatki dd { font-size: clamp(18px, 1.4vw, 24px); font-weight: var(--weight-regular); }
.o2 .okvir { border: 0; border-radius: 0; }
.o2 .primer-telo { grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr); gap: var(--grid-gap); }
.o2 .primer-telo:not(:has(.kazalo)) { grid-template-columns: minmax(0, 1fr); }
/* Kazalo (primer in načela): brez navpične črte; trenutno poglavje je bela tabletka. */
.o2 .kazalo ol, .o2 .nacela-kazalo ol { border: 0; display: grid; gap: 2px; justify-items: start; }
.o2 .kazalo a, .o2 .nacela-kazalo a { margin: 0; padding: 9px 14px; border: 0; border-radius: 18px; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.o2 .kazalo a:hover, .o2 .nacela-kazalo a:hover { background: var(--o2-ton); }
.o2 .kazalo a.aktivno, .o2 .nacela-kazalo a.aktivno { background: var(--color-surface); box-shadow: var(--shadow-sm); }
.o2 .ozko { max-width: 46rem; }
.o2 .blok-uvod { font-size: clamp(1.375rem, 1.3vw + 1rem, 2.25rem); line-height: 1.24; letter-spacing: -0.015em; }
.o2 .blok-naslov { font-size: clamp(2.125rem, 4vw, 4.75rem); line-height: .98; letter-spacing: -0.04em; }
.o2 .blok-besedilo { font-size: clamp(1.125rem, .4vw + 1.02rem, 1.3125rem); }
/* Citat je svetlo modra ploščica. */
.o2 .blok-citat { padding: var(--o2-rob); border: 0; background: var(--dz-sky); color: var(--dz-ink); }
.o2 .blok-citat p { font-size: clamp(24px, 2.4vw, 44px); line-height: 1.12; letter-spacing: -0.025em; }
.o2 .blok-citat cite { color: color-mix(in srgb, var(--dz-ink) 72%, transparent); }
.o2 .poudarek-izjava { max-width: 18em; font-size: clamp(32px, 4.6vw, 84px); line-height: 1; letter-spacing: -0.04em; }
.o2 .blok-stevilke { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.o2 .blok-stevilke dl { gap: var(--o2-razmik); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.o2 .blok-stevilke dl > div { container-type: inline-size; padding: var(--o2-rob); border: 0; background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); }
.o2 .blok-stevilke dt { font-size: clamp(44px, 26cqi, 120px); line-height: .9; letter-spacing: -0.05em; }
.o2 .blok-stevilke dd { font-size: 16px; line-height: 1.4; }
.o2 .video, .o2 .graf-tir, .o2 .plosca, .o2 dialog.povecava, .o2 .drsnik-diapozitiv img, .o2 .drsnik-proga:focus-visible { border-radius: 0; }
.o2 .video { box-shadow: var(--o2-senca); }
.o2 .graf-tir { border: 0; background: var(--o2-ton); }
.o2 .plosca { border: 0; }
.o2 .plosca-levo li::before { border: 0; background: var(--o2-ton); }
.o2 dialog.povecava { border: 0; box-shadow: var(--o2-senca-dvig); }
.o2 dialog.povecava .zapri { border: 0; box-shadow: var(--shadow-sm); }
.o2 .galerija button:hover { transform: none; box-shadow: var(--o2-senca); }
/* Drsnik slik: kazalnik je kratka tabletka, gumba sta ploskvi s senco. */
.o2 .drsnik-napredek { flex: none; width: clamp(120px, 14vw, 220px); height: 8px; border-radius: var(--radius-pill); background: var(--o2-ton); }
.o2 .drsnik-napredek span { border-radius: var(--radius-pill); }
.o2 .drsnik-stevec { font-family: inherit; font-weight: var(--weight-medium); }
.o2 .drsnik-gumbi { margin-left: auto; }
.o2 .drsnik-gumbi button { border: 0; box-shadow: var(--shadow-sm); }
.o2 .zavihek-st { font-size: clamp(56px, 6vw, 112px); letter-spacing: -0.05em; }
.o2 .zavihek-poudarek { font-size: clamp(22px, 2vw, 36px); line-height: 1.16; letter-spacing: -0.02em; }
/* Zavihki v primeru: tabletke, izbrana je temna. */
.o2 .zavihki-gumbi { gap: 6px; border: 0; }
.o2 .zavihki-gumbi button { padding: 11px 18px; border-radius: var(--radius-pill); background: var(--o2-ton); color: var(--color-text); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.o2 .zavihki-gumbi button::after { display: none; }
.o2 .zavihki-gumbi button[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
.o2 .zavihki-gumbi button:focus-visible { border-radius: var(--radius-pill); }
/* Časovnica: vsako leto je ploščica, brez navpične črte in pik. */
.o2 .casovnica-crta, .o2 .casovnica-tocka { display: none; }
.o2 .casovnica { gap: 6px; }
.o2 .casovnica li { grid-template-columns: clamp(84px, 9vw, 150px) minmax(0, 1fr); background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); }
.o2 .casovnica-cas { align-self: stretch; padding: var(--o2-rob) 0 var(--o2-rob) var(--o2-rob); text-align: left; font-family: inherit; font-weight: var(--weight-bold); letter-spacing: .08em; color: var(--color-accent-text); }
.o2 .casovnica-vsebina { padding: var(--o2-rob); }
.o2 .casovnica-vsebina strong { font-size: clamp(20px, 1.6vw, 28px); font-weight: var(--weight-regular); letter-spacing: -0.015em; }
/* Matrika: vrstice so ploščice, oznake nežne ploskve. */
.o2 .blok-matrika dl { display: grid; gap: 6px; border: 0; }
.o2 .matrika-vrsta { padding: 16px var(--o2-rob); border: 0; background: var(--o2-ploscica); box-shadow: var(--o2-ploscica-senca); }
.o2 .matrika-vrsta dt { font-size: clamp(17px, 1.2vw, 20px); }
.o2 .oznaka { border: 0; background: var(--o2-ton); }
.o2 .oznaka.izbrana { background: var(--color-text); }
.o2 .naslednji { max-width: 640px; }

/* Profil osebe (pojavno okno) in kontakt. */
.o2 dialog.profil { width: min(1120px, calc(100vw - 48px)); max-height: min(88dvh, 800px); border: 0; border-radius: 0; box-shadow: var(--o2-senca-dvig); }
.o2 .profil-vsebina { column-gap: clamp(28px, 3.4vw, 56px); min-height: min(560px, 70dvh); }
.o2 .profil-glava { padding-top: clamp(40px, 4.4vw, 64px); }
.o2 .profil-glava h2 { font-size: clamp(36px, 4vw, 64px); line-height: .98; letter-spacing: -0.04em; }
.o2 .profil-telo { padding: clamp(20px, 2.4vw, 36px) clamp(28px, 3.4vw, 56px) clamp(32px, 3.4vw, 56px) 0; font-size: 17px; }
.o2 .profil-telo .profil-moto { padding: 0; border: 0; margin-bottom: clamp(18px, 2vw, 28px); font-size: clamp(22px, 2vw, 32px); line-height: 1.16; letter-spacing: -0.02em; }
.o2 .profil-telo .povezave { gap: 8px; margin-top: clamp(20px, 2.4vw, 36px); padding-top: 0; border: 0; }
.o2 .profil-telo .povezave a { padding: 10px 18px; border-radius: var(--radius-pill); background: var(--o2-ton); color: var(--color-text); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.o2 .profil-telo .povezave a:hover { background: var(--color-text); color: var(--color-bg); text-decoration: none; }
.o2 .kontakt-stran { max-width: calc(var(--container) + 2 * var(--gutter-fluid)); gap: var(--grid-gap); padding-top: clamp(48px, 6.4vw, 120px); }
.o2 .kontakt-uvod h1 { font-size: var(--text-h1); line-height: .95; letter-spacing: -0.045em; }
.o2 .kontakt-podatki dt { font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; }
.o2 .kontakt-podatki dd { font-size: clamp(20px, 1.6vw, 28px); }
/* Obrazec je dvignjena bela ploščica, polja so sive ploskve brez obrobe. */
.o2 .kontakt-obrazec { border: 0; border-radius: 0; box-shadow: var(--o2-senca-dvig); padding: clamp(24px, 3.4vw, 56px); }
.o2 .polje input, .o2 .polje textarea { border: 0; border-radius: 0; padding: 14px 16px; font-size: 17px; background: var(--color-canvas); }
.o2 .obrazec-napaka { border: 0; border-radius: 0; }

@media (max-width: 900px) {
  .o2 .zaveze, .o2 .raven-plosca, .o2 .nacela-postavitev, .o2 .primer-telo { grid-template-columns: minmax(0, 1fr); }
  .o2 .zaveze { row-gap: clamp(20px, 4vw, 40px); }
  .o2 .zaveze-ne { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--grid-gap); align-items: start; }
  .o2 .zaveze-ne h3 { margin-bottom: 0; }
  .o2 .zavihki-ravni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Srednje širine: uvod in gumba v junaku drug pod drugim, da se ne prekrivata. */
@media (max-width: 1180px) {
  .o2 .n2-junak-spodaj .vodilo { grid-column: 1 / span 9; }
  .o2 .n2-junak-spodaj .gumbi { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .o2 .n2-junak-spodaj .vodilo { grid-column: 1 / -1; }
  .o2 .manifest-domov-izjava { font-size: clamp(26px, 7.4vw, 40px); line-height: 1.06; }
}

/* Mobilni meni: velike vrstice na indigo ploskvi, brez črt med njimi. Odpre se čez ves zaslon pod stekleno glavo:
   tabletka ostane, kakršna je, indigo ploskev zdrsne podnjo. */
@media (max-width: 1080px) {
  .o2 .meni { top: 0; z-index: -3; padding-top: calc(var(--header-h-lg) + var(--space-5)); }
  .o2 .meni > a { font-size: clamp(32px, 9vw, 56px); letter-spacing: -0.035em; line-height: 1.05; padding: clamp(14px, 3.6vw, 22px) 0; border: 0; }
  .o2 .meni-dodatno a { font-size: 18px; }
}
@media (max-width: 767px) {
  .o2 .meni { padding-top: calc(var(--header-h) + var(--space-4)); }
}
@media (max-width: 767px) {
  .o2 dialog.profil { width: 100%; max-height: 92dvh; }
  .o2 .profil-vsebina { min-height: 0; column-gap: 16px; }
  .o2 .profil-foto { border-radius: 0; }
  .o2 .profil-glava { padding-top: 0; }
  .o2 .profil-glava h2 { font-size: clamp(28px, 8vw, 38px); }
  .o2 .profil-telo { padding: 0; }
  .o2 .casovnica li { grid-template-columns: minmax(0, 1fr); }
  .o2 .casovnica-cas { padding: 18px 20px 0; }
  .o2 .casovnica-vsebina { padding: 8px 20px 20px; }
}
@media (max-width: 599px) {
  .o2 .zaveze-ne { display: block; }
  .o2 .zaveze-ne h3 { margin-bottom: 24px; }
}

/* =====================================================================================================
   Globina
   Površine ne ležijo več v isti ravnini. Nekatere so tik pred gledalcem (dolga mehka senca, prekrivajo
   sosede), nekatere vmes, nekatere zadaj (kratka senca ali vdolbina). Ob drsenju se bližnje premikajo
   hitreje od oddaljenih (paralaksa), zato se zdi, da lebdijo. Brez sledenja miški.
   ===================================================================================================== */
/* Junak: vsaka tretja ploščica v traku stopi iz vrste proti gledalcu. */
.o2 .n2-trak-ploscic { overflow-x: clip; overflow-y: visible; }
.o2 .n2-trak-ploscic .trak-ploscica { transform-origin: 50% 100%; }
.o2 .n2-trak-ploscic .trak-ploscica:nth-child(3n + 1) { position: relative; z-index: 1; transform: scale(1.17); box-shadow: var(--o2-senca-dvig); }

/* Tri številke: leva zadaj, srednja tik pred gledalcem (prekriva sosedi), desna vmes. */
.o2 .dejstva { align-items: start; padding-bottom: clamp(8px, 1.6vw, 24px); }
.o2 .dejstva > div { min-height: clamp(220px, 25vw, 430px); box-shadow: var(--o2-senca); }
.o2 .dejstva > div:nth-child(3n + 1) { --pl: -14px; margin-top: clamp(20px, 3vw, 52px); box-shadow: var(--o2-senca-1); }
.o2 .dejstva > div:nth-child(3n + 2) { --pl: 34px; z-index: 2; margin-inline: calc(-1 * clamp(6px, .9vw, 16px)); box-shadow: var(--o2-senca-dvig); }
.o2 .dejstva > div:nth-child(3n) { --pl: 16px; z-index: 1; margin-top: clamp(40px, 6vw, 104px); box-shadow: var(--o2-senca-3); }

/* Izzivi: temna plošča lebdi pred seznamom in ga prekriva; vrstice ležijo zadaj. */
@media (min-width: 1081px) {
  .o2 .izbirnik-plosca[data-theme="dark"], .o2 .pas-bel .izbirnik-plosca[data-theme="dark"] {
    z-index: 1; margin: calc(-1 * clamp(12px, 1.6vw, 28px)) calc(-1 * clamp(8px, 1.2vw, 20px)) 0 calc(-1 * clamp(10px, 1.2vw, 20px));
    /* Plošča sega čez seznam zgoraj in spodaj z negativnimi robovi, ne z višino v odstotkih: »100 % + rob« se v Safariju
       ob vsakem preračunu postavitve sešteva, zato je med drsenjem rasla brez konca in drsenje se je zataknilo. */
    margin-bottom: calc(-1 * clamp(12px, 1.6vw, 28px)); box-shadow: var(--o2-senca-dvig);
  }
  .o2 .izbirnik-seznam button { box-shadow: var(--o2-vdolbina); }
  .o2 .izbirnik[data-izbirnik] .izbirnik-seznam button[aria-selected="true"] { box-shadow: none; }
}

/* Kviz: odgovor se ob lebdenju dvigne proti gledalcu. */
.o2 .kviz-moznost { transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
.o2 .kviz-moznost:hover { translate: 0 -3px; box-shadow: var(--o2-senca-3); }

/* Rezultati: desni stolpec leži nižje; ploščice so na različnih ravneh. */
.o2 .stevilke-mreza { align-items: start; gap: clamp(12px, 1.6vw, 28px); }
.o2 .stevilke-mreza > div:nth-child(4n + 1) { --pl: 14px; box-shadow: var(--o2-senca-3); }
.o2 .stevilke-mreza > div:nth-child(4n + 2) { --pl: -12px; margin-top: clamp(28px, 4vw, 72px); box-shadow: var(--o2-senca-1); }
.o2 .stevilke-mreza > div:nth-child(4n + 3) { --pl: -10px; box-shadow: var(--o2-senca); }
.o2 .stevilke-mreza > div:nth-child(4n) { --pl: 30px; z-index: 1; margin-top: clamp(28px, 4vw, 72px); margin-left: calc(-1 * clamp(8px, 1.2vw, 22px)); box-shadow: var(--o2-senca-dvig); }

/* Zakaj: »klasična agencija« je vdolbljena zadaj, naš odgovor lebdi pred njo in jo prekriva. */
.o2 .zakaj-razlike td:first-child { box-shadow: var(--o2-vdolbina); }
.o2 .zakaj-razlike td:last-child {
  position: relative; z-index: 1; box-shadow: var(--o2-senca-3);
  transform: translate(calc(-1 * clamp(10px, 1.5vw, 26px)), calc(-1 * clamp(4px, .5vw, 8px)));
}
/* Načela: ploščice izmenično bliže in dlje; ob lebdenju se ploščica dvigne. */
.o2 .nacela-mreza a { box-shadow: var(--o2-senca-1); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
.o2 .nacela-mreza li:is(:nth-child(8n + 2), :nth-child(8n + 4), :nth-child(8n + 5), :nth-child(8n + 7)) a { translate: 0 calc(-1 * clamp(6px, .8vw, 12px)); box-shadow: var(--o2-senca-3); }
.o2 .nacela-mreza a:hover, .o2 .nacela-mreza li:is(:nth-child(8n + 2), :nth-child(8n + 4), :nth-child(8n + 5), :nth-child(8n + 7)) a:hover { translate: 0 calc(-1 * clamp(12px, 1.4vw, 20px)); box-shadow: var(--o2-senca-dvig); }

/* Ekipa: portreti lebdijo na dveh višinah; ob lebdenju se portret dvigne. */
.o2 .oseba-foto { box-shadow: var(--o2-senca); transition: box-shadow var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
.o2 .ekipa-trak .oseba:nth-child(even) { margin-top: clamp(14px, 2vw, 32px); }
.o2 .ekipa-trak .oseba:nth-child(3n + 1) .oseba-foto { box-shadow: var(--o2-senca-3); }
.o2 .oseba:hover .oseba-foto { translate: 0 -8px; box-shadow: var(--o2-senca-dvig); }

/* Poziv na temni ploskvi: vzorec ploščic lebdi pred njo. */
.o2 .poziv-vzorec { --pl: 30px; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .85), 0 80px 110px -50px rgba(0, 0, 0, .7); }

/* Podstrani: vzorec v uvodu lebdi; kartice so izmenično bliže in dlje, vsaka druga leži nižje. */
.o2 .junak-vzorec, .o2 .grozd { --pl: 26px; box-shadow: var(--o2-senca-dvig); }
.o2 .skoki a { box-shadow: var(--o2-senca-1); }
.o2 :is(.mreza-kartic, .koraki, .trajanje, .priprava) > :nth-child(even) { margin-top: clamp(10px, 1.4vw, 22px); }
.o2 :is(.mala-kartica, .koraki li, .trajanje-karta, .priprava div):nth-child(odd) { box-shadow: var(--o2-senca-1); }
.o2 :is(.mala-kartica, .koraki li, .trajanje-karta, .priprava div):nth-child(even) { box-shadow: var(--o2-senca-3); }
.o2 .pas-bel :is(.mala-kartica, .koraki li, .trajanje-karta, .priprava div):nth-child(odd) { box-shadow: var(--o2-vdolbina); }
/* Zaveze: temna plošča lebdi pred obljubami in jih prekriva. */
.o2 .zaveze-da .kljukice li:nth-child(odd) { box-shadow: var(--o2-vdolbina); }
.o2 .zaveze-da .kljukice li:nth-child(even) { box-shadow: var(--o2-senca-1); }
@media (min-width: 901px) {
  .o2 .zaveze-ne { position: relative; z-index: 1; margin: calc(-1 * clamp(10px, 1.4vw, 24px)) 0 calc(-1 * clamp(10px, 1.4vw, 24px)) calc(-1 * clamp(16px, 2vw, 36px)); }
}
/* Katalog: izbrani zavihek in odprta storitev stopita naprej. */
.o2 .zavihki-ravni button { box-shadow: var(--o2-senca-1); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
.o2 .zavihki-ravni button[aria-selected="true"] { z-index: 1; translate: 0 -6px; box-shadow: var(--o2-senca-3); }
.o2 .storitev[open] { position: relative; z-index: 1; box-shadow: var(--o2-senca-3); }
.o2 .iskalnik, .o2 .izbirnik-filtra select { box-shadow: var(--o2-senca-3); }
/* Dobra komunikacija: članki načel lebdijo, »brez tega« je vdolbljen, »ko to upoštevamo« stopi naprej. */
.o2 .nacelo-clanek { box-shadow: var(--o2-senca-3); }
.o2 .nacelo-brez { box-shadow: var(--o2-vdolbina); }
.o2 .nacelo-z { position: relative; z-index: 1; margin-left: calc(-1 * clamp(8px, 1vw, 18px)); box-shadow: var(--o2-senca-3); }
.o2 .preizkus { box-shadow: var(--o2-senca-3); }
.o2 .sestavina { box-shadow: var(--o2-vdolbina); }
.o2 .sestavina[aria-pressed="true"] { translate: 0 -4px; box-shadow: var(--o2-senca-3); }
/* Primeri in stran primera. */
.o2 .kartica-primera-slika { box-shadow: var(--o2-senca); }
.o2 .mreza-primerov .primer-celica:nth-child(3n + 2) .kartica-primera-slika { box-shadow: var(--o2-senca-3); }
.o2 .kartica-primera:hover .kartica-primera-slika { translate: 0 -6px; box-shadow: var(--o2-senca-dvig); }
.o2 .kartica-primera-slika { transition: box-shadow var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard); }
.o2 .primer-podatki > div { box-shadow: var(--o2-senca); }
.o2 .primer-podatki > div:nth-child(even) { translate: 0 8px; box-shadow: var(--o2-senca-3); }
.o2 .blok-citat { --pl: 18px; position: relative; z-index: 1; margin-left: calc(-1 * clamp(12px, 2vw, 36px)); box-shadow: var(--o2-senca-3); }
.o2 .blok-stevilke dl > div:nth-child(odd) { box-shadow: var(--o2-senca-1); }
.o2 .blok-stevilke dl > div:nth-child(even) { margin-top: clamp(10px, 1.4vw, 22px); box-shadow: var(--o2-senca-3); }
.o2 .pas-bel .blok-stevilke dl > div:nth-child(odd), .o2 .primer .blok-stevilke dl > div:nth-child(odd) { box-shadow: var(--o2-senca-1); }
.o2 .casovnica li:nth-child(odd) { box-shadow: var(--o2-senca-1); }
.o2 .casovnica li:nth-child(even) { box-shadow: var(--o2-senca-3); translate: clamp(8px, 1vw, 16px) 0; }
.o2 .matrika-vrsta { box-shadow: var(--o2-senca-1); }
.o2 .okvir, .o2 .video { box-shadow: var(--o2-senca-3); }
/* Gumb za predvajanje iz mlečnega stekla. */
.o2 .predvajaj span {
  background: var(--o2-steklo-odsev), rgba(255, 255, 255, .3); color: #ffffff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: saturate(1.7) blur(22px); backdrop-filter: saturate(1.7) blur(22px);
}
/* Kontakt: obrazec tik pred gledalcem, polja vdolbljena. */
.o2 .polje input, .o2 .polje textarea { box-shadow: var(--o2-vdolbina); }
.o2 .polje input:focus, .o2 .polje textarea:focus { box-shadow: var(--focus-ring); }

/* Paralaksa ob drsenju: bližnje površine (večji --pl) se premikajo hitreje, oddaljene (negativen --pl) zaostajajo. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .o2 .dejstva > div, .o2 .stevilke-mreza > div, .o2 .poziv-vzorec, .o2 .junak-vzorec, .o2 .kontakt-uvod .grozd, .o2 .blok-citat {
      animation: o2-globina linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes o2-globina { from { translate: 0 var(--pl, 20px); } to { translate: 0 calc(-1 * var(--pl, 20px)); } }

/* Ožji zasloni: površine so druga pod drugo, zato brez prekrivanja; globino nosijo sence. */
@media (max-width: 900px) {
  .o2 .zakaj-razlike td:last-child { transform: translate(clamp(8px, 2.4vw, 20px), calc(-1 * clamp(8px, 2vw, 16px))); }
  .o2 .nacelo-z { margin-left: 0; }
  .o2 .blok-citat { margin-left: 0; }
}
@media (max-width: 767px) {
  .o2 .n2-trak-ploscic .trak-ploscica:nth-child(3n + 1) { transform: scale(1.12); }
  .o2 .dejstva { gap: 12px; }
  .o2 .dejstva > div, .o2 .dejstva > div:nth-child(n) { min-height: 0; margin: 0; }
  .o2 .dejstva > div:nth-child(3n + 2) { margin-inline: -6px 6px; }
  .o2 .dejstva > div:nth-child(3n) { margin-inline: 8px -4px; }
  .o2 .stevilke-mreza > div, .o2 .stevilke-mreza > div:nth-child(n) { margin: 0; }
  .o2 .stevilke-mreza > div:nth-child(even) { margin-inline: 10px -4px; }
  .o2 :is(.mreza-kartic, .koraki, .trajanje, .priprava) > :nth-child(even) { margin-top: 0; }
  .o2 .ekipa-trak .oseba:nth-child(even) { margin-top: 18px; }
  .o2 .primer-podatki > div:nth-child(even) { translate: none; }
  .o2 .casovnica li:nth-child(even) { translate: none; }
}
/* Na ozkih telefonih dolg napis v velikem gumbu ne sme čez rob zaslona. */
@media (max-width: 420px) {
  .o2 .gumb-velik { max-width: 100%; padding-inline: 22px; font-size: 17px; }
}