/* Blaze — the shared layer of the subpages (projekty, proc-blaze, kariera, kontakt).
   Tokens, type, header, buttons and footer taken from index.html so the pages read as one site; the home keeps its
   own copy because its header is owned by the intro animation. Everything page-specific lives in the page itself. */

:root { color-scheme: dark; --bg: #000; --fg: #F8F8F8; --muted: rgba(248, 248, 248, .68); --faint: rgba(248, 248, 248, .45);
        --line: rgba(248, 248, 248, .14); --heat: #FF6633; --gold: #FFC861; --panel: #121214;
        --gutter: clamp(16px, 3vw, 48px); --sec-space: clamp(120px, 20vh, 220px);
        --hf: "Figtree"; --hw: 500; --hls: -.045em; --hs: 1.16;   /* Figtree only (his pick, 2026-10-26); more weight = Figtree 700, as on Kariéra */
        --bar-top: clamp(20px, 4vh, 40px); --logo-w: clamp(112px, 9vw, 150px); --logo-h: calc(var(--logo-w) * 246 / 853); }
html, body { margin: 0; background: var(--bg); }
html { scroll-behavior: smooth; }
body { color: var(--fg); font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6;
       overflow-x: hidden; }
html.menu-open, html.menu-open body { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--heat); color: #000; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- type */
.h { margin: 0; font: var(--hw) calc(1em * var(--hs)) / 1.05 var(--hf), sans-serif; letter-spacing: var(--hls); text-wrap: balance; }
.h1 { font-size: clamp(34px, 5.2vw, 84px); line-height: 1.02; max-width: 16ch; }
.h2 { font-size: clamp(28px, 3.6vw, 56px); max-width: 20ch; }
.h3 { font-size: clamp(22px, 2.4vw, 34px); }
.h4 { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; }
.accent { font: inherit; }
.is-mix .accent { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; font-size: 1.22em;
                  letter-spacing: -.01em; line-height: .8; }
.dot { color: var(--heat); }
.eyebrow { margin: 0 0 18px; font: 500 13px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--heat); }
.lead { margin: 20px 0 0; max-width: 56ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.small { font-size: 14px; color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
p { text-wrap: pretty; }

/* ---- layout */
.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
.page-head { padding: calc(var(--bar-top) + var(--logo-h) + clamp(64px, 12vh, 140px)) 0 clamp(48px, 8vh, 96px); }
.page-head .lead { max-width: 60ch; }
.sec { padding: var(--sec-space) 0 0; }
.sec--tight { padding-top: clamp(64px, 10vh, 120px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.sec-head { max-width: 760px; }
.sec-head .lead { margin-top: 20px; }
.cols { display: grid; gap: 32px clamp(24px, 4vw, 64px); }
.cols--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cols--2, .cols--3 { grid-template-columns: 1fr; } }

/* ---- header: the home's bar with the logo inside it. At the top a normal full-width header on the logo's line; a little
   way down it shrinks into the floating see-through bar */
.bar { position: fixed; z-index: 40; top: var(--bar-top); left: 0; right: 0; height: var(--logo-h);
       display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); padding: 0 var(--gutter);
       border: 1px solid transparent; border-radius: 0; background: rgba(14, 14, 16, 0);
       transition: top .55s cubic-bezier(.65, 0, .35, 1), left .55s cubic-bezier(.65, 0, .35, 1), right .55s cubic-bezier(.65, 0, .35, 1),
                   height .55s cubic-bezier(.65, 0, .35, 1), padding .55s cubic-bezier(.65, 0, .35, 1), border-radius .55s ease,
                   background-color .4s ease, border-color .4s ease; }
.bar__logo { display: flex; align-items: center; height: 100%; flex: none; }   /* centred in the bar, also once it floats and the logo shrinks */
.bar__logo img { height: var(--logo-h); width: auto; transition: height .55s cubic-bezier(.65, 0, .35, 1); }
.bar__logo:focus-visible { outline-offset: 6px; border-radius: 4px; }
.bar__nav { display: flex; gap: clamp(18px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
/* as on the home: at the top the nav and the button sit on the right; in the floating bar the nav moves next to the logo
   and the button keeps the right end. The auto margin goes on the bar's flex child (the <nav>), not on the list inside it */
.bar > nav { margin-left: auto; }
html.is-float .bar > nav { margin-left: 0; margin-right: auto; }
.bar__nav a { position: relative; display: inline-block; padding: 6px 0; color: var(--muted); font: 500 15px/1 "Inter", sans-serif;
              text-decoration: none; transition: color .2s ease; }
.bar__nav a:hover, .bar__nav a[aria-current="page"] { color: var(--fg); }
.bar__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 102, 51, .15), var(--heat) 80%, var(--gold)); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.bar__nav a::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 5px; height: 5px; border-radius: 50%;
  background: #FFF3D6; box-shadow: 0 0 6px 2px var(--gold), 0 0 14px 4px rgba(255, 102, 51, .55); opacity: 0;
  transform: translateX(-50%); transition: left .45s cubic-bezier(.65, 0, .35, 1), opacity .25s ease; }
.bar__nav a:hover::after, .bar__nav a:focus-visible::after, .bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.bar__nav a:hover::before, .bar__nav a:focus-visible::before { left: 100%; opacity: 1; }
.bar__nav a[aria-current="page"]::after { background: var(--heat); }
/* the page you are on gets no hover spark: it is already marked (Vít, 2026-10-26: „I'm active on the page, so I don't need it") */
.bar__nav a[aria-current="page"]::before { display: none; }
.bar__nav a:focus-visible, .bar__cta:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 2px; }
.bar__cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 6px; flex: none;
            background: var(--heat); color: #000; font: 600 14px/1 "Inter", sans-serif; text-decoration: none; gap: 8px; }
html.is-float .bar { --side: max(var(--gutter), calc((100vw - 880px) / 2));
                     top: 14px; left: var(--side); right: var(--side); height: 58px; padding: 0 8px 0 20px; border-radius: 12px;
                     background: rgba(18, 18, 21, .55); border-color: rgba(248, 248, 248, .09);
                     -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
html.is-float .bar__logo img { height: 24px; }
/* the menu button: phones only. The bar's nav hides, and the four pages open as one full screen */
.bar__menu { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 42px; padding: 0 4px; border: 0;
             background: none; color: var(--fg); font: 500 15px/1 "Inter", sans-serif; cursor: pointer; }
.bar__menu i { position: relative; display: block; width: 20px; height: 12px; }
.bar__menu i::before, .bar__menu i::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
                                            transition: transform .3s ease, top .3s ease; }
.bar__menu i::before { top: 0; } .bar__menu i::after { top: 10px; }
html.menu-open .bar__menu i::before { top: 5px; transform: rotate(45deg); }
html.menu-open .bar__menu i::after { top: 5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 30; display: none; flex-direction: column; justify-content: flex-end;
        padding: 0 var(--gutter) clamp(32px, 8vh, 72px); background: var(--bg); }
html.menu-open .menu { display: flex; }
.menu__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.menu__list a { display: inline-block; padding: 6px 0; color: var(--fg); text-decoration: none;
                font: var(--hw) clamp(32px, 9vw, 48px)/1.1 var(--hf), sans-serif; letter-spacing: var(--hls); }
.menu__list a[aria-current="page"] { color: var(--heat); }
.menu__foot { margin-top: 32px; display: grid; gap: 8px; font-size: 15px; color: var(--muted); }
.menu__foot a { color: var(--fg); text-decoration: none; }
@media (max-width: 760px) {
  .bar__nav, .bar > nav { display: none; }
  .bar__menu { display: inline-flex; }
  html.is-float .bar { --side: var(--gutter); }
}
@media (max-width: 480px) { .bar__cta { display: none; } }   /* the menu carries the consultation link */

/* ---- buttons: the home's, with the rolling label and the arrow (site.js builds them) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
       border-radius: 6px; border: 1px solid transparent; font: 600 16px/1 "Inter", sans-serif; text-decoration: none; cursor: pointer;
       overflow: hidden; isolation: isolate; background: none; color: var(--fg);
       transition: background-color .2s ease, border-color .2s ease, color .25s ease, scale .15s ease; }
.btn--primary { background: var(--heat); color: #000; }
.btn--primary:hover { background: var(--heat); }
.btn--ghost { border-color: rgba(248, 248, 248, .35); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--ghost::before { content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 50%);
  width: var(--md, 400px); height: var(--md, 400px); margin: calc(var(--md, 400px) / -2) 0 0 calc(var(--md, 400px) / -2);
  border-radius: 50%; background: var(--fg); transform: scale(0); transition: transform .55s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.btn--ghost.is-hot::before { transform: scale(1); }
.btn--ghost.is-hot { color: #000; border-color: var(--fg); }
.btn:active, .bar__cta:active { scale: .97; }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--small { min-height: 42px; padding: 0 18px; font-size: 14px; }
.mi-label { display: inline-flex; overflow: hidden; height: 1.3em; line-height: 1.3; }
.mi-ch { display: inline-block; white-space: pre; text-shadow: 0 1.3em currentColor;
         transition: transform .5s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--i) * 16ms); }
.is-hot .mi-ch { transform: translateY(-1.3em); }
.mi-icon { display: inline-flex; flex: none; width: 18px; height: 18px; transition: transform .6s cubic-bezier(.34, 1.9, .5, 1); }
.bar__cta .mi-icon, .btn--small .mi-icon { width: 16px; height: 16px; }
.is-hot .mi-icon { transform: rotate(var(--rot, -45deg)); }
.mi-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4vh, 40px); }
@media (max-width: 480px) { .actions .btn { flex: 1 1 100%; } }
/* a plain text link with the arrow */
.link { display: inline-flex; align-items: center; gap: .35em; color: var(--fg); text-decoration: none; font-weight: 500;
        border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .2s ease; }
.link:hover { border-color: var(--heat); }
.link .mi-icon { width: .9em; height: .9em; }
.link:hover .mi-icon { transform: rotate(-45deg); }

/* ---- the spark canvas (site.js): buttons throw embers on press (the fall onto the heading's full stop is gone, Vít 2026-10-26) */
#spark { position: fixed; inset: 0; z-index: 35; width: 100vw; height: 100vh; pointer-events: none; }

/* ---- the footer: the home's end state (the outline of the wordmark), without the animation */
.foot { position: relative; overflow: hidden; padding: clamp(32px, 7vh, 72px) 0 0; }
.foot__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
              gap: 32px clamp(24px, 4vw, 64px); }
.foot__tag { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.foot__h { margin: 0 0 14px; font: 500 12px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.foot__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.foot a { color: var(--fg); text-decoration: none; transition: color .2s ease; }
.foot a:hover { color: var(--heat); }
.foot__legal { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: clamp(24px, 4vh, 40px);
               padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.foot__legal a { color: inherit; }
/* the big wordmark: the word between the gutters in the logo's own font (Lexend 570), charcoal letters, still (site.js
   draws it on a canvas; the outline and its animation are the home's only, Vít 2026-10-26) */
.foot__word { position: relative; z-index: 0; margin-top: clamp(24px, 4vh, 40px); user-select: none; }   /* width + left: site.js */
.foot__word canvas { display: block; width: 100%; max-width: none; }
@media (max-width: 767px) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot__tag { grid-column: 1 / -1; }
  .foot__legal { flex-direction: column; }
}


/* ---- details / accordion (FAQ, roles) */
.acc { border-top: 1px solid var(--line); }
.acc > summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer;
                 font: 500 clamp(17px, 1.4vw, 20px)/1.35 "Inter", sans-serif; color: var(--fg); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+"; flex: none; font: 400 26px/1 "Inter", sans-serif; color: var(--muted); transition: transform .3s ease; }
.acc[open] > summary::after { transform: rotate(45deg); color: var(--heat); }
.acc > summary:hover { color: var(--heat); }
.acc > summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 2px; }
.acc__body { padding: 0 0 26px; max-width: 64ch; color: var(--muted); font-size: clamp(15px, 1.1vw, 17px); }
.acc__body p { margin: 0 0 12px; }
.acc__body p:last-child { margin: 0; }

/* ---- reveal on scroll (site.js adds .is-in); nothing moves for reduced motion */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .mi-ch, .mi-icon, .btn::before, .bar__nav a::after, .bar__nav a::before, .bar, .bar__logo img { transition: none; }
}

/* ---------------------------------------------------------------- shared elements, born on Proč Blaze (2026-10-26) */
/* the switching words (Vít: one sentence with highlighted words that keep switching, an element for the whole site).
   Markup: <span class="swap" data-swap="a|b|c">a</span>; site.js rolls the words up one after another while the
   sentence is on screen, and the slot's width follows the word, so the sentence reflows smoothly */
.swap { display: inline-block; position: relative; vertical-align: top; height: 1lh; overflow: hidden; white-space: nowrap; color: var(--fg);
        transition: width .6s cubic-bezier(.65, 0, .35, 1); }
.swap__w { position: absolute; left: 0; top: 0; padding-right: .03em; white-space: nowrap; opacity: 0; transform: translateY(100%);
           transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .45s ease; }
.swap__w.is-on { opacity: 1; transform: none; }
.swap__w.is-out { opacity: 0; transform: translateY(-100%); }
.is-mix .swap { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: 0; }

/* a section on its own surface, with the home's dome as its edges: the profile y ∝ |u|^2.5 across the full width (flat in
   the middle, bending gently, never vertical), 110 px deep on a desktop and 3 % of the width on phones, as on the home.
   Markup: <section class="deep"><svg class="edge">…</svg><div class="deep__body">…</div><svg class="edge edge--bot">…</svg></section> */
.deep { --edge: clamp(32px, 7.6vw, 110px); --deep-bg: #18181b; margin-top: var(--sec-space); }
@media (max-width: 767px) { .deep { --edge: max(12px, 3vw); } }
.deep .edge { display: block; width: 100%; height: var(--edge); margin: 0 0 -1px; }
.deep .edge--bot { margin: -1px 0 0; }
.deep .edge path { fill: var(--deep-bg); }
.deep__body { background: var(--deep-bg); padding: clamp(64px, 10vh, 120px) 0; }

/* the hanging bot on the header's „Konzultace", as on the home: the canvas starts 6 px up inside the button and sits behind it,
   so the fist is hidden behind the edge and only the arm and the body come out below (site.js draws it) */
.mi-hangwrap { position: relative; display: inline-flex; flex: none; }
.mi-hangwrap > .bar__cta { z-index: 1; }
.mi-hang { position: absolute; z-index: 0; top: calc(100% - 6px); right: 0; width: 84px; height: 76px; pointer-events: none; }
@media (max-width: 480px) { .mi-hangwrap { display: none; } }

/* the sentence written by the scroll (the home's numbers moment, shared; site.js writes it). --writ-run = how long it pins */
.writ { --writ-run: 100vh; position: relative; height: calc(100vh + var(--writ-run)); }
.writ__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 0 var(--gutter); }
.writ__s { position: relative; z-index: 2; max-width: 1100px; margin: 0; text-align: center;
  font: 500 clamp(24px, 3.1vw, 48px)/1.35 "Inter", sans-serif; letter-spacing: -.02em; color: var(--muted); text-wrap: balance; }
.writ__ch { opacity: var(--o, 1); }
.writ__cnt { display: inline-grid; font: var(--hw) 1.12em/1 var(--hf), sans-serif; letter-spacing: var(--hls); white-space: nowrap;
             vertical-align: -.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.writ__cnt > span { grid-area: 1 / 1; }
.writ__ghost { visibility: hidden; }
.writ__live { justify-self: end; }
@media (prefers-reduced-motion: reduce) { .writ { height: auto; padding: var(--sec-space) 0; } .writ__stage { position: static; height: auto; } }

/* ---------------------------------------------------------------- the opener: one skeleton for every subpage (Vít, 2026-10-26: Kariéra's
   headline „looks more designed than the classic in the middle"; „every headline … a little bit different … so it's not just
   copy and copy"). The orange label top left, the headline across the width, its second line on the right with the serif word
   and the orange full stop; one quiet thing at the bottom of the first screen. Each page adds its own twist (below) */
.opener { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; box-sizing: border-box;
          padding-top: calc(var(--bar-top) + var(--logo-h) + clamp(32px, 6.5vh, 96px)); padding-bottom: clamp(28px, 5vh, 52px); }
.opener > .eyebrow { margin: 0; }
.opener__h { margin-top: clamp(20px, 4vh, 44px); max-width: none; font-size: calc(clamp(46px, 9.4vw, 156px) * var(--hs)); line-height: .98; }
.opener__h > span { display: block; }
.opener__h > span:last-child { text-align: right; margin-top: -.06em; }
.opener__h.is-fit > span:last-child { text-align: left; }   /* site.js sets its indent: under the last word above, a little right */
.is-mix .opener__h .accent { font-size: 1.16em; }
.opener__foot { margin-top: auto; padding-top: clamp(32px, 6vh, 88px); }
.opener--fit { min-height: 0; }                                  /* the page's own content follows right under it */
.opener--small .opener__h { font-size: calc(clamp(34px, 5vw, 84px) * var(--hs)); }
@media (max-width: 900px) { .opener { min-height: 70vh; } .opener--fit { min-height: 0; } }

/* twist „škrt" (Proč Blaze): the promise is struck through by the pen stroke the page's rules use, once the headline is in.
   Starts at 0.5 s (was 1.5 s, timed to the spark's fall, which is gone; Vít, 2026-10-26: „it's waiting too long") */
.opener .strike { position: relative; display: inline-block; }
.opener .strike::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: max(3px, .045em); background: var(--heat);
                         transform: scaleX(0); transform-origin: 0 50%; animation: opener-strike .7s cubic-bezier(.65, 0, .35, 1) .5s forwards; }
@keyframes opener-strike { to { transform: scaleX(1); } }

/* twist „stavba" (Projekty): the letters of the serif word drop into place one after another.
   First letter at 0.15 s (was 0.9 s; Vít, 2026-10-26: „I'm waiting like 2 seconds and then the animation starts") */
.opener .build > span { display: inline-block; opacity: 0; transform: translateY(-.45em);
                        animation: opener-drop .7s cubic-bezier(.22, 1.4, .36, 1) forwards; animation-delay: calc(.15s + var(--i) * 70ms); }
@keyframes opener-drop { to { opacity: 1; transform: none; } }

/* twist „výměna" (Kontakt): the switching words in a headline: the slot may not clip the serif's descenders */
.opener__h .swap { height: 1.12em; vertical-align: -.2em; padding-bottom: .1em; font-size: 1.16em; }
.opener__h .swap + .dot { margin-left: -.08em; }   /* the slot's italic overhang left a gap before the full stop */
/* …and its way in (Vít, 2026-10-26: Kontakt had no in-animation, „something like in the projects"): the first line rises
   into place, the first switching word rolls up into its slot the way every switch after it will (site.js, .is-arriving),
   the full stop lands last, then the rest of the opener fades up */
.opener--swap .swap:not([aria-hidden]) { color: transparent; }   /* the plain word, before site.js has built the slot */
.opener--swap .opener__h > span:first-child { animation: opener-rise .9s cubic-bezier(.22, 1, .36, 1) .1s both; }
.opener--swap .opener__h .dot { animation: opener-fade .4s ease 1.05s both; }
.opener--swap .opener__h ~ * { animation: opener-up 1s cubic-bezier(.22, 1, .36, 1) 1.15s both; }
@keyframes opener-rise { from { opacity: 0; transform: translateY(.35em); } }
@keyframes opener-fade { from { opacity: 0; } }
@keyframes opener-up { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .opener .strike::after { animation: none; transform: scaleX(1); }
  .opener .build > span { animation: none; opacity: 1; transform: none; }
  .opener--swap .opener__h > span:first-child, .opener--swap .opener__h .dot, .opener--swap .opener__h ~ * { animation: none; }
}

/* ---------------------------------------------------------------- the page index „Na této stránce", shared (born on Proč Blaze; Vít,
   2026-10-26: across the site). site.js builds it from the sections marked data-ix="label". Fixed at the left edge, centred on the
   screen's height, on wide screens; only the section names, no heading (Vít, 2026-10-26);
   it waits until the opener has gone, and it steps aside over anything marked data-ix-hide (full-width pictures, a section with
   its own side menu), the next-page line and the footer.
   Only the bars stay (Vít, 2026-10-26: „the only thing that remains will be the bars"): one bar per section, the one being read
   lit; the names appear when the pointer comes onto the strip around the bars (or a link gets keyboard focus), over a dark scrim
   so they read over whatever runs underneath, and go again when it leaves */
.pindex { position: fixed; z-index: 20; left: calc(var(--gutter) - 14px); top: 50%; transform: translateY(-50%);
          width: 44px; padding: 14px 0 14px 14px; transition: opacity .3s ease, visibility .3s, width 0s .35s; }
.pindex:hover, .pindex:focus-within { width: 250px; transition: opacity .3s ease, visibility .3s, width 0s; }
.pindex::before { content: ""; position: absolute; z-index: -1; top: -60px; bottom: -60px; left: calc(14px - var(--gutter)); right: -120px;
                  background: linear-gradient(90deg, rgba(0, 0, 0, .97) 0, rgba(0, 0, 0, .95) 64%, rgba(0, 0, 0, 0));
                  opacity: 0; pointer-events: none; transition: opacity .35s ease; }
/* once open, the whole dark scrim holds the menu open (Vít, 2026-10-26: it shut when the pointer moved onto its faded part) */
.pindex:hover::before, .pindex:focus-within::before { opacity: 1; pointer-events: auto; }
.pindex.is-off { opacity: 0; visibility: hidden; }
.pindex ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pindex a { position: relative; display: block; padding: 6px 0 6px 16px; color: var(--faint); font-size: 14px; text-decoration: none; white-space: nowrap; }
.pindex a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(248, 248, 248, .22);
                    transition: background-color .2s ease; }
.pindex a span { display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), color .2s ease; }
.pindex:hover a span, .pindex:focus-within a span { opacity: 1; transform: none; }
.pindex li:nth-child(2) a span { transition-delay: 30ms; } .pindex li:nth-child(3) a span { transition-delay: 60ms; }
.pindex li:nth-child(4) a span { transition-delay: 90ms; } .pindex li:nth-child(5) a span { transition-delay: 120ms; }
.pindex li:nth-child(n+6) a span { transition-delay: 150ms; }
.pindex a:hover span, .pindex a:focus-visible span, .pindex a.is-on span { color: var(--fg); }
.pindex a:hover::before { background: rgba(248, 248, 248, .6); }
.pindex a.is-on::before { background: var(--heat); }
@media (prefers-reduced-motion: reduce) { .pindex a span { transform: none; transition: opacity .2s ease; } }
@media (max-width: 1359px) { .pindex { display: none; } }
[data-ix] { scroll-margin-top: 80px; }
/* room for the index: how far left-aligned content has to step in so it never touches the bars (0 on very wide screens).
   Only the bars' strip now; the names lie over the content on their scrim when shown */
:root { --ix-room: 0px; }
@media (min-width: 1360px) { .has-ix { --ix-room: max(0px, calc(var(--gutter) + 40px - max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))))); } }

/* ---------------------------------------------------------------- the contact section, the home's own (Vít, 2026-10-26, born
   on Proč Blaze: „let's take that, with the effect of hovering with the dot"). The same rules as the home's .cta without its
   lifting sheet (a subpage's footer simply follows). Ink-and-logos spot + the full stop's spark: site.js */
.cta { position: relative; min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column;
       align-items: center; justify-content: center; text-align: center; background: #000; padding: clamp(96px, 14vh, 140px) var(--gutter); }
.cta__label { margin: 0 0 clamp(20px, 3vh, 28px); font: 500 13px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cta__title { margin: 0; max-width: 16ch; text-wrap: balance; font: var(--hw) calc(clamp(30px, 4.4vw, 72px) * var(--hs))/1.02 var(--hf), sans-serif;
              letter-spacing: -.03em; }
.cta__lead { margin: clamp(20px, 3vh, 32px) auto 0; max-width: 56ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--muted); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 4vh, 40px); }
.cta__note { margin: 18px 0 0; font-size: 14px; color: rgba(248, 248, 248, .5); }
@media (max-width: 480px) { .cta__actions { align-self: stretch; } .cta__actions .btn { flex: 1 1 100%; } }
/* the hairline that parts it from the section above (the home's „čára" between Služby and Náš proces): the usual section
   space above it, the line at the section's top edge, over the ink */
.cta--line { margin-top: var(--sec-space); }
.cta--line::before { content: ""; position: absolute; z-index: 2; top: 0; left: 50%; width: min(1100px, calc(100% - 2 * var(--gutter)));
                     height: 1px; transform: translateX(-50%); background: rgba(248, 248, 248, .16); }
/* the cursor spot: the cursor becomes a spot of paint that eats through the black down to a grey layer of the clients'
   logos; over a button or link the cursor comes back and the paint dries out. Pointer devices only */
.spot__under { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; pointer-events: none;
               background: #1f1f22; box-sizing: border-box; padding: clamp(12px, 1.6vw, 28px);
               grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: var(--row, 26vh); gap: clamp(12px, 1.6vw, 28px); }
.spot__ink { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.has-spot { cursor: none; }
.has-spot .spot__under { display: grid; }
.has-spot a, .has-spot button { cursor: pointer; }
.cta.has-spot > :not(.spot__under):not(.spot__ink) { position: relative; z-index: 1; }
.spot__tile { display: flex; align-items: center; justify-content: center; }
.spot__tile img { max-width: 72%; max-height: 80px; object-fit: contain; filter: brightness(0) invert(1); opacity: .42; }
.spot__tile img.is-small { max-height: 44px; }