:root{
    --c-text:#3d3a35;
    --c-light:#f7f4ef;
    --c-yellow:#f0c94f;
    --c-yellow-soft:#ecd58c;   /* nežnejša rumena za gumbe */
    --c-accent:#9a8c72;
    --c-accent-dark:#7d6f56;
    --f-nav:'Amatic SC',cursive;      /* ročno pisani condensed napisi */
    --f-script:var(--f-hand);         /* naslovi — ista rokopisna pisava */
    --f-serif:'EB Garamond',serif;
    --f-body:'Jost',sans-serif;
    --f-hand:'Gloria Hallelujah',cursive; /* veliki napisi na domači strani */
    --cap-fs:clamp(40px,4.6vw,72px);  /* velikost napisov na domači strani */
    --cap-w:calc(var(--cap-fs) * 11); /* skupna širina vseh treh napisov */
    --cap-scale:0.79;                 /* popravek velikosti za Gloria Hallelujah */
    --cap-x:max(10px, calc(1.5vw - 0.5cm)); /* odmik osi napisov od levega roba */
    --cap-y:19vh;                      /* zamik napisov navzdol */
    --sub-b:29vh;                     /* višina rumenega napisa nad dnom */
  }
  /* Brez modrega kvadratka ob dotiku ali kliku:
     - poudarek ob dotiku (tap highlight) — starejši Androidi besede
       "transparent" ne poznajo, zato rgba(0,0,0,0);
     - obroba ob fokusu se pokaže samo pri uporabi tipkovnice (Tab), ne ob
       dotiku ali kliku z miško (brskalniki brez :focus-visible je nimajo);
     - dvojni dotik ne označi (modro) besedila na gumbih in ne poveča strani. */
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
  html{-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}
  a:focus,button:focus,input[type=checkbox]:focus,input[type=radio]:focus,[tabindex]:focus{outline:none}
  button::-moz-focus-inner{border:0}
  a:focus-visible,button:focus-visible,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--c-yellow-soft);outline-offset:2px}
  nav a:focus,.nav-domov:focus,.burger:focus{outline:none}
  nav a:focus-visible,.nav-domov:focus-visible,.burger:focus-visible{outline:2px solid var(--c-yellow-soft)}
  button,.izb,.kazalo a,.btn-cta,.gumbek,.fnovicke{-webkit-user-select:none;user-select:none}
  /* Vodoravno prelivanje odrežemo. POMEMBNO: 'clip' namesto 'hidden' — 'hidden'
     naredi iz telesa strani lasten drsni okvir, zaradi česar kolešček po kliku
     na povezavo v meniju prvič ne premakne strani (potreben je še en klik).
     'hidden' ostane kot rezerva za zelo stare brskalnike. */
  html,body{overflow-x:hidden;overflow-x:clip}
  body{font-family:var(--f-body);color:var(--c-text);background:var(--c-light);font-weight:300;line-height:1.7}

  /* ============ HEADER ============ */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:flex-end;
    /* polnilo je ves čas enako — sprememba bi napise sunkovito premaknila */
    padding:24px 56px;
    transition:background .55s ease,box-shadow .55s ease;
  }
  /* dokler je pod menijem fotografija, ostane prosojen in bel;
     ko se fotografija konča, se nežno prelije v svetel pas */
  header.mimo{
    background:rgba(253,251,242,.95);backdrop-filter:blur(6px);
    box-shadow:0 2px 18px rgba(0,0,0,.07);
  }
  header nav a.navlink,header nav a.pill,header .burger{transition:color .55s ease,border-color .55s ease,background .35s,text-shadow .55s ease}
  header.mimo nav a.navlink{color:var(--c-text);text-shadow:none}
  header.mimo nav a.navlink::after{background:var(--c-text)}
  header.mimo nav a.pill{border-color:var(--c-text);color:var(--c-text)}
  header.mimo nav a.pill:hover{background:var(--c-yellow-soft);border-color:var(--c-yellow-soft);color:var(--c-text)}
  header.mimo .burger{color:var(--c-text)}

  nav ul{list-style:none;display:flex;align-items:center;gap:14px}
  nav li{position:relative}
  nav a.navlink{
    display:block;color:#fff;text-decoration:none;
    font-family:var(--f-nav);font-weight:700;font-size:27px;letter-spacing:2px;
    padding:6px 12px;position:relative;cursor:pointer;white-space:nowrap;
    text-shadow:0 1px 6px rgba(0,0,0,.25);
  }
  /* 1) ob hoverju se gumb najprej podčrta ... */
  nav a.navlink::after{
    content:'';position:absolute;left:12px;right:12px;bottom:2px;
    height:2px;background:#fff;
    transform:scaleX(0);transform-origin:center;
    transition:transform .35s ease;
  }
  nav li:hover > a.navlink::after,
  nav a.navlink.active::after{transform:scaleX(1)}

  /* pill gumb STOPIMO V STIK */
  nav a.pill{
    border:2px solid #fff;border-radius:999px;padding:8px 26px;margin-left:8px;
    transition:background .35s,color .35s,border-color .35s;
  }
  nav a.pill::after{display:none}
  /* ob fotografiji: rumen okvir, ob prehodu z miško se napolni z rumeno */
  nav a.pill{border-color:var(--c-yellow-soft)}
  nav a.pill:hover{
    background:var(--c-yellow-soft);border-color:var(--c-yellow-soft);
    color:var(--c-text);text-shadow:none;
  }

  /* 2) ... nato se pojavi oblaček z možnostmi (ob prehodu z miško) */
  .dropdown{
    position:absolute;top:calc(100% + 16px);left:50%;
    transform:translateX(-50%) translateY(8px);
    background:rgba(255,255,255,.97);
    width:max-content;min-width:260px;padding:14px 0;border-radius:26px;
    overflow:hidden;                 /* poudarek ob hoverju ostane znotraj zaobljenega roba */
    box-shadow:0 14px 40px rgba(0,0,0,.18);
    opacity:0;visibility:hidden;pointer-events:none;
    /* zapiranje je hipno — sicer bi se ob prehodu z enega naslova na drugega
       stari in novi oblaček za trenutek prekrivala */
    transition:none;
  }
  /* konica oblačka — na <li>, ker bi jo overflow:hidden odrezal */
  li.has-sub::after{
    content:'';position:absolute;top:calc(100% + 9px);left:50%;
    width:14px;height:14px;background:rgba(255,255,255,.97);
    transform:translateX(-50%) translateY(8px) rotate(45deg);
    opacity:0;visibility:hidden;
    transition:none;
  }
  /* nevidni most čez 16 px reže, da hover ne pade med naslovom in oblačkom */
  li.has-sub::before{
    content:'';position:absolute;top:100%;left:0;right:0;height:16px;visibility:hidden;
  }
  li.has-sub:hover::before{visibility:visible}
  /* oblaček se pokaže samo ob kliku na naslov (razred .odprt) — na širokem
     zaslonu ostane odprt, dokler ne kliknemo drugam (glej meni() v skupno.js) */
  nav li.has-sub.odprt .dropdown{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .32s ease .12s,transform .32s ease .12s,visibility 0s;
  }
  li.has-sub.odprt::after{
    opacity:1;visibility:visible;
    transform:translateX(-50%) translateY(0) rotate(45deg);
    transition:opacity .32s ease .12s,transform .32s ease .12s,visibility 0s;
  }
  /* dokler je oblaček odprt, ostane naslov podčrtan */
  nav li.has-sub.odprt > a.navlink::after{transform:scaleX(1)}

  .dropdown a{
    display:block;padding:5px 28px;color:var(--c-text);text-decoration:none;
    font-family:var(--f-nav);font-weight:700;font-size:21px;letter-spacing:1.5px;
    text-transform:uppercase;white-space:nowrap;
    transition:background .25s,color .25s,padding-left .25s,padding-right .25s;
  }
  .dropdown a:hover{background:var(--c-light);color:var(--c-accent-dark);padding-left:36px;padding-right:20px}
  /* majhen ® v zgornji polovici vrstice — v drugi pisavi, da je lepo okrogel */
  sup.r{font-size:70%;vertical-align:baseline;position:relative;top:-0.55em;margin-left:-0.09em;line-height:0;font-family:var(--f-body);font-weight:400;letter-spacing:0}

  .burger{display:none;background:none;border:none;color:#fff;cursor:pointer;z-index:120;
    position:relative;width:25px;height:33px;padding:0}
  /* Znak menija je narisan (ne črka iz pisave telefona), zato je na vseh
     napravah enak in natančno poravnan s puščico domov v odprtem meniju:
     obe ikoni sta visoki 20 px, zgornji rob obeh je 26 px od vrha zaslona
     (glava 20 px + 6 px; puščica: 12 px + 14 px polnila). */
  .burger svg{position:absolute;top:6px;left:2.5px;width:20px;height:20px;fill:currentColor}
  .nav-domov{display:none}

  @keyframes vstop{from{opacity:0}to{opacity:1}}
  @keyframes menijNoter{from{opacity:0}to{opacity:1}}

  /* ============ HERO — DOMOV (slideshow) ============ */
  .hero{position:relative;height:100vh;overflow:hidden;background:#2c261e}
  .slide{
    position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transition:opacity 3s ease-in-out;will-change:opacity;
  }
  .slide.on{opacity:1}
  /* ob kliku na puščico: takojšnja menjava brez prehodov */
  .hero.fast .slide,
  .hero.fast .hero-caption .line{transition:none !important}
  .slide::after{content:'';position:absolute;inset:0;background:rgba(20,18,15,.08)}
  /* svetlo nebo na tretji sliki rahlo potemnimo, da bel napis ostane berljiv */
  #slide3::after{background:linear-gradient(to bottom,rgba(20,18,15,.34) 0%,rgba(20,18,15,.14) 45%,rgba(20,18,15,.06) 100%)}

  /* napis levo, kot na predlogi */
  .hero-caption{
    position:absolute;inset:0;z-index:5;pointer-events:none;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    padding:0 var(--cap-x);color:#f0ece4;
  }
  /* napisa ostaneta na levi, med sabo pa sta poravnana na sredino;
     širina je za vse tri slike enaka, zato je os poravnave vedno ista */
  .hero-caption .cap-in{
    font-size:calc(var(--cap-fs) * var(--cap-scale));width:var(--cap-w);text-align:center;
    transform:translateY(var(--cap-y));
    /* višina dveh vrstic, da se enovrstični napis ne postavi drugam */
    min-height:3.1em;display:flex;flex-direction:column;justify-content:center;
  }
  .hero-caption .line{
    font-family:var(--f-hand);font-weight:400;
    font-size:1em;line-height:1.55;white-space:nowrap;
    text-shadow:0 2px 14px rgba(0,0,0,.3);
    opacity:0;transition:opacity 1.8s ease-in-out;
  }
  .hero-caption.show .line{opacity:1}
  .hero-sub{
    position:absolute;left:var(--cap-x);bottom:calc(var(--sub-b) - var(--cap-y));z-index:5;
    width:var(--cap-w);text-align:center;
    font-family:var(--f-nav);font-weight:700;font-size:clamp(30px,3.1vw,44px);
    letter-spacing:3.4px;color:var(--c-yellow);
    text-shadow:0 1px 8px rgba(0,0,0,.35);
    opacity:0;transition:opacity 1.2s ease .6s;pointer-events:none;
  }
  .hero-sub.show{opacity:1}
  /* "Sproščanje napetosti s TRE® · Psihoterapija": v eni vrstici z rumeno
     pikico, kjer je dovolj prostora; sicer v dveh vrsticah s pikico v
     presledku med njima. Znak " · " ostane v besedilu (iskalniki, bralniki
     zaslona), viden pa je samo narisan krogec. */
  .hero-sub .hs-del{white-space:nowrap}
  .hero-sub .hs-locilo{
    display:inline-block;position:relative;width:.8em;height:1em;overflow:hidden;
    white-space:pre;color:transparent;text-shadow:none;
  }
  .hero-sub .hs-locilo::after{
    content:'';position:absolute;left:50%;bottom:var(--pika-dno,.32em);
    width:var(--pika,.115em);height:var(--pika,.115em);
    margin-left:calc(var(--pika,.115em) / -2);border-radius:50%;
    background:var(--c-yellow);box-shadow:0 1px 6px rgba(0,0,0,.3);
  }
  @media (max-width:1359px){
    .hero-sub{--razmik:.6em;--pika:.2em}
    .hero-sub .hs-del{display:block}
    .hero-sub .hs-locilo{display:block;width:auto;height:var(--razmik)}
    .hero-sub .hs-locilo::after{bottom:auto;top:calc(50% - var(--pika) / 2 + var(--pika-zamik,0px))}
    /* prva vrstica ostane na istem mestu kot prej, ostalo je pod njo
       (napis se ne približa napisu na fotografiji) */
    .hero-sub{line-height:1.2;bottom:calc(var(--sub-b) - var(--cap-y) - 0.95em - var(--razmik))}
  }
  /* telefon: več prostora med napisom na fotografiji in rumenim napisom */
  @media (max-width:760px){
    .hero-sub{--razmik:.75em;--pika:.12em;bottom:calc(var(--sub-b) - var(--cap-y) - 0.95em - var(--razmik) - 14px)}
  }

  /* bele puščice (kot asteya.si) */
  .arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:10;
    background:none;border:none;cursor:pointer;padding:22px 16px;
    opacity:.7;transition:opacity .3s,transform .3s;
  }
  .arrow:hover{opacity:1}
  .arrow svg{width:24px;height:48px;stroke:#fff;stroke-width:1.5;fill:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
  .arrow.prev{left:18px}
  .arrow.next{right:18px}
  .arrow.prev:hover{transform:translateY(-50%) translateX(-4px)}
  .arrow.next:hover{transform:translateY(-50%) translateX(4px)}

  /* povezavi spodaj desno */
  .hero-legal{
    position:absolute;right:26px;bottom:10px;z-index:10;display:flex;gap:30px;
  }
  .hero-legal a{
    color:#fff;text-decoration:none;
    font-family:var(--f-nav);font-weight:700;font-size:15px;
    letter-spacing:1.4px;text-transform:uppercase;
    text-shadow:0 1px 6px rgba(0,0,0,.4);cursor:pointer;
    transition:opacity .3s;
  }
  .hero-legal a:hover{opacity:.7}

  /* na ozkih zaslonih napis pomanjšamo in ga omejimo na razpoložljivo širino,
     sicer se najdaljša vrstica dotakne desnega roba ali se odreže */
  @media (max-width:760px){
    :root{
      --cap-fs:clamp(24px,7vw,44px);
      --cap-w:min(calc(var(--cap-fs) * 11), calc(100vw - var(--cap-x) * 2 - 12px));
      --cap-x:16px;
      --cap-y:23vh;
      --sub-b:39vh;
    }
    .hero-caption .line{white-space:normal;text-shadow:0 2px 16px rgba(0,0,0,.75)}
    .hero-sub{font-size:clamp(18px,4.6vw,26px);letter-spacing:2px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
    /* mehka senca čez spodnji del slike, da napisa ostaneta berljiva */
    .hero-caption::before{
      content:'';position:absolute;left:0;right:0;top:30%;bottom:0;z-index:0;
      background:linear-gradient(to top,rgba(20,18,15,.55),rgba(20,18,15,.28) 55%,transparent);
    }
    .hero-caption .cap-in{position:relative;z-index:1}
  }

  /* ============ HERO — PODSTRANI (fiksna slika) ============ */
  .subhero{
    position:relative;height:100vh;background:#2c261e;
    background-size:cover;background-position:center;
    /* naslov levo spodaj, puščica navzdol pod njim */
    display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;
    padding:0 6vw 96px var(--cap-x);
  }
  /* puščica navzdol na levi strani podstrani (enak slog kot puščice na osnovni strani) */
  .down-arrow{
    position:absolute;left:calc(var(--cap-x) + 3cm);bottom:30px;z-index:10;
    background:none;border:none;cursor:pointer;padding:16px 22px;
    opacity:.7;transition:opacity .3s,transform .3s;
  }
  .down-arrow:hover{opacity:1;transform:translateY(4px)}
  .down-arrow svg{width:96px;height:48px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
  .subhero::after{content:'';position:absolute;inset:0;background:rgba(20,18,15,.35)}
  /* Dokler naslovna fotografija ni pripravljena, jo pokriva temno ozadje
     (razred .js doda skript v <head>, .nalozeno pa skupno.js). Varovalka:
     brez skripta se pokrivalo po 6 s umakne samo. */
  .subhero::before{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:#2c261e;opacity:0;
  }
  .js .subhero::before{opacity:1;animation:odkrij 0s 6s forwards}
  .js .subhero.nalozeno::before{opacity:0;transition:opacity .7s ease}
  .js .subhero.nalozeno.takoj::before{transition:none}
  @keyframes odkrij{to{opacity:0}}
  .subhero .in{position:relative;z-index:2;color:#fff;text-align:center}
  .subhero h1 sup.r{font-size:35%;top:-1.85em}
  /* .naslov-sh: napis na fotografiji, kadar je glavni naslov (H1) v besedilu (npr. Psihoterapija v Ajdovščini) */
  .subhero h1,.subhero .naslov-sh{font-family:var(--f-nav);font-weight:700;font-size:clamp(48px,6.5vw,88px);letter-spacing:3px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
  /* na širokem zaslonu naslov ni tik ob robu, ampak nekoliko bolj proti sredini
     (puščica se mu prilagodi, ker jo postavi poravnajNaslove()) */
  @media (min-width:761px){
    .subhero{padding-left:calc(var(--cap-x) + 1.9cm)}
  }
  /* na ozkem zaslonu gresta naslov in puščica v levi spodnji kot */
  @media (max-width:760px){
    .subhero{padding:0 16px calc(112px + env(safe-area-inset-bottom, 0px)) var(--cap-x)}
    .subhero .in{text-align:left}
    .subhero h1,.subhero .naslov-sh{font-size:clamp(34px,9.5vw,54px);letter-spacing:2px}
    .down-arrow{left:calc(var(--cap-x) - 10px);bottom:calc(64px + env(safe-area-inset-bottom, 0px));padding:12px 14px}
    .down-arrow svg{width:58px;height:30px}
  }

  /* ============ VSEBINA ============ */
  .content{max-width:840px;margin:0 auto;padding:90px 28px}
  .content.wide{max-width:1100px}
  .content h2{font-family:var(--f-nav);font-weight:700;font-size:32px;letter-spacing:2.2px;
    text-transform:uppercase;margin-bottom:24px;color:var(--c-text)}
  .content p{margin-bottom:20px;font-size:16.5px}
  .content .placeholder{
    border:1px dashed #cfc6b8;background:#fffdf9;padding:34px;border-radius:3px;
    color:#a3988a;font-style:italic;text-align:center;margin:10px 0 24px;font-family:var(--f-serif);
  }
  .ornament{display:flex;justify-content:center;margin-bottom:34px}
  .ornament::before{content:'';width:56px;height:1px;background:var(--c-accent)}

  /* ============ VSEBINSKI SLOG PODSTRANI (kuara stil) ============ */
  .prose h2{text-align:center;margin:70px 0 26px;font-size:35px;line-height:1.35}
  .prose h2:first-of-type{margin-top:0}
  .prose p{color:var(--c-text);font-size:17.5px;line-height:1.85}
  .prose .intro{text-align:center;font-family:var(--f-serif);font-size:20.5px;font-style:italic;color:var(--c-text)}
  .prose ul{list-style:none;margin:0 0 22px;padding:0}
  .prose li{position:relative;padding-left:30px;margin-bottom:10px;color:var(--c-text);font-size:17.5px;line-height:1.85}
  .prose li::before{content:'';position:absolute;left:4px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--c-text);opacity:.55}
  .cta-row{text-align:center;margin:38px 0 8px}
  .btn-cta{
    display:inline-block;color:var(--c-text);border:2px solid var(--c-yellow-soft);
    border-radius:999px;padding:8px 36px;
    font-family:var(--f-nav);font-weight:700;font-size:23px;letter-spacing:2.5px;
    text-transform:uppercase;text-decoration:none;cursor:pointer;
    transition:background .35s,color .35s;
  }
  .btn-cta:hover{background:var(--c-yellow-soft);color:var(--c-text)}
  /* pas fotografij zaključi poglavje — čez celo širino okna */
  .pas{
    width:100vw;margin-left:calc(50% - 50vw);
    display:flex;align-items:flex-start;margin-top:54px;
  }
  .pas.podnapis{margin-bottom:36px}
  .pas.uvod{margin:0 0 46px}
  /* večji portret ob besedilu na strani O meni */
  .portret{float:right;width:290px;margin:4px 0 22px 34px}
  .portret img{width:100%;display:block;box-shadow:0 10px 30px rgba(0,0,0,.1)}
  @media (max-width:620px){.portret{float:none;width:230px;margin:10px auto 26px}}
  .cta{text-align:center;clear:both;margin-top:44px}

  /* manjša fotografija, ki jo besedilo obteka */
  .obtekana{float:right;width:240px;margin:4px 0 18px 34px}
  .obtekana img{width:100%;display:block;box-shadow:0 8px 24px rgba(0,0,0,.1)}
  .obtekana figcaption{
    margin-top:9px;font-family:var(--f-body);font-weight:300;font-size:13px;
    line-height:1.5;letter-spacing:.3px;color:#7a736a;text-align:center;
  }
  @media (max-width:620px){.obtekana{float:none;width:180px;margin:20px auto}}
  /* besedilo ob obtekani sliki (David Berceli): obojestransko poravnano, da je
     rob ob sliki raven; na telefonu je slika nad besedilom, zato tam ni treba */
  @media (min-width:621px){.prose p.ob-sliki{text-align:justify;-webkit-hyphens:auto;hyphens:auto}}
  .pas figure{flex:1;margin:0;position:relative;min-width:0}
  .pas img{width:100%;height:min(56vw,600px);object-fit:cover;object-position:50% 50%;display:block}
  .pas figcaption{
    position:absolute;top:100%;left:0;right:0;padding:10px 12px 0;
    text-align:center;font-family:var(--f-body);font-weight:300;
    font-size:13.5px;letter-spacing:.4px;color:#7a736a;
  }
  @media (max-width:760px){
    .pas{flex-direction:column}
    .pas img{height:min(70vw,420px)}
    .pas figcaption{position:static;padding-bottom:16px}
    .pas.podnapis{margin-bottom:0}
  }
  .acc-b > .acc-in{padding-bottom:0}
  /* pokončni fotografiji drug ob drugem — v celoti vidni, brez obrezovanja */
  .par{display:flex;gap:18px;margin:34px 0 30px;align-items:flex-start}
  .par figure{flex:1;margin:0;min-width:0}
  .par img{width:100%;height:auto;display:block;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .par figcaption{
    margin-top:10px;text-align:center;font-family:var(--f-body);font-weight:300;
    font-size:13.5px;letter-spacing:.4px;color:#7a736a;
  }
  @media (max-width:620px){.par{flex-direction:column}}
  /* fotografija kot popestritev ob besedilu, ne kot pas čez stran */
  .fpoglavje{float:right;width:250px;margin:4px 0 20px 32px}
  .fpoglavje img{width:100%;height:auto;display:block;box-shadow:0 8px 24px rgba(0,0,0,.1)}
  @media (max-width:620px){.fpoglavje{float:none;width:200px;margin:14px auto 24px}}
  .foto{margin:34px 0 30px}
  .foto img{width:100%;display:block;box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .foto.ozka{max-width:300px;margin-left:auto;margin-right:auto}
  .foto figcaption{
    margin-top:10px;text-align:center;font-family:var(--f-body);font-weight:300;
    font-size:14px;letter-spacing:.4px;color:#7a736a;
  }
  .video{position:relative;width:100%;aspect-ratio:16/9;margin:30px 0 12px;background:#000;overflow:hidden;cursor:pointer}
  .video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .35s}
  .video:hover img{opacity:1}
  .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .video .play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:76px;height:76px;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.9);border:none;transition:transform .3s,background .3s;
  }
  .video .play::before{
    content:'';position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
    border-left:22px solid var(--c-text);border-top:14px solid transparent;border-bottom:14px solid transparent;
  }
  .video:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
  .videoalt{text-align:center;font-size:14px;color:#7a736a}
  .videoalt a{color:inherit}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:10px}
  .card{background:#fff;padding:40px 32px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.05);transition:transform .35s,box-shadow .35s;cursor:pointer}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.1)}
  .card h3{font-family:var(--f-script);font-weight:400;font-size:23px;margin-bottom:12px;color:var(--c-text)}
  .card p{font-size:15px;color:#6d675e}

  /* ============ FOOTER — asketski zeleni pas ============ */
  footer{
    position:relative;background:#f4efe6;padding:44px 24px 46px;
    display:flex;justify-content:center;align-items:center;gap:48px;
  }
  /* gumb za e-novičke z letalcem, ki prečka oval */
  .fnovicke{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    height:46px;padding:0 26px;box-sizing:border-box;
    cursor:pointer;text-decoration:none;color:var(--c-text);
    font-family:var(--f-nav);font-weight:700;font-size:20px;letter-spacing:1.8px;
    text-transform:uppercase;border:2px solid var(--c-yellow-soft);border-radius:999px;
    transition:background .3s;
  }
  .fnovicke:hover{background:var(--c-yellow-soft)}
  .fnovicke span{position:relative;z-index:3}
  .fnovicke .letalce{position:absolute;right:-50px;top:-37px;z-index:2;
    pointer-events:none;overflow:visible}
  .fnovicke .letalce .krilo{fill:none;stroke:var(--c-text);stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round}
  .fnovicke .letalce .sled{fill:none;stroke:var(--c-text);stroke-width:1.3;
    stroke-linecap:round;opacity:.7;stroke-dasharray:.1 4.6}
  /* letnica v levem spodnjem kotu — protiutež Spoštovanju zasebnosti na desni */
  .fcopy{
    position:absolute;left:26px;bottom:10px;
    color:var(--c-text);font-family:var(--f-nav);font-weight:700;font-size:15px;
    letter-spacing:1.4px;text-transform:uppercase;opacity:.78;
  }
  .fzasebnost{
    position:absolute;right:26px;bottom:10px;cursor:pointer;text-decoration:none;
    color:var(--c-text);font-family:var(--f-nav);font-weight:700;font-size:15px;
    letter-spacing:1.4px;text-transform:uppercase;transition:opacity .3s;
  }
  .fzasebnost:hover{opacity:.7}
  /* srednje široki zasloni: manjši razmik, da vse ostane v eni vrstici */
  @media (max-width:900px){footer{gap:28px}}
  footer .besedilo,.fnovicke{white-space:nowrap}
  /* tudi na ozkem zaslonu ostane v desnem spodnjem kotu — noga ima zato več
     prostora spodaj, da se napis ne prekriva s kontaktnimi podatki */
  @media (max-width:700px){
    footer{flex-direction:column;gap:24px;padding:34px 24px 46px}
    .fzasebnost{right:18px;bottom:12px;font-size:12.5px;letter-spacing:1px;text-align:right}
    .fcopy{left:18px;bottom:12px;font-size:12.5px;letter-spacing:1px}
  }
  /* kontaktni podatek: ikona brez okvirja in ob njej izpisan podatek */
  .fpar{
    display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--c-text);
    transition:opacity .3s;
  }
  .fpar:hover{opacity:.62}
  /* ikone v nogi (telefon, pošta, Instagram, Facebook) so vse enako velike:
     narisani del je širok/visok 20 px (svg 22 px z robom v risbi) */
  .fpar svg{width:22px;height:22px;flex:none;stroke:var(--c-text);fill:none;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .fpar .besedilo{font-family:var(--f-body);font-weight:300;font-size:17px;letter-spacing:.4px}
  /* povezavi na Instagram in Facebook: ikoni v barvi besedila v nogi */
  .fdrustvena{display:flex;align-items:center;gap:16px}
  .fdrustvena a{display:block;line-height:0;transition:opacity .3s}
  .fdrustvena a:hover{opacity:.62}
  .fdrustvena img{display:block;width:20px;height:20px}

  /* ============ MOBILE ============ */
  @media (max-width:1080px){
    header{padding:20px 22px 12px;justify-content:flex-end}
    .burger{display:block}
    /* svetlo, popolnoma neprosojno ozadje — vsebina strani ne sme prosevati skozenj */
    nav{
      position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;
      background:#f7f4ef;overflow-y:auto;-webkit-overflow-scrolling:touch;
    }
    nav.open{display:flex;animation:menijNoter .45s ease both}
    /* meni, odprt brez preliva (skupno.js: prehod v brskalnikih brez preliva) */
    nav.open.takoj{animation:none}
    nav.takoj .plast-foto{transition:none}
    nav.takoj.odhaja{opacity:0;transition:opacity .45s ease}
    /* namesto naslova DOMOV je zgoraj levo majhna puščica nazaj; s tem, da je
       njegov <li> skrit, se ostali naslovi sami premaknejo na njegovo mesto —
       zgornje polnilo seznama ostane enako, TRE METODA se začne v isti višini */
    .stran-domov{display:none}
    .nav-domov{
      display:block;position:absolute;top:12px;left:26px;z-index:3;
      background:none;border:none;cursor:pointer;padding:14px;
      opacity:.85;transition:opacity .3s,transform .3s;
    }
    .nav-domov:hover{opacity:1;transform:translateX(-3px)}
    /* puščica: enaka višina (20 px) in isti zgornji rob kot znak menija desno */
    .nav-domov svg{
      display:block;width:7.25px;height:20px;overflow:visible;
      stroke:#f7f3ea;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;
      filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));
    }
    /* Meni je pripet na vrh in se NE sredini navpično. Sredinjenje je pomenilo,
       da se ob razgrnitvi podnaslovov premakne cel seznam — naslovi nad njim so
       poskočili gor in dol. Zdaj razgrnitev premakne samo tisto, kar je pod njo. */
    nav ul{
      flex-direction:column;text-align:center;gap:5px;
      width:min(360px, calc(100vw - 32px));
      margin-top:0;margin-bottom:auto;
      padding:clamp(62px,11vh,124px) 0 96px;
    }
    /* vsak vnos naj bo širok le toliko kot besedilo, sicer se podčrtaj razteza
       čez celotno širino spustnega seznama */
    nav li{display:flex;flex-direction:column;align-items:center;width:100%}
    nav a.navlink{font-size:30px;display:inline-block;color:var(--c-text);text-shadow:none}
    nav a.navlink::after{background:var(--c-text)}
    nav a.pill{margin:14px 0 0;border-color:var(--c-text);color:var(--c-text)}
    nav a.pill:hover{background:var(--c-yellow-soft);border-color:var(--c-yellow-soft);color:var(--c-text)}
    header.mimo nav a.navlink{color:var(--c-text)}
    header.mimo nav a.navlink::after{background:var(--c-text)}
    header.mimo nav a.pill{border-color:var(--c-text);color:var(--c-text)}
    /* ko je meni odprt, mora biti gumb temen, ker je ozadje svetlo */
    header.meni .burger{color:var(--c-text)}
    /* POMEMBNO: backdrop-filter na glavi ustvari nov okvir za position:fixed,
       zato bi meni pokril le pas glave namesto celega zaslona */
    header.meni,header.mimo.meni{
      backdrop-filter:none;-webkit-backdrop-filter:none;
      background:#f7f4ef;box-shadow:none;
    }
    /* pravila za širok zaslon so močnejša od golega .dropdown, zato jih je treba
       tu izrecno preglasiti — sicer se seznam ob dotiku odmakne v levo */
    .dropdown,
    nav li.has-sub.odprt .dropdown{
      position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
      background:transparent;box-shadow:none;min-width:0;padding:0;width:100%;
    }
    /* Razgrnjenost ureja izključno razred .odprt. Podnaslovi se preprosto
       pojavijo (bledenje), brez drsenja ali spreminjanja višine. */
    .dropdown{display:none}
    nav li.has-sub.odprt .dropdown{display:block;margin-top:4px;animation:vstop .35s ease both}
    li.has-sub::before,li.has-sub::after{display:none}
    .dropdown a{
      color:#8b8478;font-size:clamp(15.5px,4.6vw,18.5px);padding:6px 14px;border-radius:999px;
      letter-spacing:1.2px;transition:background .25s,color .25s;
    }
    /* ob dotiku podnaslova ni rumenega oblačka (poudarka) — podnaslov ostane,
       kakršen je; polnilo se ne spreminja, sicer bi besedilo poskočilo */
    .dropdown a:hover,.dropdown a:active{
      background:transparent;padding-left:14px;padding-right:14px;
    }
    .arrow.prev{left:4px}.arrow.next{right:4px}
    .hero-caption{padding:0 var(--cap-x)}
    .hero-sub{left:var(--cap-x)}
  }
  /* med odprtim menijem ali oknom se stran pod njim ne premika
     (skupno.js: zaklep — stran je pripeta na trenutnem mestu) */
  html.zaklenjeno{overflow:hidden}
  html.zaklenjeno body{position:fixed;left:0;right:0;overflow:hidden;padding-right:var(--drsnik,0px)}
  html.zaklenjeno header{right:var(--drsnik,0px)}
  /* pomikanje menija ali okna se ne prenese na stran pod njim; brez
     sijaja/odboja ob robu (na starejših Androidih svetlo moder sij na vrhu
     menija, ko prst ob dotiku malo potegne navzdol) */
  nav,.modal{overscroll-behavior:none}
  #subheroTre{background-position:center bottom;background-image:url('slike/tre-metoda-sprostitev-napetosti.jpg')}
  #subheroPonudba{background-image:url('slike/ponudba-pot.jpg')}
  #subheroKontakt{background-image:url('slike/stopimo-v-stik.jpg')}
  #slide1{background-image:url('slike/naslovna-lahkotnost.jpg')}
  #slide2{background-image:url('slike/naslovna-notranji-mir-in-ravnovesje.jpg')}
  #slide3{background-image:url('slike/naslovna-globlji-stik-s-telesom.jpg')}
  #subheroOmeni{background-image:url('slike/o-meni-rast.jpg')}
  #subheroPsihoterapija{background-image:url('slike/psihoterapija-ogledalo.jpg');background-position:center 30%}

  /* ============ ZLOŽLJIVA POGLAVJA (TRE metoda) ============ */
  .acc{border-top:1px solid #e7ded0}
  .acc:first-of-type{border-top:none}
  .acc:last-of-type{border-bottom:1px solid #e7ded0}
  .acc-h{
    display:flex;align-items:center;justify-content:center;gap:16px;
    padding:26px 10px;cursor:pointer;text-align:center;
    font-family:var(--f-nav);font-weight:700;font-size:34px;
    letter-spacing:2.5px;text-transform:uppercase;line-height:1.25;
    color:var(--c-text);transition:opacity .3s;
  }
  .acc-h:hover{opacity:.65}
  .acc-h .znak{
    flex:none;width:26px;height:26px;border:1px solid rgba(61,58,53,.45);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:transform .4s ease,background .3s;
  }
  .acc-h .znak::before{
    content:'';width:7px;height:7px;border-right:1.5px solid var(--c-text);
    border-bottom:1.5px solid var(--c-text);transform:translateY(-2px) rotate(45deg);
  }
  .acc.open .acc-h .znak{transform:rotate(180deg)}
  /* mehko odvijanje: prehod med 0fr in 1fr animira dejansko višino vsebine */
  .acc-b{display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows .5s ease}
  .acc.open .acc-b{grid-template-rows:1fr}
  .acc-b > .acc-in{overflow:hidden;min-width:0}
  /* po končanem odvijanju sprostimo obrezovanje, sicer bi pas obrezalo na širino besedila */
  .acc.open .acc-b > .acc-in{animation:sprosti 0s .5s forwards}
  @keyframes sprosti{to{overflow:visible}}
  .acc-b > .acc-in > *:first-child{margin-top:0}
  .acc-b > .acc-in{padding-bottom:6px}
  .prose .acc h2,
  .prose .pogl h2{
    font-family:var(--f-nav);font-weight:700;font-size:25px;
    letter-spacing:2px;text-transform:uppercase;
    margin:44px 0 16px;color:var(--c-text);
  }
  #subheroZasebnost{background-image:url('slike/zasebnost.jpg')}

  /* ============ RAZLIČICA: LOČENE PODSTRANI ============ */
  .kazalo{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    margin:60px 0 0;padding-top:30px;border-top:1px solid #e7ded0;
    width:min(1040px, calc(100vw - 56px));
    margin-left:50%;transform:translateX(-50%);
  }
  .kazalo button{
    background:var(--c-light);border:1px solid rgba(61,58,53,.25);border-radius:999px;
    padding:8px 16px;cursor:pointer;color:#8b8478;white-space:nowrap;
    font-family:var(--f-nav);font-weight:700;font-size:19px;
    letter-spacing:1.3px;text-transform:uppercase;line-height:1.1;
    transition:background .3s,border-color .3s;
  }
  .kazalo button:hover{border-color:#8b8478;color:var(--c-text)}
  .kazalo button.tu{background:var(--c-yellow-soft);border-color:var(--c-yellow-soft);color:var(--c-text)}
  /* drobna risba se nasloni na črto nad kazalom */
  .poglavja{position:relative}
  .risba-lin{
    position:absolute;right:-26px;width:clamp(54px,7.5vw,80px);margin:0;pointer-events:none;
  }
  .risba-lin img{opacity:.78}
  .risba-lin img{display:block;width:100%;height:auto}
  @media (max-width:620px){
    .risba-lin{right:-10px}
  }

  /* risbe v poglavjih */
  .risba-pog{margin:0}
  .risba-pog img{display:block;width:100%;height:auto}
  .risba-pog.desno{float:right;margin:0 0 22px 38px}
  .risba-pog.visje{margin-top:-1cm}
  .risba-pog.levo{float:left;margin:0 38px 22px 0}
  .risba-pog.sredina{margin:8px auto 36px}
  .risba-pog.bledo img{opacity:.72}
  .risba-pog.bledo{margin-top:-0.6cm}
  .prose p.podrisbo{clear:both}
  .risba-pog.svetlo img{opacity:.8}
  /* pas s fotografijo čez celo širino okna */
  .pas{width:100vw;margin:48px 0 0;margin-left:calc(50% - 50vw)}
  .pas figure{margin:0}
  .pas img{width:100%;height:min(46vw,420px);object-fit:cover;display:block}
  .risba-pog.obcrti{
    position:absolute;right:-8px;width:110px;margin:0;pointer-events:none;
    padding-bottom:14px;border-bottom:1px solid #e7ded0;
  }
  /* risba ob odstavku — visoka natanko toliko kot odstavek poleg nje */
  .vrstica-risba{display:flex;align-items:stretch;gap:24px}
  .vrstica-risba > p{flex:1 1 auto;min-width:0}
  /* spodnji rob je enak razmiku pod odstavkom, zato je risba natanko tako
     visoka kot besedilo poleg nje */
  /* Risba je odmaknjena od roba okvirja natanko toliko, kolikor je nad prvo in
     pod zadnjo vrstico praznega prostora zaradi razmika med vrsticami — tako se
     zgornji in spodnji rob risbe ujameta z zgornjim in spodnjim robom besedila.
     Slika je absolutna, da okvir ne veča višine vrstice (sicer bi se odstavek
     raztegnil in risba bi visela pod besedilom). */
  .risba-ob{
    flex:0 0 auto;align-self:stretch;margin:0 0 20px;width:144px;position:relative;
  }
  .risba-ob img{
    position:absolute;left:0;right:0;top:0;bottom:0;
    width:100%;height:auto;max-height:100%;
    object-fit:contain;object-position:center;opacity:.85;
  }
  /* na ožjem zaslonu se risba postavi pod besedilo, na sredino */
  @media (max-width:760px){
    .vrstica-risba{display:block}
    .risba-ob{width:150px;margin:6px auto 26px;position:static}
    .risba-ob img{position:static;height:auto;max-height:none}
  }

  /* metuljček ob naslovu */
  /* sidro brez širine stoji točno pred prvo črko naslova */
  .metulj-sidro{position:relative;display:inline-block;width:0;height:0}
  .metulj{position:absolute;right:0.15cm;bottom:0.1cm;width:26px;pointer-events:none}
  .prose h2,.prose h3{clear:both}
  .prose h2.brez-clear{clear:none}
  @media (max-width:900px){
    .risba-pog.obcrti{position:static;float:right;width:90px;margin:0 0 18px 28px;
      border-bottom:none;padding:0}
    .metulj{display:none}
  }
  @media (max-width:620px){
    .risba-pog.desno,.risba-pog.levo{float:none;margin:12px auto 24px}
  }

  /* drobni rumeni gumbek sredi besedila */
  .gumbek{
    display:inline-block;cursor:pointer;text-decoration:none;color:var(--c-text);
    border:2px solid var(--c-yellow-soft);border-radius:999px;padding:1px 14px;
    font-family:var(--f-nav);font-weight:700;font-size:18px;letter-spacing:1.4px;
    text-transform:uppercase;line-height:1.35;transition:background .3s;
  }
  .gumbek:hover{background:var(--c-yellow-soft)}

  .naslov-pogl{
    font-family:var(--f-nav);font-weight:700;font-size:46px;
    letter-spacing:2.5px;text-transform:uppercase;text-align:center;
    margin:0 0 30px;color:var(--c-text);
  }
  /* glavni naslov strani (H1) v besedilu, npr. Psihoterapija v Ajdovščini —
     videti je enako kot naslovi poglavij (H2) na drugih podstraneh */
  .prose .pogl h1.naslov-pogl{font-size:25px;letter-spacing:2px;line-height:1.35;margin:44px 0 16px;clear:both}
  .pogl{display:none}
  .pogl.vidno{display:block;animation:vstop .6s ease both}

  /* ============ KONTAKTNI PODATKI IN OBRAZEC ============ */
  .kontakt-podatki{margin:30px 0 34px;text-align:center}
  .kontakt-podatki p{margin:0 0 4px}
  .kontakt-podatki .ime{
    font-family:var(--f-nav);font-weight:700;font-size:30px;
    letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;
  }
  .kontakt-podatki a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(61,58,53,.3)}
  .kontakt-podatki a:hover{border-bottom-color:var(--c-text)}
  .prose p.sredina{text-align:center}
  .obrazec{max-width:560px;margin:0 auto}
  .obrazec label{display:block;margin-bottom:22px}
  .obrazec label > span{
    display:block;margin-bottom:8px;
    font-family:var(--f-nav);font-weight:700;font-size:21px;letter-spacing:1.6px;text-transform:uppercase;
  }
  .obrazec input[type=text],.obrazec input[type=email],.obrazec textarea{
    width:100%;padding:13px 16px;color:var(--c-text);
    -webkit-appearance:none;appearance:none;
    background-color:var(--c-light);background-image:none;
    border:1px solid rgba(61,58,53,.25);border-radius:2px;
    font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.6;
    transition:border-color .3s;
  }
  .obrazec input:focus,.obrazec textarea:focus{outline:none;border-color:var(--c-yellow-soft);background-color:var(--c-light)}
  .obrazec input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px var(--c-light) inset;-webkit-text-fill-color:var(--c-text)}
  .obrazec button{background:transparent}
  .obrazec textarea{resize:vertical}
  .obrazec .privolitev{display:flex;align-items:flex-start;gap:12px;margin-bottom:28px}
  /* potrditveno polje je narisano (kot izbirni krogci), sicer je na starejših
     telefonih ob kliku privzeto modro */
  .obrazec .privolitev input{
    margin-top:5px;flex:none;width:17px;height:17px;cursor:pointer;
    -webkit-appearance:none;appearance:none;border:1.5px solid #b9b2a6;border-radius:3px;
    background:transparent no-repeat center/12px 12px;
    transition:background-color .2s,border-color .2s;
  }
  .obrazec .privolitev input:checked{
    background-color:#8b8478;border-color:#8b8478;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.7 3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .obrazec .privolitev span{
    font-family:var(--f-body);font-weight:300;font-size:15px;text-transform:none;letter-spacing:0;margin:0;
  }
  .obrazec .privolitev a{color:inherit;cursor:pointer;text-decoration:none;border-bottom:1px solid rgba(61,58,53,.35)}
  .obrazec button{display:block;margin:0 auto}
  .obrazec-opomba{margin-top:18px;text-align:center;font-size:14px;color:#7a736a;min-height:20px}

  /* ============ ZASEBNOST ============ */
  .zasebnost h2{font-size:26px;margin-top:56px}
  .zasebnost .posodobitev{margin-top:44px;font-size:14px;color:#7a736a;text-align:center}

  /* ============ PONUDBA ============ */
  .card .oznaka{
    display:inline-block;margin-bottom:12px;padding:5px 16px;border-radius:999px;
    background:var(--c-yellow-soft);color:var(--c-text);
    font-family:var(--f-nav);font-weight:700;font-size:17px;letter-spacing:1.6px;text-transform:uppercase;
  }
  .prose h3{
    font-family:var(--f-nav);font-weight:700;font-size:25px;
    letter-spacing:2px;text-transform:uppercase;
    margin:44px 0 16px;color:var(--c-text);
  }
  .podatki{
    margin:34px 0;padding:26px 0;background:none;
    border-top:1px solid #e2d9c9;border-bottom:1px solid #e2d9c9;
  }
  .podatki dt{
    font-family:var(--f-nav);font-weight:700;font-size:19px;color:var(--c-text);
    letter-spacing:1.6px;text-transform:uppercase;margin-top:14px;
  }
  .podatki dt:first-child{margin-top:0}
  .podatki dd{margin:2px 0 0;color:var(--c-text);font-size:17px;line-height:1.8}
  .prose .povezava{color:inherit;cursor:pointer;text-decoration:none;border-bottom:1px solid var(--c-yellow-soft)}
  .prose .povezava:hover{border-bottom-color:var(--c-text)}

  /* ============ IZBIRA UVODNEGA SREČANJA ============ */
  .izbira{
    display:flex;justify-content:center;align-items:flex-start;
    gap:80px;margin:34px 0 8px;
  }
  .izb{cursor:pointer;text-align:center;transition:transform .3s}
  .izb:hover{transform:translateY(-4px)}
  .izb .slika{
    width:200px;height:200px;margin:0 auto;border-radius:50%;position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  /* obrezovanje na sliki sami, da krogec s plusom ostane viden */
  .izb .slika img{
    width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
    filter:grayscale(.3);transition:filter .4s,transform .6s;
  }
  .izb:hover .slika img,.izb.tu .slika img{filter:none;transform:scale(1.05)}
  .izb.tu .slika::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 4px var(--c-yellow-soft)}
  .izb .znak{
    display:block;margin-top:10px;
    font-family:var(--f-nav);font-weight:700;font-size:19px;letter-spacing:1.6px;
    text-transform:uppercase;color:#8b8478;
    border-bottom:2px solid var(--c-yellow-soft);padding-bottom:2px;
  }
  .izb .znak{display:inline-block}
  .izb h3{margin:18px 0 0;font-size:26px}
  .podrobno{display:none;padding-top:14px}
  .podrobno.odprto{display:block;animation:vstop .5s ease both}
  .izbira.tri{gap:44px;flex-wrap:wrap}
  .izbira.tri .slika{width:160px;height:160px}
  .izbira.tri .znak{font-size:17px}
  .izbira.tri h3{font-size:22px;max-width:200px;margin-left:auto;margin-right:auto}
  @media (max-width:820px){.izbira.tri{gap:30px}}
  @media (max-width:620px){.izbira{flex-direction:column;align-items:center;gap:34px}}

  /* ============ PONUDBA: POT V KROGIH ============ */
  .content.prose.pregled{padding-bottom:24px}
  /* spodnji odmik je enak kot prej, ko je pod krogi stal še (prazen) blok poglavij */
  .content.pregled.krogi{padding-top:10px;padding-bottom:270px}
  .kazalo.skrito{display:none}
  .pregled.skrito{display:none}
  .potkrogi{position:relative}
  .postaja,.postaja.zadnji{
    position:relative;display:flex;gap:44px;align-items:center;
    padding-bottom:60px;cursor:pointer;
  }
  .postaja::before{
    content:'';position:absolute;left:79px;top:170px;bottom:0;width:2px;
    background:linear-gradient(to bottom,var(--c-yellow-soft),rgba(236,213,140,.2));
  }
  .postaja.zadnji::before{display:none}
  .obroc{
    position:relative;flex:none;width:158px;height:158px;border-radius:50%;overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.14);transition:transform .35s;
  }
  .obroc img{width:100%;height:100%;object-fit:cover}
  .postaja:hover .obroc,.samostojna:hover .obroc{transform:scale(1.05)}
  .obroc .stevilka{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(20,18,15,.34);color:rgba(255,255,255,.78);
    font-family:var(--f-nav);font-weight:700;font-size:62px;
  }
  .postaja h3,.samostojna h3{
    font-family:var(--f-nav);font-weight:700;font-size:31px;letter-spacing:2.2px;
    text-transform:uppercase;margin:0 0 10px;line-height:1.15;transition:opacity .3s;
  }
  .postaja:hover h3,.samostojna:hover h3{opacity:.62}
  .postaja p,.samostojna p{font-size:17.5px;line-height:1.8;margin:0;max-width:52ch}
  .locnica{height:1px;background:#e2d9c9;margin:26px 0 52px}
  .samostojni{display:flex;gap:52px;justify-content:center;flex-wrap:wrap}
  .samostojna{flex:1 1 300px;max-width:360px;text-align:center;cursor:pointer}
  .samostojna .obroc{width:180px;height:180px;margin:0 auto 22px}
  .samostojna p{margin:0 auto}
  @media (max-width:700px){
    .postaja{gap:24px;flex-direction:column;text-align:center;padding-bottom:56px}
    /* rumena črta poveže postaje tudi na ozkem zaslonu — teče po sredini,
       vendar samo skozi prazen prostor med besedilom in naslednjim krogom */
    .postaja::before{
      display:block;left:50%;transform:translateX(-50%);
      top:auto;bottom:6px;height:44px;width:2px;
      background:linear-gradient(to bottom,rgba(236,213,140,.35),var(--c-yellow-soft));
    }
    .postaja.zadnji::before{display:none}
    .obroc{width:126px;height:126px}
    .obroc .stevilka{font-size:46px}
    .postaja h3,.samostojna h3{font-size:26px}
  }

/* ============================================================
   OZEK MENI (telefoni) — fotografija strani pod temno tančico.
   Vse spodaj velja izključno pod 1080 px; širok zaslon se ne dotika.
   Barve so vezane na razred .meni (odprt meni), ker so pravila za
   svetlo glavo (header.mimo) sicer močnejša in napisi potemnijo.
   ============================================================ */
@media (max-width:1080px){
  nav ul{position:relative;z-index:2}
  nav .plast-foto,nav .plast-tancica{position:absolute;top:0;left:0;right:0;height:100vh;pointer-events:none}
  /* nevidno merilo višine zaslona (100vh), po katerem skupno.js postavi gumb */
  nav .plast-mera{position:absolute;top:0;left:0;width:0;height:100vh;visibility:hidden;pointer-events:none}
  /* več plasti, da se ena fotografija mehko prelije v drugo (nova čez staro) */
  nav .plast-foto{
    background-color:#2c261e;background-position:center;background-size:cover;
    opacity:0;transition:opacity .85s ease,filter .3s;
  }
  nav .plast-foto.on{opacity:1}
  /* temnejši fotografiji (O meni, Stopimo v stik, Zasebnost) posvetlimo */
  nav .plast-foto.svetlejsa{filter:brightness(1.2) saturate(.95)}
  nav .plast-tancica{
    background:linear-gradient(to bottom,rgba(44,38,30,.62),rgba(44,38,30,.5));
  }
  /* ozadje pod fotografijo je svetlo kot noga strani */
  nav{background:#f4efe6}

  /* meni je više, da O MENI ostane na fotografiji tudi ob razgrnjenih podnaslovih */
  nav ul{padding:clamp(28px,5vh,60px) 0 96px}

  header.meni nav a.navlink{color:#f7f3ea;text-shadow:0 2px 14px rgba(0,0,0,.5)}
  header.meni nav a.navlink::after{background:var(--c-yellow-soft)}
  header.meni .dropdown a{color:#e3dccd;text-shadow:0 1px 8px rgba(0,0,0,.45)}

  /* STOPIMO V STIK: dokler je na fotografiji, je obarvan enako rumeno kot
     krog okoli njega; ko pade pod fotografijo (na svetlo ozadje), počrni.
     Razred .na-foto preklaplja skupno.js glede na dejanski položaj. */
  header.meni nav a.navlink.pill{
    /* --dodatek nastavi skupno.js, kadar mora gumb v celoti pod fotografijo */
    margin-top:calc(52px + var(--dodatek, 0px));background:transparent;text-shadow:none;
    border-color:var(--c-yellow-soft);color:var(--c-text);
    transition:background .3s,color .3s,border-color .3s;
  }
  header.meni nav a.navlink.pill.na-foto{color:var(--c-yellow-soft)}
  header.meni nav a.navlink.pill:hover,
  header.meni nav a.navlink.pill:active{
    background:var(--c-yellow-soft);border-color:var(--c-yellow-soft);color:var(--c-text);
  }

  header.meni,header.mimo.meni{background:transparent;box-shadow:none}
  header.meni .burger{color:#f7f3ea}
}
/* na širokem zaslonu plasti s fotografijo ni — meni ostane nespremenjen */
@media (min-width:1081px){
  nav .plast-foto,nav .plast-tancica,nav .plast-mera{display:none}
}


  /* ============ OBRAZEC ZA INFORMATIVNO PRIJAVO ============ */
  /* enaka širina kot polja obrazca, da se besedilo in okvirčki začnejo v isti liniji */
  .prijava{max-width:560px;margin:0 auto}
  .prijava .pnaslov{
    font-family:var(--f-nav);font-weight:700;font-size:34px;letter-spacing:2.4px;
    text-transform:uppercase;text-align:center;margin:0 0 5px;color:var(--c-text);line-height:1.2;
  }
  .prijava .ppodnaslov{
    font-family:var(--f-serif);font-style:italic;font-size:19px;text-align:center;
    color:#7a736a;margin:0 0 12px;
  }
  .prijava .pcrta{width:56px;height:1px;background:var(--c-accent);margin:0 auto 15px}
  /* kadar črte in podnaslova ni, naslov sam poskrbi za razmik do besedila */
  .prijava .pnaslov + .puvod{margin-top:22px}
  .prijava .puvod{font-size:16.5px;line-height:1.7;margin:0 0 8px}
  .prijava .pdrobno{font-size:15px;color:#7a736a;margin:0 0 18px}
  .prijava .obvezno{color:var(--c-accent-dark);font-style:normal}
  .prijava .neobvezno{
    font-family:var(--f-body);font-weight:300;font-size:14px;color:#7a736a;
    text-transform:none;letter-spacing:0;font-style:normal;
  }
  /* ime in e-pošta drug ob drugem, na ozkem zaslonu eden pod drugim */
  .prijava .par2{display:flex;gap:20px}
  .prijava .par2 > label{flex:1;min-width:0}
  @media (max-width:620px){.prijava .par2{display:block}}
  .prijava .obrazec label{margin-bottom:13px}
  .prijava .obrazec label > span{margin-bottom:7px}
  /* polje za sporočilo je nizko, raste pa samo, kadar je besedila več */
  .prijava .obrazec textarea{resize:none;overflow-y:hidden;min-height:52px}
  .prijava .privolitev{margin-bottom:16px}
  .prijava .obrazec-opomba{min-height:20px;margin-top:12px}

  /* izbira kraja — krogci se ob izbiri v celoti obarvajo nežno sivo */
  .prijava .kraji{margin-bottom:13px}
  .prijava .kraji > span{
    display:block;margin-bottom:9px;
    font-family:var(--f-nav);font-weight:700;font-size:21px;letter-spacing:1.6px;text-transform:uppercase;
  }
  .prijava .kraji .moznosti{display:flex;flex-wrap:wrap;gap:8px 18px}
  /* na širokem zaslonu gredo vse možnosti v eno vrsto */
  @media (min-width:621px){
    .prijava .kraji .moznosti{flex-wrap:nowrap;white-space:nowrap}
  }
  .prijava .kraji label{
    display:flex;align-items:center;gap:9px;margin:0;cursor:pointer;
    font-family:var(--f-body);font-weight:300;font-size:16.5px;
  }
  .prijava .kraji label > span{
    display:inline;margin:0;font-family:inherit;font-weight:inherit;font-size:inherit;
    letter-spacing:normal;text-transform:none;
  }
  .prijava .kraji input[type=radio]{
    flex:none;width:17px;height:17px;margin:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;border-radius:50%;
    border:1.5px solid #b9b2a6;background:transparent;
    transition:background .2s,border-color .2s;
  }
  .prijava .kraji input[type=radio]:checked{background:#8b8478;border-color:#8b8478}

  /* okno, v katerem se obrazec odpre */
  .modal{
    position:fixed;inset:0;z-index:300;display:none;
    align-items:flex-start;justify-content:center;overflow-y:auto;
    background:rgba(38,33,26,.55);backdrop-filter:blur(3px);
    padding:16px;
  }
  .modal.odprt{display:flex;animation:vstop .45s ease both}
  .modal .okno{
    background:var(--c-light);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.35);
    padding:32px 40px 26px;width:min(680px,100%);position:relative;margin:auto;
  }
  .modal .zapri{
    position:absolute;top:8px;right:14px;background:none;border:none;cursor:pointer;
    font-family:var(--f-body);font-size:30px;line-height:1;color:#9a9187;padding:6px;
  }
  .modal .zapri:hover{color:var(--c-text)}
  @media (max-width:620px){
    .prijava .pnaslov{font-size:27px}
    .prijava .ppodnaslov{font-size:17px}
    .modal{padding:10px}
    .modal .okno{padding:34px 22px 28px}
  }


/* ============ VEČSTRANSKA RAZLIČICA: DODATKI ============ */
/* kazalo je zdaj sestavljeno iz pravih povezav (prej gumbov) */
.kazalo a{
  background:var(--c-light);border:1px solid rgba(61,58,53,.25);border-radius:999px;
  padding:8px 16px;cursor:pointer;color:#8b8478;white-space:nowrap;text-decoration:none;
  font-family:var(--f-nav);font-weight:700;font-size:19px;
  letter-spacing:1.3px;text-transform:uppercase;line-height:1.1;display:inline-block;
  transition:background .3s,border-color .3s;
}
.kazalo a:hover{border-color:#8b8478;color:var(--c-text)}
.kazalo a.tu{background:var(--c-yellow-soft);border-color:var(--c-yellow-soft);color:var(--c-text)}

/* kartice v pregledu Ponudbe so prave povezave na strani poglavij */
a.samostojna-link{display:block;text-decoration:none;color:inherit}
a.postaja{text-decoration:none;color:inherit}

/* Ko je glava svetla (stran je pomaknjena v besedilo), se oblaček pokaže že
   ob prehodu z miško in izgine, ko se miška umakne. Nad fotografijo ga še
   vedno odpre klik (razred .odprt). Samo širok zaslon z miško. */
@media (min-width:1081px) and (hover:hover){
  header.mimo nav li.has-sub:hover .dropdown{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .32s ease .12s,transform .32s ease .12s,visibility 0s;
  }
  header.mimo nav li.has-sub:hover::after{
    opacity:1;visibility:visible;
    transform:translateX(-50%) translateY(0) rotate(45deg);
    transition:opacity .32s ease .12s,transform .32s ease .12s,visibility 0s;
  }
}

/* ============ MEHAK PRELIV MED STRANMI (View Transitions) ============
   Ob navigaciji na drugo stran (klik na povezavo) brskalnik, ki to podpira,
   naredi posnetek stare in nove strani ter ju sam nežno prelije — brez
   vmesnega belega/sivega/črnega ozadja. V brskalnikih brez podpore se stran
   preprosto takoj zamenja (enako varno, le brez preliva). */
@view-transition{ navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.7s;
  animation-timing-function:ease;
}
/* klik na podnaslov: krajši preliv, stran se med njim že začne pomikati k besedilu */
html.k-besedilu::view-transition-old(root),
html.k-besedilu::view-transition-new(root){
  animation-duration:.45s;
}