/* ============================================================
   Vigotski · pages.css
   Styles beyond the front page: header extras, skip link, page hero,
   editor typography (.prose), breadcrumbs and form states.
   theme.css (the demo design) loads first; this file only adds to it.
   Template-specific sections are appended after the "templates" marker.
   ============================================================ */

/* ---- accessibility helpers ---- */
.screen-reader-text{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip-link:focus,
.skip-link:focus-visible{position:fixed!important; top:14px; left:14px; width:auto; height:auto; margin:0; padding:12px 18px; overflow:visible; clip:auto; clip-path:none; white-space:normal; z-index:10000; background:var(--pine); color:var(--paper); font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.03em; border-radius:2px; text-decoration:none; outline:2px solid var(--gold); outline-offset:2px}

/* ---- header: brand logo, contact button, current item ---- */
.brand.brand-logo{display:inline-flex; align-items:center; line-height:0}
.brand-img{display:block; height:46px; width:auto; max-width:200px; object-fit:contain}
.drawer .brand-img{height:40px}
.foot .brand-img{height:44px}
.top .contact{flex:none; white-space:nowrap; text-decoration:none}
.top .contact:focus-visible{border-color:var(--gold); color:var(--pine); background:var(--card)}
.top nav a[aria-current="page"]{color:var(--ink); box-shadow:0 1px 0 var(--gold)}
.drawer nav a[aria-current="page"]{color:var(--pine)}
@media(min-width:961px){.foot-nav a{padding:5px 0}}
/* footer column titles are h3 (the demo used h4) so the outline never jumps from h2 to h4; same look as theme.css .foot h4, with the bold weight and inherited line-height an h4 had instead of the h1,h2,h3 defaults */
.foot h3{font-family:var(--sans); font-size:.68rem; font-weight:700; line-height:inherit; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
@media(max-width:560px){.brand-img{height:38px}}

/* ---- page hero: the single h1 of every inner page ---- */
.page-hero{padding:58px 0 26px}
.page-hero .ph-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center}
.page-hero.has-aside .ph-grid{grid-template-columns:1.15fr .85fr; gap:64px}
.page-hero .ph-k{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-bottom:20px}
.page-hero .ph-k .kicker{display:inline-block}
.page-hero .ph-k a.kicker{transition:color .2s}
.page-hero .ph-k a.kicker:hover{color:var(--pine)}
.page-hero h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem); font-weight:500; max-width:14em; letter-spacing:-.005em}
.page-hero h1 em{font-style:italic; color:var(--pine)}
.page-hero .lead{font-size:1.12rem; color:var(--ink-soft); max-width:36em; margin:22px 0 0}
.page-hero .meta{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:20px; font-family:var(--sans); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.page-hero .meta a{color:var(--ink-soft); transition:color .2s}
.page-hero .meta a:hover{color:var(--pine)}
.page-hero .meta .sep{color:var(--gold)}
.page-hero .frame{width:100%; max-width:420px; justify-self:end}
.page-hero .frame .ph{overflow:hidden; background:var(--paper-2)}
.page-hero .frame .ph img{display:block; width:100%; height:100%; aspect-ratio:4/5; object-fit:cover}
.page-hero .glyph{font-family:var(--serif); font-weight:500; font-size:clamp(6rem,4rem + 12vw,15rem); line-height:.9; color:var(--gold-soft); opacity:.55; justify-self:end; user-select:none}
@media(max-width:900px){
  .page-hero.has-aside .ph-grid{grid-template-columns:1fr; gap:34px}
  .page-hero .frame{max-width:380px; justify-self:start; margin:0}
  .page-hero .glyph{justify-self:start; font-size:6rem}
}
@media(max-width:560px){
  .page-hero{padding:34px 0 12px}
  .page-hero h1{font-size:clamp(2rem,1.3rem + 5vw,2.8rem)}
  .page-hero .lead{font-size:1.02rem; margin-top:16px}
}

/* ---- breadcrumbs (Rank Math markup or a .breadcrumbs nav) ---- */
.breadcrumbs,
.rank-math-breadcrumb{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); line-height:1.6}
.breadcrumbs ol,
.breadcrumbs ul,
.rank-math-breadcrumb p{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0; padding:0; list-style:none}
.breadcrumbs a,
.rank-math-breadcrumb a{color:var(--ink-soft); transition:color .2s}
.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover{color:var(--pine)}
.breadcrumbs .sep,
.rank-math-breadcrumb .separator{color:var(--gold)}
.breadcrumbs [aria-current="page"],
.rank-math-breadcrumb .last{color:var(--gold)}

/* ---- prose: editor content ---- */
.prose{max-width:720px; font-size:1.06rem; line-height:1.75; color:var(--ink-soft)}
.prose > *{margin-top:0; margin-bottom:1.35em}
.prose > :last-child{margin-bottom:0}
.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{font-family:var(--serif); font-weight:500; color:var(--ink); line-height:1.12; margin:2em 0 .6em}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem)}
.prose h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem)}
.prose h4{font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:2.2em}
.prose h5,.prose h6{font-size:1.15rem}
.prose p{margin:0 0 1.35em}
.prose a{color:var(--pine); text-decoration:underline; text-decoration-color:var(--gold-soft); text-decoration-thickness:1px; text-underline-offset:3px; transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--pine)}
.prose strong,.prose b{color:var(--ink); font-weight:600}
.prose em,.prose i{font-family:var(--serif); font-style:italic; font-size:1.08em}
.prose ul,.prose ol{margin:0 0 1.35em; padding-left:1.4em}
.prose li{margin-bottom:.45em}
.prose li > ul,.prose li > ol{margin:.45em 0 0}
.prose ul{list-style:none; padding-left:0}
.prose ul li{position:relative; padding-left:1.6em}
.prose ul li::before{content:""; position:absolute; left:0; top:.82em; width:14px; height:1px; background:var(--gold)}
.prose ol{list-style:decimal}
.prose ol li::marker{font-family:var(--serif); font-weight:600; color:var(--gold)}
.prose blockquote{margin:2em 0; padding:6px 0 6px 28px; border-left:1px solid var(--gold); font-family:var(--serif); font-weight:500; font-size:1.45rem; line-height:1.35; color:var(--pine)}
.prose blockquote p{margin:0 0 .6em}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote cite{display:block; font-family:var(--sans); font-style:normal; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:12px}
.prose .wp-block-pullquote{padding:0; border:none; margin:2.4em 0}
.prose .wp-block-pullquote blockquote{border-left:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; text-align:center}
.prose figure{margin:2em 0}
.prose img{display:block; max-width:100%; height:auto; border-radius:6px; border:1px solid var(--line-2)}
.prose figcaption,.prose .wp-element-caption{font-family:var(--sans); font-size:.78rem; color:var(--muted); letter-spacing:.02em; margin-top:10px; text-align:left}
.prose hr{border:none; height:1px; background:var(--line); margin:2.6em 0}
.prose table{width:100%; border-collapse:collapse; font-size:.95rem; margin:0 0 1.6em}
.prose th,.prose td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.prose th{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.prose .wp-block-table{overflow-x:auto}
.prose pre,.prose code{font-size:.92em; background:var(--paper-2); border-radius:3px}
.prose code{padding:2px 5px}
.prose pre{padding:16px 18px; overflow-x:auto}
.prose .wp-block-buttons{margin:1.6em 0}
.prose .wp-block-button__link{font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:2px; background:var(--pine); color:var(--paper); border:1px solid var(--pine); text-decoration:none; transition:background .2s, color .2s}
.prose .wp-block-button__link:hover{background:var(--pine-deep)}
.prose .alignwide,.prose .alignfull{max-width:none}
.prose .aligncenter{margin-left:auto; margin-right:auto}
.prose .alignleft{float:left; margin:6px 28px 18px 0; max-width:50%}
.prose .alignright{float:right; margin:6px 0 18px 28px; max-width:50%}
.prose::after{content:""; display:table; clear:both}
.prose .wp-block-embed,.prose iframe{max-width:100%}
.prose .wp-block-embed__wrapper{position:relative}
@media(max-width:560px){
  .prose{font-size:1rem}
  .prose blockquote{font-size:1.25rem; padding-left:20px}
  .prose .alignleft,.prose .alignright{float:none; margin:1.6em 0; max-width:100%}
}

/* paginated content (wp_link_pages) */
.page-links{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:2.2em; font-family:var(--sans); font-size:.84rem}
.page-links .lbl{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:4px}
.page-links a,.page-links > span:not(.lbl){display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line-2); border-radius:2px; color:var(--ink); transition:border-color .2s, color .2s}
.page-links a:hover{border-color:var(--gold); color:var(--pine)}
.page-links .post-page-numbers.current{background:var(--pine); border-color:var(--pine); color:var(--paper)}

/* ---- forms: honeypot, busy state, inline error ---- */
.hp{position:absolute!important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}
.modal-err{margin:-4px 0 14px; padding:12px 14px; border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-left:3px solid var(--gold); background:var(--paper-2); font-family:var(--sans); font-size:.86rem; line-height:1.5; color:var(--ink)}
form.is-busy .btn{opacity:.65; cursor:progress}
form.is-busy .btn[disabled]{background:var(--pine); color:var(--paper)}

/* ==== templates ==== */


/* ---- section rhythm: .sec is the padded band of every inner template (div.sec.body included).
   A band right after the page hero sits closer to it; a band that follows the article band
   (team grid, index of the other areas) drops its top padding so the rhythm stays even ---- */
.sec{padding:92px 0}
.page-hero + .sec{padding-top:44px}
.sec.body + .sec{padding-top:0}
.sec-t{font-size:clamp(1.8rem,1rem + 2.7vw,3rem)}
.sec-k h2.kicker,
.svc-h h2.kicker{font-size:.72rem; line-height:1.6; margin:0}
/* services archive: the kicker is a direct child of .svc-h and shares the baseline of the link (the front page nests .sec-k above its h2 and keeps the 22px gap) */
.svc-h > .sec-k{margin-bottom:0}
/* front page #pristup: the editor copy gets the .prose typography for headings, lists and quotes but keeps the demo's paragraph size and width */
.intro .body.prose{max-width:none; font-size:inherit; line-height:inherit}
.intro-prose{margin-bottom:56px}
.contact-prose{margin-top:64px}
.empty{max-width:560px; font-family:var(--sans); font-size:1.04rem; line-height:1.6; color:var(--ink-soft)}
.empty p{margin-bottom:22px}
@media(max-width:640px){
  .sec{padding:56px 0}
  .page-hero + .sec{padding-top:34px}
  .sec.body + .sec{padding-top:0}
  .intro-prose{margin-bottom:40px}
  .contact-prose{margin-top:48px}
}

/* ---- search form (search.php, 404.php, empty listings) ---- */
.sform{display:flex; gap:10px; max-width:560px}
.sform input[type="search"]{flex:1 1 auto; min-width:0; font-family:var(--sans); font-size:1rem; padding:12px 14px; border:1px solid var(--line-2); border-radius:2px; background:var(--card); color:var(--ink); -webkit-appearance:none; appearance:none}
.sform input[type="search"]:focus{outline:none; border-color:var(--pine); box-shadow:0 0 0 3px color-mix(in srgb, var(--pine) 10%, transparent)}
.sform .btn{flex:none; cursor:pointer}
.search-head{margin-bottom:44px}
@media(max-width:560px){.sform{flex-direction:column} .sform .btn{justify-content:center}}

/* ---- blog cards (home, archive, search, index) ---- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:44px 30px}
.card-post{display:flex; flex-direction:column; min-width:0}
.card-post .pic{display:block; position:relative; overflow:hidden; aspect-ratio:4/3; margin-bottom:22px; border:1px solid var(--line-2); border-radius:6px; background:var(--paper-2)}
.card-post .pic img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.card-post:hover .pic img{transform:scale(1.03)}}
.card-post .cbody{display:flex; flex-direction:column; flex:1}
.card-post .cbody .kicker{display:block; margin-bottom:10px}
.card-post h2{font-size:1.5rem; line-height:1.15}
.card-post h2 a{transition:color .2s}
.card-post h2 a:hover{color:var(--pine)}
.card-post .excerpt{font-family:var(--sans); font-size:.94rem; line-height:1.6; color:var(--ink-soft); margin-top:12px}
.card-post .date{display:block; margin-top:auto; padding-top:16px; font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
@media(max-width:1000px){.posts{grid-template-columns:1fr 1fr; gap:38px 24px}}
@media(max-width:640px){.posts{grid-template-columns:1fr; gap:36px} .card-post h2{font-size:1.4rem}}

/* ---- pagination (the_posts_pagination), same look as .page-links ---- */
.navigation.pagination{margin-top:60px}
.pagination .nav-links{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-size:.84rem}
.pagination .page-numbers{display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--line-2); border-radius:2px; color:var(--ink); transition:border-color .2s, color .2s}
.pagination a.page-numbers:hover{border-color:var(--gold); color:var(--pine)}
.pagination .page-numbers.current{background:var(--pine); border-color:var(--pine); color:var(--paper)}
.pagination .page-numbers.dots{border-color:transparent; color:var(--muted)}

/* ---- 404 ---- */
.nf-in{max-width:640px}
.nf-links{display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; margin-top:36px}

/* ---- contact page: details beside the arched booking card ---- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start}
.cinfo h2{font-size:clamp(1.8rem,1rem + 2.7vw,3rem)}
.crows{margin-top:30px; border-top:1px solid var(--line-2)}
.crow{display:grid; grid-template-columns:150px 1fr; gap:16px 20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line)}
.crow .lbl{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.crow .val{font-family:var(--sans); font-size:1rem; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.crow .val .btn svg{width:15px; height:15px; fill:none; stroke:var(--gold-soft); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tcard.book{width:100%; max-width:440px; justify-self:center; padding:calc(var(--arch) - 60px) 34px 40px}
.tcard.book:hover{transform:none; box-shadow:none}
.tcard.book .kicker{display:block; margin-bottom:14px}
.tcard.book h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.2rem); line-height:1.12; margin-bottom:14px}
.tcard.book p{font-family:var(--sans); font-size:.98rem; color:var(--ink-soft); margin-bottom:26px}
.tcard.book .btn{align-self:center}
.tcard.book .alt{font-size:.86rem; color:var(--muted); margin:18px 0 0}
.tcard.book .alt a{color:var(--pine); font-weight:600; border-bottom:1px solid var(--gold)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr; gap:48px} .tcard.book{justify-self:start}}
@media(max-width:560px){.crow{grid-template-columns:1fr; gap:6px; padding:16px 0} .tcard.book{padding:90px 24px 30px}}

/* ---- single service: article beside a sticky aside (list of services, booking card) ---- */
.single-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:64px; align-items:start}
.side{position:sticky; top:96px}
.side .sec-k{margin-bottom:14px}
.side-list{list-style:none; margin:0 0 34px; padding:0; border-top:1px solid var(--line-2)}
.side-list li{margin:0; border-bottom:1px solid var(--line)}
.side-list a{display:flex; align-items:baseline; gap:14px; padding:13px 4px; font-family:var(--serif); font-size:1.18rem; line-height:1.25; color:var(--ink); transition:color .2s, padding-left .25s ease}
.side-list a:hover{color:var(--pine); padding-left:10px}
.side-list a[aria-current="page"]{color:var(--pine)}
.side-list .no{flex:none; min-width:1.6em; font-weight:600; font-size:.95rem; color:var(--gold)}
.side-card{display:flex; flex-direction:column; align-items:flex-start; padding:30px 28px; background:var(--card); border:1px solid var(--line); border-top:2px solid var(--gold)}
.side-card .kicker{display:block; margin-bottom:12px}
.side-card p{font-family:var(--sans); font-size:.94rem; color:var(--ink-soft); margin-bottom:20px}
.side-card .btn{width:100%; justify-content:center}
.side-card .lnk{margin-top:16px}
.side-card .hours{font-size:.8rem; color:var(--muted); margin:14px 0 0}
@media(max-width:1000px){.single-grid{grid-template-columns:1fr; gap:56px} .side{position:static}}

/* ---- disorders archive: bordered three-column index ---- */
.pidx{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-2); border-left:1px solid var(--line-2)}
.pcard{position:relative; display:flex; flex-direction:column; min-width:0; padding:32px 28px 30px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); transition:background .25s}
/* this file loads after theme.css, so the hover transition above would override the .rv reveal transition of the stagger (theme.css .rv); while .rv is on, the reveal keeps priority */
.pcard.rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.pcard:hover{background:var(--card)}}
.pcard .no{font-family:var(--serif); font-size:1.6rem; font-weight:600; line-height:1; color:var(--gold); margin-bottom:18px}
.pcard h2{font-size:1.5rem; line-height:1.15}
.pcard h2 a{transition:color .2s}
.pcard h2 a:hover{color:var(--pine)}
.pcard p{font-family:var(--sans); font-size:.92rem; line-height:1.6; color:var(--ink-soft); margin-top:10px}
.pcard .more{margin-top:auto; padding-top:24px}
@media(max-width:1000px){.pidx{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pidx{grid-template-columns:1fr} .pcard{padding:26px 22px 24px}}

/* ---- single disorder: rows with the other areas ---- */
.idx{display:flex; flex-direction:column; border-top:1px solid var(--line-2)}
.idx a{display:grid; grid-template-columns:60px 1fr auto; gap:20px; align-items:baseline; padding:20px 6px; border-bottom:1px solid var(--line); transition:padding-left .25s ease, background .25s}
/* same as .pcard.rv: the reveal transition wins over the hover one while the row is still revealing */
.idx a.rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.idx .no{font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--gold)}
.idx .t{font-family:var(--serif); font-size:1.35rem; line-height:1.2; color:var(--ink); transition:color .2s}
.idx .go{font-family:var(--sans); font-size:1.2rem; color:var(--line-2); align-self:center; transition:color .2s, transform .2s}
@media(hover:hover){.idx a:hover{background:var(--card); padding-left:16px} .idx a:hover .t{color:var(--pine)} .idx a:hover .go{color:var(--gold); transform:translateX(4px)}}
@media(max-width:640px){.idx a{grid-template-columns:40px 1fr; gap:14px; padding:16px 2px} .idx .go{display:none}}

/* ---- single post: tag pills, previous and next (scoped to .tags so the hero founding-year badge .frame .tag of theme.css is untouched) ---- */
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:36px}
.tags .tag,
.prose .tag{display:inline-block; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border:1px solid var(--line-2); border-radius:100px; color:var(--ink-soft); text-decoration:none; transition:border-color .2s, color .2s}
.tags .tag:hover,
.prose .tag:hover{border-color:var(--gold); color:var(--pine)}
.post-nav{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:720px; margin-top:64px; padding-top:34px; border-top:1px solid var(--line-2)}
.post-nav a{display:flex; flex-direction:column; gap:8px}
.post-nav .next{text-align:right; align-items:flex-end}
.post-nav .kicker{font-size:.66rem}
.post-nav .t{font-family:var(--serif); font-size:1.35rem; line-height:1.2; color:var(--ink); transition:color .2s}
.post-nav a:hover .t{color:var(--pine)}
@media(max-width:560px){.post-nav{grid-template-columns:1fr; gap:22px} .post-nav .next{text-align:left; align-items:flex-start}}

/* ---- FAQ: every h3 is a question row with a gold rule; core Details blocks become a native accordion ---- */
.prose.faq h3{position:relative; margin:2.4em 0 .6em; padding-top:22px; border-top:1px solid var(--line-2)}
.prose.faq h3::before{content:""; position:absolute; top:-1px; left:0; width:54px; height:1px; background:var(--gold)}
.prose.faq > h3:first-child{margin-top:0}
.prose.faq h2 + h3{margin-top:1.2em}
.prose.faq details{margin:0; padding:20px 0; border-top:1px solid var(--line-2)}
.prose.faq details:last-of-type{border-bottom:1px solid var(--line-2)}
.prose.faq summary{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; cursor:pointer; list-style:none; font-family:var(--serif); font-weight:500; font-size:1.35rem; line-height:1.25; color:var(--ink); transition:color .2s}
.prose.faq summary::-webkit-details-marker{display:none}
.prose.faq summary::after{content:"+"; flex:none; font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--gold); transition:transform .3s ease}
.prose.faq summary:hover{color:var(--pine)}
.prose.faq details[open] summary::after{transform:rotate(45deg)}
.prose.faq details > :not(summary){margin-top:14px}
.prose.faq details > :not(summary):last-child{margin-bottom:0}

/* ---- team: photo in the front-page card (.mem); Tim page profiles further below ---- */
a.mem{transition:border-color .2s, box-shadow .2s}
a.mem:hover{border-color:var(--line-2); box-shadow:0 18px 40px -28px rgba(var(--pine-deep-rgb),.45)}
a.mem:hover h3{color:var(--pine)}
.mem .mono.photo{overflow:hidden; border-color:var(--line-2)}

/* ---- front page: parent advice teaser; blog page: heading above the post grid ---- */
#saveti .svc-h{margin-bottom:38px}
#saveti .sec-lead{max-width:640px; margin-top:16px; color:var(--ink-soft)}
.posts-t{margin-bottom:34px}
#pristup .body .lnk{margin-top:8px}

/* ---- booking call to action over a photo of the centre (Customizer "Zakazivanje: fotografija") ---- */
.cta.has-photo{background:linear-gradient(160deg, rgba(var(--pine-rgb),.9) 0%, rgba(var(--pine-deep-rgb),.93) 100%), var(--cta-photo) center/cover no-repeat, var(--pine)}
@media(max-width:760px){#prostor .space,#prostor .space::before,#prostor .slide:first-child{background-position:65% 50%}}

/* ---- footer bottom: legal line and the studio credit ---- */
.foot-bot{display:flex; justify-content:space-between; align-items:center; gap:14px 30px; flex-wrap:wrap}
.foot-bot .legal{flex:1 1 420px}
.foot-bot .legal a{transition:color .2s}
.foot-bot .legal a:hover{color:var(--pine)}
.made-by{display:inline-flex; align-items:center; color:var(--ink); transition:color .25s}
.made-by svg{width:74px; height:auto; display:block}
.made-by:hover{color:var(--pine)}
.foot-map{display:inline-flex; align-items:baseline; gap:6px; transition:color .2s}
.foot-map .pin{font-size:.8em; color:var(--gold); transition:transform .25s ease}
.foot-map:hover{color:var(--pine)}
.foot-map:hover .pin{transform:translate(2px,-2px)}
.drawer-locs a{border-bottom:1px solid var(--line-2); transition:color .2s, border-color .2s} .drawer-locs a:hover{color:var(--pine); border-color:var(--gold)}

.mem .mono.photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%; transform:scale(1.45); transform-origin:50% 27%}

/* ---- page hero: one look on every inner page (breadcrumbs, title, lead, arched photo on a tinted band) ---- */
.page-hero{position:relative; padding:52px 0 64px; background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper-2) 78%, var(--paper) 78%)}
.page-hero .ph-grid,
.page-hero.has-aside .ph-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:64px; align-items:center; min-height:420px}
.page-hero .ph-text{padding-bottom:40px}
.page-hero h1{font-size:clamp(2.4rem,1.5rem + 3.2vw,4.2rem); max-width:13em}
.page-hero .lead{max-width:32em}
.page-hero .frame{max-width:440px}
.page-hero .frame .ph{box-shadow:0 34px 60px -36px rgba(var(--pine-deep-rgb),.55)}
@media(max-width:900px){
  .page-hero{background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper-2) 72%, var(--paper) 72%); padding:34px 0 40px}
  .page-hero .ph-grid,
  .page-hero.has-aside .ph-grid{grid-template-columns:1fr; gap:30px; min-height:0}
  .page-hero .ph-text{padding-bottom:0}
  .page-hero .frame{max-width:none; width:100%}
  .page-hero .frame .ph img{aspect-ratio:4/3.4}
  .page-hero .frame .ph{border-radius:calc(var(--arch) * .9) calc(var(--arch) * .9) 8px 8px}
}

/* ---- Tim page: equal portraits, biography in a dialog ---- */
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:46px 24px; margin-top:16px; align-items:start}
.person{scroll-margin-top:110px; min-width:0; display:flex; flex-direction:column; align-items:flex-start}
.person .pic{display:block; position:relative; width:100%; aspect-ratio:4/5; margin:0 0 20px; padding:0; overflow:hidden; border-radius:var(--arch) var(--arch) 6px 6px; border:1px solid var(--line-2); background:var(--paper-2); box-shadow:0 26px 50px -34px rgba(var(--pine-deep-rgb),.5); font:inherit; color:inherit; cursor:default}
button.pic{cursor:pointer}
.person .pic img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){button.pic:hover img{transform:scale(1.035)}}
button.pic:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.person .pic .mono{position:absolute; inset:0; margin:auto; width:96px; height:96px; font-size:2rem}
.person h3{font-size:1.5rem; font-weight:500}
.person .role{font-family:var(--sans); font-size:.88rem; color:var(--muted); margin-top:6px}
.bio-open{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:6px 0 3px; border:0; border-bottom:1.5px solid var(--gold); background:none; font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--ink); cursor:pointer; transition:color .2s, gap .25s ease}
.bio-open:hover{color:var(--pine); gap:12px}

@media(max-width:820px){.people{grid-template-columns:1fr 1fr; gap:38px 20px} .person h3{font-size:1.3rem}}
@media(max-width:440px){.people{grid-template-columns:1fr} .person .pic{max-width:380px}}

dialog.bio-modal{width:min(940px, calc(100vw - 32px)); max-height:min(86vh, 760px); margin:auto; padding:0; border:0; border-radius:8px; background:var(--card); color:var(--ink); box-shadow:0 40px 90px -30px rgba(var(--shade-rgb),.6); overflow:hidden}
dialog.bio-modal::backdrop{background:rgba(var(--backdrop-rgb),.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
dialog.bio-modal[open]{animation:bio-in .45s cubic-bezier(.2,.7,.2,1)}
dialog.bio-modal[open]::backdrop{animation:bio-fade .35s ease}
@keyframes bio-in{from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none}}
@keyframes bio-fade{from{opacity:0} to{opacity:1}}
.bio-card{display:grid; grid-template-columns:320px minmax(0,1fr); max-height:inherit}
.bio-pic{position:relative; background:var(--paper-2)}
.bio-pic img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.bio-pic .mono{position:absolute; inset:0; margin:auto; width:110px; height:110px; font-size:2.2rem}
.bio-body{padding:46px 46px 40px; overflow-y:auto; max-height:min(86vh, 760px); overscroll-behavior:contain}
.bio-body .kicker{display:block; margin-bottom:12px}
.bio-body h2{font-size:clamp(1.9rem,1.4rem + 1.4vw,2.5rem); font-weight:500}
.bio-body .role{font-family:var(--sans); font-size:.92rem; color:var(--muted); margin:8px 0 24px; padding-bottom:22px; border-bottom:1px solid var(--line-2)}
.bio-body .prose{font-size:1rem; max-width:none}
.bio-x{position:absolute; top:14px; right:14px; z-index:2; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s, transform .25s ease}
.bio-x:hover{background:var(--paper-2); transform:rotate(90deg)}
.bio-card{position:relative}
html.bio-lock{overflow:hidden}
@media(max-width:720px){
  .bio-card{grid-template-columns:1fr; max-height:none}
  dialog.bio-modal{max-height:90vh; overflow-y:auto}
  .bio-pic{aspect-ratio:4/3.2}
  .bio-body{max-height:none; overflow:visible; padding:28px 24px 30px}
}

/* ---- Česta pitanja: accordion beside a sticky contact card ---- */
.faq-sec{padding-top:40px}
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:64px; align-items:start}
.faq-group{font-size:1.7rem; margin:40px 0 14px}
.faq-group:first-child{margin-top:0}
.qa-list{border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{display:flex; align-items:flex-start; gap:20px; padding:24px 4px 24px 0; cursor:pointer; list-style:none; transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa-no{flex:none; min-width:2.2em; padding-top:.32em; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; color:var(--gold)}
.qa-q{flex:1; font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem); font-weight:500; line-height:1.25; color:var(--ink)}
.qa summary:hover .qa-q{color:var(--pine)}
.qa-ico{position:relative; flex:none; width:36px; height:36px; margin-top:-2px; border:1px solid var(--line-2); border-radius:50%; transition:background .25s, border-color .25s}
.qa-ico::before,.qa-ico::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--pine); border-radius:1px; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s}
.qa-ico::after{transform:rotate(90deg)}
.qa[open] .qa-ico{background:var(--pine); border-color:var(--pine)}
.qa[open] .qa-ico::before,.qa[open] .qa-ico::after{background:var(--paper)}
.qa[open] .qa-ico::after{transform:rotate(0deg); opacity:0}
.qa summary:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.qa-a{max-width:none; padding:0 56px 26px calc(2.2em + 20px); font-size:1.02rem}
.qa-a > :last-child{margin-bottom:0}
.faq-side{position:sticky; top:104px; display:flex; flex-direction:column; gap:18px}
.faq-side .side-card h2{font-size:1.6rem; margin:0 0 12px}
.side-mail{margin-top:10px; font-family:var(--sans); font-size:.86rem; color:var(--ink-soft); transition:color .2s}
.side-mail:hover{color:var(--pine)}
.side-link{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px; padding:22px 26px; background:var(--paper-2); border:1px solid var(--line); border-radius:4px; transition:border-color .2s, background .2s}
.side-link .kicker{grid-column:1}
.side-link .t{grid-column:1; font-family:var(--serif); font-size:1.3rem; color:var(--ink)}
.side-link .go{grid-column:2; grid-row:1 / span 2; color:var(--gold); font-size:1.2rem; transition:transform .25s ease}
.side-link:hover{border-color:var(--line-2); background:var(--card)}
.side-link:hover .go{transform:translateX(4px)}
@media(max-width:1000px){.faq-grid{grid-template-columns:1fr; gap:44px} .faq-side{position:static}}
@media(max-width:560px){.qa summary{gap:12px; padding:20px 0} .qa-no{display:none} .qa-a{padding:0 0 22px} .qa-ico{width:32px; height:32px}}

/* ---- Saveti za roditelje: intro, numbered advice cards, "when to ask" panel, latest texts ---- */
.saveti-intro{padding-bottom:30px}
.saveti-intro .body.prose{max-width:none}
.tips-sec{padding-top:20px}
.tips{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px}
.tip{position:relative; padding:34px 34px 30px; background:var(--card); border:1px solid var(--line); border-radius:6px; transition:border-color .25s, box-shadow .35s, transform .35s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.tip:hover{border-color:var(--line-2); box-shadow:0 24px 44px -32px rgba(var(--pine-deep-rgb),.45); transform:translateY(-3px)}}
.tip .no{display:block; font-family:var(--serif); font-size:2.3rem; line-height:1; color:var(--gold-soft); margin-bottom:16px}
.tip h3{font-size:1.45rem; font-weight:500; line-height:1.2; margin:0 0 12px}
.tip-text{font-size:.98rem; line-height:1.7; color:var(--ink-soft)}
.tip-text p{margin:0 0 .8em}
.tip-text > :last-child{margin-bottom:0}
@media(max-width:760px){.tips{grid-template-columns:1fr; gap:16px} .tip{padding:28px 24px 24px}}
.callout{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; padding:60px 56px; background:var(--paper-2); border:1px solid var(--line); border-radius:6px}
.callout-head .kicker{display:block; margin-bottom:14px}
.callout-head h2{font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem); font-weight:500}
.callout-body p{color:var(--ink-soft); margin:0 0 1em; font-size:1.04rem; line-height:1.7}
.callout-acts{display:flex; align-items:center; flex-wrap:wrap; gap:16px 26px; margin-top:26px}
@media(max-width:860px){.callout{grid-template-columns:1fr; gap:22px; padding:36px 26px}}
.texts-sec .svc-h{margin-bottom:34px}

/* ---- front page: two links beside the advice heading ---- */
.sec-links{display:flex; flex-wrap:wrap; gap:12px 28px}

/* ---- header: eight menu items fit on one line down to 1161px, below that the drawer takes over ---- */
.top .in{gap:24px}
.top nav{gap:clamp(16px,1.7vw,28px)}
.top nav a{white-space:nowrap}
@media(max-width:1160px){.top nav,.top .contact{display:none} .hamb{display:flex}}

/* ---- Tim page: biography buttons on one line whatever the role length ---- */
.people{align-items:stretch}
.person .bio-open{margin-top:auto; padding-top:14px}
.person .role{margin-bottom:0}
.person h3 + .bio-open{margin-top:auto}

/* ---- motion (motion.js with Motion and Lenis): starting states exist only under html.motion, which the head script sets
   before the first paint and takes away when motion.js never reports in, so without JS or with reduced motion nothing hides ---- */
html.lenis, html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-scrolling iframe{pointer-events:none}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

html.motion [data-reveal]:not(.is-in),
html.motion [data-reveal-stagger] > :not(.is-in){opacity:0}
html.motion [data-reveal="clip"]:not(.is-in){opacity:1; clip-path:inset(100% 0 0 0)}
html.motion [data-reveal="line"]:not(.is-in){opacity:1; transform:scaleX(0); transform-origin:left}

/* front hero: the h1 waits until its words are split, then each word starts below its clip */
html.motion:not(.hero-split) .hero h1{opacity:0}
html.motion .hero h1 .wi{transform:translateY(110%)}
html.motion .hero .kicker:not(.is-in),
html.motion .hero .lead:not(.is-in),
html.motion .hero .frame .tag:not(.is-in){opacity:0}
.rule{transform-origin:left}

/* FAQ answers glide open (motion.js animates the height); the bottom space is a pseudo element so it is part of the measured height */
.qa-a{overflow:hidden; padding-bottom:0}
.qa-a::after{content:""; display:block; height:26px}
@media(max-width:560px){.qa-a::after{height:22px}}

/* hover lifts and photo zooms that motion.js leaves to CSS */
@media(hover:hover){
  .card-post .pic img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
}

/* ---- Šta radimo: a tint sweeps in from the left and the row content eases right (transforms only, no layout work) ---- */
.srow{position:relative; isolation:isolate}
.srow::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(var(--gold-soft-rgb),.22), rgba(var(--gold-soft-rgb),.05) 70%, transparent); transform:scaleX(0); transform-origin:left center; transition:transform .65s cubic-bezier(.22,1,.36,1)}
.srow .no,.srow > div{transition:transform .55s cubic-bezier(.22,1,.36,1)}
.srow h3{transition:color .35s ease}
.srow .go{transition:color .35s ease, transform .55s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
  .srow:hover{background:none; padding-left:6px}
  .srow:hover::before{transform:scaleX(1)}
  .srow:hover .no,.srow:hover > div{transform:translateX(14px)}
  .srow:hover h3{color:var(--pine)}
  .srow:hover .go{color:var(--gold); transform:translateX(6px)}
}

/* ---- front page team: portrait cards, three per row, the last one leads to the Tim page ---- */
.team-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:16px}
.mcard{position:relative; display:flex; flex-direction:column; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .35s}
.mcard .pic{position:relative; display:block; aspect-ratio:4/4.3; overflow:hidden; background:var(--paper-2)}
.mcard .pic img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 26%; transition:transform 1s cubic-bezier(.22,1,.36,1)}
.mcard .pic .mono{position:absolute; inset:0; margin:auto; width:96px; height:96px; font-size:2rem}
.mcard .body{display:flex; flex-direction:column; gap:6px; padding:22px 26px 26px}
.mcard .t{font-family:var(--serif); font-size:1.6rem; font-weight:500; line-height:1.15; color:var(--ink); transition:color .3s}
.mcard .r{font-family:var(--sans); font-size:.88rem; line-height:1.5; color:var(--muted)}
@media(hover:hover){
  a.mcard:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 30px 50px -34px rgba(var(--pine-deep-rgb),.5)}
  a.mcard:hover .pic img{transform:scale(1.045)}
  a.mcard:hover .t{color:var(--pine)}
}
.mcard-more{justify-content:flex-end; gap:12px; padding:38px 34px; min-height:260px; background:var(--pine); border-color:var(--pine); color:var(--paper)}
.mcard-more .kicker{color:var(--gold-soft)}
.mcard-more .t{font-family:var(--serif); font-size:clamp(1.9rem,1.4rem + 1.2vw,2.5rem); line-height:1.1; color:var(--paper)}
.mcard-more .d{font-family:var(--sans); font-size:.95rem; line-height:1.6; color:rgba(var(--paper-rgb),.82); max-width:22em}
.mcard-more .go{position:absolute; top:30px; right:32px; font-size:1.6rem; color:var(--gold-soft); transition:transform .55s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
  a.mcard-more:hover{background:var(--pine-deep); border-color:var(--pine-deep)}
  a.mcard-more:hover .t{color:var(--paper)}
  a.mcard-more:hover .go{transform:translate(4px,-4px)}
}
@media(max-width:900px){.team-cards{grid-template-columns:1fr 1fr; gap:18px} .mcard .t{font-size:1.35rem} .mcard .body{padding:18px 18px 20px}}
@media(max-width:520px){.team-cards{grid-template-columns:1fr} .mcard .pic{aspect-ratio:4/3.6}}

/* ---- front page "Naš pristup": a large two-line title, then the text in two columns ---- */
#pristup .sec-k{justify-content:center}
#pristup .sec-k::before{content:""; flex:1; height:1px; background:var(--line-2)}
.pristup-t{font-size:clamp(2.7rem,1.2rem + 5.4vw,6.4rem); font-weight:500; line-height:1; letter-spacing:-.012em; margin:6px auto 0; text-align:center}
.pristup-t span,.pristup-t em{display:block}
.pristup-t em{font-style:italic; color:var(--pine)}
.pristup-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 72px; margin-top:56px; padding-top:44px; border-top:1px solid var(--line)}
.pristup-lead p{font-family:var(--serif); font-size:clamp(1.45rem,1.15rem + .9vw,1.95rem); line-height:1.35; color:var(--ink); margin:0}
.pristup-rest{max-width:none}
.pristup-rest p{color:var(--ink-soft)}
.pristup-rest .lnk{margin-top:6px}
@media(max-width:860px){.pristup-body{grid-template-columns:1fr; margin-top:34px; padding-top:30px}}

/* ---- Prostor: the centre's photos take turns behind the card (motion.js crossfades them while the band is on screen) ---- */
.space.has-media{background-image:none}
.space.has-media::before{display:none}
.space-media{position:absolute; inset:-32px 0; z-index:0; overflow:hidden}
.space-media .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0}
.space-media .slide.is-on{opacity:1}
.space .veil{z-index:1}

/* ---- Vigotski quote: the words fill with the accent colour as the band scrolls through (motion.js drives background-size).
   box-decoration-break:slice lays the lines end to end, so the fill runs line after line like reading ---- */
.quote blockquote .qfill{color:transparent; -webkit-background-clip:text; background-clip:text; background-repeat:no-repeat;
  background-image:linear-gradient(90deg, var(--pine) 0 94%, rgba(var(--pine-rgb),0) 100%), linear-gradient(90deg, rgba(var(--pine-rgb),.22), rgba(var(--pine-rgb),.22));
  background-size:100% 100%, 100% 100%; -webkit-box-decoration-break:slice; box-decoration-break:slice}
html.motion .quote blockquote .qfill{background-size:0% 100%, 100% 100%}

/* ---- performance: no backdrop blur under the sticky header (it repaints on every scrolled frame) ---- */
.top{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper)}

/* ---- maps load on request: a click on "Prikaži mapu" swaps the placeholder for the Google embed ---- */
.map-load{margin-top:10px; padding:9px 16px; border:1px solid var(--line-2); border-radius:2px; background:var(--card); font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--ink); cursor:pointer; transition:border-color .25s, color .25s, background .25s}
.map-load:hover{border-color:var(--gold); color:var(--pine)}
.map .gmap{opacity:0; transition:opacity .6s ease}
.map .gmap.is-ready{opacity:1}

/* ---- Blog: category tabs above the cards ---- */
.blog-tabs{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 38px}
.blog-tabs a{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border:1px solid var(--line-2); border-radius:999px; font-family:var(--sans); font-size:.84rem; font-weight:600; color:var(--ink-soft); transition:background .3s, border-color .3s, color .3s}
.blog-tabs a .n{font-weight:500; font-size:.76rem; color:var(--muted); transition:color .3s}
.blog-tabs a:hover{border-color:var(--gold); color:var(--pine)}
.blog-tabs a[aria-current="page"]{background:var(--pine); border-color:var(--pine); color:var(--paper)}
.blog-tabs a[aria-current="page"] .n{color:rgba(var(--paper-rgb),.75)}
html{scroll-padding-top:96px}
@media(max-width:960px){html{scroll-padding-top:80px}}

/* ---- accent colour beside the palette (Customizer "Dodatna boja", html[data-akcent]); "bez" keeps the palette's own tints ---- */
:root{--accent:var(--gold-soft); --accent-soft:var(--paper-2); --accent-ink:var(--gold); --accent-strong:var(--gold); --accent-rgb:var(--gold-soft-rgb)}
:root[data-akcent="mint"]{--accent:#A9DCC7; --accent-soft:#E7F5EF; --accent-ink:#2E7A61; --accent-strong:#5FBE9A; --accent-rgb:169,220,199}
:root[data-akcent="zuta"]{--accent:#F2DD8B; --accent-soft:#FBF4D8; --accent-ink:#86660E; --accent-strong:#DDBB45; --accent-rgb:242,221,139}
/* second accent: the same colour unless "mintzuta" pairs mint with pastel yellow */
:root{--accent2:var(--accent); --accent2-soft:var(--accent-soft); --accent2-ink:var(--accent-ink); --accent2-rgb:var(--accent-rgb)}
:root[data-akcent="mintzuta"]{--accent:#A9DCC7; --accent-soft:#E7F5EF; --accent-ink:#2E7A61; --accent-strong:#5FBE9A; --accent-rgb:169,220,199;
  --accent2:#F4DE8C; --accent2-soft:#FCF5DA; --accent2-ink:#86660E; --accent2-rgb:244,222,140}
/* a soft disc behind the arched photos */
.hero .frame::before{content:""; position:absolute; z-index:-1; left:-64px; bottom:-38px; width:clamp(130px,16vw,200px); aspect-ratio:1; border-radius:50%; background:var(--accent)}
.page-hero .frame{position:relative}
.page-hero .frame::before{content:""; position:absolute; z-index:-1; right:-38px; top:-26px; width:clamp(90px,10vw,140px); aspect-ratio:1; border-radius:50%; background:var(--accent)}
@media(max-width:900px){.hero .frame::before{left:-14px; bottom:-22px; width:120px} .page-hero .frame::before{right:-8px; top:-18px; width:84px}}
.hero .frame .tag{background:var(--accent-soft); border-color:rgba(var(--accent-rgb),.9)}
/* dots in the strip under the hero */
.values .v::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent)}
/* the Vigotski quote band */
.quote{background:var(--accent-soft)}
.quote .mark{color:var(--accent-ink); opacity:.55}
/* service rows: the hover tint */
.srow::before{background:linear-gradient(90deg, rgba(var(--accent-rgb),.42), rgba(var(--accent-rgb),.1) 70%, transparent)}
/* numbers, labels and small marks */
.tip .no{color:var(--accent-ink); opacity:.75}
.card-post .cbody .kicker{color:var(--accent-ink)}
.space .kicker{color:var(--accent)}
.tcard .who .mono{background:var(--accent-soft); border-color:rgba(var(--accent-rgb),.9); color:var(--accent-ink)}
.side-link{background:var(--accent-soft); border-color:rgba(var(--accent-rgb),.7)}
::selection{background:rgba(var(--accent-rgb),.6); color:var(--ink)}
.hero .frame,.page-hero .frame{isolation:isolate}

/* ---- the accent takes over the small marks that were violet: lavender stays for buttons, italic words in titles,
   the booking band and the team card; the accent carries labels, lines, numbers, underlines and open/active states ---- */
.kicker{color:var(--accent-ink)}
.rule,.sec-k .rule{background:rgba(var(--accent-rgb),.95)}
#pristup .sec-k::before{background:rgba(var(--accent-rgb),.95)}
.rank-math-breadcrumb .separator,.breadcrumbs .sep{color:var(--accent-strong)}
.top nav a[aria-current="page"]{box-shadow:0 2px 0 var(--accent-strong)}
.top nav a::after{background:var(--accent-strong)}
.progress{background:var(--accent-strong)}
.lnk{border-bottom-color:var(--accent-strong)}
.srow .no,.side-list .no,.idx .no,.qa-no{color:var(--accent-ink)}
.qa[open] .qa-ico{background:var(--accent); border-color:var(--accent)}
.qa[open] .qa-ico::before,.qa[open] .qa-ico::after{background:var(--accent-ink)}
.qa summary:hover .qa-ico{border-color:var(--accent-strong)}
.side-card{border-top-color:var(--accent-strong)}
.tcard::after{border-color:rgba(var(--accent-rgb),.85)}
.map-pin{background:var(--accent-ink); box-shadow:0 0 0 6px rgba(var(--accent-rgb),.45)}
.map-link{border-bottom-color:var(--accent-strong)}
.foot-map .pin{color:var(--accent-ink)}
.tip{border-top:3px solid var(--accent)}
.blog-tabs a:hover{border-color:var(--accent-strong)}
@media(hover:hover){a.mcard:hover{border-color:var(--accent-strong)}}
.mono{border-color:var(--accent-strong); color:var(--accent-ink)}
/* a soft marker stroke under the italic words of the big titles */
.hero h1 em,.pristup-t em{background-image:linear-gradient(transparent 68%, rgba(var(--accent-rgb),.7) 68%, rgba(var(--accent-rgb),.7) 90%, transparent 90%); background-repeat:no-repeat; padding:0 .06em}
.pristup-t em{width:fit-content; margin:0 auto}
/* a breath of the accent in the corner of every inner page hero */
.page-hero{background:radial-gradient(circle at 92% 12%, rgba(var(--accent-rgb),.38), transparent 38%), linear-gradient(180deg, var(--paper-2) 0%, var(--paper-2) 78%, var(--paper) 78%)}
@media(max-width:900px){.page-hero{background:radial-gradient(circle at 96% 6%, rgba(var(--accent-rgb),.34), transparent 46%), linear-gradient(180deg, var(--paper-2) 0%, var(--paper-2) 72%, var(--paper) 72%)}}

/* ---- pastel yellow beside mint (Dodatna boja: Mint i pastelno žuta): the warm, larger touches; mint keeps the small marks ---- */
.hero .frame::before,.page-hero .frame::before{background:var(--accent2)}
.hero .frame .tag{background:var(--accent2-soft); border-color:rgba(var(--accent2-rgb),.95)}
.hero h1 em{background-image:linear-gradient(transparent 68%, rgba(var(--accent2-rgb),.9) 68%, rgba(var(--accent2-rgb),.9) 90%, transparent 90%)}
.quote{background:var(--accent2-soft)}
.quote .mark{color:var(--accent2-ink)}
.values .v:nth-child(even)::before{background:var(--accent2)}
.tip:nth-child(even){border-top-color:var(--accent2)}
.track > .tcard:nth-child(even) .who .mono{background:var(--accent2-soft); border-color:rgba(var(--accent2-rgb),.95); color:var(--accent2-ink)}
.space .kicker,.cta .kicker{color:var(--accent2)}