/* Archivo, self-hosted (variable: weight 100-900, width 62-125%). Latin + Latin Extended cover Slovenian. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ==========================================================================
   Koncept A: "Poročilo"
   The page borrows the vernacular of the deliverable itself: the engineer's
   inspection report. Paper and ink, technical section drawings (house and
   apartment), measured values, findings with severity.
   Brand: logo black #000 + logo green #84C341.
   ========================================================================== */
:root{
  --paper:#F9F7F7;      /* brand surface (theme palette 8) */
  --sheet:#FFFFFF;
  --ink:#000000;        /* logo black */
  --text:#282828;       /* brand body grey (theme palette 6) */
  --muted:#5C5C5C;
  --line:#DEDADA;
  --field:#8A8585;      /* 3.6:1 on white, passes non-text contrast */
  --green:#84C341;      /* logo green: fills only, always with black text */
  --green-hover:#76B336;
  --green-ink:#3D7A14;  /* darker shade of logo green for text on light (5.3:1) */
  --green-wash:#EEF6E4;
  --alert:#FF8E3C;      /* theme accent, used only to mark defects */
  --error:#B42318;
  --wrap:1240px;
  --pad:clamp(1.25rem, 4vw, 2.5rem);
  --font:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--green-ink);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--ink)}
p,figure,blockquote,dl,dd{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.nowrap{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:6px;text-decoration:none}
.skip:focus{top:1rem;color:#fff}
.wrap{width:min(100% - 2*var(--pad), var(--wrap));margin-inline:auto}

h1,h2,h3{margin:0;color:var(--ink);font-family:var(--font);font-weight:760;font-stretch:74%;line-height:1.02;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.45rem, 1.3rem + 3.5vw, 4.4rem)}
h2{font-size:clamp(1.95rem, 1.25rem + 1.9vw, 3rem)}
h3{font-size:1.375rem;font-stretch:84%;font-weight:720;line-height:1.15}
.lead{font-size:clamp(1.125rem, 1.03rem + .35vw, 1.3rem);line-height:1.55;max-width:34em;color:var(--text)}
.hint{font-size:.875rem;line-height:1.45;color:var(--muted)}
.section{padding-block:clamp(3.5rem, 7vw, 6.5rem)}
.section-head{max-width:44rem}
.section-head > * + *{margin-top:1rem}

/* ---------- Buttons ---------- */
.btn{--h:54px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--h);padding:0 1.5rem;border:2px solid transparent;border-radius:6px;font:inherit;font-weight:680;font-stretch:92%;font-size:1.0625rem;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s, border-color .15s, color .15s}
.btn-primary{background:var(--green);border-color:var(--green);color:var(--ink)}
.btn-primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:var(--ink)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{--h:44px;padding:0 1.05rem;font-size:1rem}
.btn-block{width:100%}
.link-btn{padding:0;border:0;background:none;font:inherit;color:var(--green-ink);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}

/* ---------- Header: logo, site navigation and CTA; a menu button below 1100px ---------- */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;gap:.5rem;min-height:64px}
.brand{display:block;flex:none;margin-left:-6px;margin-right:auto}
.brand img{height:34px;width:auto}
.main-nav{display:none}
.main-nav a{color:var(--ink);text-decoration:none;font-weight:560;font-size:1rem;white-space:nowrap}
.main-nav a:hover,.main-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.35em}
.menu-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}
.menu-btn:hover{background:var(--green-wash)}
.menu-btn svg{width:26px;height:26px}
.menu-btn .i-close,.menu-btn[aria-expanded=true] .i-open{display:none}
.menu-btn[aria-expanded=true] .i-close{display:block}
.site-menu{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-bottom:1.5px solid var(--ink);box-shadow:0 30px 40px -30px rgba(0,0,0,.45)}
.site-menu-grid{display:grid;gap:1.5rem 3rem;padding-block:1.25rem 1.75rem}
.site-menu-title{font-size:.875rem;font-weight:650;color:var(--muted)}
.site-menu ul{list-style:none;margin:.3rem 0 0;padding:0}
.site-menu li a{display:flex;align-items:center;min-height:50px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:640;font-size:1.0625rem;text-decoration:none}
.site-menu li a:hover{color:var(--green-ink)}
.site-menu li a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.35em}
.site-menu-contact{font-size:.95rem;color:var(--muted)}
@media (max-width:359px){.header-cta{display:none}}
@media (min-width:420px){.header-row{gap:.75rem}.brand img{height:38px}}
@media (min-width:640px){.site-menu-grid{grid-template-columns:1fr 1fr}.site-menu-contact{grid-column:1 / -1}}
@media (min-width:1000px){.header-row{min-height:76px}.brand img{height:48px}.site-menu{max-height:calc(100vh - 76px)}}
@media (min-width:1100px){
  .header-row{gap:2rem}
  .main-nav{display:flex;gap:1.6rem}
  .menu-btn,.site-menu{display:none}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(1.75rem, 4vw, 4.5rem) clamp(3rem, 6vw, 6rem)}
.hero-grid{display:grid;gap:1.75rem;grid-template-areas:"intro" "form" "proof"}
.hero-intro{grid-area:intro}
.hero-intro > * + *{margin-top:1.1rem}
.hero-form{grid-area:form}
.hero-proof{grid-area:proof}
.hero-proof > * + *{margin-top:2rem}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"intro form" "proof form";column-gap:clamp(3rem, 5vw, 5.5rem);row-gap:2.25rem;align-items:start}
  .hero-intro > * + *{margin-top:1.5rem}
}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:560;color:var(--ink);line-height:1.4}
.checks li::before{content:"";flex:none;width:1.3rem;height:1.3rem;margin-top:.05rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12.5l5.6 5.6L21.2 5.4' fill='none' stroke='%2384C341' stroke-width='4.4'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-quote{padding-left:1.1rem;border-left:4px solid var(--green);max-width:31em}
.hero-quote p{font-size:1.15rem;line-height:1.45;color:var(--ink);font-weight:520}
.hero-quote figcaption{margin-top:.45rem;font-size:.95rem;color:var(--muted)}

/* ---------- Lead form ("naročilnica") ---------- */
.order{position:relative;background:var(--sheet);border:1.5px solid var(--ink);border-radius:14px;padding:clamp(1.25rem, 2.6vw, 2rem)}
.order h2{font-size:1.85rem;font-stretch:78%}
.order-sub{margin-top:.3rem;color:var(--muted)}
.steps{list-style:none;padding:0;margin:1.25rem 0 1.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;counter-reset:s}
.steps li{counter-increment:s;padding-top:.55rem;border-top:4px solid var(--line);font-size:.875rem;font-weight:620;line-height:1.25;color:var(--muted)}
.steps li::before{content:counter(s) ". "}
.steps li.is-done{border-top-color:var(--ink);color:var(--ink)}
.steps li.is-current{border-top-color:var(--green);color:var(--ink)}
@media (max-width:480px){.steps li{font-size:.8125rem}.steps li::before{content:none}}
.step{border:0;margin:0;padding:0;min-width:0}
.step > * + *{margin-top:1.15rem}
.field{display:grid;gap:.4rem;min-width:0;align-content:start}
.field > label,.label{font-weight:660;color:var(--ink);font-size:1rem;line-height:1.3}
.optional{font-weight:400;color:var(--muted)}
.field-row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.field-row--post{grid-template-columns:8.25rem minmax(0,1fr)}
.field-row--street{grid-template-columns:minmax(0,1fr) 6.5rem}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select{width:100%;min-height:52px;padding:.7rem .9rem;border:1.5px solid var(--field);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:1.0625rem;appearance:none;-webkit-appearance:none}
input::placeholder{color:#767676}
input:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(132,195,65,.6)}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
select{padding-right:2.6rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") right .8rem center/20px no-repeat}
.input-unit{position:relative}
.input-unit input{padding-right:3.2rem}
.input-unit span{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.input-prefix{display:flex}
.input-prefix span{display:flex;align-items:center;padding:0 .8rem;border:1.5px solid var(--field);border-right:0;border-radius:6px 0 0 6px;background:var(--paper);color:var(--ink);font-weight:600}
.input-prefix input{border-radius:0 6px 6px 0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.tile{position:relative;display:grid;justify-items:center;align-content:center;gap:.45rem;min-height:108px;padding:.85rem .45rem .75rem;border:1.5px solid var(--field);border-radius:10px;background:#fff;color:var(--ink);text-align:center;font-weight:620;font-size:.95rem;line-height:1.2;cursor:pointer;transition:border-color .15s, background-color .15s}
.tile:hover{border-color:var(--ink)}
.tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tile svg{width:40px;height:40px}
.tile::after{content:"";position:absolute;top:7px;right:7px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12.5l5.6 5.6L21.2 5.4' fill='none' stroke='%2384C341' stroke-width='4.4'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:scale(.5);transition:opacity .15s, transform .2s}
.tile.is-selected{border-color:var(--ink);background:var(--green-wash);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tile.is-selected::after{opacity:1;transform:none}
.tile:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.tile:has(input:focus:not(:focus-visible)){outline:none}
.step-nav{display:flex;gap:.75rem}
.step-nav .btn-primary{flex:1}
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;line-height:1.45;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:.05rem 0 0;accent-color:var(--green-ink)}
.has-error input,.has-error select{border-color:var(--error)}
.has-error .tile{border-color:var(--error)}
.error{margin:0;color:var(--error);font-size:.875rem;font-weight:620;line-height:1.35}
/* Info box in step 3: the individual offer for another service */
.price-lock{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.1rem .85rem;padding:.85rem 1rem;border:1.5px dashed #ABA5A5;border-radius:8px;background:var(--paper)}
.price-lock svg{grid-row:1 / span 2;width:24px;height:24px;color:var(--ink)}
.price-lock-label{font-size:.875rem;font-weight:640;color:var(--ink)}
.price-lock-note{grid-column:2;font-size:.8125rem;line-height:1.4;color:var(--muted)}
.done:focus{outline:none}
.done > * + *{margin-top:1rem}
.done-mark{width:56px;height:56px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.done-mark svg{width:28px;height:28px}
.addons{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);display:grid;gap:.7rem}
.addons-title{font-weight:680;color:var(--ink)}
.addons .check{justify-content:space-between}
.addons .check span:first-of-type{flex:1}
.addon-sub{margin:-.15rem 0 .2rem 2.1rem}
.addon-sub.field-row{gap:.75rem}
.turnstile:not(:empty){margin:0 0 1rem}
.form-error{margin:0 0 1rem;padding:.75rem .9rem;border:1.5px solid var(--error);border-radius:8px;background:#fff;color:var(--error);font-size:.9rem;font-weight:620;line-height:1.4}
.order button[type=submit]:disabled{opacity:.6;cursor:progress}
.dry-run{margin:0 0 1rem;padding:.75rem .9rem;border:1.5px dashed #9A6700;border-radius:8px;background:#FFF8E5;font-size:.75rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;max-height:18rem;overflow:auto}
.price{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Inspection drawings (house / apartment) ---------- */
.inspect{background:#fff;border-block:1px solid var(--line)}
.inspect-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem}
.inspect-head > div:first-child{max-width:44rem}
.inspect-head > div:first-child > * + *{margin-top:1rem}
.switch{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1.5px solid var(--ink);border-radius:12px;background:#fff}
.switch button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;padding:0 1.2rem;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-weight:660;font-stretch:92%;font-size:1.0625rem;cursor:pointer;transition:background-color .15s, color .15s}
.switch button svg{width:28px;height:28px;flex:none}
.switch button:hover{background:var(--green-wash)}
.switch button[aria-selected=true]{background:var(--ink);color:#fff}
@media (max-width:999px){.switch{display:grid;width:100%}.switch button{padding:0 .6rem}}
.inspect-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;margin-top:2rem}
@media (min-width:1000px){.inspect-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:3rem;align-items:center;margin-top:2.25rem}}
[data-panel]:not([hidden]){animation:panel-in .35s ease}
@keyframes panel-in{from{opacity:0}to{opacity:1}}
.drawing{position:relative;aspect-ratio:800 / 520}
.drawing svg{width:100%;height:100%}
.drawing text{font-family:var(--font);font-stretch:88%}
.pin{--tx:-17px;--ty:-50%;position:absolute;left:var(--x);top:var(--y);transform:translate(var(--tx),var(--ty));display:flex;align-items:center;gap:.45rem;padding:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.pin--left{--tx:calc(-100% + 17px);flex-direction:row-reverse}
.pin--up{--tx:-50%;--ty:calc(-100% + 17px);flex-direction:column-reverse}
.pin--down{--tx:-50%;--ty:-17px;flex-direction:column}
.pin-dot{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(255,255,255,.85);transition:background-color .15s}
.pin-dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--green);transition:background-color .15s}
.pin:hover .pin-dot{background:var(--green-wash)}
.pin[aria-pressed=true] .pin-dot{background:var(--green)}
.pin[aria-pressed=true] .pin-dot::after{background:var(--ink)}
.pin-label{display:none;padding:.18rem .5rem;border:1.5px solid var(--ink);border-radius:4px;background:#fff;font-size:.875rem;font-weight:650;line-height:1.3;white-space:nowrap}
.pin[aria-pressed=true] .pin-label{background:var(--ink);color:#fff}
@media (min-width:1000px){.pin-label{display:block}}
.js .drawing .pin{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.6);transition:opacity .35s ease, transform .4s cubic-bezier(.2,.8,.25,1.25);transition-delay:calc(var(--i) * 90ms)}
.js .drawing.is-in .pin{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}
@media (max-width:999px){
  /* labels are hidden on phones, so every pin is just a centred dot */
  .pin,.pin--left,.pin--up,.pin--down{--tx:-50%;--ty:-50%}
  .pin-dot{width:28px;height:28px;border-width:2.5px;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
  .pin-dot::after{width:9px;height:9px}
}
.chips{display:flex;gap:.5rem;overflow-x:auto;margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) .3rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 1rem;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-weight:620;font-size:.9375rem;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
@media (min-width:1000px){.chips{display:none}}
.detail{border-top:4px solid var(--ink);padding-top:1.25rem}
.chips + .detail{margin-top:1rem}
.detail h3{font-size:clamp(1.6rem, 1.3rem + .8vw, 2rem);font-stretch:76%}
.detail dl{margin-top:1.1rem;display:grid;gap:1.1rem}
.detail dt{font-weight:700;color:var(--ink);font-size:.95rem}
.detail dd{margin-top:.25rem}
.detail-cta{margin-top:1.6rem}

/* ---------- Report viewer (5 example pages) ---------- */
.report-grid{display:grid;gap:3rem}
@media (min-width:1000px){.report-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:5rem;align-items:center}}
.report-viewer{min-width:0}
.sheets{--pp:clamp(1.15rem, 3vw, 2.1rem);--nav:40px;position:relative;display:grid;touch-action:pan-y}
.page{background:#fff;border:1px solid var(--line);border-radius:3px;padding:var(--pp, clamp(1.15rem, 3vw, 2.1rem));box-shadow:10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--line), 20px 20px 0 -1px var(--paper), 20px 20px 0 0 var(--line)}
/* all pages share one grid cell, so the stack is as tall as the tallest page */
.sheets > .page{grid-area:1 / 1;display:flex;flex-direction:column;min-width:0;opacity:0;visibility:hidden;transform:translateX(calc(var(--dir, 1) * 28px));transition:none}
.sheets > .page.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
.sheets > .page.is-leaving{visibility:visible;opacity:0;transform:translateX(calc(var(--dir, 1) * -28px));transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
.page-head{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.8rem;border-bottom:2px solid var(--ink);font-size:.8125rem;font-weight:650;color:var(--ink)}
.page-head > span:last-child{color:var(--muted);font-weight:500}
.finding{margin:1.15rem 0 1.4rem;display:grid;gap:1rem}
.finding-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem}
.finding-title h3{font-size:1.45rem}
.tag{display:inline-flex;align-items:center;padding:.28rem .6rem;border-radius:4px;background:var(--alert);color:var(--ink);font-size:.8125rem;font-weight:720;line-height:1.2}
.tag--danger{background:var(--error);color:#fff}
.tag--ok{background:var(--green);color:var(--ink)}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:start}
.photos img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:2px;background:var(--paper)}
.photos--tall img{aspect-ratio:6 / 5}
.photos figcaption{margin-top:.4rem;font-size:.8125rem;line-height:1.35;color:var(--muted)}
.reading{font-weight:760;color:var(--ink);font-variant-numeric:tabular-nums}
.findings{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.findings li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.55rem;align-items:start;font-size:.95rem;line-height:1.45}
.findings svg{width:18px;height:18px;margin-top:.12rem}
.findings .rec{font-weight:620;color:var(--ink)}
/* Page footer: caption on the left, and on the right the navigation, set like a
   report's page number. One overlay serves all pages, so it stays still while
   the pages change underneath it. */
.page > figcaption{margin-top:auto;display:flex;align-items:center;min-height:calc(var(--nav) + .75rem + 1px);padding:.75rem 11.5rem 0 0;border-top:1px solid var(--line);font-size:.75rem;line-height:1.4;color:var(--muted)}
.page-nav{position:absolute;right:var(--pp);bottom:var(--pp);z-index:2;display:flex;align-items:center;height:var(--nav)}
.page-nav button{display:grid;place-items:center;width:var(--nav);height:var(--nav);padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s, color .15s}
.page-nav button svg{width:18px;height:18px}
.page-nav button:hover:not([aria-disabled=true]){background:var(--green-wash)}
.page-nav button[aria-disabled=true]{color:#C8C2C2;cursor:default}
.page-count{min-width:6.75em;text-align:center;font-size:.8125rem;font-weight:620;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Index of the examples, set like a report's table of contents */
.pager-tabs{position:relative;display:flex;gap:1.4rem;margin-top:2.4rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.pager-tabs::-webkit-scrollbar{display:none}
.pager-tabs button{flex:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .1rem;margin-bottom:-1px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:inherit;font-size:.9rem;font-weight:620;cursor:pointer;transition:color .15s, border-color .15s}
.pager-tabs button:hover{color:var(--ink)}
.pager-tabs button[aria-current=true]{color:var(--ink);border-bottom-color:var(--ink)}
.sev{width:8px;height:8px;border-radius:50%;background:var(--alert);flex:none}
.sev--danger{background:var(--error)}
.sev--ok{background:var(--green)}
#porocilo{overflow-x:hidden;overflow-x:clip}
@media (max-width:560px){
  .wide-only{display:none}
  .page > figcaption{display:block;min-height:0;padding:.75rem 0 calc(var(--nav) + .6rem)}
  .page-nav{left:var(--pp);justify-content:space-between}
  .pager-tabs{gap:1rem}
  .pager-tabs button{font-size:.875rem}
}
.report-copy > * + *{margin-top:1.25rem}
.report-copy .btn{margin-top:1.75rem}

/* ---------- Prices ---------- */
.prices{background:#fff;border-block:1px solid var(--line)}
.prices-grid{display:grid;gap:2.25rem}
@media (min-width:1000px){.prices-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem;align-items:start}}
.prices-grid .section-head .btn{margin-top:1.75rem}
.price-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price-table caption{text-align:left;font-size:.875rem;color:var(--muted);padding-bottom:.6rem}
.price-table th{padding:.55rem .6rem;border-bottom:2px solid var(--ink);text-align:left;font-size:.8125rem;font-weight:650;color:var(--ink)}
.price-table td{padding:.85rem .6rem;border-bottom:1px solid var(--line)}
.price-table td:first-child{font-weight:600;color:var(--ink)}
.price-table th:last-child,.price-table td:last-child{text-align:right}
.price-table td:last-child{font-size:1.15rem;font-weight:760;font-stretch:84%;color:var(--ink);white-space:nowrap}
.price-table td:nth-child(2){color:var(--muted)}
.price-notes{margin-top:1rem;display:grid;gap:.4rem;font-size:.9rem;color:var(--muted)}

/* ---------- Process ---------- */
.flow{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:1.75rem;counter-reset:p}
.flow li{counter-increment:p;position:relative;padding-left:3.6rem}
.flow li::before{content:counter(p);position:absolute;left:0;top:-.15rem;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:760;font-size:1.05rem}
.flow li::after{content:"";position:absolute;left:calc(1.25rem - 1px);top:2.6rem;bottom:-1.6rem;width:2px;background:var(--ink)}
.flow li:last-child::before{background:var(--green);color:var(--ink)}
.flow li:last-child::after{display:none}
.flow h3{font-size:1.2rem;font-stretch:88%}
.flow p{margin-top:.35rem;font-size:.98rem}
@media (min-width:1000px){
  .flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem}
  .flow li{padding-left:0;padding-top:3.75rem}
  .flow li::after{left:2.9rem;right:-1.6rem;top:1.1rem;bottom:auto;width:auto;height:2px}
}

/* ---------- Testimonials ---------- */
.reviews{background:#fff;border-block:1px solid var(--line)}
.stars{color:var(--green-ink);letter-spacing:.12em;font-size:1.1rem}
.quotes{display:grid;gap:2.25rem;margin-top:2.5rem}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:3.5rem}}
.quote p{font-size:1.15rem;line-height:1.5;color:var(--ink);font-weight:500}
.quote footer{margin-top:.9rem;font-size:.95rem;color:var(--muted)}
.quote footer strong{display:block;color:var(--ink);font-weight:650}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
@media (min-width:1000px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem}}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-weight:650;font-size:1.1rem;line-height:1.35;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 0 1.3rem;max-width:62ch}

/* ---------- Final CTA ---------- */
.final{padding-block:clamp(3.5rem, 7vw, 6rem)}
.final-box{display:grid;gap:1.5rem;padding-top:2rem;border-top:4px solid var(--ink)}
@media (min-width:1000px){.final-box{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:3rem}}
.final-box p{margin-top:.9rem;max-width:40em}

/* ---------- Footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);padding:3rem 0 6.5rem;font-size:.95rem}
@media (min-width:1000px){.site-footer{padding-bottom:3rem}}
.footer-grid{display:grid;gap:2rem}
@media (min-width:900px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-grid img{width:132px}
.footer-grid h2{font-size:1rem;font-stretch:90%;margin-bottom:.6rem}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.copyright{margin-top:2.5rem;color:var(--muted);font-size:.875rem}

/* ---------- Mobile sticky CTA + cookie notice ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:1rem;padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));background:#fff;border-top:1.5px solid var(--ink);transform:translateY(110%);transition:transform .25s ease;visibility:hidden}
.sticky-cta.is-visible{transform:none;visibility:visible}
.sticky-cta p{font-size:.85rem;line-height:1.3;color:var(--muted)}
.sticky-cta strong{display:block;color:var(--ink);font-size:1rem}
.sticky-cta .btn{margin-left:auto}
@media (min-width:1000px){.sticky-cta{display:none}}
.cookie{position:fixed;z-index:60;left:var(--pad);right:var(--pad);bottom:calc(1rem + env(safe-area-inset-bottom));max-width:420px;padding:1rem 1.1rem;background:#fff;border:1.5px solid var(--ink);border-radius:10px;font-size:.9rem;line-height:1.45;box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
.cookie-actions{display:flex;gap:.5rem;margin-top:.8rem}
.cookie-actions .btn{flex:1}
.cookie-more{margin-top:.65rem;font-size:.9rem}
/* Consent settings panel (native <dialog>) and the corner icon that reopens it */
.consent-panel{width:min(560px, calc(100% - 1.5rem));max-height:min(88vh, 780px);padding:0;border:1.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--text);box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
.consent-panel[open]{display:flex;flex-direction:column}
.consent-panel::backdrop{background:rgba(0,0,0,.45)}
.consent-body{padding:1.15rem 1.25rem .4rem;overflow:auto}
.consent-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.consent-head h2{font-size:1.35rem;line-height:1.2}
.consent-close{flex:none;width:40px;height:40px;margin:-.45rem -.6rem 0 0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink);font:inherit;font-size:1.65rem;line-height:1;cursor:pointer}
.consent-close:hover{background:var(--green-wash)}
.consent-intro{margin-top:.35rem;font-size:.92rem;line-height:1.45;color:var(--muted)}
.consent-group{padding:.85rem 0;border-top:1px solid var(--line)}
.consent-group:first-of-type{margin-top:.85rem}
.consent-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:32px}
.consent-row h3{font-size:1.05rem;line-height:1.25}
.consent-group p{margin-top:.3rem;font-size:.9rem;line-height:1.45}
.consent-always{font-size:.85rem;font-weight:640;color:var(--green-ink);white-space:nowrap}
.consent-switch{position:relative;flex:none;width:52px;height:30px}
.consent-switch input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.consent-switch span{position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:999px;background:#fff;transition:background-color .15s}
.consent-switch span::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--ink);transition:transform .15s}
.consent-switch input:checked + span{background:var(--green)}
.consent-switch input:checked + span::after{transform:translateX(22px)}
.consent-switch input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
.consent-actions{display:grid;grid-template-columns:repeat(3, 1fr);gap:.5rem;padding:.9rem 1.25rem;border-top:1.5px solid var(--ink);background:var(--paper)}
.consent-actions .btn{padding-inline:.6rem}
.consent-foot{padding:0 1.25rem .9rem;background:var(--paper);font-size:.85rem;color:var(--muted)}
@media (max-width:520px){.consent-actions{grid-template-columns:1fr 1fr}.consent-actions [data-consent-save]{grid-column:1 / -1;order:3}}
.consent-fab{position:fixed;z-index:55;left:calc(.75rem + env(safe-area-inset-left));bottom:calc(.75rem + env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 8px 20px -10px rgba(0,0,0,.45);cursor:pointer;transition:bottom .25s ease}
.consent-fab[hidden]{display:none}
.consent-fab:hover{background:var(--green-wash)}
.consent-fab:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (max-width:999px){.sticky-cta.is-visible ~ .consent-fab{bottom:calc(5.6rem + env(safe-area-inset-bottom))}}

/* ==========================================================================
   Shared site chrome and subpages
   ========================================================================== */
/* ---------- Links from homepage sections to the subpages ---------- */
.detail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.6rem}
.more-link{font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:.3em}
.more-link:hover{color:var(--ink);text-decoration-thickness:3px}
.prices-more{display:inline-block;margin-top:1.25rem}
.site-footer a[aria-current=page]{font-weight:700}

/* ---------- Breadcrumbs ---------- */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.875rem;line-height:1.4;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:.5rem;color:#ADA7A7}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Page hero (pages without the form) ---------- */
.page-hero{padding-block:clamp(1.5rem, 3.5vw, 3.25rem) clamp(2.5rem, 5vw, 4.25rem);border-bottom:1px solid var(--line)}
.page-hero-copy{max-width:50rem}
.page-hero-copy > * + *{margin-top:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;padding-top:.5rem}
.hero-intro .more-link{display:inline-block}
.proof-title{font-size:1.6rem;font-stretch:78%}
@media (min-width:1000px){.page-hero-copy > * + *{margin-top:1.4rem}}

/* ---------- Reading column with an optional side column ---------- */
.content{padding-block:clamp(3rem, 6vw, 5.5rem)}
.content-grid{display:grid;gap:3rem}
@media (min-width:1000px){
  .content-grid--side{grid-template-columns:minmax(0,1fr) 21rem;gap:clamp(3rem, 6vw, 6.5rem);align-items:start}
  .content-side{position:sticky;top:104px}
}
.prose{max-width:68ch;min-width:0}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:1.75em;font-size:clamp(1.6rem, 1.25rem + 1vw, 2.2rem)}
.prose h3{margin-top:1.7em;font-size:1.25rem}
.prose > :first-child{margin-top:0}
.prose h2 + *,.prose h3 + *{margin-top:.7em}
.prose ul,.prose ol:not([class]){padding-left:1.25em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--green-ink)}
.prose strong{color:var(--ink);font-weight:680}
.prose .photos{margin-top:1.75em}
.prose .lead{max-width:none}
.prose .spec-list{list-style:none;padding:0;border-top:2px solid var(--ink)}
.prose .spec-list li{margin:0;padding:.85rem 0;border-bottom:1px solid var(--line)}
.prose .flow{padding:0}
.prose .flow li + li{margin-top:0}
.price-table + .price-notes{margin-top:.9rem}

/* ---------- Side column: notes and the CTA card ---------- */
.side-card{background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:clamp(1.25rem, 2.4vw, 1.75rem)}
.side-card > * + *,.side-note > * + *{margin-top:1rem}
.side-card h2,.side-note h2{font-size:1.6rem;font-stretch:78%}
.side-card .checks li{font-size:.95rem}
.side-note{border-top:4px solid var(--ink);padding-top:1.25rem}
.side-note .checks li{font-weight:520;color:var(--text)}
.side-note .more-link,.side-card .more-link{display:inline-block}
.company{font-style:normal}

/* ---------- Related pages, set like a report's index ---------- */
.related{padding-block:clamp(3rem, 6vw, 5rem);background:#fff;border-block:1px solid var(--line)}
.related h2{font-size:clamp(1.6rem, 1.25rem + 1vw, 2.2rem)}
.related-list{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:0 3rem}
@media (min-width:800px){.related-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.related-list a{display:block;height:100%;padding:1rem 0 1.4rem;border-top:2px solid var(--ink);color:var(--ink);text-decoration:none}
.related-list strong{display:block;font-size:1.25rem;font-weight:720;font-stretch:84%;line-height:1.2}
.related-list span{display:block;margin-top:.35rem;color:var(--muted);font-size:.95rem;line-height:1.45}
.related-list a:hover strong{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.22em}

/* ---------- FAQ page ---------- */
.faq-search{display:grid;gap:.45rem;max-width:34rem}
.faq-search label{font-weight:660;color:var(--ink)}
.faq-search-row{position:relative}
.faq-search input{width:100%;min-height:54px;padding:.7rem 7.5rem .7rem 2.9rem;border:1.5px solid var(--field);border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5l5 5' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") .9rem center/20px no-repeat;color:var(--ink);font:inherit;font-size:1.0625rem;appearance:none;-webkit-appearance:none}
.faq-search input::placeholder{color:#767676}
.faq-search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(132,195,65,.6)}
.faq-search input::-webkit-search-cancel-button{display:none}
.faq-count{position:absolute;right:.95rem;top:50%;transform:translateY(-50%);font-size:.875rem;color:var(--muted);pointer-events:none;font-variant-numeric:tabular-nums}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.faq-aside{min-width:0}
.faq-topics ul{list-style:none;display:flex;gap:.5rem;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .25rem;scrollbar-width:none}
.faq-topics ul::-webkit-scrollbar{display:none}
.faq-topics a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:620;font-size:.9375rem;text-decoration:none;white-space:nowrap}
.faq-topics a:hover{background:var(--green-wash)}
.faq-aside .side-card{display:none}
.faq-group{scroll-margin-top:1rem}
.faq-group + .faq-group{margin-top:clamp(2.5rem, 5vw, 3.5rem)}
.faq-group h2{font-size:clamp(1.6rem, 1.25rem + 1vw, 2.2rem);margin-bottom:1rem}
.faq .answer > * + *{margin-top:.8em}
.faq .answer ul{padding-left:1.2em}
.faq .answer li + li{margin-top:.5em}
.faq .answer strong{color:var(--ink)}
.faq-empty{padding:1.25rem 0;border-top:2px solid var(--ink)}
.faq-empty > * + *{margin-top:.6rem}
.faq-more{margin-top:2.5rem;color:var(--muted)}
@media (min-width:1000px){
  .faq-layout{grid-template-columns:18.5rem minmax(0,1fr);gap:clamp(3rem, 6vw, 6rem);align-items:start}
  .faq-aside{position:sticky;top:104px}
  .faq-topics ul{display:block;margin:0;padding:0;overflow:visible;border-top:2px solid var(--ink)}
  .faq-topics a{display:flex;min-height:46px;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;white-space:normal}
  .faq-topics a:hover{background:none;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.3em}
  .faq-aside .side-card{display:block;margin-top:2rem}
}

/* ---------- Legal pages: contents list + the text set as a document ---------- */
.legal-grid{display:grid;gap:1.5rem}
.toc{min-width:0}
.toc details{border-block:2px solid var(--ink)}
.toc summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.toc details[open] summary::after{transform:rotate(180deg)}
.toc ol{list-style:none;margin:0;padding:0 0 .75rem}
.toc a{display:block;padding:.42rem 0;color:var(--text);font-size:.9375rem;line-height:1.35;text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline}
.doc{max-width:50rem;background:#fff;border:1px solid var(--line);border-radius:3px;padding:clamp(1.25rem, 4vw, 3rem)}
.doc.prose{max-width:50rem}
.doc h2{scroll-margin-top:1rem}
.prose .clause{display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:.3em}
.prose .clause--sub{margin-left:2.9em}
.clause-n{color:var(--muted);font-variant-numeric:tabular-nums}
.data-table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.data-table th{padding:.6rem .9rem .6rem 0;border-bottom:2px solid var(--ink);text-align:left;font-size:.8125rem;font-weight:650;color:var(--ink);vertical-align:bottom}
.data-table td{padding:.85rem .9rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.data-table td:first-child{color:var(--ink)}
.cookie-settings{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
@media (min-width:1000px){
  .legal-grid{grid-template-columns:17rem minmax(0,1fr);gap:clamp(3rem, 5vw, 5rem);align-items:start}
  .toc{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto}
  .toc details{border-bottom:0}
  .toc summary{pointer-events:none}
  .toc summary::after{display:none}
}
@media (max-width:699px){
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .data-table tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .data-table td{display:block;padding:.1rem 0 .5rem;border:0}
  .data-table td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:650;color:var(--muted)}
}

/* ---------- Two services / two audiences side by side ---------- */
.paths{display:grid;gap:3rem}
@media (min-width:900px){.paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem, 6vw, 6rem)}}
.path{border-top:4px solid var(--ink);padding-top:1.4rem;scroll-margin-top:1rem}
.path > * + *{margin-top:1rem}
.path h2{font-size:clamp(1.55rem, 1.2rem + 1vw, 2.1rem)}
.path strong{color:var(--ink);font-weight:680}
.path .btn{margin-top:1.5rem}
.case{margin-top:1.75rem;padding:1.1rem 1.25rem;background:var(--green-wash);border-left:4px solid var(--green);border-radius:0 8px 8px 0}
.case > * + *{margin-top:.45rem}
.case-label{font-weight:720;color:var(--ink);font-size:.95rem}

/* ---------- About: three principles ---------- */
.principles{display:grid;gap:1.5rem}
.principles > div{border-top:2px solid var(--ink);padding-top:.9rem}
.principles dt{font-weight:720;font-stretch:84%;font-size:1.2rem;line-height:1.2;color:var(--ink)}
.principles dd{margin-top:.4rem}

/* ---------- New-build projects ---------- */
.projects{background:#fff;border-block:1px solid var(--line)}
.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.chip-count{margin-left:.4rem;font-weight:500;opacity:.72}
.project-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;border-top:2px solid var(--ink)}
@media (min-width:800px){.project-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}}
.project{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1.25rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.project-name{display:block;font-weight:680;color:var(--ink);line-height:1.3}
.project-town{display:block;font-size:.875rem;color:var(--muted)}
.project-links{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;font-size:.9375rem;font-weight:600}
.projects-more{margin-top:1.5rem}

/* ---------- A single report page outside the viewer ---------- */
.page--static{margin:0 20px 20px 0}
.prose .page--static{margin-top:2em}
.page--static > figcaption{min-height:0;margin-top:1rem;padding:.75rem 0 0}

/* ---------- The process as a vertical list inside a reading column ---------- */
@media (min-width:1000px){
  .flow--stack{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .flow--stack li{padding-left:3.6rem;padding-top:0}
  .flow--stack li::after{left:calc(1.25rem - 1px);right:auto;top:2.6rem;bottom:-1.6rem;width:2px;height:auto}
}

/* ---------- Nasveti: the guide library, set like a report's table of contents ---------- */
.guides{min-width:0}
.guides > * + *{margin-top:clamp(2.5rem, 5vw, 3.5rem)}
.guide-feature{display:grid;gap:1.25rem;padding:clamp(1rem, 2.4vw, 1.5rem);background:#fff;border:1px solid var(--line);border-radius:3px}
.guide-feature img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:2px}
.guide-feature > div > * + *{margin-top:.75rem}
.guide-feature h2{font-size:clamp(1.6rem, 1.25rem + 1vw, 2.2rem)}
.guide-feature h2 a{color:var(--ink);text-decoration:none}
.guide-feature h2 a:hover{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.2em}
@media (min-width:700px){.guide-feature{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:center}}
.guide-group h2{font-size:clamp(1.5rem, 1.2rem + .9vw, 2rem);margin-bottom:.9rem}
.guide-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.guide-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.guide-title{grid-column:1;font-weight:680;font-size:1.125rem;line-height:1.3;color:var(--ink)}
.guide-desc{grid-column:1;font-size:.95rem;line-height:1.45;color:var(--muted)}
.guide-row > .guide-meta,.guide-row > .tag{grid-column:2;grid-row:1 / span 2;align-self:center;white-space:nowrap}
.guide-meta{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
a.guide-row:hover .guide-title{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:.22em}
.guide-row.is-planned .guide-title{color:var(--muted)}
.tag--plan{background:#EFECEC;color:#5C5C5C;font-weight:650}
@media (max-width:599px){
  .guide-row{grid-template-columns:minmax(0,1fr)}
  .guide-row > .guide-meta,.guide-row > .tag{grid-column:1;grid-row:auto;justify-self:start;margin-top:.35rem}
}

/* ---------- A guide: byline, contents aside, key points and a closing CTA ---------- */
.byline{display:flex;flex-direction:column;gap:.15rem;font-size:.9rem;line-height:1.45;color:var(--muted)}
.byline strong{color:var(--ink);font-weight:650}
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.guide-aside{min-width:0}
.guide-aside .toc{position:static;max-height:none;overflow:visible}
.guide-aside .side-card{display:none}
.prose .keypoints{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ink);padding:1.2rem 1.4rem 1.35rem}
.prose .keypoints h2{margin-top:0;font-size:1.35rem;font-stretch:84%}
.prose .checks{padding-left:0}
.prose .checks li + li{margin-top:0}
.keypoints .checks{margin-top:.85rem}
.keypoints .checks li{font-weight:520;color:var(--text)}
.prose .cta-box{margin-top:2.5em;background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:clamp(1.25rem, 2.6vw, 2rem)}
.cta-box > * + *{margin-top:.9rem}
.prose .cta-box h2{margin-top:0;font-size:1.6rem;font-stretch:78%}
.guide-article h2[id]{scroll-margin-top:1rem}
@media (min-width:1000px){
  .guide-layout{grid-template-columns:18.5rem minmax(0,1fr);gap:clamp(3rem, 5vw, 5rem);align-items:start}
  .guide-aside{position:sticky;top:104px}
  .guide-aside .side-card{display:block;margin-top:2rem}
}

/* ---------- Printable checklists, the severity legend, comparison table, sample pages ---------- */
.prose .checklist{list-style:none;padding:0}
.prose .checklist li{position:relative;padding-left:2rem}
.prose .checklist li + li{margin-top:.55em}
.prose .checklist li::before{content:"";position:absolute;left:0;top:.18em;width:1.15rem;height:1.15rem;border:2px solid var(--ink);border-radius:3px;background:#fff}
.prose .legend{list-style:none;padding:0;display:grid;gap:.9rem}
.prose .legend li{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.3rem 1rem;align-items:start;margin:0}
.legend .tag{justify-self:start}
.compare td:first-child{font-weight:650}
.sample-pages{display:grid;gap:2.5rem 3rem;margin-top:2rem}
@media (max-width:520px){.prose .legend li{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1100px){.sample-pages{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.home-guides{margin-top:2rem}
.home-guides-title{margin:0;font-size:.875rem;font-weight:650;color:var(--muted)}
.home-guides ul{list-style:none;margin:.35rem 0 .9rem;padding:0;border-top:1px solid var(--line)}
.home-guides li a{display:block;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:620;text-decoration:none}
.home-guides li a:hover{color:var(--green-ink)}
/* Two-column tables stay tables on small screens: they fit at 390 px. */
@media (max-width:699px){
  .data-table.two-col thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .data-table.two-col tr{display:table-row;padding:0;border:0}
  .data-table.two-col td{display:table-cell;padding:.7rem .75rem .7rem 0;border-bottom:1px solid var(--line)}
  .data-table.two-col td::before{content:none}
  .data-table.two-col td:first-child{white-space:nowrap}
}
@media (min-width:900px){.quotes.quotes--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:60rem}}
/* ---------- Video: self-hosted thumbnail, YouTube loads only on click ---------- */
.video{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:10px;background:#ececea}
.video:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.video-play{position:absolute;inset:0;display:block}
.video-play:focus{outline:none}
.video-play img{display:block;width:100%;height:100%;object-fit:cover}
.video-icon{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;border-radius:14px;background:var(--green);box-shadow:0 12px 26px -10px rgba(0,0,0,.5);transition:transform .15s ease}
.video-icon::before{content:"";position:absolute;left:30px;top:15px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--ink)}
.video-play:hover .video-icon,.video-play:focus-visible .video-icon{transform:scale(1.08)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-figure{margin:0}
.video-caption{margin-top:.7rem;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.video-caption strong{display:block;margin-bottom:.15rem;font-size:.9375rem;color:var(--ink)}
.page-hero-split{display:grid;gap:2rem}
.page-hero-media{min-width:0}
@media (min-width:1000px){.page-hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}}
.done-video{margin-top:1.25rem;text-align:left}
.done-video-title{margin:0 0 .6rem;font-weight:620;color:var(--ink)}
.video-note{margin:.5rem 0 0;font-size:.75rem;line-height:1.4;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.video-icon{transition:none}}
/* Taller form card (confirmation screen): keep intro and proof together; spare height goes below the quote. */
@media (min-width:1000px){.hero-grid{grid-template-rows:auto 1fr}}
.photos--portrait img{aspect-ratio:3 / 4}
.photos--square img{aspect-ratio:1 / 1}
.prose .note{margin-top:2rem;padding:.75rem 0 .75rem 1rem;border-left:3px solid var(--line);font-size:.875rem;color:var(--muted)}
.prose ol > li + li{margin-top:.45em}
.prose ol > li::marker{font-weight:700;color:var(--ink)}
/* ---------- Quote form: "Želim drugo storitev" (a message instead of size and age, a personal offer instead of a price) ---------- */
textarea{display:block;width:100%;min-height:7.5rem;padding:.7rem .9rem;border:1.5px solid var(--field);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:1.0625rem;line-height:1.45;resize:vertical}
textarea::placeholder{color:#767676}
textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(132,195,65,.6)}
.has-error textarea{border-color:var(--error)}
.other{display:grid;gap:1rem}
.other-list-title{font-size:.875rem;font-weight:650;color:var(--ink)}
.other-list ul{list-style:none;margin:.45rem 0 .6rem;padding:0;display:grid;gap:.35rem}
.other-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9375rem;line-height:1.4;color:var(--ink)}
.other-list li::before{content:"";flex:none;width:1.05rem;height:1.05rem;margin-top:.12rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12.5l5.6 5.6L21.2 5.4' fill='none' stroke='%2384C341' stroke-width='4.4'/%3E%3C/svg%3E") center/contain no-repeat}
.other-list .more-link{font-size:.9375rem}
.other-note{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem 1rem;border:1.5px dashed #ABA5A5;border-radius:8px;background:var(--paper);font-size:.875rem;line-height:1.45;color:var(--text)}
.other-note svg{flex:none;width:20px;height:20px;margin-top:.05rem;color:var(--ink)}
.field-group-head{display:grid;gap:.3rem}
@media print{
  .site-header,.site-footer,.sticky-cta,.cookie,.consent-panel,.consent-fab,.skip,.guide-aside,.related,.cta-box,.final{display:none!important}
  body{background:#fff}
  .page-hero,.content{padding-block:.5rem}
  .guide-layout{display:block}
  .prose{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}