/* ==========================================================================================================
   Typeface: Geologica (SIL OFL 1.1), self-hosted, variable weight axis 100-900.
   Two subsets, each one file: latin (basic Latin, punctuation, euro) and latin-ext (c-caron, s-caron, z-caron and the
   rest of Central Europe). Slovenian needs both, so both are preloaded. No italics are used, so none are shipped.
   ========================================================================================================== */
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/geologica-latin-ext-var.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/geologica-latin-var.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; }
/* ==========================================================================================================
   Type system. Every text style on the page is one of these; no element chooses its own size or weight.
   Sizes are px at phone / tablet (760+) / desktop (1100+). Weights: 400 text, 600 labels and small headings, 750 headlines.
     role            size                          weight  leading  tracking   use
     display         44 → 128 px (fitted to grid)   750     .94     −.025em    hero headline
     h2              32 → 50 px (fluid)             750     1.0     −.022em    section headline (always smaller than the display)
     h3              28 / 34 / 40                   750     1.05    −.02em     service and package names
     price           32 / 40 / 48                   750     1.0     −.035em    package prices, process numbers
     title, figure   24 / 26 / 30                   750     1.1     −.014em    project titles, key facts
     h4              20 / 22 / 24                   600     1.25    −.014em    step titles, FAQ questions
     lead            18 / 19 / 21                   400     1.5      0         intro / body large
     body            16                             400     1.55     0         running text
     nav, button     16                             600     1.2     −.005em    navigation, buttons, text links
     small, caption  14 / 15                        400     1.45     0         notes, lists, fact captions
     meta, label, tag, index   12                   600     1.3     +.1em      technical annotations, project type (CAPS)
   ========================================================================================================== */
/* Vena Blueprint · first pass (hero + opening of Naše delo).
   One page grid (12 columns), one construction line in the left margin (the "spine"), thin rules and small
   technical marks that always sit on a real edge or baseline. Everything must read fine with motion paused. */

:root {
  --navy: #003159;
  --blue: #1B64B5;
  --cyan: #22B5D4;
  --ice: #CBDDEA;
  --paper: #F9FCFE;
  --text: #000;                        /* all running text on the light sections */
  --ink-soft: #000;                    /* secondary copy: black as well (the dark sections override it) */
  --rule: #CBDDEA;                     /* hairlines */
  --line: rgba(0, 49, 89, .42);        /* structural lines */

  --m: max(clamp(32px, 6.2vw, 96px), calc((100vw - 1680px) / 2));   /* page margin (content capped at 1680px); the spine sits in its middle */
  --spine: calc(var(--m) / 2);
  --gap: 24px;

  --header-h: 112px;
  --header-h-stuck: 76px;
  --font: 'Geologica', 'Helvetica Neue', Arial, sans-serif;

  /* sizes: one value per role in each width band (phone here, tablet from 760px, desktop from 1100px); only h2 and the display size are fluid */
  --fs-display: clamp(44px, 7.35vw, 128px);
  --fs-h2: clamp(32px, 3.1vw, 50px);
  --fs-h3: 28px;
  --fs-title: 24px;
  --fs-figure: 24px;
  --fs-price: 32px;
  --fs-h4: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-nav: 16px;
  --fs-nav-drawer: 16px;
  --fs-button: 16px;
  --fs-small: 14px;
  --fs-caption: 14px;
  --fs-meta: 12px;
  --fs-label: 12px;
  --fs-tag: 12px;
  --fs-index: 12px;
  --lh-display: .94;

  /* composite styles: weight size/leading family */
  --f-display: 750 var(--fs-display) / var(--lh-display) var(--font);
  --f-h2: 750 var(--fs-h2) / 1 var(--font);
  --f-title: 750 var(--fs-title) / 1.1 var(--font);
  --f-figure: 750 var(--fs-figure) / 1.1 var(--font);
  --f-h3: 750 var(--fs-h3) / 1.05 var(--font);
  --f-h4: 600 var(--fs-h4) / 1.25 var(--font);
  --f-price: 750 var(--fs-price) / 1 var(--font);
  --f-small: 400 var(--fs-small) / 1.5 var(--font);
  --f-lead: 400 var(--fs-lead) / 1.5 var(--font);
  --f-body: 400 var(--fs-body) / 1.55 var(--font);
  --f-nav: 600 var(--fs-nav) / 1.2 var(--font);
  --f-button: 600 var(--fs-button) / 1.2 var(--font);
  --f-meta: 600 var(--fs-meta) / 1.3 var(--font);
  --f-label: 600 var(--fs-label) / 1.3 var(--font);
  --f-tag: 600 var(--fs-tag) / 1.2 var(--font);
  --f-caption: 400 var(--fs-caption) / 1.45 var(--font);
  --f-index: 600 var(--fs-index) / 1 var(--font);

  /* tracking */
  --tr-display: -.025em; --tr-h2: -.022em; --tr-h3: -.02em; --tr-title: -.014em; --tr-figure: -.022em;
  --tr-button: -.005em; --tr-meta: .14em; --tr-label: .1em; --tr-index: .06em;
  --err: #A5211A;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);
}
@media (min-width: 760px) { :root { --fs-h3: 34px; --fs-title: 26px; --fs-figure: 26px; --fs-price: 40px; --fs-h4: 22px; --fs-lead: 19px; --fs-small: 15px; --fs-caption: 15px; } }
@media (min-width: 1100px) { :root { --fs-h3: 40px; --fs-title: 30px; --fs-figure: 30px; --fs-price: 48px; --fs-h4: 24px; --fs-lead: 21px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-stuck) + 12px); }
/* Soft icy gradient behind the header and hero, fading back to paper where Naše delo begins. */
body::before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: min(1500px, 155vh); pointer-events: none;
  background:
    radial-gradient(70% 62% at 100% 0%, rgba(34, 181, 212, .26), transparent 68%),
    radial-gradient(64% 58% at 0% 78%, rgba(27, 100, 181, .17), transparent 70%),
    linear-gradient(180deg, #E3EFF8 0%, #EAF3FA 45%, var(--paper) 100%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }   /* fades out, so the tint never ends on a hard edge */
body { position: relative; padding-top: var(--header-h); background: var(--paper); color: var(--text); font: var(--f-body); font-kerning: normal; font-synthesis: none; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ol, ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; z-index: 40; left: 12px; top: -60px; padding: 10px 14px; background: var(--navy); color: #fff; font: var(--f-button); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(34, 181, 212, .45); }   /* navy ring (contrast 12:1) with a cyan halo */

/* Small uppercase technical type: the counterweight to the display headline. */
.meta { font: var(--f-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text); }

/* Reusable text styles for the sections still to come (03–07, case pages). */

/* ---- Signature line --------------------------------------------------------------------------------- */
.spine { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--spine); width: 1px; pointer-events: none; }
.spine__line { position: absolute; inset: 0; background: var(--line); transform-origin: top; }
/* The part of the line that belongs to the section on screen; moved by JS on scroll. */
.spine__active { position: absolute; left: -.5px; top: 0; width: 2px; height: 100px; background: var(--cyan); transform-origin: top; will-change: transform; opacity: 0; }
.spine__active.on { opacity: 1; transition: transform .5s var(--ease-out), opacity .3s; }

/* A node marks where a section meets the line: a crosshair plus its index. */
.node { position: absolute; z-index: 2; left: calc(var(--spine) - var(--m)); width: 0; height: 0; }
.node__cross { position: absolute; left: -8px; top: -8px; width: 17px; height: 17px;
  background: linear-gradient(var(--navy), var(--navy)) center / 17px 1px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 1px 17px no-repeat; }
.node.is-active .node__cross::after { content: ''; position: absolute; left: 5px; top: 5px; width: 7px; height: 7px; background: var(--cyan); }

/* ---- Header ----------------------------------------------------------------------------------------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 40px; height: var(--header-h); padding: 0 var(--m); border-bottom: 1px solid var(--rule); transition: height .3s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out); }
/* Once the page has scrolled, the bar becomes solid and compact (fixed, so nothing below it shifts). */
.top.is-stuck { height: var(--header-h-stuck); background: var(--paper); border-bottom-color: var(--rule); }
.top.is-stuck .top__logo img { height: 50px; }
.top__logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.top__logo img { height: 80px; width: auto; transition: height .3s var(--ease-out); }
.top__nav ol { display: flex; gap: 26px; }
.top__nav ol a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font: var(--f-nav); text-decoration: none; background: linear-gradient(var(--navy), var(--navy)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease-out); }
.top__nav ol a:hover, .top__nav ol a[aria-current='location'] { background-size: 100% 1px; }
.drawer-cta { display: none; }
.idx { font: var(--f-index); letter-spacing: var(--tr-index); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.top__menu { display: none; }
.lang { display: flex; align-items: center; gap: 2px; font: var(--f-label); letter-spacing: var(--tr-label); }
.lang__item { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; text-decoration: none; color: var(--ink-soft); }
.lang__item[aria-current] { color: var(--text); background: linear-gradient(var(--navy), var(--navy)) 50% calc(100% - 4px) / calc(100% - 12px) 1px no-repeat; }
.lang a.lang__item:hover { color: var(--text); }

/* ---- 01 / Hero -------------------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(40px, 7vh, 80px) var(--m) 0; }

/* Metadata on a baseline; the ticks mark the start of each of the 12 columns. */
.ruler { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding-bottom: 14px; }

.ruler__line { position: absolute; left: calc(var(--spine) - var(--m)); right: calc(-1 * var(--m)); bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
.ruler__ticks { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); height: 7px; }
.ruler__ticks i { width: 1px; height: 7px; background: var(--navy); }
.ruler .node { top: 100%; }

/* The headline is set, not typed: two lines, the second hung one column in. */
.hero__title { margin-top: clamp(28px, 5.5vh, 64px); font: var(--f-display); letter-spacing: var(--tr-display); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: block; }
.hero__title .line--indent { padding-left: calc((100% + var(--gap)) / 12); }
@media (min-width: 761px) { .hero__title .line > span { white-space: nowrap; } }   /* desktop lines are set by hand, never wrapped */

.hero__foot { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; padding-top: clamp(44px, 7vh, 76px); }
.hero__copy { grid-column: 1 / span 5; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }   /* lead on the plan's top edge, actions on its base */
.hero__lead { max-width: 31ch; font: var(--f-lead); color: var(--ink-soft); text-wrap: pretty; }
.hero__actions { position: relative; display: flex; align-items: center; gap: 28px; }

/* Status badge beside the primary action: a ring with a monitor drawn in the plan's line language, two lines of text. Not interactive. */
.hero__actions .btn { flex: none; }
@media (min-width: 1000px) and (max-width: 1220px) { .hero__actions { flex-wrap: wrap; row-gap: 20px; } }   /* the badge drops under the button before it could reach the dotted guide */

.hero__note { margin-top: 14px; font: var(--f-caption); color: var(--ink-soft); text-wrap: balance; }

/* Vertical guide: drops down the gutter just left of column 7 (half a gap clear of the text on either side) to the 02 rule. Sized by JS. */
.guide { position: absolute; left: calc((100% + var(--gap)) / 2 - var(--gap) / 2); top: 10px; width: 1px; height: var(--guide-h, 0); background: repeating-linear-gradient(var(--line) 0 3px, transparent 3px 7px); transform-origin: top; }

/* The plan: a technical drawing of a page (header, headline, action, image), keyed A–C. Cyan marks the action. */

/* Plan ↔ page: pointing at A, B or C in the drawing (or its key) spotlights that part of the real hero. Pointer-only polish; nothing depends on it. */

.hero__title, .hero__lead, .hero__cta, .facts { transition: opacity .3s var(--ease-out); }

/* Facts: what the client gets, taken from the site copy. Each sits under a dimension line that spans exactly three grid columns. */
.facts { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); margin-top: clamp(34px, 5.6vh, 58px); }
.facts li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 20px 0 0; }
.facts li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 1px 9px no-repeat, linear-gradient(var(--navy), var(--navy)) 100% 0 / 1px 9px no-repeat, linear-gradient(var(--line), var(--line)) 0 4px / 100% 1px no-repeat; }
.facts strong { font: var(--f-figure); letter-spacing: var(--tr-figure); }
.facts span { font: var(--f-caption); color: var(--ink-soft); text-wrap: balance; }
/* Primary action: solid, squared, with a precise cyan line that runs along its base on hover. */
.btn { border: 0; position: relative; display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 24px; border-radius: 3px; background: var(--navy); color: #fff; font: var(--f-button); letter-spacing: var(--tr-button); text-decoration: none; white-space: nowrap; overflow: hidden; transition: background-color .25s var(--ease-out), transform .16s var(--ease-out); }
.btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease-out); }
.btn:hover { background-color: #0B3D69; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn__arrow { transition: transform .3s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background-color: #EAF3FA; }
.btn--sm { height: 46px; padding: 0 18px; gap: 10px; font-size: var(--fs-nav); }
.top__cta { flex: none; }

/* Secondary action: typographic; its underline is a piece of construction line. */
.link-work { display: inline-flex; align-items: center; gap: 8px; padding: 14px 0 12px; font: var(--f-button); letter-spacing: var(--tr-button); text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--navy), var(--navy)) 0 100% / 100% 1px no-repeat; transition: background-size .35s var(--ease-out); }
.link-work__arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.link-work:hover .link-work__arrow, .link-work:focus-visible .link-work__arrow { transform: translate(3px, 3px); }
.link-work:hover, .link-work:focus-visible { background-image: linear-gradient(var(--blue), var(--blue)); }

/* Hovering "Naše delo" sends a short cyan signal down the spine towards node 02 (animated by JS). */
.signal { position: absolute; z-index: 2; left: calc(var(--spine) - 1px); top: 0; width: 3px; height: 56px; background: var(--cyan); opacity: 0; pointer-events: none; }

/* ---- 02 / Naše delo --------------------------------------------------------------------------------- */
.work { position: relative; padding: clamp(64px, 10vh, 112px) var(--m) clamp(72px, 10vh, 120px); }
.work__head, .sec__head { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 28px; padding-top: 18px; }
.work__head::before, .sec__head::before { content: ''; position: absolute; top: 0; left: calc(var(--spine) - var(--m)); right: calc(-1 * var(--m)); height: 1px; background: var(--line); }
.work__head .node, .sec__head .node { top: 0; }
.work__head .meta, .sec__head .meta { grid-column: 1 / -1; }
.work__head h2, .sec__head h2 { grid-column: 1 / span 6; font: var(--f-h2); letter-spacing: var(--tr-h2); text-wrap: balance; }
/* The intro sits on the column of the second project column (7–11); a dimension line marks its measure. */
.work__lead, .sec__lead { position: relative; grid-column: 7 / span 5; align-self: end; padding-top: 22px; font: var(--f-lead); color: var(--ink-soft); text-wrap: pretty; }
.work__lead::before, .sec__lead::before, .sub__title::before, .card__media::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 1px 9px no-repeat, linear-gradient(var(--navy), var(--navy)) 100% 0 / 1px 9px no-repeat, linear-gradient(var(--line), var(--line)) 0 4px / 100% 1px no-repeat; }

/* Project grid: four equal projects, two per row, six columns each. One image ratio everywhere. */
.cards { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(72px, 11vh, 120px); align-items: start; margin-top: clamp(80px, 13vh, 144px); }
.card { position: relative; display: flex; flex-direction: column; grid-column: span 6; }

/* The frame: one tinted board for every project, a hairline around the untouched screenshot, a dimension line above and crop marks on two corners. */
.card__media { position: relative; margin-top: 28px; }
.card__media::before { top: -28px; }
.card__media::after { content: ''; position: absolute; inset: -12px; pointer-events: none; --c: rgba(0, 49, 89, .55);
  background:
    linear-gradient(var(--c), var(--c)) 0 12px / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 12px 0 / 1px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% calc(100% - 12px) / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) calc(100% - 12px) 100% / 1px 8px no-repeat; }
.card__frame { overflow: hidden; padding: clamp(14px, 1.7vw, 26px); background: linear-gradient(140deg, #E6F0F8 0%, #D5E5F2 100%); }
.card__frame img { width: 100%; aspect-ratio: 1200 / 744; object-fit: cover; outline: 1px solid rgba(0, 49, 89, .3); outline-offset: -1px; transition: transform .6s var(--ease-out); }
.card:hover .card__frame img { transform: scale(1.015); }

/* Text: stacked under the image: index, title, description, tags, link. */
.card__body { margin-top: 26px; }

.card__meta { font: var(--f-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); }
.card__meta span { margin-right: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.card__title { margin-top: 10px; font: var(--f-title); letter-spacing: var(--tr-title); text-wrap: balance; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* whole card is the link */
.card__title a:focus-visible { outline: none; box-shadow: none; }
.card:has(a:focus-visible) { outline: 2px solid var(--navy); outline-offset: 10px; }
.card__text { max-width: 46ch; color: var(--ink-soft); text-wrap: pretty; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.card__tags li{ padding: 5px 9px 4px; border: 1px solid var(--rule); border-radius: 2px; font: var(--f-tag); }

/* "Obiščite stran ↗": a typographic link. Resting: a hairline under the words. Hover or focus: the line runs on past the arrow and ends in a small cyan marker, the arrow steps out, the colour moves to blue. */
.card__go { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding-bottom: 10px; font: var(--f-button); letter-spacing: var(--tr-button); color: var(--navy); transition: color .25s var(--ease-out); }
.card__go::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--navy); transition: background-color .25s var(--ease-out); }
.card__go::after { content: ''; position: absolute; left: 100%; bottom: -3px; width: 0; height: 7px; overflow: hidden; transition: width .4s var(--ease-out);
  background: linear-gradient(var(--blue), var(--blue)) 0 3px / calc(100% - 7px) 1px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 100% 0 / 7px 7px no-repeat; }
.card__arrow { display: inline-block; font-style: normal; transition: transform .3s var(--ease-out); }
.card:hover .card__go, .card:has(a:focus-visible) .card__go { color: var(--blue); }
.card:hover .card__go::before, .card:has(a:focus-visible) .card__go::before { background: var(--blue); }
.card:hover .card__go::after, .card:has(a:focus-visible) .card__go::after { width: 64px; }
.card:hover .card__arrow, .card:has(a:focus-visible) .card__arrow { transform: translate(3px, -3px); }

/* Reveal: each project fades up once as it enters; its image board is uncovered from the top. Only when JS has set the observer up. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .card { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .reveal-ready .card .card__frame { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-draw); }
  .reveal-ready .card.in { opacity: 1; transform: none; }
  .reveal-ready .card.in .card__frame { clip-path: inset(0 0 0 0); }
}

/* "Vsi projekti": outlined twin of the primary button, set on the same rule system (a hairline runs out to the right). */
.work__more { position: relative; display: flex; align-items: center; gap: 24px; margin-top: clamp(48px, 7vh, 72px); }
.work__more::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn--line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.btn--line:hover { background-color: var(--navy); color: #fff; }
.btn--line::after { display: none; }
.btn--line .btn__arrow { transition: transform .3s var(--ease-out); }
/* Expandable portfolio: the second tier opens in place, three equal projects on four columns each. */
.more-toggle { cursor: pointer; }
.more-projects { margin-top: clamp(64px, 10vh, 112px); }
.more-projects[hidden] { display: none; }

.work__more--end { margin-top: clamp(56px, 8vh, 88px); }
@media (prefers-reduced-motion: no-preference) {
  .more-projects:not([hidden]) { animation: rise-in .6s var(--ease-out) both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
/* ---- 03 – 06: Storitve, Cenik, Kontakt, FAQ ---------------------------------------------------------- */
/* Same section head as Naše delo: rule with node, index, headline, and a lead on columns 8–11. */
.sec { position: relative; padding: clamp(56px, 8vh, 96px) var(--m); }
#kontakt .sec__head h2 { grid-column: 1 / span 9; }
#kontakt .sec__head h2 span { display: block; }

.sub__title { position: relative; padding-top: 22px; font: var(--f-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--text); }
.sub__title span { margin-right: 12px; font-variant-numeric: tabular-nums; }

/* 03.1 What we make: a typographic list on hairlines, not cards. */

/* 03.2 Included: two columns of hairline rows with a dash marker. */

/* 03.3 Process: a construction line with a node per step; five steps across ten columns. */

/* ---- 03 Storitve: "why" block ------------------------------------------------------------------------------- */
.why__head { row-gap: 24px; }
.why__head h2 { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
.why__lead { grid-column: 1 / span 5; grid-row: 3; max-width: 46ch; font: var(--f-lead); color: var(--ink-soft); text-wrap: pretty; }
.why__art { grid-column: 7 / -1; grid-row: 2 / span 2; align-self: end; margin: 0; }
.why__art svg { display: block; width: 100%; height: auto; max-height: 340px; overflow: visible; }

/* Drawing language: the same as the hero plan. Navy hairlines, solid navy bars, one cyan accent (the hard hat and the button corner). */
.why__art .a-ink { fill: none; stroke: var(--navy); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.why__art .a-thick { stroke-width: 2.2; }
.why__art .a-soft { stroke: rgba(0, 49, 89, .3); }
.why__art .a-tick, .why__art .a-dim-line { stroke: var(--line); }
.why__art .a-solid { fill: var(--navy); }
.why__art .a-cyan { fill: var(--cyan); }
.why__art .a-head { fill: var(--paper); stroke: var(--navy); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.why__art .a-scaf path { fill: none; stroke: rgba(0, 49, 89, .28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.why__art .brick { fill: var(--navy); opacity: 0; }

/* The plate and the five reasons: a 3 × 2 grid on the 12 columns, four each. The plate is solid navy, like the recommended price plate. */
.why__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(40px, 6vh, 64px); margin-top: clamp(56px, 9vh, 96px); }

/* Motion: one 16 s loop, played only while the drawing is on screen. Without motion the finished page stands there. */
@media (prefers-reduced-motion: no-preference) {
  .why__art:not(.is-live) * { animation-play-state: paused; }
  .why__art .row { animation: 16s linear infinite both; clip-path: inset(0 100% 0 0); opacity: 0; }
  .why__art .row--1 { animation-name: row1; } .why__art .row--2 { animation-name: row2; } .why__art .row--3 { animation-name: row3; }
  .why__art .row--4 { animation-name: row4; } .why__art .row--5 { animation-name: row5; }
  .why__art .man { animation: man 16s ease-in-out infinite both; }
  .why__art .arm { transform-origin: 205px 192px; animation: arm 16s ease-in-out infinite both; }
  .why__art .brick { animation: 16s ease-in-out infinite both; }
  .why__art .brick--1 { animation-name: brick1; } .why__art .brick--2 { animation-name: brick2; } .why__art .brick--3 { animation-name: brick3; }
  .why__art .brick--4 { animation-name: brick4; } .why__art .brick--5 { animation-name: brick5; }
}
@keyframes row1 { 0%, 10.5% { opacity: 1; clip-path: inset(0 100% 0 0); } 14%, 88% { opacity: 1; clip-path: inset(0 0 0 0); } 94%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes row2 { 0%, 19.5% { opacity: 1; clip-path: inset(0 100% 0 0); } 23%, 88% { opacity: 1; clip-path: inset(0 0 0 0); } 94%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes row3 { 0%, 31.5% { opacity: 1; clip-path: inset(0 100% 0 0); } 35%, 88% { opacity: 1; clip-path: inset(0 0 0 0); } 94%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes row4 { 0%, 43.5% { opacity: 1; clip-path: inset(0 100% 0 0); } 47%, 88% { opacity: 1; clip-path: inset(0 0 0 0); } 94%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes row5 { 0%, 55.5% { opacity: 1; clip-path: inset(0 100% 0 0); } 59%, 88% { opacity: 1; clip-path: inset(0 0 0 0); } 94%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
/* the builder climbs one platform after each pair of rows, then climbs down while the page fades and the loop restarts */
@keyframes man { 0%, 25% { transform: translateY(0); } 27%, 37% { transform: translateY(-26px); } 39%, 49% { transform: translateY(-66px); } 51%, 88% { transform: translateY(-96px); } 96%, 100% { transform: translateY(0); } }
@keyframes arm { 0%, 7% { transform: rotate(0); } 7.6% { transform: rotate(26deg); } 8.6% { transform: rotate(-22deg); } 10.5%, 16% { transform: rotate(0); }
  16.6% { transform: rotate(26deg); } 17.6% { transform: rotate(-22deg); } 19.5%, 28% { transform: rotate(0); }
  28.6% { transform: rotate(26deg); } 29.6% { transform: rotate(-22deg); } 31.5%, 40% { transform: rotate(0); }
  40.6% { transform: rotate(26deg); } 41.6% { transform: rotate(-22deg); } 43.5%, 52% { transform: rotate(0); }
  52.6% { transform: rotate(26deg); } 53.6% { transform: rotate(-22deg); } 55.5%, 100% { transform: rotate(0); } }
/* a brick is lobbed from the builder's hand to the start of each row; the row then unrolls from that end */
@keyframes brick1 { 0%, 8% { opacity: 0; transform: translate(0, 0); } 8.4% { opacity: 1; transform: translate(0, 0); } 9.3% { opacity: 1; transform: translate(30px, 8px); } 10.4% { opacity: 1; transform: translate(62px, 62.5px); } 10.6%, 100% { opacity: 0; transform: translate(62px, 62.5px); } }
@keyframes brick2 { 0%, 17% { opacity: 0; transform: translate(0, 0); } 17.4% { opacity: 1; transform: translate(0, 0); } 18.3% { opacity: 1; transform: translate(30px, -12px); } 19.4% { opacity: 1; transform: translate(62px, 23.5px); } 19.6%, 100% { opacity: 0; transform: translate(62px, 23.5px); } }
@keyframes brick3 { 0%, 29% { opacity: 0; transform: translate(0, 0); } 29.4% { opacity: 1; transform: translate(0, 0); } 30.3% { opacity: 1; transform: translate(30px, -20px); } 31.4% { opacity: 1; transform: translate(62px, -7.5px); } 31.6%, 100% { opacity: 0; transform: translate(62px, -7.5px); } }
@keyframes brick4 { 0%, 41% { opacity: 0; transform: translate(0, 0); } 41.4% { opacity: 1; transform: translate(0, 0); } 42.3% { opacity: 1; transform: translate(30px, -24px); } 43.4% { opacity: 1; transform: translate(62px, -15.5px); } 43.6%, 100% { opacity: 0; transform: translate(62px, -15.5px); } }
@keyframes brick5 { 0%, 53% { opacity: 0; transform: translate(0, 0); } 53.4% { opacity: 1; transform: translate(0, 0); } 54.3% { opacity: 1; transform: translate(30px, -28px); } 55.4% { opacity: 1; transform: translate(62px, -20.5px); } 55.6%, 100% { opacity: 0; transform: translate(62px, -20.5px); } }

@media (max-width: 999px) {
  .why__head h2 { grid-column: 1 / span 8; }
  .why__lead { grid-column: 1 / span 8; }
  .why__art { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; }
  .why__art svg { max-height: 300px; }
  
  
}
@media (max-width: 760px) {
  .why__head h2, .why__lead { grid-column: 1 / -1; }
  
  .why__art { margin-top: 20px; }
}

/* 04 Pricing: four plates on the 12-column grid, three columns each. Same board as the project frames (icy tint, hairline),
   a dimension line above every plate, and the recommended one turned solid navy. Name, purpose, price, scope, what is included, action. */
.tiers { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 56px; margin-top: clamp(64px, 10vh, 112px); align-items: stretch; }
.tier { position: relative; grid-column: span 3; display: flex; flex-direction: column; padding: 26px 24px 24px; border: 1px solid rgba(0, 49, 89, .2); border-radius: 2px; background: linear-gradient(140deg, #E9F2F9 0%, #D8E7F3 100%); transition: border-color .25s var(--ease-out); }
.tier::before { content: ''; position: absolute; left: -1px; right: -1px; top: -28px; height: 9px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 1px 9px no-repeat, linear-gradient(var(--navy), var(--navy)) 100% 0 / 1px 9px no-repeat, linear-gradient(var(--line), var(--line)) 0 4px / 100% 1px no-repeat; }
.tier:hover { border-color: rgba(0, 49, 89, .55); }
.tier__idx span { margin-right: 10px; }
.tier__name { margin-top: 14px; font: var(--f-title); letter-spacing: var(--tr-title); text-wrap: balance; }
@media (min-width: 1000px) and (max-width: 1360px) { .tier .tier__name { min-height: 2.2em; } .tier .tier__for { min-height: 4.7em; } }   /* keeps the price rows level when a name wraps */
.tier__for { margin-top: 10px; min-height: 3.1em; font: var(--f-small); color: var(--ink-soft); text-wrap: pretty; }
.tier__price { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(39px + var(--fs-price)); margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(0, 49, 89, .22); font-variant-numeric: tabular-nums; }   /* the label line of od is reserved on every plate, so scope rows line up */
.tier__price strong { display: block; font: var(--f-price); letter-spacing: var(--tr-h3); }
.tier__from { display: block; margin-bottom: 2px; font: var(--f-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-soft); }
.tier__spec { display: grid; row-gap: 14px; margin-top: 22px; }
.tier__spec dt { font: var(--f-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-soft); }
.tier__spec dd { margin-top: 4px; font: var(--f-button); letter-spacing: 0; }
.tier__inc { display: grid; row-gap: 9px; margin: 24px 0 28px; }
.tier__inc li { position: relative; padding-left: 22px; font: var(--f-small); color: var(--ink-soft); text-wrap: pretty; }
.tier__inc li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--navy); }
.tier__cta { margin-top: auto; width: 100%; justify-content: center; height: 50px; padding: 0 16px; font-size: var(--fs-nav); }
.rec { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.rec::before { content: ''; width: 7px; height: 7px; background: var(--cyan); }

.tier--rec { background: var(--navy); border-color: var(--navy); color: #fff; }
.tier--rec::before { background: linear-gradient(var(--navy), var(--navy)) 0 0 / 1px 9px no-repeat, linear-gradient(var(--navy), var(--navy)) 100% 0 / 1px 9px no-repeat, linear-gradient(var(--navy), var(--navy)) 0 4px / 100% 1px no-repeat; }
.tier--rec:hover { border-color: var(--navy); }
.tier--rec .meta, .tier--rec .tier__name, .tier--rec .tier__price strong, .tier--rec .tier__spec dd { color: #fff; }
.tier--rec .tier__for, .tier--rec .tier__inc li, .tier--rec .tier__spec dt, .tier--rec .tier__from { color: rgba(255, 255, 255, .78); }
.tier--rec .tier__price { border-top-color: rgba(255, 255, 255, .28); }
.tier--rec .tier__inc li::before { background: #fff; }

/* Online Shop catalogue scale, drawn as a ruler: four segments with ticks. */
.scale { margin-top: 56px; }
.scale h3 { color: var(--text); }

/* The conversion step after pricing. */
.cta-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; margin-top: clamp(64px, 10vh, 112px); padding-top: 40px; border-top: 1px solid var(--navy); }
.cta-row__lead { grid-column: 1 / span 6; font: var(--f-title); letter-spacing: var(--tr-title); text-wrap: balance; }
.cta-row__act { grid-column: 8 / span 5; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.cta-row__note { font: var(--f-caption); color: var(--ink-soft); }

/* 05 Contact */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; margin-top: clamp(56px, 9vh, 96px); }
.contact__intro { grid-column: 1 / span 5; }
.contact__note { font: var(--f-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; }
.contact__lead { margin-top: 18px; max-width: 34ch; font: var(--f-lead); color: var(--ink-soft); text-wrap: pretty; }
.contact__direct { display: grid; row-gap: 18px; margin-top: 44px; }
.contact__direct li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--rule); }
.contact__direct .meta { color: var(--ink-soft); }
.contact__direct a, .contact__direct address { font: var(--f-lead); font-weight: 600; font-style: normal; text-decoration: none; }
.contact__direct a { background: linear-gradient(var(--navy), var(--navy)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease-out); width: fit-content; }
.contact__direct a:hover { background-size: 100% 1px; }

.form { position: relative; grid-column: 7 / span 6; }
.form__body { display: grid; gap: 20px; }
html:not(.js) .form__body { display: none; }
.form__nojs { font-weight: 600; }
.form__body[hidden], .form__done[hidden] { display: none; }
.field { display: grid; gap: 7px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field label { font: var(--f-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-soft); }
.field input:not([type='checkbox']), .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid rgba(0, 49, 89, .4); border-radius: 2px; background: rgba(255, 255, 255, .7); color: var(--text); font: var(--f-body); transition: border-color .2s, background-color .2s; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:not([type='checkbox']):hover, .field select:hover, .field textarea:hover { border-color: var(--navy); }
.field input:not([type='checkbox']):focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--navy); background: #fff; }
.field [aria-invalid='true']:not([type='checkbox']) { border-color: var(--err); background: #FFF8F7; }
.field__err { display: flex; align-items: center; gap: 8px; font: var(--f-caption); font-weight: 600; color: var(--err); }
.field__err::before { content: '!'; flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--err); color: #fff; font-size: 11px; line-height: 1; }
.field__err[hidden] { display: none; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.consent { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font: var(--f-small) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-soft) !important; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); }
.consent a { color: var(--text); }
.form__alert { padding: 12px 14px; border: 1px solid var(--err); background: #FFF8F7; color: var(--err); font: var(--f-caption); font-weight: 600; }
.form__alert[hidden] { display: none; }
.form__submit { justify-self: start; }
.form__submit[disabled] { cursor: progress; background-color: #0B3D69; }
.spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.form[aria-busy='true'] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__done { display: grid; justify-items: start; gap: 12px; padding-block: 12px; outline: none; }
.form__done-ico { width: 52px; height: 52px; }
.form__done-ico circle { fill: rgba(34, 181, 212, .22); }
.form__done-ico path { fill: none; stroke: var(--navy); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.form__done-t { font: var(--f-h2); letter-spacing: var(--tr-h2); }
.form__done-d { max-width: 32ch; font: var(--f-lead); color: var(--ink-soft); }
.form__again { margin-top: 10px; }

/* 06 FAQ: native <details>, so it works without script and by keyboard. */
.faq { margin-top: clamp(48px, 8vh, 88px); border-bottom: 1px solid var(--rule); }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item summary { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: baseline; min-height: 44px; padding: 24px 0; list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }

.faq__q { grid-column: 3 / span 9; font: var(--f-h4); letter-spacing: var(--tr-title); text-wrap: balance; transition: color .2s; }
.faq__item summary:hover .faq__q { color: var(--blue); }
.faq__icon { grid-column: 12; grid-row: 1; justify-self: end; align-self: center; position: relative; width: 14px; height: 14px; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--navy); transition: transform .3s var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__item p { max-width: 62ch; margin: 0 0 30px calc((100% - 11 * var(--gap)) / 12 * 2 + 2 * var(--gap)); font: var(--f-body); color: var(--ink-soft); text-wrap: pretty; }
.faq__end { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; margin: 44px 0 0 calc((100% - 11 * var(--gap)) / 12 * 2 + 2 * var(--gap)); }
.faq__end p { font: var(--f-lead); color: var(--ink-soft); }
.link-work--quiet { font-weight: 600; }

/* ---- Load: the page is drawn, then set. ~1.3 s, and everything is usable from the first frame. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .spine__line { animation: draw-y 1.1s var(--ease-draw) both; }
  .ruler__line { animation: draw-x .8s var(--ease-draw) .15s both; }
  .ruler__ticks i { animation: fade .3s ease-out both; animation-delay: calc(.35s + var(--i, 0) * 30ms); }
  .ruler .node { animation: fade .25s ease-out .4s both; }
  .ruler .meta { animation: rise .5s var(--ease-out) .45s both; }
  .hero__title .line > span { animation: reveal .8s var(--ease-out) .35s both; }
  .hero__title .line--indent > span { animation-delay: .45s; }
  .guide { animation: draw-y .5s var(--ease-draw) 1.1s both; }
  .work__head::before { transform-origin: left; animation: draw-x .8s var(--ease-draw) 1.05s both; }
  .work__head .node, .work__head > *:not(.node) { animation: fade .5s ease-out 1.25s both; }
  .cards { animation: fade .6s ease-out 1.35s both; }
  .hero__lead { animation: rise .6s var(--ease-out) .8s both; }
  
  
  .facts li { animation: rise .6s var(--ease-out) 1.2s both; }
  .facts li:nth-child(2) { animation-delay: 1.28s; } .facts li:nth-child(3) { animation-delay: 1.36s; } .facts li:nth-child(4) { animation-delay: 1.44s; }
  .hero__actions > a { animation: rise .6s var(--ease-out) .9s both; }
  
}
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes reveal { from { transform: translateY(130%); } }

/* ---- Tablet --------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .top { gap: 24px; }
  .top__logo img { height: 66px; }
  .top.is-stuck .top__logo img { height: 46px; }
  .top__nav ol { gap: 16px; }
  .top__nav ol a { white-space: nowrap; }
  .top__nav .idx { display: none; }
  
  .hero__copy { grid-column: 1 / span 6; }
}

@media (max-width: 999px) {
  /* Tablet: one project per row, equal width. */
  .cards { grid-template-columns: 1fr; max-width: 640px; row-gap: 80px; }
  .card { grid-column: 1 / -1; }
  .work__lead, .sec__lead { grid-column: 6 / span 7; }
  
  /* sections 03–06 on a tablet */
  
  
  .tier { grid-column: span 6; }
  
  
  
  
  .cta-row__lead, .cta-row__act { grid-column: 1 / -1; }
  .cta-row__act { margin-top: 26px; }
  .contact__intro, .form { grid-column: 1 / -1; }
  .form { margin-top: 52px; }
  /* Tablet: copy on top, the plan under it at full column width, facts two by two. */
  .guide { display: none; }
  .hero__copy { grid-column: 1 / -1; grid-row: 1; display: block; }
  .hero__lead { max-width: 38ch; }
  .hero__actions { margin-top: 26px; }
  
  
  .facts { grid-row: 3; grid-template-columns: 1fr 1fr; row-gap: 26px; }
}

@media (max-width: 1000px) {
  /* Menu mode: the nav becomes a drawer that also carries the primary action. */
  .top__cta { display: none; }
  .top__menu { display: inline-flex; align-items: center; order: 3; height: 44px; padding: 0 12px; border: 1px solid rgba(0, 49, 89, .4); border-radius: 3px; background: none; color: var(--navy); font: var(--f-label); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .lang { order: 2; }
  .top__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--m) 22px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .top__nav.open { display: block; }
  .top__nav ol { flex-direction: column; gap: 0; }
  .top__nav ol a { width: 100%; padding: 13px 0; font-size: var(--fs-nav-drawer); border-bottom: 1px solid var(--rule); background: none; }
  .top__nav .idx { display: inline; }
  .drawer-cta { display: block; padding-top: 20px; }
  .drawer-cta .btn { width: 100%; justify-content: center; }
}
/* ---- Mobile: recomposed, not shrunk ----------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --m: 20px; --spine: 12px; --gap: 16px; }
  /* phone type scale: same roles, tighter values */
  :root { --fs-display: clamp(34px, 11vw, 52px); --lh-display: .98; --tr-display: -.02em; }
  .top, .hero, .work, .sec { padding-left: 34px; }
  .node { left: calc(var(--spine) - 34px); }
  .ruler__line, .work__head::before, .sec__head::before { left: calc(var(--spine) - 34px); }
  

  :root { --header-h: 76px; --header-h-stuck: 64px; }
  .top { gap: 16px; }
  .top__logo img { height: 50px; }
  .top.is-stuck .top__logo img { height: 40px; }
  .top__nav { padding-left: 34px; padding-right: 20px; }

  .hero { min-height: 0; padding-top: 30px; padding-bottom: 48px; }
  .ruler { display: flex; justify-content: space-between; gap: 12px; }
  .meta { letter-spacing: .12em; }
  .ruler__ticks{ display: none; }
  .hero__title { margin-top: 26px; }
  .hero__title .line--indent { padding-left: 0; margin-top: .1em; }
  .hero__foot { display: block; margin-top: 0; padding-top: 24px; }
  
  
  .facts { grid-template-columns: 1fr 1fr; row-gap: 22px; margin-top: 40px; }
  .facts li { padding-left: 12px; }

  .hero__lead { max-width: 34ch; }
  .hero__copy { display: block; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 26px; }
     /* at phone width the keys would be ~5px: the drawing stays, its labels go */
  .guide { display: none; }
  .btn { height: 52px; }

  .work, .sec { padding-top: 56px; }
  .work__head, .sec__head { row-gap: 16px; }
  .work__head h2, .work__lead, .sec__head h2, .sec__lead, #kontakt .sec__head h2 { grid-column: 1 / -1; }
  .cards { grid-template-columns: 1fr; row-gap: 64px; margin-top: 56px; }
  .card__media { margin-top: 0; }
  .card__media::before { display: none; }
  .work__lead::before, .sec__lead::before { display: none; }
  .work__lead, .sec__lead { padding-top: 0; }

  .work__more::after { display: none; }
  
  

  /* sections 03–06 on a phone: one column, in reading order */
  
  
  
  
  
  
  
  
  .tier { grid-column: 1 / -1; }
  .tiers { row-gap: 52px; }
  .tier__for { min-height: 0; }
  
  .cta-row { padding-top: 32px; }
  .cta-row__act .btn { width: 100%; justify-content: center; }
  .contact__direct { margin-top: 36px; }
  .field-row { grid-template-columns: 1fr; }
  .form__submit { width: 100%; justify-self: stretch; justify-content: center; }
  .faq__item summary { padding: 20px 0; row-gap: 6px; }
  
  .faq__q { grid-column: 1 / span 10; grid-row: 2; }
  .faq__icon { grid-row: 2; }
  .faq__item p, .faq__end { margin-left: 0; }
}
@media (max-width: 380px) {
  /* very narrow phones: facts one per row, so their captions never break into stray words */
  .facts { grid-template-columns: 1fr; row-gap: 18px; }
  .facts li { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .spinner { animation-duration: 2s; }
}

/* ==================================================================================================================
   Restructure pass: Storitve (products + process line), Naše delo (two up front, chessboard of seven), Vzdrževanje
   ================================================================================================================== */

/* ---- 02 Storitve: the four services. Three products first; the fourth (after launch) is set apart on a tinted band. ---- */

.svc__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding-bottom: 8px; font: var(--f-button); letter-spacing: var(--tr-button); text-decoration: none; color: var(--navy); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .25s var(--ease-out); }
.svc__go i { font-style: normal; display: inline-block; transition: transform .3s var(--ease-out); }
.svc__go:hover, .svc__go:focus-visible { color: var(--blue); }
.svc__go:hover i, .svc__go:focus-visible i { transform: translate(3px, 3px); }

/* ---- 02.5 Process: one construction line that turns twice, with a node and a step at each stop. ---- */
.proc { margin-top: clamp(72px, 11vh, 128px); }
.flow { position: relative; margin-top: 44px; }
.flow__line { display: none; }
.flow__steps { display: grid; }
.flow__step { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 0 0 34px 28px; border-left: 1px solid var(--line); }
.flow__step::before { content: ''; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; background: var(--navy); }
.flow__step:last-child { padding-bottom: 8px; }
.flow__n { grid-row: 1 / span 2; font: 750 var(--fs-price) / .9 var(--font); letter-spacing: -.045em; color: var(--text); font-variant-numeric: tabular-nums; }
.flow__step h3 { align-self: end; font: var(--f-h4); letter-spacing: var(--tr-title); text-wrap: balance; }
.flow__step p { margin-top: 8px; font: var(--f-small); color: var(--ink-soft); text-wrap: pretty; }
.flow__cta { margin-top: 30px; }
.flow__path { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; }

@media (min-width: 1280px) {
  .flow { aspect-ratio: 1200 / 460; }
  .flow__line { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .flow__steps { display: block; }
  .flow__step { position: absolute; left: calc(var(--x) / 12 * 1%); top: calc(var(--y) / 4.6 * 1%); width: calc(var(--w) / 12 * 1%); padding: 0; border-left: 0; }
  .flow__step::before { display: none; }
  .flow__step--l { grid-template-columns: 1fr auto; text-align: right; }
  .flow__step--l .flow__n { grid-column: 2; grid-row: 1 / span 2; }
  .flow__step--l h3, .flow__step--l p { grid-column: 1; }
  .flow__step--l p { margin-left: auto; }
  .flow__cta { position: absolute; left: calc(420 / 12 * 1%); top: calc(400 / 4.6 * 1%); margin-top: 0; transform: translateY(-50%); }
}

/* The line draws itself once as the block enters; each step follows the line. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .flow .flow__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
   .reveal-ready .flow .flow__step, .reveal-ready .flow .flow__cta{ opacity: 0; }
  .reveal-ready .flow.in .flow__path { animation: flow-draw 2.5s var(--ease-draw) forwards; }
  
  .reveal-ready .flow.in .flow__step { animation: rise .7s var(--ease-out) var(--d, 0s) both; }
  .reveal-ready .flow.in .flow__cta { animation: rise .7s var(--ease-out) 2.7s both; }
}
@keyframes flow-draw { to { stroke-dashoffset: 0; } }

/* ---- 03 Naše delo: the chessboard of all seven. Image and text cells swap sides on every row. ---- */
.chess { margin-top: clamp(64px, 10vh, 112px); }
.chess > .sub__title { margin-bottom: 8px; }
.chess__list { display: grid; row-gap: clamp(64px, 9vh, 96px); margin-top: 52px; }
.card.chess__row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); grid-column: auto; align-items: stretch; }
.chess__row .card__media { grid-column: 1 / span 6; grid-row: 1; }
.chess__row .chess__info { grid-column: 7 / span 6; grid-row: 1; }
.chess__row:nth-child(even) .card__media { grid-column: 7 / span 6; }
.chess__row:nth-child(even) .chess__info { grid-column: 1 / span 6; }
.chess__info { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; margin-top: 28px; padding: clamp(24px, 2.6vw, 44px); border: 1px solid rgba(0, 49, 89, .22); background: rgba(255, 255, 255, .6); }
.chess__row:nth-child(even) .chess__info { background: #EEF5FA; }
.chess__info .card__title { font-size: var(--fs-h3); }
.chess__info .card__text { max-width: 40ch; }
.chess__info .card__go { margin-top: 22px; }
.chess__row .card__tags { margin-top: 0; }
.chess .work__more--end { margin-top: clamp(56px, 8vh, 88px); }
.cards[hidden], .work__more[hidden], .chess[hidden] { display: none; }

/* Under the price plates: a hairline, one sentence and a button to the care plans. */
.after-price { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--navy); }

.after-price .btn { flex: none; }
@media (max-width: 760px) { .after-price .btn { width: 100%; justify-content: center; } }

/* ---- 05 Vzdrževanje ---- */
.tiers--care .tier { grid-column: span 4; }
.tier__price strong.is-word { font-size: var(--fs-h3); letter-spacing: -.03em; }
.tier__price .tier__from { text-transform: uppercase; }
.sec__note { max-width: 70ch; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); font: var(--f-small); color: var(--ink-soft); text-wrap: pretty; }

/* ---- responsive ---- */
@media (max-width: 1240px) and (min-width: 1001px) { .top__nav ol { gap: 16px; } .top__nav .idx { display: none; } }
@media (max-width: 999px) {
  
  
  .chess__row .card__media, .chess__row:nth-child(even) .card__media, .chess__row .chess__info, .chess__row:nth-child(even) .chess__info { grid-column: 1 / -1; grid-row: auto; }
  .chess__info { margin-top: 0; border-top: 0; }
  .tiers--care .tier { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  
  
  
  
  .chess__row .card__media { margin-top: 0; }
  .chess__info { padding: 22px 20px; gap: 22px; }
  .chess__info .card__title { font-size: var(--fs-title); }
}

/* ==================================================================================================================
   Restructure pass 2: Postopek as its own section, Naše delo split, free review band
   ================================================================================================================== */

/* ---- 02.5 Postopek ---- */
.sec.proc { margin-top: 0; }
.proc .flow { margin-top: clamp(56px, 8vh, 96px); }
.flow__n { position: relative; z-index: 1; }

/* ---- 03 Naše delo: text and the "other projects" button on the left, the two projects stacked on the right ---- */
.work__split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; margin-top: clamp(64px, 10vh, 112px); }
.work__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h-stuck) + 36px); }
.work__side .work__lead { grid-column: auto; max-width: 32ch; }
.work__side .work__more { margin-top: 32px; }
.work__split .cards { grid-column: 6 / span 7; grid-template-columns: 1fr; margin-top: 0; row-gap: clamp(72px, 10vh, 110px); }
.work__split .card { grid-column: auto; }
.work__split[hidden] { display: none; }

/* ---- 05.5 Free review band ---- */
.audit { padding-block: clamp(40px, 6vh, 72px); }
.audit__wrap { position: relative; }
.audit__wrap::before { content: ''; position: absolute; top: 0; left: calc(var(--spine) - var(--m)); width: calc(var(--m) - var(--spine)); height: 1px; background: var(--line); }
.audit__wrap .node { top: 0; }
.audit__panel { padding: clamp(32px, 5vw, 72px); background: var(--navy); color: #fff; border-radius: 2px; }
.audit__panel .meta { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .78); }
.audit__panel .meta::before { content: ''; width: 7px; height: 7px; background: var(--cyan); }
.audit__panel h2 { margin-top: 18px; max-width: 18ch; font: var(--f-h2); letter-spacing: var(--tr-h2); text-wrap: balance; }
.audit__lead { margin-top: 20px; max-width: 46ch; font: var(--f-lead); color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.audit .form { grid-column: auto; margin-top: clamp(32px, 5vh, 52px); }
.audit__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.audit .field label { color: rgba(255, 255, 255, .78); }
.audit .field input:not([type='checkbox']) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); color: #fff; }
.audit .field input:not([type='checkbox'])::placeholder { color: rgba(255, 255, 255, .5); }
.audit .field input:not([type='checkbox']):hover { border-color: #fff; }
.audit .field input:not([type='checkbox']):focus-visible { background: rgba(255, 255, 255, .14); border-color: #fff; }
.audit .field [aria-invalid='true']:not([type='checkbox']) { border-color: #FFB4AE; background: rgba(255, 180, 174, .12); }
.audit .field__err { color: #FFC9C4; }
.audit .field__err::before { background: #FFC9C4; color: var(--navy); }
.audit__foot { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 24px 36px; }
.audit .consent { color: rgba(255, 255, 255, .82) !important; }
.audit .consent a { color: #fff; }
.audit .consent input { accent-color: var(--cyan); }
.audit .form__alert { border-color: #FFB4AE; background: rgba(255, 180, 174, .14); color: #FFDAD6; }
.audit :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgba(34, 181, 212, .5); }
.audit .form__submit { justify-self: start; }
.audit .form__done-ico circle { fill: rgba(34, 181, 212, .3); }
.audit .form__done-ico path { stroke: #fff; }
.audit .form__done-d { color: rgba(255, 255, 255, .82); }
.audit .btn--light::after { background: var(--cyan); }

@media (max-width: 999px) {
  .work__split { display: flex; flex-direction: column; }
  .work__side { display: contents; }
  .work__side .work__lead { order: 1; max-width: 46ch; }
  .work__split .cards { order: 2; margin-top: 48px; max-width: 640px; }
  .work__side .work__more { order: 3; margin-top: 44px; }
  .audit__fields { grid-template-columns: 1fr; }
  .audit__foot { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .audit__panel { padding: 28px 22px; }
  .audit .form__submit { width: 100%; justify-content: center; justify-self: stretch; }
  
}

/* ==================================================================================================================
   Restructure pass 3: Postopek with seven station plates, Naše delo on navy with swapping captions, extra service plates
   ================================================================================================================== */

/* ---- Postopek (seven stages) ---- */
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 26px; height: 26px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow__plate { position: relative; display: grid; place-items: center; width: 52px; height: 52px; background: linear-gradient(140deg, #F4F9FD, #DCEAF5); border: 1px solid var(--navy); box-shadow: 0 0 0 6px var(--paper); }
.flow__plate::after { content: ''; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; background: var(--cyan); }
.flow__plates { display: none; }
.flow__track { fill: none; stroke: var(--navy); stroke-width: 9; stroke-dasharray: 1 21; opacity: .26; }
.flow__path { stroke-width: 1.6; }
/* stacked version (phones, tablets): the plate sits on the line beside its step */
.flow__step { padding: 0 0 38px 52px; }
.flow__step::before { display: none; }
.flow__plate--in { position: absolute; left: -27px; top: -6px; }
.flow__step:last-child { padding-bottom: 8px; }
.flow__n { font-size: var(--fs-price); }

@media (min-width: 1280px) {
  .flow { aspect-ratio: 1200 / 800; }
  .flow__plates { display: block; }
  .flow__plate--in { display: none; }
  .flow__plates .flow__plate { position: absolute; left: calc(var(--x) / 12 * 1%); top: calc(var(--y) / 8 * 1%); transform: translate(-50%, -50%); }
  .flow__step { left: calc(var(--x) / 12 * 1%); top: calc(var(--y) / 8 * 1%); width: calc(var(--w) / 12 * 1%); padding: 0; border-left: 0; }
  .flow__cta { left: 50%; top: calc(752 / 8 * 1%); transform: translate(-50%, -50%); --cta-from: translate(-50%, -38%); --cta-to: translate(-50%, -50%); }
}
.flow__cta { --cta-from: translateY(12px); --cta-to: none; }

/* The line draws itself once; the plates and steps appear as it reaches them. Keyframes state both ends, so nothing stays hidden. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .flow .flow__plates .flow__plate, .reveal-ready .flow .flow__track, .reveal-ready .flow .flow__step, .reveal-ready .flow .flow__cta { opacity: 0; }
  .reveal-ready .flow.in .flow__path { animation: flow-draw 3.5s var(--ease-draw) forwards; }
  .reveal-ready .flow.in .flow__plates .flow__plate { animation: plate-pop .55s var(--ease-out) var(--d) both; }
  .reveal-ready .flow.in .flow__step { animation: step-pop .7s var(--ease-out) var(--d) both; }
  .reveal-ready .flow.in .flow__track { animation: track-in 1.2s ease-out 2.6s both; }
  .reveal-ready .flow.in .flow__cta { animation: cta-pop .7s var(--ease-out) 3.8s both; }
}
@keyframes plate-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes step-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes track-in { from { opacity: 0; } to { opacity: .26; } }
@keyframes cta-pop { from { opacity: 0; transform: var(--cta-from); } to { opacity: 1; transform: var(--cta-to); } }

/* ---- 02.4 extra service plates sit under the list with room to breathe ---- */

/* ---- 03 Naše delo on navy (colours are re-pointed for this section only, so every rule inside keeps working) ---- */
.work { --navy: #fff; --text: #fff; --ink-soft: rgba(255, 255, 255, .76); --line: rgba(255, 255, 255, .34); --rule: rgba(255, 255, 255, .22); --blue: #8FE0F2; position: relative; z-index: 2; background: #003159; color: #fff; }
.work::before { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--spine); width: 1px; background: rgba(255, 255, 255, .32); }
.work .btn--line:hover { background-color: #fff; color: #003159; }
.work .card__media::after { --c: rgba(255, 255, 255, .6); }
.work .chess__info { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .05); }
.work .chess__row:nth-child(even) .chess__info { background: rgba(255, 255, 255, .1); }
.work .card:hover .card__frame img { transform: scale(1.015); }

/* captions on the left (desktop): the one in view is shown, the other waits; on phones each project carries its own text */
.card__hit { display: block; text-decoration: none; }
.card__body { display: none; }
.work__caps { display: none; }
.card__body .card__meta { margin-top: 24px; }
.card__body .card__title { margin-top: 10px; }
.card__body .card__text { margin-top: 10px; max-width: 46ch; color: var(--ink-soft); }
.card__body .card__tags { margin-top: 18px; }
.card__body .svc__go { margin-top: 22px; }
html:not(.js) .card__body { display: block; }
html:not(.js) .work__caps { display: none !important; }
@media (max-width: 999px) { .card__body { display: block; } }

@media (min-width: 1000px) {
  .work__caps { display: grid; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
  .work__cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s; }
  .work__cap.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .work__cap h3 { margin-top: 12px; font: var(--f-h3); letter-spacing: var(--tr-h3); text-wrap: balance; }
  .work__cap-text { margin-top: 14px; max-width: 40ch; font: var(--f-body); color: var(--ink-soft); text-wrap: pretty; }
  .work__cap .card__tags { margin-top: 18px; }
  .work__cap .svc__go { margin-top: 22px; }
  .work__side .work__lead { max-width: 38ch; }
}
@media (min-width: 1000px) and (max-height: 760px) { .work__caps { margin-top: 30px; padding-top: 22px; } .work__cap h3 { font-size: var(--fs-title); } }
@media (prefers-reduced-motion: reduce) { .work__cap { transition: none; } }

/* ==================================================================================================================
   Pass 4: compact Storitve tiles, gradients on the light sections, hover results on the process plates, tighter pricing
   ================================================================================================================== */

/* ---- Light sections get the same icy gradient as the hero, so the page no longer reads as flat white ---- */
.sec {
  --ring: #E9F2F9;
  background:
    radial-gradient(64% 56% at var(--gx, 100%) var(--gy, 0%), rgba(34, 181, 212, .22), transparent 70%),
    radial-gradient(58% 50% at var(--hx, 0%) var(--hy, 82%), rgba(27, 100, 181, .13), transparent 72%),
    linear-gradient(180deg, #E3EFF8 0%, #EAF3FA 46%, var(--paper) 100%);
}
#storitve { --gx: 100%; --gy: 6%; --hx: 0%; --hy: 88%; }
#postopek { --gx: 0%; --gy: 4%; --hx: 100%; --hy: 78%; }
#cenik { --gx: 100%; --gy: 0%; --hx: 0%; --hy: 70%; }
#vzdrzevanje { --gx: 0%; --gy: 10%; --hx: 100%; --hy: 84%; }
#pregled { --gx: 100%; --gy: 0%; --hx: 0%; --hy: 100%; }
#kontakt { --gx: 0%; --gy: 0%; --hx: 100%; --hy: 76%; }
#faq { --gx: 100%; --gy: 12%; --hx: 0%; --hy: 90%; }
.flow__plate { box-shadow: 0 0 0 6px var(--ring); }

/* ---- 02 Storitve: compact tiles, table-like, three for a new site and three for an existing one ---- */
.why__head { row-gap: 14px; }
.why__art svg { max-height: 300px; }
.why__lead { max-width: 30ch; }
.tiles__label { margin-top: clamp(28px, 4vh, 44px); margin-bottom: 14px; color: var(--ink-soft); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--navy); border-left: 1px solid var(--rule); }

/* ---- Postopek: hovering (or focusing) a plate shows what the stage delivers ---- */
.flow__plate { cursor: help; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), translate .3s var(--ease-out); }
.flow__plate .ico { transition: stroke .3s var(--ease-out), transform .4s var(--ease-out); }
.flow__plate:hover, .flow__plate:focus, .flow__plate:focus-visible { z-index: 6; translate: 0 -5px; background: var(--navy); box-shadow: 0 0 0 6px var(--ring), 0 0 0 8px rgba(34, 181, 212, .6); outline: none; }
.flow__plate:hover .ico, .flow__plate:focus .ico, .flow__plate:focus-visible .ico { stroke: #fff; transform: scale(1.14) rotate(-5deg); }
.flow__tip { position: absolute; left: 50%; bottom: calc(100% + 16px); z-index: 7; padding: 9px 13px; background: #fff; border: 1px solid var(--navy); border-left: 4px solid var(--cyan); color: var(--text); font: 600 var(--fs-caption) / 1.25 var(--font); letter-spacing: 0; white-space: nowrap; box-shadow: 0 14px 28px -16px rgba(0, 49, 89, .6); opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.flow__tip::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: #fff; border-right: 1px solid var(--navy); border-bottom: 1px solid var(--navy); transform: translateX(-50%) rotate(45deg); }
.flow__plate:hover .flow__tip, .flow__plate:focus .flow__tip, .flow__plate:focus-visible .flow__tip { opacity: 1; transform: translate(-50%, 0); }
.flow__plate--in .flow__tip { left: 0; transform: translate(0, 6px); white-space: normal; width: max-content; max-width: 210px; }
.flow__plate--in .flow__tip::after { left: 22px; }
.flow__plate--in:hover .flow__tip, .flow__plate--in:focus .flow__tip, .flow__plate--in:focus-visible .flow__tip { transform: translate(0, 0); }

/* ---- Pricing: the packages are followed directly by the care plans ---- */
.price-note { margin-top: 18px; font: var(--f-caption); color: var(--ink-soft); }
.tiers--care { margin-top: clamp(40px, 6vh, 64px); }
.tiers--care .tier__for { min-height: 0; }
.tiers--care .tier__inc { margin-bottom: 28px; }
.sec--tight .cta-row { margin-top: clamp(56px, 8vh, 88px); }

@media (max-width: 999px) {
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  
  
  .why__art svg { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__plate:hover, .flow__plate:focus, .flow__plate:focus-visible { translate: none; }
   .flow__plate:hover .ico, .flow__plate:focus .ico{ transform: none; }
}

/* ---- One continuous icy background for the whole page: glows alternate right and left all the way down (placed by script,
   see paintPage in blueprint.js), so light sections flow into each other without seams. The navy section simply covers it. ---- */
body { background-color: #EAF3FA; background-repeat: no-repeat; background-image: radial-gradient(1150px 900px at 100% 0, rgba(34, 181, 212, .24), transparent 70%); }
body::before { display: none; }
.sec { background: none; }

/* ---- Price and care plates: white (the recommended one stays navy), so text does not sink into the tinted background ---- */
.tier { background: #fff; border-color: rgba(0, 49, 89, .22); box-shadow: 0 18px 36px -28px rgba(0, 49, 89, .45); }
.tier--rec { background: var(--navy); border-color: var(--navy); }
.tier__price { border-top-color: rgba(0, 49, 89, .16); }
.tier--rec .tier__price { border-top-color: rgba(255, 255, 255, .28); }

/* ---- Free review: a full-width navy band (like Naše delo), the form sits straight on it ---- */
.audit { --text: #fff; --ink-soft: rgba(255, 255, 255, .82); position: relative; z-index: 2; padding-block: clamp(56px, 9vh, 104px); background: #003159; color: #fff; }
.audit::before { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--spine); width: 1px; background: rgba(255, 255, 255, .32); }
.audit__panel { padding: 0; background: none; border-radius: 0; }
.audit__wrap::before { background: rgba(255, 255, 255, .34); }
.audit .node { --navy: #fff; }

.audit .btn--light:hover { background-color: #EAF3FA; }
@media (max-width: 760px) { .audit__panel { padding: 0; } }

/* ---- Scroll reveal: headings, plates, tiles, questions and forms rise into place, staggered, once, as they enter the screen.
   Only when script and motion are allowed (class reveal-ready); the class is dropped after the reveal so hover transitions return. ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .rv { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal-ready .rv.rv--pop { transform: translateY(26px) scale(.965); }
  .reveal-ready .rv.in { opacity: 1; transform: none; }
  .reveal-ready .sec__head::before, .reveal-ready .work__head::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-draw); }
  .reveal-ready .sec__head.in::before, .reveal-ready .work__head.in::before { transform: scaleX(1); }
}

/* ---- 02 Storitve: six large plates, one drawing and one line of text each (layout after artlebedev.ru/tools, in Blueprint drawing language) ---- */
.stiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(48px, 7vh, 80px); }
.stile { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px 26px 28px; background: #fff; border: 1px solid rgba(0, 49, 89, .2); color: var(--text); text-decoration: none; box-shadow: 0 22px 40px -32px rgba(0, 49, 89, .5); transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out); }

.stile__art { display: grid; place-items: center; flex: 1; min-height: 210px; margin: 10px 0 22px; padding: 14px 6px; background: linear-gradient(140deg, #F1F7FC, #DDEAF5); }
.stile__art svg { width: min(100%, 300px); height: auto; overflow: visible; transition: transform .5s var(--ease-out); }

.stile h3 { font: var(--f-h4); font-size: var(--fs-title); letter-spacing: var(--tr-title); text-wrap: balance; }
.stile p { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(0, 49, 89, .18); font: var(--f-small); color: var(--ink-soft); transition: color .3s, border-color .3s; }
.stile__go { position: absolute; right: 24px; top: 18px; font-style: normal; font-size: 20px; opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.stile:hover, .stile:focus-visible { background: var(--navy); color: #fff; border-color: var(--navy); }
 .stile:hover p, .stile:focus-visible p{ color: rgba(255, 255, 255, .78); }
.stile:hover p, .stile:focus-visible p { border-top-color: rgba(255, 255, 255, .3); }
.stile:hover .stile__art, .stile:focus-visible .stile__art { background: rgba(255, 255, 255, .06); }

.stile:hover .stile__art svg, .stile:focus-visible .stile__art svg { transform: scale(1.05) translateY(-3px); }
.stile:hover .stile__go, .stile:focus-visible .stile__go { opacity: 1; transform: none; }
.stile:focus-visible { outline-offset: -5px; outline-color: #fff; }
@media (max-width: 999px) { .stiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .stiles { grid-template-columns: 1fr; } .stile__art { min-height: 190px; } .stile__go { opacity: .7; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stile:hover .stile__art svg { transform: none; } }

/* equal illustration panels; titles reserve two lines on desktop so all six plates line up */
.stile__art { flex: none; aspect-ratio: 260 / 172; min-height: 0; }
@media (min-width: 1000px) { .stile h3 { min-height: 2.3em; } }

/* ---- cartoon-style drawings: thick outlines, flat fills, few large shapes; the light panel stays light on hover ---- */
.stile__art { background: linear-gradient(140deg, #E8F3FB, #CFE4F3); }
.stile__art svg { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stile__art svg * { vector-effect: non-scaling-stroke; }
.stile__art .fw { fill: #fff; } .stile__art .fp { fill: #CFE6F4; }  .stile__art .fc { fill: var(--cyan); } .stile__art .fn { fill: var(--navy); }
.stile__art .ns { stroke: none; }
.stile:hover .stile__art, .stile:focus-visible .stile__art { background: linear-gradient(140deg, #F4FAFE, #DCEBF7); }
.stile:hover .stile__art svg, .stile:focus-visible .stile__art svg { stroke: var(--navy); }
.stile:hover .stile__art .fn, .stile:focus-visible .stile__art .fn { fill: var(--navy); }
.stile__art svg { width: min(100%, 320px); }

/* ---- Builder, livelier: 12 s loop, the arm hammers without pause, each row is laid brick by brick (stepped reveal) ---- */
@media (prefers-reduced-motion: no-preference) {
  .why__art .row, .why__art .man, .why__art .brick { animation-duration: 12s; }
  .why__art .row { animation-timing-function: steps(9, end); }
  .why__art .arm { animation: arm2 12s linear infinite both; }
}
@keyframes arm2 { 0% { transform: rotate(-8deg); } 2% { transform: rotate(26deg); } 4% { transform: rotate(-8deg); } 6% { transform: rotate(26deg); } 8% { transform: rotate(-8deg); } 10% { transform: rotate(26deg); } 12% { transform: rotate(-8deg); } 14% { transform: rotate(26deg); } 16% { transform: rotate(-8deg); } 18% { transform: rotate(26deg); } 20% { transform: rotate(-8deg); } 22% { transform: rotate(26deg); } 24% { transform: rotate(-8deg); } 26% { transform: rotate(26deg); } 28% { transform: rotate(-8deg); } 30% { transform: rotate(26deg); } 32% { transform: rotate(-8deg); } 34% { transform: rotate(26deg); } 36% { transform: rotate(-8deg); } 38% { transform: rotate(26deg); } 40% { transform: rotate(-8deg); } 42% { transform: rotate(26deg); } 44% { transform: rotate(-8deg); } 46% { transform: rotate(26deg); } 48% { transform: rotate(-8deg); } 50% { transform: rotate(26deg); } 52% { transform: rotate(-8deg); } 54% { transform: rotate(26deg); } 56% { transform: rotate(-8deg); } 58% { transform: rotate(26deg); } 60% { transform: rotate(-8deg); } 62% { transform: rotate(26deg); } 64% { transform: rotate(-8deg); } 66% { transform: rotate(26deg); } 68% { transform: rotate(-8deg); } 70% { transform: rotate(26deg); } 72% { transform: rotate(-8deg); } 74% { transform: rotate(26deg); } 76% { transform: rotate(-8deg); } 78% { transform: rotate(26deg); } 80% { transform: rotate(-8deg); } 82% { transform: rotate(26deg); } 84% { transform: rotate(-8deg); } 86% { transform: rotate(26deg); } 88% { transform: rotate(-8deg); } 90% { transform: rotate(26deg); } 92% { transform: rotate(-8deg); } 94% { transform: rotate(26deg); } 96% { transform: rotate(-8deg); } 98% { transform: rotate(26deg); } 100% { transform: rotate(-8deg); } }

/* ==== Hero polish (2026-09-30): slightly smaller headline, stronger supporting copy, two CTAs, one reassurance line,
   larger plan, facts pulled in, larger nav. One spacing step (--hs) between headline, copy, actions, plan and facts. ==== */
.hero { --hs: clamp(22px, 3.4vh, 38px); }
.hero__title { margin-top: clamp(24px, 4.4vh, 52px); line-height: .98; }
.hero__foot { padding-top: var(--hs); }
.hero__copy { justify-content: flex-start; gap: clamp(30px, 5.2vh, 52px); }   /* lead and actions read as one group */
.hero__lead { max-width: 33ch; font-size: var(--fs-lead); line-height: 1.45; }
.hero__actions { gap: 32px; }
.hero__note { margin-top: 14px; font: var(--f-caption); line-height: 1.4; color: var(--ink-soft); text-wrap: pretty; }

.facts { margin-top: var(--hs); }
.facts span { font-size: var(--fs-caption); line-height: 1.4; }

/* no section numbers or index labels anywhere: the FAQ starts at the first column */
.faq__q { grid-column: 1 / span 11; grid-row: 1; }
.faq__item p, .faq__end { margin-left: 0; }

/* Hero polish, pass 2: secondary link extends its construction line on hover/focus; lead and diagram read a little firmer. */
.link-work { padding-right: 0; margin-right: 0; transition: background-size .35s var(--ease-out), color .25s, padding-right .35s var(--ease-out), margin-right .35s var(--ease-out); }
.link-work:hover, .link-work:focus-visible { padding-right: 14px; margin-right: -14px; color: var(--blue); }

@media (prefers-reduced-motion: reduce) { .link-work, .link-work__arrow { transition: none; } }
/* Bold pictogram strokes (shop cart): scale with the drawing instead of staying hairline-thin. */
/* .thick: the cart now uses the same 3px stroke as the other pictograms */

/* Headline mask: room below the baseline so the descenders of g and j are never clipped (layout height unchanged). */
.hero__title .line { padding-bottom: .24em; margin-bottom: -.24em; }

/* Storitve head: the phrase and a quiet link sit left of the drawing. */
.why__copy { grid-column: 1 / span 5; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.why__copy .why__lead { max-width: 36ch; }
@media (max-width: 999px) {
  .why__copy { grid-column: 1 / span 8; }
}
@media (max-width: 760px) {
  .why__copy { grid-column: 1 / -1; }
}

/* ---- Hero, second composition: headline, text and action on the left; a line-drawn iPad with the seven real sites on the right ---- */
.hero__title { margin-top: 0; }
.hero__title .line--indent { padding-left: 0; }
@media (min-width: 1000px) {
  .hero__foot { align-items: center; padding-top: clamp(30px, 5vh, 60px); }
  .hero__copy { grid-column: 1 / span 6; grid-row: 1; align-self: center; justify-content: center; gap: clamp(22px, 3.6vh, 38px); }
  .facts { margin-top: clamp(36px, 6vh, 64px); }
}

.device { grid-column: 7 / -1; grid-row: 1; align-self: center; width: 100%; max-width: 860px; margin: 0; padding-left: 20px; }
.device__dim { display: block; height: 9px; margin-bottom: 14px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 1px 9px no-repeat, linear-gradient(var(--navy), var(--navy)) 100% 0 / 1px 9px no-repeat, linear-gradient(var(--line), var(--line)) 0 4px / 100% 1px no-repeat; }
/* The iPad is a drawing, not a product shot: a thin navy outline on the paper, a ring for the camera, nothing metallic. */
.device__body { position: relative; padding: 14px; border: 1.5px solid var(--navy); border-radius: 28px; background: var(--paper); }
.device__body::before { content: ''; position: absolute; top: 4px; left: 50%; width: 4px; height: 4px; border: 1px solid var(--navy); border-radius: 50%; transform: translateX(-50%); }
.device__screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border: 1px solid var(--navy); border-radius: 10px; background: #0C1A2B; }
.device__slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; filter: blur(14px); pointer-events: none; transition: opacity .9s ease, filter .9s ease; }
.device__slide.is-prev { z-index: 1; }
.device__slide.is-on { z-index: 2; opacity: 1; filter: blur(0); }
.device__page { will-change: transform; }
.device__page img { display: block; width: 100%; height: auto; }
.device__scrim { position: absolute; inset: 0 0 auto 0; height: 96px; z-index: 3; pointer-events: none; background: linear-gradient(rgba(5, 12, 22, .72), rgba(5, 12, 22, 0)); }
.device__tap { position: absolute; top: 0; bottom: 0; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.device__tap--prev { left: 0; width: 38%; }
.device__tap--next { right: 0; width: 62%; }
/* Story progress: one bar per site; finished sites are full, the current one fills over the time its page scrolls. */
.device__bars { position: absolute; z-index: 5; top: 5px; left: 12px; right: 12px; display: flex; gap: 4px; }
.device__bar { position: relative; flex: 1; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.device__bar::before, .device__bar i { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.device__bar::before { background: rgba(255, 255, 255, .34); }
.device__bar i { background: #fff; transform: scaleX(0); transform-origin: left; }
.device__bar.is-done i { transform: scaleX(1); }
.device__bar:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.device__meta { position: absolute; z-index: 4; top: 30px; left: 14px; right: 14px; display: flex; flex-direction: column; gap: 1px; margin: 0; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); pointer-events: none; }
.device__name { font: 600 var(--fs-caption) / 1.25 var(--font); }
.device__type { font: 400 var(--fs-label) / 1.3 var(--font); opacity: .86; }
@media (prefers-reduced-motion: reduce) { .device__bar.is-on i { transform: scaleX(1); } .device__slide { transition: none; } }
@media (prefers-reduced-motion: no-preference) {
  .device { animation: rise .8s var(--ease-out) .55s both; }
  .device__meta.swap { animation: swap .5s var(--ease-out) both; }
}
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 999px) {
  .hero__foot { padding-top: clamp(30px, 4vh, 44px); }
  .hero__title { margin-bottom: clamp(20px, 3vh, 30px); }
  .device { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 44px; padding-left: 0; }
}
@media (max-width: 760px) {
  .device { margin-top: 40px; }
  .device__body { padding: 10px; border-radius: 22px; }
  .device__body::before { top: 3px; }
  .device__bars { top: 3px; left: 10px; right: 10px; }
  .device__meta { top: 26px; left: 12px; }
}

/* ---- The page opens in its "already scrolled a little" state: compact solid header, no empty band above the hero ---- */
:root { --header-h: var(--header-h-stuck); }
.hero { padding-top: 0; }
@media (max-width: 760px) { .hero { padding-top: 6px; } }

/* ---- Text is black everywhere on the light sections; buttons and text-link actions stay navy. ---- */
.top__nav ol a, .lang__item, .lang__item[aria-current], .lang a.lang__item:hover,
.hero__title, .hero__lead, .hero__note, .facts strong, .facts span { color: #000; }

/* Text-link actions count as buttons: they stay navy (they used to inherit it from the body, which is black now). */
.link-work, .svc__go, .card__go { color: var(--navy); }
/* Geologica is wider than the old typeface: button labels may wrap instead of being clipped in narrow plates. */
.tier__cta, .more-toggle { white-space: normal; height: auto; min-height: 54px; padding-block: 10px; line-height: 1.25; text-align: center; justify-content: center; }

/* ---- Storitve plates: each pictogram plays a short scene on hover or keyboard focus (no motion when reduced motion is set) ---- */
.stile__art .s-check { vector-effect: none; stroke-width: 10.5px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.stile__art .s-check2 { stroke-width: 5.5px; }
.c-spoke, .s-shield, .s-spark, .r-star { transform-box: fill-box; transform-origin: center; }
.b-lid { transform-box: view-box; transform-origin: 48px 94px; }
.r-spin { transform-box: view-box; transform-origin: 130px 106px; }
.p-cable { transform-box: view-box; transform-origin: 12px 86px; }
.b-gap { opacity: 0; }
.c-box { opacity: 0; transform: translateY(-46px); }
.r-star { opacity: 0; transform: scale(.3) rotate(-30deg); }
@media (prefers-reduced-motion: no-preference) {
  /* Landing: the cursor glides onto the button and the button reacts, as if you were hovering a real page */
  .l-cur { transition: transform .65s cubic-bezier(.3, .7, .2, 1); }
  .l-btn, .l-lbl { transition: fill .3s ease .45s; }
  :is(.stile:hover, .stile:focus-visible) .l-cur { transform: translate(-40px, 8px); }
  :is(.stile:hover, .stile:focus-visible) .stile__art .l-btn { fill: var(--navy); }
  :is(.stile:hover, .stile:focus-visible) .stile__art .l-lbl { fill: #fff; }

  /* Briefcase: the lid swings open and shows the inside */
  .b-lid { transition: transform .6s cubic-bezier(.3, 1.35, .5, 1); }
  .b-gap { transition: opacity .3s ease .05s; }
  :is(.stile:hover, .stile:focus-visible) .b-lid { transform: rotate(-14deg); }
  :is(.stile:hover, .stile:focus-visible) .b-gap { opacity: 1; }

  /* Cart: the wheels turn, the cart rolls forward a little and a parcel drops into the basket */
  .c-cart { transition: transform .55s ease-out; }
  .c-box { transition: transform .5s cubic-bezier(.4, 1.5, .5, 1) .12s, opacity .2s ease .12s; }
  :is(.stile:hover, .stile:focus-visible) .c-cart { transform: translateX(6px); }
  :is(.stile:hover, .stile:focus-visible) .c-box { opacity: 1; transform: none; }
  :is(.stile:hover, .stile:focus-visible) .c-spoke { animation: roll .9s ease-in-out both; }

  /* Redesign: the refresh arrows turn once, then the page restyles itself */
  .r-bar1, .r-bar2, .r-badge { transition: fill .35s ease .55s; }
  .r-star { transition: opacity .3s ease .65s, transform .5s cubic-bezier(.3, 1.6, .5, 1) .65s; }
  :is(.stile:hover, .stile:focus-visible) .r-spin { animation: turn .9s cubic-bezier(.6, 0, .3, 1) both; }
  :is(.stile:hover, .stile:focus-visible) .stile__art .r-bar1 { fill: var(--cyan); }
  :is(.stile:hover, .stile:focus-visible) .stile__art .r-bar2 { fill: var(--navy); }
  :is(.stile:hover, .stile:focus-visible) .stile__art .r-badge { fill: #BDE8F3; }
  :is(.stile:hover, .stile:focus-visible) .r-star { opacity: 1; transform: none; }

  /* Plug: it pushes into the socket once and stays plugged in; the contacts light up (it slides back out when the pointer leaves) */
  .p-plug, .p-cable { transition: transform .65s cubic-bezier(.5, 0, .3, 1); }
  .p-slot { transition: fill .25s ease .5s; }
  :is(.stile:hover, .stile:focus-visible) .p-plug { transform: translateX(22px); }
  :is(.stile:hover, .stile:focus-visible) .p-cable { transform: scaleX(1.55); }
  :is(.stile:hover, .stile:focus-visible) .stile__art .p-slot { fill: var(--cyan); }
  :is(.stile:hover, .stile:focus-visible) .p-spark { animation: spark 1s ease-in both; }
  /* Shield: the tick draws itself, the shield lifts and the sparkles twinkle */
  .s-shield { transition: transform .4s ease-out; }
  :is(.stile:hover, .stile:focus-visible) .s-shield { transform: scale(1.04); }
  :is(.stile:hover, .stile:focus-visible) .s-check { animation: draw .8s ease-out .15s both; }
  :is(.stile:hover, .stile:focus-visible) .s-spark { animation: twinkle 1s ease-in-out .3s both; }
  :is(.stile:hover, .stile:focus-visible) .s-spark2 { animation-delay: .5s; }
}
@keyframes roll { to { transform: rotate(360deg); } }
@keyframes turn { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.6) rotate(90deg); } }
@keyframes spark { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* ---- Postopek, large station plates (about 2.5x): the snake is re-laid out on a 1200 x 1010 board with 126-unit plates ---- */
.flow__plate .ico { width: 52%; height: 52%; stroke-width: 1.3; }
.flow__plate::after { width: 14px; height: 14px; }
/* stacked version (tablet, phone): the plate grows with the screen, from 52px on a phone to 84px on a tablet */
.flow { --pl: clamp(52px, 10.5vw, 84px); }
.flow__step { padding-left: calc(var(--pl) / 2 + 26px); }
.flow__plate--in { width: var(--pl); height: var(--pl); left: calc(var(--pl) / -2 - 1px); top: calc(var(--pl) / -2 + 18px); }
@media (min-width: 1280px) {
  .flow { aspect-ratio: 1200 / 1010; }
  .flow__plates .flow__plate { width: 10.5%; height: auto; aspect-ratio: 1; top: calc(var(--y) / 10.1 * 1%); box-shadow: 0 0 0 10px var(--ring); }
  .flow__plates .flow__plate .ico { width: 54%; height: 54%; stroke-width: 1.2; }
  .flow__step { top: calc(var(--y) / 10.1 * 1%); padding-left: 0; }
  .flow__cta { left: calc(200 / 12 * 1%); top: calc(935 / 10.1 * 1%); }
  .flow__plate::after { width: 18px; height: 18px; }
}

/* ---- Postopek: each station plate plays a short scene of its stage on hover/focus; stages 3, 4 and 6 also open a card with a real site ---- */
.flow__plate .ico--scene { stroke: currentColor; color: var(--navy); stroke-width: 2.2; transition: color .3s var(--ease-out); }
.flow__plate:hover .ico.ico--scene, .flow__plate:focus .ico.ico--scene, .flow__plate:focus-visible .ico.ico--scene { color: #fff; stroke: currentColor; transform: none; }
.ico--scene .k-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ico--scene .k-pop, .ico--scene .k-grow, .ico--scene .k-fly, .ico--scene .k-lens { transform-box: fill-box; transform-origin: center; }
.ico--scene .k-grow { transform-origin: bottom; }

@media (prefers-reduced-motion: no-preference) {
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-line { animation: kdraw .7s ease-out both; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-sign { animation-duration: .9s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-t2, :is(.flow__plate:hover, .flow__plate:focus-visible) .k-c2 { animation-delay: .18s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-t3, :is(.flow__plate:hover, .flow__plate:focus-visible) .k-c3 { animation-delay: .36s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-t4 { animation-delay: .54s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-t5 { animation-delay: .72s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-rise { animation-duration: 1s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-stamp { animation: kpop .4s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-tip { animation: kpop .4s cubic-bezier(.3, 1.6, .5, 1) .95s both; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-img { animation: kpop .45s cubic-bezier(.3, 1.4, .5, 1) both; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-grow { animation: kgrow .55s ease-out both; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-g2 { animation-delay: .12s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-g3 { animation-delay: .24s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-lens { animation: klens 1s ease-in-out both; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-fly { animation: kfly .5s cubic-bezier(.3, 1.3, .5, 1) both; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-f2 { animation-delay: .14s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-f3 { animation-delay: .28s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .k-f4 { animation-delay: .42s; }
  :is(.flow__plate:hover, .flow__plate:focus-visible) .flow__shot--scroll img { animation: kshot 6s ease-in-out .25s both; }
}
@keyframes kdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kpop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes kgrow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes klens { from { transform: translate(-26px, 12px); } to { transform: none; } }
@keyframes kfly { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kshot { from { transform: none; } to { transform: translateY(-72%); } }

/* the card: a real page of ours instead of a line of text */
.flow__tip--card { display: grid; gap: 8px; width: 288px; max-width: calc(100vw - 56px); padding: 10px 12px 12px 10px; white-space: normal; }
.flow__shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--navy); background: #0C1A2B; }
.flow__shot img { display: block; width: 100%; height: auto; }
.flow__cap { font: 400 var(--fs-label) / 1.3 var(--font); letter-spacing: 0; opacity: .72; }
.flow__res { font: 600 var(--fs-caption) / 1.25 var(--font); letter-spacing: 0; }
.flow__shot--dev { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 12px 8px 14px; border-color: var(--rule); background: linear-gradient(140deg, #EEF5FB, #D6E6F3); }
.dv { position: relative; display: block; overflow: hidden; border: 1.5px solid var(--navy); background: #0C1A2B; flex: none; }
.dv img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dv--lap { width: 112px; height: 72px; border-radius: 4px 4px 0 0; }
.dv--tab { width: 52px; height: 72px; border-radius: 6px; }
.dv--ph { width: 30px; height: 58px; border-radius: 6px; }
.flow__plate--in .flow__tip--card { width: min(288px, calc(100vw - 80px)); }

/* scenes fill their plate better than the old single-stroke icons */
.flow__plate .ico.ico--scene { width: 68%; height: 68%; stroke-width: 2.3; }
@media (min-width: 1280px) { .flow__plates .flow__plate .ico.ico--scene { width: 74%; height: 74%; } }

/* ---- Buttons: a colour fill wipes across on hover (in from the left, out to the right), the arrow nudges, the base line draws ---- */
.btn { isolation: isolate; transition: color .3s ease, transform .16s var(--ease-out); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .42s cubic-bezier(.65, 0, .25, 1); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { background-color: var(--navy); }
.btn--light { transition: color .3s ease, transform .16s var(--ease-out); }
.btn--light::before { background: var(--cyan); }
.btn--light:hover, .audit .btn--light:hover { background-color: #fff; color: var(--navy); }
.btn--line::before { background: var(--navy); }
.btn--line:hover { background-color: transparent; color: #fff; }
.work .btn--line:hover { background-color: transparent; color: #003159; }
.work .btn--line::before { background: #fff; }

/* On the white price plates the button is solid navy, so it stands out against the plate */
.tier:not(.tier--rec) .tier__cta { background-color: var(--navy); color: #fff; box-shadow: none; }
.tier:not(.tier--rec) .tier__cta::after { display: block; }
.tier:not(.tier--rec) .tier__cta:hover { background-color: var(--navy); color: #fff; }
.tier:not(.tier--rec) .tier__cta::before { background: var(--blue); }

/* ---- Audit fixes ---- */
strong, b { font-weight: 600; }
.why__head h2 { margin-top: -14px; }   /* the empty node row above it used to push the Storitve headline 14px lower than every other section */
.svc__go { min-height: 28px; }
.flow__plate:focus-visible { outline: 3px solid var(--cyan); outline-offset: 6px; }

/* pause control of the hero iPad */
.device__pause { position: absolute; z-index: 6; top: 32px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(5, 12, 22, .5); cursor: pointer; transition: background .2s; }
.device__pause:hover { background: rgba(5, 12, 22, .72); }
.device__pause span { display: block; width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.device__pause[aria-pressed='true'] span { width: 0; height: 0; margin-left: 3px; border: 6px solid transparent; border-left: 10px solid #fff; border-right: 0; }
.device__pause:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .device__pause { display: none; } }

/* footer */
.foot { position: relative; z-index: 2; padding: clamp(40px, 6vh, 64px) var(--m) clamp(32px, 5vh, 48px); border-top: 1px solid var(--rule); background: var(--paper); }
.foot__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 24px; align-items: start; }
.foot__brand { grid-column: 1 / span 4; }
.foot__name { font: var(--f-h4); letter-spacing: var(--tr-title); }
.foot__tag, .foot__contact, .foot__links { font: var(--f-small); }
.foot__tag { margin-top: 4px; }
.foot__contact { grid-column: 5 / span 4; display: grid; justify-items: start; gap: 2px; font-style: normal; }
.foot__links { grid-column: 9 / span 4; }
.foot__legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--rule); font: var(--f-caption); line-height: 1.5; }
.foot a { display: inline-block; padding-block: 4px; color: var(--text); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0 1px no-repeat; transition: background-size .3s var(--ease-out); }
.foot a:hover, .foot a:focus-visible { background-size: 100% 1px; }
@media (max-width: 999px) {
  .foot__brand { grid-column: 1 / -1; }
  .foot__contact { grid-column: 1 / span 7; }
  .foot__links { grid-column: 8 / -1; }
}
@media (max-width: 760px) {
  .foot { padding-left: 34px; }
  .foot__contact, .foot__links { grid-column: 1 / -1; }
}

/* ---- Legal pages (privacy policy) and the 404 page ---- */
.doc { position: relative; z-index: 1; padding: clamp(40px, 7vh, 80px) var(--m) clamp(64px, 10vh, 112px); }
.doc__in { max-width: 760px; }
.doc__title { margin-bottom: 14px; font: var(--f-h2); letter-spacing: var(--tr-h2); }
.doc__meta { margin-bottom: 40px; font: var(--f-caption); }
.doc__sec { margin-bottom: 30px; }
.doc__h { margin-bottom: 10px; font: var(--f-h4); letter-spacing: var(--tr-title); }
.doc p { max-width: 68ch; margin-bottom: 12px; font: var(--f-body); }
.doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.doc__back { margin-top: 40px; }
@media (max-width: 760px) { .doc { padding-left: 34px; } }

/* ---- Contact plates: the email plate and the WhatsApp plate, fixed at the bottom of the screen on every device.
        Phone: a full-width bar. Tablet and desktop: two compact plates in the bottom right corner. ---- */
.dock { position: fixed; z-index: 40; display: grid; grid-template-columns: minmax(0, auto) auto; gap: 8px; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); right: 20px; bottom: 20px; }
.dock.is-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }
.dock__mail { display: grid; align-content: center; gap: 3px; min-height: 58px; padding: 8px 18px; border-radius: 3px; background: var(--navy); color: #fff; text-decoration: none; box-shadow: 0 14px 30px -14px rgba(0, 49, 89, .65); transition: background-color .25s; }
.dock__mail:hover { background: #0B3D69; }
.dock__lead { font: var(--f-label); letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.dock__addr { font: 600 15px / 1.2 var(--font); white-space: nowrap; }
.dock__wa { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 84px; min-height: 58px; padding: 0 12px; border: 1.5px solid var(--navy); border-radius: 3px; background: #fff; color: var(--navy); font: 600 12px / 1 var(--font); text-decoration: none; box-shadow: 0 14px 30px -14px rgba(0, 49, 89, .45); transition: background-color .25s, color .25s; }
.dock__wa:hover { background: var(--navy); color: #fff; }
.dock__wa svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dock__mail:focus-visible, .dock__wa:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 760px) {
  .dock { left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: rgba(249, 252, 254, .96); box-shadow: none; }
  .dock__mail { padding: 8px 14px; box-shadow: none; }
  .dock__addr { font-size: clamp(13px, 3.85vw, 15px); }
  .dock__wa { min-width: 84px; padding: 0 10px; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }