/* ==========================================================
   TERRA MUNDUS — skupni slog za vse strani
   ----------------------------------------------------------
   Pot do pisav in slik je relativna glede na TO datoteko,
   zato naj slog.css ostane v isti mapi kot mapi  pisave/  in  slike/.
   ========================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('pisave/Fraunces.woff2') format('woff2-variations'),
      url('pisave/Fraunces.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- LASTNE PISAVE ----------
   swap = besedilo je vidno takoj v nadomestni pisavi in se zamenja,
   ko se naloži prava. Brez tega je stran za trenutek prazna.
   Datoteka woff2 vsebuje tudi č, š, ž.                        */
@font-face{
  font-family:'Alegreya';
  src:url('pisave/Alegreya.woff2') format('woff2-variations'),
      url('pisave/Alegreya.woff2') format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Alegreya';
  src:url('pisave/Alegreya-Italic.woff2') format('woff2-variations'),
      url('pisave/Alegreya-Italic.woff2') format('woff2');
  font-weight:400 900;
  font-style:italic;
  font-display:swap;
}
/* Če nimaš variabilne pisave, ampak posamezne reze, uporabi namesto
   zgornjega po en blok na rez, npr.:
   @font-face{font-family:'Alegreya';src:url('pisave/Alegreya-Bold.woff2') format('woff2');
              font-weight:700;font-style:normal;font-display:swap} */

/* ==========================================================
   FOTOGRAFIJE — vse slike daj v mapo  slike/  poleg te datoteke
   ----------------------------------------------------------
   HERO OZADJE: odkomentiraj spodnjo vrstico in vpiši ime datoteke.
   OSTALE SLIKE: v HTML dodaj atribut style na okvir, npr.
       <div class="ph" style="--img:url('slike/atlas.jpg')">Foto: Atlas</div>
   Napis izgine sam, ko je slika vpisana.
   ========================================================== */
.hero{
  --hero-img: url('slike/hero.jpg');   /* <- tvoja fotografija */
  --hero-scrim: linear-gradient(180deg, rgba(226,215,196,.72), rgba(246,242,234,.90));
}

:root{
  --sand:#E2D7C4;     /* najsvetlejši — ozadja, sekcije */
  --tan:#BFAA85;      /* akcent — CTA, poudarki */
  --olive:#8D8A5B;    /* srednji ton — linije, ikone */
  --moss:#5F6A3D;     /* mah — sekundarni tekst, gumbi */
  --forest:#2F3A1F;   /* najtemnejši — tipografija, temne sekcije */
  --paper:#F6F2EA;    /* papir, izpeljan iz sanda */
  --ink:#26301A;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
/* Varovalo proti vodoravnemu drsenju. Namenoma "clip" in ne "hidden":
   "hidden" bi iz telesa naredil drsni okvir in position:sticky v glavi
   bi nehal delovati. "clip" samo odreže, kar uide čez rob. */
/* Prelivanje čez desni rob: "clip" se z <body> prenese na okno, zato
   ga je treba nastaviti tudi na <html>. Namenoma ni "hidden" — ta bi
   iz elementa naredil drsni okvir in position:sticky v glavi bi odpovedal. */
html{overflow-x:clip}
body{overflow-x:clip}
/* Privzeti min-width:auto prepreči krčenje otrok v mreži/flexu pod
   širino njihove vsebine. To je najpogostejši vzrok vodoravnega drsenja. */
.split>*,.story-grid>*,.tiers>*,.steps>*,.logos>*,.quote-row>*,.fgrid>*{min-width:0}
body{font-family:'Alegreya',Georgia,'Times New Roman',serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:17px}
h1,h2,h3,.display{font-family:'Alegreya',serif;letter-spacing:-.012em;text-wrap:balance}
p,li{text-wrap:pretty}
.lg-br{display:none}
@media(min-width:1000px){.lg-br{display:inline}}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Alegreya',serif;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);font-weight:600;margin-bottom:14px}
section{padding:70px 0}
/* odseki pod pregibom se izrišejo šele, ko se jim obiskovalec približa */
/* .trail je izvzet: contain:style (del content-visibility) razveljavi
   CSS counter in vse številke korakov postanejo "01".
   .cta je izvzet: ob odpiranju obrazca se višina spremeni, ocena
   contain-intrinsic-size pa zgreši cilj drsenja na #kontakt. */
.story,.offer,.loc,.about,.partners,.quotes{content-visibility:auto;contain-intrinsic-size:auto 620px}
.ph{font-family:'Alegreya',serif;background:var(--img, repeating-linear-gradient(45deg,#d8ccb6,#d8ccb6 12px,#e5dbc9 12px,#e5dbc9 24px)) center/cover no-repeat;border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;color:#8a8264;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:12px}

/* strata — podpis blagovne znamke: 5 plasti palete */
.ph[style*='--img']{color:transparent}
.strata{display:flex;height:6px}
.strata i{flex:1}
.strata i:nth-child(1){background:var(--sand)}
.strata i:nth-child(2){background:var(--tan)}
.strata i:nth-child(3){background:var(--olive)}
.strata i:nth-child(4){background:var(--moss)}
.strata i:nth-child(5){background:var(--forest)}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgb(246 242 234 / 68%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ddd2bd}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:'Fraunces','Alegreya',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 0,'opsz' 48;font-weight:400;font-size:1.34rem;letter-spacing:.08em;color:var(--forest);text-decoration:none}
.logo span{color:var(--moss)}
nav ul{display:flex;gap:28px;list-style:none;font-size:.92rem}
nav ul a{text-decoration:none;opacity:.85}
nav ul a:hover{opacity:1;color:var(--moss)}
.btn{font-family:'Alegreya',serif;display:inline-block;background:var(--forest);color:var(--sand);padding:13px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;border:1.5px solid var(--forest);cursor:pointer;line-height:1.2}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
.btn:hover{background:var(--moss);border-color:var(--moss)}
.btn.gold{background:var(--tan);color:var(--forest);border-color:var(--tan)}
.btn.gold:hover{background:var(--olive);border-color:var(--olive);color:var(--paper)}
.btn.ghost{background:transparent;border:1.5px solid var(--forest);color:var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--sand)}
nav .btn{padding:9px 20px}

/* ---------- MENI NA TELEFONU ---------- */
.nav-toggle{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;padding:0;
  background:none;border:0;border-radius:12px;cursor:pointer;color:var(--forest);
  -webkit-tap-highlight-color:transparent;transition:background .25s ease}
.nav-toggle:active{background:rgba(191,170,133,.18)}
.nav-toggle:focus-visible{outline:2px solid var(--tan);outline-offset:2px}
.nav-bars{position:relative;display:block;width:19px;height:13px}
.nav-bars i{position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
  background:currentColor;opacity:.78;
  transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.nav-bars i:nth-child(1){top:0}
.nav-bars i:nth-child(2){top:5.75px}
.nav-bars i:nth-child(3){top:11.5px}
/* črtici se ob odprtju mirno prekrižata */
nav.menu-open .nav-bars i:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
nav.menu-open .nav-bars i:nth-child(2){opacity:0;transform:scaleX(.4)}
nav.menu-open .nav-bars i:nth-child(3){transform:translateY(-5.75px) rotate(-45deg)}

/* HERO — obzorje v plasteh palete */
.hero{padding:0;
  /* dva sloja: zgoraj prosojna tančica, spodaj fotografija.
     Namesto bližnjice uporabljamo posamezne lastnosti — v bližnjici
     z var() se background-size ne razreši pravilno in ostane "auto". */
  background-color:var(--sand);
  background-image:var(--hero-scrim), var(--hero-img, linear-gradient(180deg,var(--sand) 0%,#e9e0d0 44%,var(--paper) 100%));
  background-position:center center, center center;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
  background-attachment:scroll, scroll}
.hero .wrap{display:flex;flex-direction:column;justify-content:center;min-height:min(78vh,700px);padding-top:78px;padding-bottom:86px;max-width:920px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.04;font-weight:800;text-wrap:balance;color:var(--forest)}
.hero h1 em{font-style:normal;color:var(--moss)}
.hero p.lede{margin:24px 0 8px;font-size:1.18rem;max-width:44rem;color:#414a30}
.hero .cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* TICKER */
.ticker{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid #d5c9b1;border-bottom:1px solid #d5c9b1;background:var(--sand);padding:14px 0}
.flowbg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.flowbg i{position:absolute;display:block;inset:-160% -40%;will-change:transform}

/* mah — glavni zeleni tok */
.flowbg i:nth-child(1){
  background:radial-gradient(30% 46% at 18% 50%, rgba(95,106,61,.46), rgba(95,106,61,0) 70%),
             radial-gradient(26% 40% at 48% 46%, rgba(141,138,91,.50), rgba(141,138,91,0) 72%),
             radial-gradient(28% 44% at 82% 54%, rgba(95,106,61,.38), rgba(95,106,61,0) 70%);
  filter:blur(30px);animation:wave1 28s ease-in-out infinite}

/* oliva — vmesni sloj, potuje v nasprotno smer */
.flowbg i:nth-child(2){
  background:radial-gradient(34% 50% at 62% 42%, rgba(141,138,91,.42), rgba(141,138,91,0) 72%),
             radial-gradient(26% 44% at 24% 58%, rgba(95,106,61,.30), rgba(95,106,61,0) 74%);
  filter:blur(42px);animation:wave2 41s ease-in-out infinite}

/* pesek — topel odsev, da ni preveč hladno */
.flowbg i:nth-child(3){
  background:radial-gradient(30% 46% at 40% 56%, rgba(191,170,133,.34), rgba(191,170,133,0) 74%);
  filter:blur(38px);animation:wave3 34s ease-in-out infinite}

@keyframes wave1{
  0%  {transform:translate3d(12%,0,0)    scaleX(1)    rotate(0deg)}
  28% {transform:translate3d(-2%,3%,0)   scaleX(1.16) rotate(-1.4deg)}
  55% {transform:translate3d(-14%,-2%,0) scaleX(.92)  rotate(1.2deg)}
  80% {transform:translate3d(-4%,2%,0)   scaleX(1.1)  rotate(-.6deg)}
  100%{transform:translate3d(12%,0,0)    scaleX(1)    rotate(0deg)}
}
@keyframes wave2{
  0%  {transform:translate3d(-16%,2%,0)  scaleX(1.05) rotate(.8deg)}
  35% {transform:translate3d(6%,-3%,0)   scaleX(.9)   rotate(-1deg)}
  68% {transform:translate3d(14%,3%,0)   scaleX(1.22) rotate(1.4deg)}
  100%{transform:translate3d(-16%,2%,0)  scaleX(1.05) rotate(.8deg)}
}
@keyframes wave3{
  0%  {transform:translate3d(4%,-2%,0)   scaleX(1)}
  45% {transform:translate3d(-10%,3%,0)  scaleX(1.18)}
  75% {transform:translate3d(8%,1%,0)    scaleX(.95)}
  100%{transform:translate3d(4%,-2%,0)   scaleX(1)}
}
@media (prefers-reduced-motion: reduce){ .flowbg i{animation:none} }
.ticker .wrap{position:relative;z-index:1;font-family:'Alegreya',serif;display:flex;gap:40px;justify-content:center;flex-wrap:wrap;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--moss);font-weight:600}
/* Obiskovalci so v to pasico klikali, čeprav ni bila klikljiva.
   Namesto da bi jim to navado jemali, so napisi zdaj res povezave
   do ustreznih odsekov. Videz ostaja nespremenjen; da gre za povezavo,
   se pokaže šele ob prehodu z miško. */
.ticker a{color:inherit;text-decoration:none;padding:4px 2px;
  transition:color .25s ease}
.ticker a:hover{color:var(--forest)}
.ticker a:focus-visible{outline:2px solid var(--tan);outline-offset:3px;border-radius:3px}

/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split h2{font-size:clamp(1.85rem,3.2vw,2.6rem);color:var(--forest);margin-bottom:18px;line-height:1.15}
.split p{margin-bottom:14px;color:#3d452e}
.portrait{height:400px}
/* Slike so zdaj pravi <img>: brskalnik jih lahko odloži (loading=lazy),
   atributa width/height pa rezervirata prostor, da se besedilo med
   nalaganjem ne premika. */
img.portrait,img.loc-img{width:100%;object-fit:cover;border-radius:var(--radius);background:#e5dbc9}
/* <img> ne nastavlja --img, zato bi se skozi prosojne dele logotipa
   videla črtasta nadomestna ploskev iz pravila .logo-slot .mark.
   POZOR NA SPECIFIČNOST: .logo-slot .mark je (0,2,0). Selektor
   img.mark je le (0,1,1) in izgubi, zato mora biti .logo-slot img.mark. */
.logo-slot img.mark{background:none;object-fit:contain;display:block}

/* ZGODBA */
.story{background:var(--forest);color:var(--sand)}
.story .eyebrow{color:var(--tan)}
.story h2{font-size:clamp(1.85rem,3.2vw,2.6rem);margin-bottom:36px;max-width:26ch;color:#fff}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.card{position:relative;overflow:hidden;background:rgba(226,215,196,.07);border:1px solid rgba(226,215,196,.2);border-radius:var(--radius);padding:34px 34px 38px;transition:border-color .45s ease;min-height:300px;display:flex;flex-direction:column;justify-content:center}

/* kvadratna fotografija, pripeta na desni rob kartice.
   Levi rob slike se z masko zlije v ozadje, zato ni vidnega roba. */
.card .photo{position:absolute;top:0;right:0;bottom:0;z-index:0;pointer-events:none;
  aspect-ratio:1/1;                     /* kvadrat, visok kot kartica */
  background-image:var(--img, none);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.75;
  filter:grayscale(.2) contrast(.97);
  transition:opacity .6s ease, transform .8s ease;
  transform:scale(1);
  /* pero proti levi: slika se postopoma raztopi */
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 26%, rgba(0,0,0,.7) 55%, rgba(0,0,0,1) 82%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 26%, rgba(0,0,0,.7) 55%, rgba(0,0,0,1) 82%)}
.card:hover .photo{opacity:.88;transform:scale(1.03)}

/* rahla tančica čez sliko, da naslovi ostanejo berljivi */
.card .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(47,58,31,.55) 0%, rgba(47,58,31,.12) 42%, rgba(47,58,31,.45) 100%)}

.card h3,.card p{position:relative;z-index:2}
.card p{max-width:31ch}
.card h3{font-size:1.35rem;margin-bottom:12px;color:#fff}
.card h3 span{font-family:'Alegreya',serif;color:var(--tan);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px}
.card p{color:#cfc7b2;font-size:.98rem}
.story .closing{margin-top:40px;text-align:center;font-family:'Alegreya',serif;font-size:1.5rem;color:#fff}
.story .closing b{color:var(--tan)}

/* POT */
.trail{counter-reset:step}
/* številke so zapisane naravnost, da niso odvisne od containmenta */
.step:nth-child(1)::before{content:"01"}
.step:nth-child(2)::before{content:"02"}
.step:nth-child(3)::before{content:"03"}
.step:nth-child(4)::before{content:"04"}
.trail h2{font-size:clamp(1.85rem,3.2vw,2.6rem);color:var(--forest);margin-bottom:12px}
.trail .sub{max-width:44rem;color:#4d5539;margin-bottom:44px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;padding-left:20px;padding-right:20px}
.steps::before{content:"";position:absolute;top:26px;left:calc(6% + 20px);right:calc(6% + 20px);border-top:2px dashed var(--tan)}
.step{--dot:52px;position:relative;padding-top:66px;isolation:isolate}
.step::before{counter-increment:step;transition:none;content:counter(step,decimal-leading-zero);position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);box-sizing:border-box;border-radius:50%;background:var(--paper);border:2px solid var(--moss);transform-origin:50% 50%;display:flex;align-items:center;justify-content:center;font-family:'Alegreya',serif;font-weight:700;color:var(--moss)}
.step h3{font-size:1.15rem;margin-bottom:8px;color:var(--forest)}
.step p{font-size:.94rem;color:#4d5539}


/* ---------- POT: zaporedno utripanje ----------
   Animirata se SAMO transform in opacity — edini lastnosti, ki ju
   brskalnik obdela na grafični kartici brez ponovnega izrisa.
   Nič box-shadow (drago barvanje) in nič border-width (sproži prelom
   postavitve na vsaki sličici — to je povzročalo zatikanje).
   ------------------------------------------------------------ */

/* en sam obroč, kot krog na vodi */
.ping{position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);display:block;pointer-events:none;z-index:0}
.ping i{position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);box-sizing:border-box;
  border-radius:50%;border:2px solid var(--tan);transform-origin:50% 50%;
  opacity:0;transform:scale(.92);will-change:transform,opacity}

/* mehak sij pod obroči */
.step::after{content:"";position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);box-sizing:border-box;
  border-radius:50%;transform-origin:50% 50%;
  pointer-events:none;z-index:-1;opacity:0;transform:scale(.85);will-change:transform,opacity;
  background:radial-gradient(closest-side, rgba(191,170,133,.80), rgba(191,170,133,.34) 50%, rgba(141,138,91,0) 82%)}

.step::before{will-change:transform}

.steps.live .ping i{animation:ping 6.4s cubic-bezier(0,.5,.35,1) infinite;
  animation-delay:calc(var(--n,0) * 1.5s)}
.steps.live .step::after{animation:halo 6.4s ease-in-out infinite;
  animation-delay:calc(var(--n,0) * 1.5s)}
.steps.live .step::before{animation:ring 6.4s ease-in-out infinite;
  animation-delay:calc(var(--n,0) * 1.5s)}

/* obroč: hitro se odrine, nato vedno počasneje širi in ugasne */
@keyframes ping{
  0%   {opacity:0;   transform:scale(.92)}
  5%   {opacity:.85; transform:scale(1.05)}
  38%  {opacity:0;   transform:scale(2.45)}
  100% {opacity:0;   transform:scale(.92)}
}

/* sij: mehko vzide in mehko ugasne */
@keyframes halo{
  0%   {opacity:0;   transform:scale(.85)}
  9%   {opacity:1;   transform:scale(1.2)}
  34%  {opacity:.18; transform:scale(1.9)}
  54%  {opacity:0;   transform:scale(2.2)}
  100% {opacity:0;   transform:scale(.85)}
}

/* krog: samo merilo in barva roba — brez spreminjanja debeline */
@keyframes ring{
  0%   {transform:scale(1);    border-color:var(--moss); color:var(--moss)}
  9%   {transform:scale(1.12); border-color:var(--tan);  color:var(--forest)}
  26%  {transform:scale(1.04); border-color:var(--tan);  color:var(--forest)}
  50%  {transform:scale(1);    border-color:var(--moss); color:var(--moss)}
  100% {transform:scale(1);    border-color:var(--moss); color:var(--moss)}
}

@media (prefers-reduced-motion: reduce){
  .steps.live .step::before,.steps.live .step::after,.steps.live .ping i{animation:none}
}

/* PONUDBA */
.offer{background:var(--sand)}
.offer h2{font-size:clamp(1.85rem,3.2vw,2.6rem);color:var(--forest);margin-bottom:12px}
.offer .sub{color:#4d5539;margin-bottom:44px;max-width:44rem}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tier{background:var(--paper);border-radius:var(--radius);padding:36px 30px;border:1px solid #d5c9b1;display:flex;flex-direction:column}
.tier.feature{border:2px solid var(--moss);position:relative}
.tier.feature::after{font-family:'Alegreya',serif;content:"Priporočam za začetek";position:absolute;top:-13px;left:30px;background:var(--moss);color:var(--sand);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;font-weight:700}
.tier h3{font-size:1.25rem;color:var(--forest);margin-bottom:4px}
.tier .tag{font-family:'Alegreya',serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive);font-weight:600;margin-bottom:18px}
/* Seznam se NE razteza (prej flex:1): pri kartici z eno samo postavko
   je to potisnilo opombo daleč stran od cene. Prazen prostor zdaj
   pobere gumb prek margin-top:auto, zato so gumbi še vedno poravnani. */
.tier ul{list-style:none;margin-bottom:22px;flex:none}
.tier li{padding:12px 0;border-bottom:1px dashed #d5c9b1;font-size:.95rem;display:flex;justify-content:space-between;gap:12px}
.stopnja{display:block;line-height:1.35}
.stopnja b{font-weight:700;color:var(--forest);margin-right:6px}
.stopnja em{display:block;font-style:normal;font-size:.82rem;color:var(--olive);margin-top:2px}
.tier li b{font-family:'Alegreya',serif;font-weight:700;white-space:nowrap;color:var(--forest)}
.tier .note{font-size:.82rem;color:#7d7659;margin-bottom:18px}
.tier .btn{text-align:center;margin-top:auto}

/* PARTNERJI */
.partners{background:linear-gradient(180deg,var(--paper),var(--sand));padding:56px 0}
.partners .head{text-align:center;margin-bottom:34px}
.partners h2{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--forest);margin-bottom:8px}
.partners .head p{color:#5d6446;font-size:.98rem;max-width:44rem;margin:0 auto}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch}
.logo-slot{background:#fff;border:1px solid #d5c9b1;border-radius:var(--radius);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 16px;text-align:center}
.logo-slot .mark{width:100%;height:80px;border-radius:6px;background:var(--img, repeating-linear-gradient(45deg,#ded2bb,#ded2bb 8px,#e9e0d0 8px,#e9e0d0 16px)) center/contain no-repeat;display:flex;align-items:center;justify-content:center;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#8a8264;}
.logo-slot .mark[style*='--img']{color:transparent}
.logo-slot .pname{font-weight:700;color:var(--forest);font-size:.98rem;}
.logo-slot .prole{display:none}
/* KONTAKTNI OBRAZEC */
.form-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin .4s ease;opacity:0;margin-top:0}
.form-shell.open{grid-template-rows:1fr;opacity:1;margin-top:36px}
.form-inner{overflow:hidden;min-height:0}
.form-card{max-width:660px;margin:0 auto;background:rgba(226,215,196,.07);border:1px solid rgba(226,215,196,.18);border-radius:26px;padding:38px 34px;text-align:left;backdrop-filter:blur(4px)}
.form-card h3{color:#fff;font-size:1.3rem;margin-bottom:6px}
.form-card .hint{color:#bdb49c;font-size:.9rem;margin-bottom:24px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tan);font-weight:600}
.field input,.field select,.field textarea{font-family:'Alegreya',serif;font-size:1rem;color:var(--sand);
  background:rgba(226,215,196,.14);border:1.5px solid rgba(226,215,196,.42);border-radius:14px;padding:13px 15px;transition:border-color .25s ease,background .25s ease}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#a49e88}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tan);background:rgba(226,215,196,.13)}
.field select option{background:var(--forest);color:var(--sand)}
.consent{display:flex;gap:13px;align-items:flex-start;margin-top:20px;font-size:.9rem;color:#c7bfa8;line-height:1.55;cursor:pointer;padding:6px 0}
.consent input{margin-top:1px;accent-color:var(--tan);width:24px;height:24px;flex:none;cursor:pointer}
.consent span{flex:1}
.consent a{color:var(--tan)}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}


/* ---------- ANIMACIJA OB POŠILJANJU ---------- */
.form-card{position:relative;overflow:hidden;isolation:isolate}
.form-card form{position:relative;z-index:2}
.flow{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:26px;overflow:hidden}

/* široki pas svetlobe, ki potuje skozi celotno ploskev obrazca */
.stream{position:absolute;left:-25%;right:-25%;top:-70%;height:85%;
  background:linear-gradient(180deg,
    rgba(191,170,133,0) 0%,
    rgba(191,170,133,.10) 22%,
    rgba(226,215,196,.30) 48%,
    rgba(232,222,200,.42) 60%,
    rgba(191,170,133,.14) 82%,
    rgba(191,170,133,0) 100%);
  filter:blur(34px);opacity:0}


/* topel preliv, ki za trenutek zajame celo ploskev */
.wash{position:absolute;inset:0;opacity:0;
  background:radial-gradient(120% 80% at 50% 30%, rgba(191,170,133,.20), rgba(191,170,133,.06) 45%, rgba(191,170,133,0) 72%)}

/* zbiranje ob spodnjem notranjem robu */
.pool{position:absolute;left:2%;right:2%;bottom:-26px;height:120px;border-radius:50%;
  background:radial-gradient(65% 100% at 50% 100%, rgba(238,229,210,.62), rgba(191,170,133,.28) 40%, rgba(191,170,133,0) 76%);
  filter:blur(20px);opacity:0;transform:scaleX(.35)}

.form-card.sending .stream {animation:streamDown 3.2s cubic-bezier(.24,.66,.3,1) .12s both}
.form-card.sending .wash   {animation:washIn   3.4s ease-out .2s both}
.form-card.sending .pool   {animation:poolGather 1.7s cubic-bezier(.16,.7,.3,1) 2.35s both}

.form-card.sending .field input,
.form-card.sending .field select,
.form-card.sending .field textarea{animation:fieldGlow 1.7s cubic-bezier(.25,.6,.3,1) both;animation-delay:calc(var(--i,0) * .5s + .3s)}
.form-card.sending .consent{animation:fieldGlow 1.7s cubic-bezier(.25,.6,.3,1) 1.9s both}

@keyframes streamDown{
  0%  {transform:translateY(0);opacity:0}
  10% {opacity:.85}
  55% {opacity:1}
  86% {opacity:.7}
  100%{transform:translateY(var(--h,900px));opacity:0}
}
@keyframes washIn{
  0%  {opacity:0}
  34% {opacity:1}
  100%{opacity:0}
}
@keyframes poolGather{
  0%  {opacity:0;transform:scaleX(.35) translateY(18px)}
  40% {opacity:1;transform:scaleX(1.02) translateY(0)}
  70% {opacity:.75;transform:scaleX(1.06) translateY(-2px)}
  100%{opacity:0;transform:scaleX(1.2) translateY(-10px)}
}
@keyframes fieldGlow{
  0%  {box-shadow:0 0 0 0 rgba(191,170,133,0)}
  40% {box-shadow:0 0 42px 3px rgba(191,170,133,.38), inset 0 0 26px rgba(226,215,196,.16);border-color:var(--tan)}
  100%{box-shadow:0 0 0 0 rgba(191,170,133,0)}
}
@media (prefers-reduced-motion: reduce){
  .form-card.sending .stream,.form-card.sending .wash,
  .form-card.sending .pool,.form-card.sending .field input,.form-card.sending .field select,
  .form-card.sending .field textarea,.form-card.sending .consent{animation:none}
}
/* Boljši roboti preskočijo polja z display:none, zato past raje
   odmaknemo z zaslona — ostane v DOM in v izračunu obrazca. */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important}
.field .err-msg{font-size:.78rem;color:#E8B48C;min-height:1.15em;opacity:0;transform:translateY(-3px);transition:opacity .2s ease,transform .2s ease}
.field.invalid .err-msg{opacity:1;transform:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#E8B48C;background:rgba(232,180,140,.10)}
.consent.invalid span{color:#E8B48C}
.form-msg{font-size:.9rem;color:var(--tan);min-height:1.2em}
.form-msg.err{color:#e0a97f}

/* na telefonu vedno dva v vrsti; peti se razteza čez oba stolpca */
@media(max-width:880px){
  .logos{grid-template-columns:1fr 1fr;gap:14px}
  .logos .logo-slot:last-child{grid-column:1/-1;width:calc(50% - 7px);margin:0 auto}
  .logo-slot{min-height:132px;padding:18px 14px}
  .logo-slot .mark{height:66px}
}

/* LOKACIJA */
.loc .split p.big{font-size:1.15rem;color:var(--forest);font-weight:500}
.loc-img{height:380px}
.pill{font-family:'Alegreya',serif;display:inline-block;background:var(--sand);border:1px solid #d5c9b1;border-radius:999px;padding:7px 16px;font-size:.85rem;margin:4px 6px 0 0;color:#4d5539}

/* O MENI */
.about{background:var(--sand)}
.about .split{align-items:start}
/* En sam slog za oba citata v tem odseku, da nista videti kot dve
   različni stvari. 1.28rem namesto 1.45rem: dva velika citata drug
   pod drugim sta preglasna, pri tej velikosti pa še vedno izstopata
   od tekočega besedila. */
.about blockquote{font-family:'Alegreya',serif;font-style:italic;font-size:1.28rem;
  line-height:1.45;color:var(--forest);margin:18px 0;
  border-left:3px solid var(--olive);padding-left:18px;text-wrap:pretty}
.about blockquote+p{margin-top:18px}


/* ---------- CELOTNA ZGODBA ---------- */
.story-cta{margin-top:30px}
@media(max-width:880px){.story-cta{margin-top:22px}.story-cta .btn{width:100%;text-align:center}}
.story-shell{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .6s cubic-bezier(.4,0,.2,1),opacity .45s ease,margin-top .45s ease}
.story-shell.open{grid-template-rows:1fr;opacity:1;margin-top:24px}
.story-inner{overflow:hidden;min-height:0}
.story-long{border-top:1px solid #d5c9b1;padding-top:28px;margin-top:4px}
@media(min-width:1000px){
  .story-long{column-count:2;column-gap:52px;column-rule:1px solid #e2d8c5}
  .story-long p{break-inside:avoid-column}
  .story-closing{column-span:all;max-width:62ch;margin:26px auto 0}
}
.story-long p{margin-bottom:16px;color:#3d452e}
.story-long p:first-child::first-letter{float:left;font-size:3.1rem;line-height:.86;
  padding:4px 10px 0 0;color:var(--moss);font-weight:700}
.story-closing{font-style:italic;color:var(--forest);border-left:3px solid var(--olive);
  padding-left:16px;margin-top:24px}

/* CTA */
.cta{background:var(--forest);color:var(--sand);text-align:center;position:relative;overflow:hidden;padding-bottom:84px}
.cta::before{content:"";position:absolute;inset:auto 0 -40% 0;height:110%;pointer-events:none;
  background:radial-gradient(70% 70% at 50% 100%, rgba(191,170,133,.20) 0%, rgba(191,170,133,.10) 38%, rgba(191,170,133,.03) 62%, rgba(191,170,133,0) 80%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(2rem,4.5vw,3rem);color:#fff;margin-bottom:14px}
.cta p{max-width:36rem;margin:0 auto 32px;color:#cfc7b2}
.cta .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta .btn.ghost{border-color:var(--sand);color:var(--sand)}
.btn-ig{display:inline-flex;align-items:center;gap:9px}
.btn-ig svg{flex:none}
.cta .btn.ghost:hover{background:var(--sand);color:var(--forest)}

/* FOOTER */

/* ---------- OBVESTILO O PIŠKOTKIH ----------
   Isti jezik kot gumb za zvok: temna steklena tabletka, peščeno besedilo.
   Ob prvem obisku je odprto, pozneje ostane le majhna tabletka,
   ki se razpre ob prehodu z miško (na dotik: ob kliku).            */
.cookie{position:fixed;left:20px;bottom:20px;z-index:81;font-family:'Alegreya',serif}
.cookie[hidden]{display:none}

.cookie-tab{display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px 10px 13px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:var(--sand);background:rgba(47,58,31,.82);border:1px solid rgba(226,215,196,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(35,44,23,.22);
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.cookie-tab:hover{background:rgba(95,106,61,.9);border-color:var(--tan);transform:translateY(-2px)}
.cookie-tab:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
.cookie-tab svg{flex:none}

/* Širina mora biti glede na ZASLON, ne glede na .cookie:
   .cookie je fiksen element, ki se skrči na širino tabletke (~110px),
   zato bi 100% pomenilo 70px in okence bi bilo neuporabno ozko.
   dvw je natančnejši od vw (ne šteje drsnika), vw ostane za starejše. */
.cookie-panel{position:absolute;left:0;bottom:calc(100% + 10px);
  width:min(340px,calc(100vw - 40px));
  width:min(340px,calc(100dvw - 40px));
  padding:22px 24px;border-radius:20px;
  color:var(--sand);background:rgba(47,58,31,.94);border:1px solid rgba(226,215,196,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 38px rgba(35,44,23,.30);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s}
/* Vidnost vodi izključno razred .open (glej piskotki.js).
   Prej sta jo držala odprto :hover in :focus-within — po kliku na gumb
   sta bila oba še vedno izpolnjena, zato se okence ni dalo zapreti. */
.cookie.open .cookie-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* Nevidni most čez režo med tabletko in okencem.
   Nameščen je na .cookie (ne na okence), ker okence premika transform —
   most bi se sicer premikal z njim in reža bi za hip ostala odprta.
   Obstaja samo, ko je okence odprto, zato nikoli ne lovi klikov po strani. */
.cookie.open::before{content:"";position:absolute;left:0;bottom:100%;
  width:min(340px,calc(100vw - 40px));
  width:min(340px,calc(100dvw - 40px));height:16px}

.cookie-panel{max-height:min(70vh,420px);overflow-y:auto;overscroll-behavior:contain}
.cookie-panel p{text-wrap:pretty;hyphens:none}
.cookie-panel h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--tan);margin-bottom:10px}
.cookie-panel p{font-size:.9rem;line-height:1.5;color:rgba(226,215,196,.92)}
.cookie-panel a{color:var(--tan);text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.cookie-actions .btn{padding:9px 20px;font-size:.86rem}
.cookie-no{background:none;border:0;padding:6px 2px;cursor:pointer;font-family:inherit;
  font-size:.86rem;color:rgba(226,215,196,.72);text-decoration:underline;text-underline-offset:3px;
  transition:color .25s ease}
.cookie-no:hover{color:var(--sand)}
.cookie-no:focus-visible{outline:2px solid var(--tan);outline-offset:3px}

@media(max-width:600px){
  .cookie{left:14px;bottom:14px}
  .cookie-tab{padding:10px;gap:0}
  .cookie-tab .cookie-label{display:none}
  .cookie.open .cookie-tab{padding:10px 16px 10px 13px;gap:8px}
  .cookie.open .cookie-tab .cookie-label{display:inline}
  .cookie-panel{width:min(340px,calc(100vw - 28px));
    width:min(340px,calc(100dvw - 28px));padding:20px 20px}
}
@media print{.cookie{display:none}}

footer{background:#232c17;color:#a29a80;padding:44px 0;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--tan);text-decoration:none}
footer .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fcols{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0}
.fcols a,.fcols .cookie-footer-link{display:inline-flex;align-items:center;white-space:nowrap}
/* pike med povezavami rišemo s CSS, da se ob prelomu ne obesijo v prazno */
.fcols>*+*::before{content:"·";margin:0 10px;color:#6c6550}
/* Namesto naključnega preloma vrstico prelomimo sami: .fbreak zasede
   celo širino, zato se naslednje povezave začnejo v novi vrstici.
   Pika pred prelomom in takoj za njim odpade, da vrstica ne začne s "·". */
.fbreak{display:none;flex-basis:100%;height:0}
.fcopy{font-size:.84rem;color:#8d866f;line-height:1.5}
.f-ig{gap:7px}
.f-ig svg{flex:none}

@media(max-width:880px){
  section{padding:52px 0}
  .hero .wrap,.split,.story-grid,.tiers{grid-template-columns:1fr}
  /* ---------- POT NA TELEFONU ----------
     Dva stolpca sta besedilo stisnila v ~175 px: ena poved je padla
     v pet vrstic. Koraki so zdaj drug pod drugim, številka levo in
     besedilo desno, kar da normalno dolžino vrstice. Pikčasta črta,
     ki na namizju teče vodoravno, tukaj teče navpično — odsek se
     imenuje "Pot", zato naj bo pot tudi videti. */
  .trail .sub{margin-bottom:30px}
  .steps{grid-template-columns:1fr;gap:0;padding-left:20px;padding-right:0}
  /* 41px = 20px zamik odseka + 22px (sredina kroga) − 1px (pol črte) */
  .steps::before{display:block;top:22px;bottom:22px;left:41px;right:auto;
    border-top:0;border-left:2px dashed var(--tan);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%)}

  .step{--dot:44px;padding:0 0 26px 62px}
  .step:last-child{padding-bottom:0}
  .step::before{font-size:.92rem}
  /* naslov poravnamo na sredino kroga */
  .step h3{padding-top:9px;margin-bottom:6px;font-size:1.1rem}
  .step p{font-size:.95rem}
  .nav-toggle{display:inline-flex}

  /* Seznam ni več skrit, ampak je zložen v ploskev pod glavo.
     nav je position:sticky (torej pozicioniran), .wrap pa ne, zato se
     absolutna postavitev nasloni na nav in ploskev sega čez vso širino. */
  nav ul{display:block;position:absolute;top:100%;left:0;right:0;
    padding:4px 0 8px;font-size:1rem;
    background:rgb(246 242 234 / 97%);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid #ddd2bd;
    box-shadow:0 12px 26px rgba(47,58,31,.09);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s}
  nav.menu-open ul{opacity:1;visibility:visible;transform:none}
  nav ul li+li{border-top:1px solid rgba(213,201,177,.5)}
  nav ul a{display:block;padding:14px 24px;opacity:.9;color:var(--forest)}
  nav ul a:active{background:rgba(191,170,133,.16)}
  nav .wrap{gap:12px}
  nav .btn{padding:8px 15px;font-size:.86rem}
  .hero .wrap{min-height:auto}
  .portrait,.loc-img{height:300px}
  .hide-sm{display:none}

  .hero .wrap{padding-top:52px;padding-bottom:58px}
  .hero h1{font-size:clamp(2rem,8.6vw,2.7rem)}
  .hero p.lede{font-size:1.04rem}
  /* ----- gumba v uvodu si enakomerno razdelita širino -----
     flex:1 1 0 da obema enako širino ne glede na dolžino besedila,
     min-width:0 pa prepreči, da bi ju vsebina razširila čez rob. */
  .hero .cta-row{margin-top:26px;flex-wrap:nowrap;gap:12px}
  .hero .cta-row .btn{flex:1 1 0;min-width:0;display:inline-flex;
    align-items:center;justify-content:center;text-align:center;
    min-height:52px;padding:12px 8px;line-height:1.25;
    /* daljši napis se sme prelomiti samo na mestu, ki smo ga določili
       z nedeljivimi presledki v HTML — nikoli sredi "uvodna ura · 60 €" */
    text-wrap:balance;hyphens:none}

  /* pasica: dva stolpca namesto štirih vrstic */
  .ticker{padding:16px 0}
  .ticker .wrap{display:grid;grid-template-columns:1fr;gap:4px;font-size:.74rem;letter-spacing:.06em;text-align:center}
  /* večji dotakljivi cilj, ker je pasica na telefonu edina vidna navigacija poleg menija */
  .ticker a{display:block;line-height:1.35;padding:9px 4px}
  .ticker a:active{background:rgba(95,106,61,.10);border-radius:8px}
  .story-grid{gap:22px}
  .card{min-height:280px;padding:28px 26px 32px;justify-content:flex-start}
  .card p{max-width:none}
  .card .photo{opacity:.38}
  .fgrid{grid-template-columns:1fr}
  .form-card{padding:28px 22px;border-radius:20px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ==========================================================
   PODSTRANI  (Pogoji sodelovanja, Zasebnost)
   ----------------------------------------------------------
   Te strani imajo ožjo kolono in drugačno tipografijo kot
   začetna stran, zato so pravila omejena na <body class="doc">.
   Brez te omejitve bi se prepisovala z domačo stranjo
   (.wrap, .btn, a, p ...).
   ========================================================== */
body.doc{line-height:1.62}
.doc .wrap{max-width:660px}
.doc main a{color:var(--moss)}
.doc .btn{padding:8px 18px;font-size:.9rem}
.doc .eyebrow{margin-bottom:12px}

.doc header.page{background:linear-gradient(180deg,var(--sand),var(--paper));padding:64px 0 46px}
.doc header.page h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.06;font-weight:800;color:var(--forest)}
.doc header.page p{margin-top:16px;color:#414a30}

.doc main{padding:48px 0 80px}
.doc main h2{font-size:1.24rem;color:var(--forest);margin:34px 0 10px;padding-top:20px;border-top:1px solid #ddd2bd}
.doc main h2:first-of-type{margin-top:0;padding-top:0;border:0}
.doc main p{margin-bottom:14px;color:#3d452e}
.doc main ul{margin:0 0 16px 22px}
.doc main li{margin-bottom:7px;color:#3d452e}

.doc .fill{background:rgba(191,170,133,.32);padding:1px 6px;border-radius:4px}
.doc .naslov{line-height:1.75;margin-bottom:20px}
.doc .callout{background:#fff;border:1px solid #ddd2bd;border-left:3px solid var(--tan);border-radius:var(--radius);padding:20px 22px;margin:20px 0}
.doc .callout p:last-child{margin-bottom:0}
/* pretty bi zadnjo vrstico prelomil prezgodaj, ko je na koncu dolg e-naslov */
.doc .callout p{text-wrap:auto}
.doc .updated{margin-top:34px;font-size:.86rem;color:#7d7659}

.doc table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:.96rem}
.doc td{padding:10px 0;border-bottom:1px solid #ddd2bd;vertical-align:top}
.doc td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--forest);padding-left:14px}

.doc nav .inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.doc footer{padding:38px 0}
.doc footer .inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

@media(max-width:700px){
  .doc header.page{padding:46px 0 36px}
  .doc main{padding:36px 0 60px}
}


/* ==========================================================
   DODANO — mobilne izboljšave
   ========================================================== */

/* ---------- MNENJA STRANK ---------- */
.quotes{background:var(--paper);padding:64px 0}
.quotes .head{text-align:center;margin-bottom:34px}
.quotes h2{font-size:clamp(1.6rem,2.8vw,2.2rem);color:var(--forest)}
.quote-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:#fff;border:1px solid #ddd2bd;border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:16px;margin:0}
.quote blockquote{font-style:italic;color:#3d452e;font-size:1rem;line-height:1.55;flex:1}
.quote blockquote::before{content:"»"}
.quote blockquote::after{content:"«"}
.quote figcaption{font-size:.88rem;color:var(--olive);display:flex;flex-direction:column}
.quote figcaption b{color:var(--forest);font-size:.95rem}

@media(min-width:881px){
  /* ena vrstica: avtorske pravice levo, povezave desno */
  footer .wrap{flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:10px 26px}
  footer .wrap .fcopy{order:1;margin-right:auto}
  footer .wrap .fcols{order:2}
}

/* ---------- TELEFONSKA ŠTEVILKA V KONTAKTU ---------- */
.cta-tel{margin-top:-18px;margin-bottom:30px;font-size:.98rem;color:#bdb49c}
.cta-tel a{color:var(--tan);text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(191,170,133,.45);padding-bottom:2px;white-space:nowrap}
.cta-tel a:hover{border-bottom-color:var(--tan)}
.cta-tel-ura{display:block;margin-top:6px;font-size:.86rem;color:#9c957f}

/* ---------- ZAPIRANJE OBRAZCA NA NAMIZJU ----------
   Gumb pod obrazcem služi ODPIRANJU. Ko je obrazec odprt, ga skrijemo
   in zapiranje prevzame križec v kotu kartice — tako pod obrazcem ne
   stoji velik gumb, ki vabi k odhodu. */
.form-close{position:absolute;top:14px;right:14px;z-index:3;
  width:38px;height:38px;display:none;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;color:var(--sand);
  background:rgba(226,215,196,.10);border:1px solid rgba(226,215,196,.30);
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.form-close:hover{background:rgba(226,215,196,.20);border-color:var(--tan);transform:rotate(90deg)}
.form-close:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
.form-shell.open .form-close{display:inline-flex}
.form-card h3{padding-right:46px}
/* gumb pod obrazcem izgine, dokler je obrazec odprt */
.cta .form-shell.open + .cta-row{display:none}

/* ---------- NOVICA NAD UVODOM ----------
   Tanka pasica med glavo in uvodom. Ni lepljiva: ob drsenju odide
   skupaj s stranjo, zato ne jemlje prostora med branjem. */
.news{display:block;text-decoration:none;color:var(--forest);font-size:.92rem;
  background:linear-gradient(90deg,rgba(95,106,61,.13),rgba(191,170,133,.26));
  border-bottom:1px solid #d5c9b1;transition:background .3s ease}
.news .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 12px;min-height:46px;padding-top:9px;padding-bottom:9px;text-align:center}
/* Oznaka NOVO: temna tabletka z utripajočo piko. Obroč, ki se širi
   iz pike, je isti motiv kot pri krogih v odseku "Pot" — krog na vodi. */
.news-tag{display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  background:var(--forest);color:var(--sand);padding:6px 12px 6px 10px;border-radius:999px;
  box-shadow:0 0 0 3px rgba(95,106,61,.16),0 4px 12px rgba(47,58,31,.18)}
.news-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--tan)}
.news-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--tan);opacity:0;
  animation:newsPing 2.6s cubic-bezier(0,.5,.35,1) infinite}
@keyframes newsPing{
  0%  {transform:scale(1);opacity:.95}
  65% {transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}
}
@media (prefers-reduced-motion: reduce){ .news-dot::after{animation:none} }
/* VELIKE ČRKE NA SREDINO
   Velike črke nimajo spodnjih dolžin (kot pri g, j, p), zato vrstica
   pod njimi pusti prazen prostor in napis je videti previsoko.
   text-box obreže vrstico točno na višino velikih črk; kjer brskalnik
   tega ne pozna, napis ročno spustimo za 1 px.
   Negativni desni rob izniči razmik za zadnjo črko, da je levi in desni
   odmik v tabletki videti enak. */
.news-label{display:block;margin-right:-.14em}
@supports (text-box: trim-both cap alphabetic){
  .news-label{text-box:trim-both cap alphabetic}
  .news-tag{padding:7px 12px 7px 10px}
}
@supports not (text-box: trim-both cap alphabetic){
  .news-label{transform:translateY(1px)}
}
.news-text{font-weight:600}
.news-date{color:#5d6446;font-weight:500;white-space:nowrap}
.news-more{font-weight:700;color:var(--moss);white-space:nowrap}
.news-more span{display:inline-block;transition:transform .25s ease}
.news:hover{background:linear-gradient(90deg,rgba(95,106,61,.19),rgba(191,170,133,.34))}
.news:hover .news-more{color:var(--forest)}
.news:hover .news-more span{transform:translateX(3px)}
.news:focus-visible{outline:2px solid var(--tan);outline-offset:-3px}
@media(max-width:880px){
  .news{font-size:.86rem}
  .news .wrap{gap:5px 10px;min-height:44px}
  /* Na telefonu sta besedilo in datum ločena dela, zato se vrstica
     prelomi pred datumom: [NOVO] Novi termini … / začetek … Prijavi se →
     Brez tega bi se vse raztegnilo v tri vrstice. */
  .news-text{display:contents}
  .news-sep{display:none}
}

/* ---------- LEPLJIVA VRSTICA (samo telefon) ---------- */
.mobile-bar{display:none}

/* ---------- POVEZAVA DO PIŠKOTKOV V NOGI ---------- */
.cookie-footer-link{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;
  color:var(--tan);cursor:pointer;text-decoration:none}
.cookie-footer-link:hover{text-decoration:underline}
.cookie-footer-link:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
/* ko je izbira že narejena, tabletka ne lebdi več čez vsebino */
.cookie.settled .cookie-tab{display:none}
.cookie.settled:not(.open){pointer-events:none}

@media(max-width:880px){

  /* ----- obrazec je vedno odprt; gumba za odpiranje ni ----- */
  .form-shell{grid-template-rows:1fr;opacity:1;margin-top:0;transition:none}
  .form-inner{overflow:visible}
  .cta .cta-row{display:none}
  .cta{padding-bottom:56px}

  /* ----- glava: na telefonu samo logotip -----
     Poziv k dejanju prevzame lepljiva vrstica na dnu, zato gumba
     v glavi ni. Ciljamo #navCta in ne "nav .btn", ker podstrani
     (Pogoji, Zasebnost) v glavi potrebujejo gumb "Nazaj na stran". */
  #navCta{display:none}

  /* ----- brez Fraunces na telefonu -----
     Fraunces se uporablja samo za logotip. Ker je datoteka pisave
     naložena šele, ko jo kak element res potrebuje, logotip na
     telefonu postavimo v Alegreyo in datoteka se sploh ne prenese. */
  .logo{font-family:'Alegreya',Georgia,serif;font-weight:600;letter-spacing:.06em}

  /* ----- dotakljivi cilji ----- */
  nav .btn{padding:12px 18px;font-size:.9rem}
  .form-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
  .form-actions .btn{width:100%;text-align:center;min-height:52px;padding:15px 24px;font-size:1rem}
  .form-msg{text-align:center}

  /* ----- partnerji: kompaktna mreža, BREZ vodoravnega drsenja -----
     Vodoravni drsniki so bili vir vodoravnega prelivanja strani,
     zato sta obe vrstici zdaj navadni mreži, ki se preprosto prelomita. */
  .partners{padding:40px 0}
  .partners .head{margin-bottom:20px}
  .logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible}
  .logos .logo-slot{flex:none;min-width:0;min-height:0;padding:10px 6px;gap:5px}
  .logos .logo-slot:last-child{grid-column:auto;width:auto;margin:0}
  .logo-slot .mark{height:34px}
  .logo-slot .pname{font-size:.7rem;font-weight:600;line-height:1.25;
    overflow-wrap:anywhere;hyphens:auto}

  /* ----- mnenja: ena pod drugo ----- */
  .quotes{padding:44px 0}
  .quote-row{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;overflow:visible}
  .quote{min-width:0;padding:22px 20px}

  /* ----- zmogljivost: brez neprestanega zamegljevanja ----- */
  .flowbg{display:none}
  .form-card{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* ----- prostor za lepljivo vrstico -----
     Prostor mora biti ZNOTRAJ noge. Če ga damo na <body>, se pod nogo
     pokaže telo strani (--paper), kar je bil svetel pas na dnu. */
  footer{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .cookie{bottom:84px}

  /* v nogi vsebina v dveh urejenih vrsticah.
     Piko pred prelomom in takoj za njim odstranimo SAMO tukaj — na
     namizju je .fbreak skrit in vrstica se ne prelomi, zato mora
     pika med e-pošto in "Pogoji" tam ostati. */
  .fbreak{display:block}
  .fcols>.fbreak::before,.fcols>.fbreak+*::before{content:none}

  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(47,58,31,.96);border-top:1px solid rgba(226,215,196,.24);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .mobile-bar .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:50px;padding:13px 10px;font-size:.95rem;text-align:center}
  .mobile-bar .btn.ghost{border-color:var(--sand);color:var(--sand);background:transparent}
  .mobile-bar svg{flex:none}
  /* obrazec je na dnu strani — tam vrstica ni potrebna */
  .mobile-bar.hidden{transform:translateY(110%);transition:transform .3s ease}
  .mobile-bar{transition:transform .3s ease}
}

@media print{.mobile-bar{display:none}}