/* SELENA R04 · full-site family layer over R03B (hybrid.css + polish.css).
   No new direction: same tokens (--h-paper, --h-terra, --h-sand, live ink/ivory/near-black), same devices
   (sec-head hairline + number, light large numerals, staircase sequence, pull-statements, sheets without boxes).
   Adds only what pages beyond the 3-page proof need: header booking action, service/guide heads, article
   layout, numbered indexes, preparation lists, booking form, footer index. No cards, no icons, no images. */

/* ================================================================ header · booking action */
.r4 .site-head .grid{grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:clamp(1rem,2.4vw,2.6rem)}
.r4 .site-head .brand,.r4 .site-head .nav,.r4 .site-head .lang{grid-column:auto}
.r4 .site-head .nav{justify-self:start;padding-left:clamp(0rem,4vw,5rem)}
.h-book{font-size:.875rem;letter-spacing:.01em;color:var(--fg);text-decoration:none;white-space:nowrap;
  padding:.55rem 1rem;border:1px solid oklch(100% 0 0 / .45);transition:background-color .25s var(--h-ease),color .25s var(--h-ease),border-color .25s var(--h-ease)}
.h-book:hover,.h-book:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.h-book[aria-current]{border-color:var(--h-terra-on-dark)}
.hyb .site-head.is-stuck .h-book,.hyb-lighthead .site-head .h-book{color:var(--ink);border-color:var(--ink)}
.hyb .site-head.is-stuck .h-book:hover,.hyb-lighthead .site-head .h-book:hover{background:var(--ink);color:var(--h-paper)}
/* R07 · between 761 and 1023px the one-row header did not fit (menu items broke into two lines and, at 768,
   "Kontakt" ran into the booking button). The existing two-row header now covers the whole tablet band, and
   menu items never break inside a label. */
.r4 .site-head .nav a{white-space:nowrap}
@media (max-width:1023px){
  .r4 .site-head .grid{grid-template-columns:minmax(0,1fr) auto auto;column-gap:.75rem}
  .r4 .site-head .brand{grid-column:1;grid-row:1}
  .r4 .site-head .h-book{grid-column:2;grid-row:1;font-size:.78rem;padding:.42rem .65rem}
  .r4 .site-head .lang{grid-column:3;grid-row:1}
  .r4 .site-head .nav{grid-column:1/-1;grid-row:2;padding-left:0}
}
@media (min-width:761px) and (max-width:1023px){.r4 .site-head .grid{row-gap:.75rem}.r4 .h-pphead,.r4 .page-head{padding-top:8.75rem}}
@media (min-width:900px) and (max-width:1023px){.r4 .h-abhead{padding-top:8.75rem}}
@media (max-width:380px){.r4 .site-head .brand small{display:none}.r4 .site-head .nav{gap:.85rem;justify-content:space-between}}

/* ================================================================ heads (practice, service, guide, utility) */
.r4-head .crumbs{margin-bottom:0}
.r4-head .crumbs ol{flex-wrap:wrap}
.r4-head .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid var(--h-terra-on-dark);padding-bottom:.1rem}
.r4-head .eyebrow a:hover{color:var(--h-terra-on-dark)}
.r4-service .r4-head h1,.r4-guide .r4-head h1,.r4-first .r4-head h1,.r4-process .r4-head h1,
.r4-gindex .r4-head h1,.r4-booking .r4-head h1{font-size:clamp(2.5rem,5.6vw,5.4rem);line-height:1;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
.r4-head h1 span{display:block}
.r4-head h1 span + span{color:var(--fg-mid)}
.r4-meta{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin:2rem 0 0;font-size:.8125rem;color:var(--fg-mid)}
.r4-meta b{color:var(--fg);font-weight:400}
.r4-ghead .lead{max-width:52ch}

/* ================================================================ rows without links (situations that are statements) */
.h-sit .r4-row{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.6rem;padding:1.35rem 0 1.4rem;align-items:baseline;color:var(--ink)}
.h-sit .r4-row i{font-style:normal;font-size:1.55rem;font-weight:200;line-height:1;letter-spacing:-.03em;color:var(--ink-mid)}
.h-sit .r4-row b{font-weight:400;font-size:1.15rem;letter-spacing:-.008em}
.r4 .h-sit h2{max-width:14ch}

/* ================================================================ numbered index (services, guides) — the R03B areas voice */
.r4-index .h-areas-head h2{font-size:clamp(2.1rem,3.8vw,3.6rem);line-height:1.02;letter-spacing:-.028em;max-width:12ch}
.r4-index .h-areas-head .lead{margin-top:-.2rem}
.r4-index .row .r4-k{grid-column:2;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mid);margin-top:.2rem}
.r4-index .h-areas-list .row h3{max-width:30ch}
/* one guide only: no empty left column under the title */
.r4-index .h-areas-list li:only-child .row p,.r4-index .h-areas-list li:only-child .row .r4-k{grid-column:1/-1;max-width:64ch}
.r4-gindex .r4-index .h-areas-list ol > li{padding-block:clamp(1.6rem,2.6vw,2.3rem)}

/* ================================================================ sequence (service procedures, saradnja) */
.hyb .r4-seq .h-first-grid{row-gap:0}
.hyb .r4-seq .steps.r4-flat{grid-template-columns:repeat(4,minmax(0,1fr))}
.hyb .r4-seq .steps.r4-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hyb .r4-seq .steps.r4-flat > div:nth-child(n){margin-top:0}
.hyb .r4-seq .steps.r4-flat .k{font-size:clamp(2.8rem,4.6vw,4.6rem)}
.hyb .r4-seq .steps.r4-flat h3{font-size:clamp(1.25rem,1.6vw,1.5rem)}
.hyb .r4-seq .steps.r4-flat p{font-size:.95rem}
.r4-seq h2{margin-bottom:clamp(2.2rem,4vw,3.4rem)!important}
.r4 .v2-src{margin-top:clamp(2.2rem,4vw,3rem);max-width:70ch}

/* ================================================================ preparation sheet + notes */
.r4-check{background:var(--h-paper)}
.r4-sheet-note{grid-column:2;margin:1.4rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-mid);max-width:60ch;
  padding-left:3rem}
.hyb .h-sheet > a{grid-column:2}
.hyb .r4-check .h-first-grid,.hyb .h-first#opsta-lista .h-first-grid{row-gap:0}

/* ================================================================ guide article */
.r4-article{background:var(--h-paper)}
.r4-art-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.r4-art-side{position:sticky;top:6rem}
.r4-art-side .toc{border-top:1px solid var(--ink);padding-top:1rem}
.r4-art-side .toc p{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);margin:0 0 .8rem}
.r4-art-side .toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.r4-art-side .toc li{counter-increment:t;display:grid;grid-template-columns:2rem minmax(0,1fr);padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.9rem;line-height:1.4}
.r4-art-side .toc li::before{content:counter(t,decimal-leading-zero);color:var(--h-terra);font-size:.75rem;padding-top:.15rem}
.r4-art-side .toc a{color:var(--ink);text-decoration:none}
.r4-art-side .toc a:hover{color:var(--h-terra)}
.r4-art-area{margin:1.6rem 0 0;display:grid;gap:.3rem;font-size:.95rem}
.r4-art-area span{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid)}
.r4-art-area a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--h-terra);justify-self:start}
.r4-article .prose{max-width:66ch;font-size:1.075rem;line-height:1.72;color:var(--ink)}
.r4-article .prose > p:first-child{font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:300;line-height:1.45;letter-spacing:-.01em}
.r4-article .prose h2{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:300;letter-spacing:-.02em;line-height:1.12;margin:3rem 0 1rem;
  padding-top:1.1rem;border-top:1px solid var(--rule);scroll-margin-top:6rem}
.r4-article .prose h2:first-child{margin-top:0}
.r4-article .prose p{margin:0 0 1.1rem}
.r4-article .prose ol,.r4-article .prose ul{margin:0 0 1.3rem;padding-left:1.3rem}
.r4-article .prose li{margin-bottom:.55rem}
.r4-article .prose li::marker{color:var(--h-terra)}
.r4-article .prose a{color:var(--ink);text-decoration-color:var(--h-terra);text-underline-offset:.2em}
.r4-article .prose .note{border-left:2px solid var(--h-sand);padding:.2rem 0 .2rem 1.2rem;color:var(--ink-mid);font-size:1rem}

/* ================================================================ related · two columns (no cards, hairlines only) */
.r4 .h-rel-grid > div > .label{margin:0 0 .4rem}
.r4 .h-rel-grid a + a{border-top:1px solid var(--rule)}

/* ================================================================ close · booking action next to contact */
.r4-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:1.2rem 0 0}
.r4-close .grid > .r4-actions,.r4-close .grid > .h-cta-tel{grid-column:1/-1}
.r4-btn-book{white-space:nowrap}
.r4-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--h-terra-on-dark);padding-bottom:.1rem}
.r4-link:hover{color:var(--h-terra-on-dark)}
.contact.dark .r4-actions,.cta-strip .r4-actions{grid-column:1/-1}
span.r4-actions{display:flex}
.r4-btn-dark{border-color:var(--ink)!important;color:var(--ink)!important;background:transparent}
.r4-btn-dark:hover{background:var(--ink)!important;color:var(--h-paper)!important}

/* ================================================================ saradnja · practical (near-black moment, type only) */
.r4-way-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)!important;align-items:end}
.r4-way .h-way-text dl{margin-top:0}

/* ================================================================ prvi razgovor · lists by area */
.r4-preps{background:var(--surface)}
.r4-h2{font-size:clamp(2.1rem,3.8vw,3.6rem);font-weight:300;line-height:1.02;letter-spacing:-.028em;margin:0 0 clamp(2.4rem,4vw,3.4rem)}
.r4-prep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,4vw,4rem) clamp(2rem,5vw,6rem)}
.r4-prep{border-top:1px solid var(--ink);padding-top:1.1rem;scroll-margin-top:6rem}
.r4-prep .num{display:block;font-size:var(--p-num-sm);font-weight:200;line-height:.9;letter-spacing:-.04em;color:var(--ink-mid)}
.r4-prep h3{font-size:clamp(1.35rem,1.9vw,1.75rem);font-weight:300;letter-spacing:-.015em;margin:1rem 0 1rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.r4-prep ul{list-style:none;margin:0;padding:0;counter-reset:p}
.r4-prep li{counter-increment:p;display:grid;grid-template-columns:2.4rem minmax(0,1fr);padding:.6rem 0;border-bottom:1px solid var(--rule);line-height:1.5;font-size:.97rem}
.r4-prep li::before{content:counter(p,decimal-leading-zero);color:var(--h-terra);font-size:.75rem;padding-top:.2rem}
.r4-prep-links{margin:1rem 0 0}
.r4-prep-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--h-terra)}
.r4-prep:target h3{color:var(--h-terra)}

/* ================================================================ kontakt · booking entry */
.r4-contact-book{background:var(--h-paper)}
.r4-cb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem clamp(2rem,5vw,6rem);align-items:end}
.r4-cb-grid h2{font-size:clamp(2.2rem,4vw,3.9rem);font-weight:300;line-height:1;letter-spacing:-.03em;margin:0}
.r4-cb-grid .start{font-size:clamp(1.12rem,1.4vw,1.3rem);line-height:1.5;margin:0;max-width:44ch}

/* ================================================================ booking page */
.r4-booking{background:var(--h-paper)}
.r4-bk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2.5rem,6vw,7rem);align-items:start}
.r4-form{display:grid;gap:clamp(2.4rem,4vw,3.4rem)}
.r4-form fieldset{border:0;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--ink);display:grid;gap:1.5rem;min-width:0}
.r4-form legend{float:left;width:100%;display:flex;align-items:baseline;gap:1rem;padding:0;margin:0 0 .4rem;
  font-size:clamp(1.35rem,1.9vw,1.75rem);font-weight:300;letter-spacing:-.015em}
.r4-form legend .num{font-size:var(--p-num-sm);font-weight:200;line-height:.9;letter-spacing:-.04em;color:var(--ink-mid);min-width:3.6rem}
.r4-form legend + *{clear:both}
.r4-f{display:grid;gap:.45rem;min-width:0}
.r4-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}
.r4-f label,.r4-lab{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);margin:0}
.r4-f label small{letter-spacing:.04em;text-transform:none}
.r4-form input:not([type=radio]):not([type=checkbox]),.r4-form select,.r4-form textarea{
  font:inherit;font-size:1.06rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink-mid);
  border-radius:0;padding:.55rem 0;width:100%;min-height:2.75rem;transition:border-color .2s var(--h-ease)}
.r4-form textarea{resize:vertical;min-height:7.5rem;line-height:1.55;border:1px solid var(--rule);padding:.8rem}
.r4-form input:focus-visible,.r4-form select:focus-visible,.r4-form textarea:focus-visible{outline:none;border-color:var(--h-terra);box-shadow:0 1px 0 var(--h-terra)}
.r4-form [aria-invalid="true"]{border-color:var(--h-terra)!important}
.r4-radios label{display:flex;gap:.7rem;align-items:baseline;font-size:1.02rem;letter-spacing:0;text-transform:none;color:var(--ink);padding:.6rem 0;border-bottom:1px solid var(--rule);cursor:pointer}
.r4-radios label small{color:var(--ink-mid);font-size:.88rem}
.r4-form input[type=radio],.r4-form input[type=checkbox]{accent-color:var(--h-terra);width:1.05rem;height:1.05rem;flex:none;transform:translateY(.12rem)}
.r4-consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;line-height:1.55;color:var(--ink-mid)}
.r4-consent a{color:var(--ink);text-decoration-color:var(--h-terra)}
.r4-hint{font-size:.85rem;line-height:1.5;color:var(--ink-mid);margin:0}
.r4-modenote{margin:0;padding:1rem 0 1rem 1.2rem;border-left:2px solid var(--h-terra);font-size:.98rem;line-height:1.55;color:var(--ink)}
.r4-modenote b{font-weight:500}
.r4-err{margin:0;color:var(--h-terra);font-size:.95rem}
.r4-err a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.r4-err .r4-err-act{display:block;margin-top:.9rem}
.r4-err .r4-err-act .btn{text-decoration:none}
.r4-submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.r4-submit .btn{cursor:pointer;font:inherit;font-weight:500}
.r4-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.r4-live{display:grid;gap:.6rem}
.r4-result{border-top:1px solid var(--ink);padding-top:1.4rem;display:grid;gap:1rem}
.r4-result h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;letter-spacing:-.025em;margin:0}
.r4-result dl{margin:0;display:grid;border-top:1px solid var(--rule)}
.r4-result dl > div{display:grid;grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.r4-result dt{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);padding-top:.2rem}
.r4-result dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.r4-result .r4-actions{margin:0}
.r4-result button{font:inherit;cursor:pointer}
.r4-bk-side{position:sticky;top:6rem;border-top:1px solid var(--ink);padding-top:1.1rem}
.r4-bk-side .label{margin:0 0 1rem}
.r4-bk-steps{list-style:none;margin:0;padding:0}
.r4-bk-steps li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.2rem .6rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.r4-bk-steps .k{grid-row:1/span 2;font-size:2rem;font-weight:200;line-height:.9;color:var(--ink-mid)}
.r4-bk-steps b{font-weight:400;font-size:1.1rem}
.r4-bk-steps span:not(.k){color:var(--ink-mid);font-size:.93rem;line-height:1.5}
.r4-bk-alt{display:grid;gap:.35rem;margin:1.6rem 0 0;font-size:.98rem}
.r4-bk-alt span{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:.2rem}
.r4-bk-alt a{color:var(--ink);text-decoration:none}
.r4-bk-alt a:hover{color:var(--h-terra)}
.r4-bk-prep{margin:1.6rem 0 0}
.r4-bk-prep a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--h-terra)}

/* ================================================================ footer index */
.r4-fnav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;font-size:.9rem;margin:0;padding-bottom:.6rem;border-bottom:1px solid var(--rule-dark)}
.r4-fnav a{color:var(--fg);text-decoration:none}
.r4-fnav a:hover{color:var(--h-terra-on-dark)}

/* ================================================================ legal + EN pages: R03B rhythm only */
.r4-legal .lg-body h2,.r4-en h2{font-weight:300}

/* ================================================================ responsive */
@media (max-width:899px){
  .r4-art-grid,.r4-bk-grid,.r4-prep-grid,.r4-cb-grid,.r4-way-grid{grid-template-columns:minmax(0,1fr)!important}
  .r4-art-side,.r4-bk-side{position:static}
  .r4-art-side{order:0}
  .hyb .r4-seq .steps.r4-flat,.hyb .r4-seq .steps.r4-n5{grid-template-columns:minmax(0,1fr)}
  .hyb .r4-seq .steps.r4-flat .k{font-size:3.2rem}
  .r4-sheet-note{grid-column:1;padding-left:0}
  .hyb .h-sheet > a{grid-column:1}
  .r4-f2{grid-template-columns:minmax(0,1fr)}
  .r4-index .row .r4-k{grid-column:1}
  .r4-result dl > div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .h-sit .r4-row{grid-template-columns:2.6rem minmax(0,1fr)}
}
.r4-live .r4-radios-l{display:flex;gap:.7rem;align-items:baseline;font-size:1.02rem;color:var(--ink);padding:.6rem 0;border-bottom:1px solid var(--rule);cursor:pointer}
.hyb .h-sheet .r4-sheet-h{grid-column:1;grid-row:2;font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:300;line-height:1.05;letter-spacing:-.025em;margin:.9rem 0 0;align-self:start}
@media (max-width:899px){.hyb .h-sheet .r4-sheet-h{margin-bottom:1.6rem}}
/* fixes after visual QA 1 */
.r4-result[hidden],.r4-form[hidden]{display:none}
.r4-bk-grid > .r4-form,.r4-bk-grid > .r4-result{grid-column:1}
.r4-bk-grid > .r4-bk-side{grid-column:2;grid-row:1/span 2}
.r4-consent > span{flex:1}
.r4-article .prose ol{list-style:decimal}
.r4-article .prose ul{list-style:disc}
@media (max-width:899px){.r4-bk-grid > .r4-bk-side{grid-column:1;grid-row:auto}}
@media (max-width:760px){
  .r4 .site-head .brand{white-space:nowrap}
  .r4 .site-head .h-book-x{display:none}
  .r4 .site-head .h-book{padding:.45rem .8rem}
  .r4 .h-pphead,.r4 .page-head{padding-top:8.75rem}
}

/* R06 mobile header fix · below 900px the fixed header stayed transparent from the first scroll until the
   dark opening section had passed, so breadcrumbs, eyebrow and H1 scrolled visibly through brand/nav.
   That in-between state now takes the opening section's own solid ground; top and stuck states unchanged. */
/* R07 · the same in-between state was also visible on desktop (breadcrumb/eyebrow under the brand, the
   business-card H1 under the nav), so the rule now holds at every width. Top and stuck states unchanged. */
.hyb .site-head.is-scrolled:not(.is-stuck){background:var(--bg)}
@media (prefers-reduced-motion:no-preference){
  .hyb .site-head{transition:background-color .12s var(--h-ease),box-shadow .35s var(--h-ease),transform .45s var(--h-ease)}
}

/* R07B a11y · (1) the skip link sat under the fixed header (z 30 < 40) and was invisible when focused.
   (2) the footer design credit fell below 4.5:1 (opacity .7 on near-black: 4.11). */
.skip:focus{z-index:60}
.foot .d{opacity:.86}
/* R07B · breadcrumb links: larger touch area (24px+) without moving anything; booking hint "(nije obavezno)" was 9px. */
.crumbs a{display:inline-block;padding-block:.3rem;margin-block:-.3rem}
.r4-form label small{font-size:.75rem}
/* R07B · EN portrait caption ("attorney at law") was 3.74:1 at opacity .75 → full ink-mid (≈5.9:1). */
.about .figure-portrait figcaption small,.ab-bio .portrait-panel figcaption small{opacity:1}
/* R01 SEO release · practice areas: minors shown as "Uz to" (as on the homepage), not as a 7th numbered area. */
.pr-acc .acc-aside{margin:2.5rem 0 .25rem}

/* R01 mobile editorial (≤760px only): tighter section rhythm and compact 01/02/03 step numerals; desktop untouched. */
@media (max-width:760px){
  .hyb main > section:not(.hero):not(.h-pphead):not(.page-head):not(.h-abhead){padding-block:3rem}
  .hyb .h-work-grid > .steps,.hyb .h-first .steps{row-gap:1.5rem}
  .hyb .h-work-grid > .steps > div,.hyb .h-first .steps > div{grid-template-columns:3.6rem minmax(0,1fr);padding-top:.9rem}
  .hyb .h-work-grid .steps .k,.hyb .h-first .steps .k,.hyb .r4-seq .steps.r4-flat .k{font-size:2.5rem}
}