/* markgram.pl — styles of the accepted prototype (docs/moduly/M-one-platform/markgram-prototyp.html, version 5 with case
   studies, films and the contact person), copied as they are; the additions of the product are at the end of the file. */
body{margin:0;font-size:14px}img{max-width:100%}[hidden]{display:none!important}
/* Layout: a white proof sheet. One variable typeface in two widths (wide for display, normal for text), one ultramarine ink.
   The page's own device is a five-minute ruler the visitor can drag: a blueprint of a site draws itself as time passes and
   turns into the real page at 5:00. Printing marks (crop marks, the registration target) are the only ornament. */
:root {
  color-scheme: light;
  --bg: #ffffff; --paper: #f6f6f9; --ink: #0c0d12; --ink-2: #494c5a; --ink-3: #7c7f8f;
  --line: #e4e5ec; --line-strong: #c8cad6; --blue: #1f33ff; --blue-deep: #1626c9; --blue-soft: #eceeff; --blue-mid: #cdd2ff; --on-blue: #ffffff; --error: #c8261c;
  --font: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --fs-hero: clamp(2.5rem, 1.2rem + 5.6vw, 5.6rem);
  --fs-h2: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  --fs-say: clamp(2.1rem, 1.1rem + 4.6vw, 5rem);
  --fs-lead: clamp(1.08rem, 1rem + .4vw, 1.28rem);
  --fs-body: 1.0625rem; --fs-small: .9rem; --fs-xs: .76rem;
  --gutter: clamp(1.1rem, 4vw, 3rem); --r: 14px; --r-s: 10px;
  --space: clamp(4rem, 9vw, 8rem); --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--blue); color: var(--on-blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wide { font-variation-settings: "wdth" 118, "wght" 800; letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); }
.label { font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 36rem; }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }

.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--blue); background: var(--blue); color: var(--on-blue); font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn.line { background: var(--bg); color: var(--blue); }
.btn.line:hover { background: var(--blue-soft); border-color: var(--blue); }
.btn.small { padding: .55rem 1rem; font-size: var(--fs-small); }
.btn.danger { background: var(--error); border-color: var(--error); color: var(--on-blue); }
.link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; color: var(--blue); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; }

/* header */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; }
.header.is-scrolled { border-color: var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem 2rem; flex-wrap: wrap; padding-block: .9rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.2rem; font-variation-settings: "wdth" 120, "wght" 800; letter-spacing: -.03em; text-decoration: none; }
.logo svg { width: 1.5rem; height: 1.5rem; color: var(--blue); }
.nav { display: flex; align-items: center; gap: .6rem 1.5rem; flex-wrap: wrap; font-size: var(--fs-small); font-weight: 500; }
.nav a:not(.btn) { text-decoration: none; color: var(--ink-2); }
.nav a:not(.btn):hover { color: var(--blue); }

/* hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.hero h1 { font-size: var(--fs-hero); margin-top: 1rem; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .l > span { display: inline-block; }
.hero h1 b { color: var(--blue); font-weight: inherit; }
.hero__side { display: grid; gap: 1.25rem; justify-items: start; }
.hero__cta { display: flex; gap: .9rem 1.4rem; flex-wrap: wrap; align-items: center; }

.stage { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1rem; }
.stage__top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; }
.stage__clock { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); color: var(--blue); }
.stage__now { font-size: var(--fs-lead); font-weight: 500; color: var(--ink); }
.stage__play { border: 0; background: none; padding: 0; cursor: pointer; font-size: var(--fs-small); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.plan { display: block; width: 100%; height: auto; }
.plan .s { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.plan .bar { fill: none; stroke: var(--line-strong); stroke-width: 8; stroke-linecap: round; }
.plan .t-big { font-family: var(--font); font-size: 40px; font-variation-settings: "wdth" 116, "wght" 800; letter-spacing: -1px; fill: var(--ink); }
.plan .t-p { font-family: var(--font); font-size: 17px; fill: var(--ink-2); }
.plan .t-s { font-family: var(--font); font-size: 14px; fill: var(--ink-3); }
.plan .t-btn { font-family: var(--font); font-size: 16px; font-weight: 600; fill: var(--on-blue); text-anchor: middle; }
.plan .t-live { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--blue); }
.plan .o, .plan .x { opacity: 0; }
.plan.live .d { stroke-dasharray: 1; }
.ruler { position: relative; padding-top: .25rem; }
.ruler__ticks { height: 18px; background:
  repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 20%) 0 0 / calc(100% - 1px) 18px no-repeat,
  repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 3.3333%) 0 0 / calc(100% - 1px) 9px no-repeat;
  border-right: 1px solid var(--ink); }
.ruler__fill { position: absolute; left: 0; top: .25rem; height: 3px; width: 100%; background: var(--blue); transform-origin: left; pointer-events: none; }
.ruler input { position: absolute; inset: -.6rem -14px auto -14px; width: calc(100% + 28px); height: 44px; margin: 0; padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; box-shadow: none; }
.ruler input:focus { box-shadow: none; }
.ruler input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.ruler input::-moz-range-track { height: 44px; background: transparent; }
.ruler input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--blue); background: radial-gradient(circle, var(--blue) 0 4px, var(--bg) 4.5px); box-shadow: 0 4px 14px -4px rgba(31, 51, 255, .55); }
.ruler input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--blue); background: radial-gradient(circle, var(--blue) 0 4px, var(--bg) 4.5px); box-shadow: 0 4px 14px -4px rgba(31, 51, 255, .55); }
.ruler__labels { display: flex; justify-content: space-between; margin-top: .45rem; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.stage__hint { font-size: var(--fs-xs); color: var(--ink-3); }

/* sections */
.section { padding-block: var(--space); border-top: 1px solid var(--line); }
.section.paper { background: var(--paper); border-top: 0; }
.head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 46rem; }

.say li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: .5rem clamp(1.5rem, 4vw, 4rem); align-items: baseline; padding-block: clamp(1.1rem, 2.6vw, 2rem); border-top: 1px solid var(--line); }
.say li:last-child { border-bottom: 1px solid var(--line); }
.say h3 { font-size: var(--fs-say); font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: -.03em; line-height: 1; }
.say p { color: var(--ink-2); max-width: 30rem; }
.say li:hover h3, .say li:focus-within h3 { font-variation-settings: "wdth" 125, "wght" 800; color: var(--blue); }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.cell { display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.25rem, 2.6vw, 2rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; min-height: 11rem; text-decoration: none; }
.cell h3 { font-size: 1.3rem; font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.02em; }
.cell p { color: var(--ink-2); }
.cell .icon { margin-top: auto; align-self: flex-end; color: var(--ink-3); }
.cell:hover, .cell:focus-visible { background: var(--blue); color: var(--on-blue); }
.cell:hover p, .cell:hover .icon, .cell:focus-visible p, .cell:focus-visible .icon { color: var(--on-blue); }

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.door { position: relative; display: grid; gap: .7rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--bg); border-radius: var(--r); min-width: 0; }
.door h3 { font-size: 1.45rem; font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.02em; }
.door p { color: var(--ink-2); }
.door .addr { margin-top: .8rem; font-size: clamp(1.1rem, 1rem + .9vw, 1.6rem); font-variation-settings: "wdth" 118, "wght" 700; letter-spacing: -.02em; color: var(--blue); overflow-wrap: anywhere; }
.section:not(.paper) .door { background: var(--paper); }

.nrows { border-top: 1px solid var(--ink); }
.nrow { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.nrow time { font-size: var(--fs-small); color: var(--ink-3); }
.nrow__title { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); font-variation-settings: "wdth" 108, "wght" 700; letter-spacing: -.02em; line-height: 1.2; }
.nrow__lead { grid-column: 2; color: var(--ink-2); max-width: 44rem; }
.nrow .icon { color: var(--ink-3); align-self: center; }
.nrow:hover .nrow__title, .nrow:hover .icon { color: var(--blue); }
.empty { padding: 1.75rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }

/* portfolio: each shot sits on the sheet inside crop marks; a tall page shot pans down under the pointer */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem); }
.work { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.work.is-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.work.is-flip { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
.work.is-flip .frame { order: 2; }
.frame { position: relative; display: block; padding: 12px; color: var(--ink-3); text-decoration: none; }
.frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(currentColor, currentColor) 0 12px / 8px 1px no-repeat,
  linear-gradient(currentColor, currentColor) 12px 0 / 1px 8px no-repeat,
  linear-gradient(currentColor, currentColor) 100% 12px / 8px 1px no-repeat,
  linear-gradient(currentColor, currentColor) calc(100% - 12px) 0 / 1px 8px no-repeat,
  linear-gradient(currentColor, currentColor) 0 calc(100% - 12px) / 8px 1px no-repeat,
  linear-gradient(currentColor, currentColor) 12px 100% / 1px 8px no-repeat,
  linear-gradient(currentColor, currentColor) 100% calc(100% - 12px) / 8px 1px no-repeat,
  linear-gradient(currentColor, currentColor) calc(100% - 12px) 100% / 1px 8px no-repeat; }
.shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--paper); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.shot__none { display: grid; place-items: center; height: 100%; padding: 1.5rem; text-align: center; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.8rem); color: var(--ink-3); overflow-wrap: anywhere; }
a.frame:hover, a.frame:focus-visible { color: var(--blue); }
a.frame:hover .shot, a.frame:focus-visible .shot { border-color: var(--blue); }
.work__body { display: grid; gap: .8rem; justify-items: start; padding-inline: 12px; min-width: 0; }
.work__head { display: flex; align-items: baseline; gap: .9rem; min-width: 0; }
.work__no { font-size: var(--fs-small); font-weight: 700; color: var(--blue); min-width: 1.6rem; }
.work h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-variation-settings: "wdth" 114, "wght" 750; letter-spacing: -.02em; line-height: 1.15; }
.work__kind { font-size: var(--fs-small); color: var(--ink-3); margin-top: .2rem; }
.work__desc { color: var(--ink-2); max-width: 34rem; }
.work .link { overflow-wrap: break-word; max-width: 100%; }
.order { display: inline-flex; gap: .35rem; }
.order button { width: 2.2rem; height: 2.2rem; padding: 0; justify-content: center; }
.order button:disabled { opacity: .35; cursor: default; }
.work__head a { text-decoration: none; }
.work__head a:hover h3 { color: var(--blue); }
.work__links { display: flex; gap: .6rem 1.4rem; flex-wrap: wrap; align-items: center; }
.badge { position: absolute; left: 24px; top: 24px; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--ink); color: var(--on-blue); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.badge::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; }

/* two paths: do it yourself with AI, or we build it for you */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.path { display: grid; gap: 1rem; align-content: start; padding: clamp(1.5rem, 3.4vw, 2.75rem); border: 1.5px solid var(--ink); border-radius: var(--r); min-width: 0; }
.path h3 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
.path p { color: var(--ink-2); max-width: 30rem; }
.path ul { display: grid; gap: .45rem; margin-block: .25rem .5rem; }
.path li { display: flex; gap: .6rem; align-items: baseline; font-weight: 500; }
.path li::before { content: ""; width: .55rem; height: .55rem; flex: none; border-radius: 50%; border: 1.5px solid currentColor; transform: translateY(-.05rem); }
.path__no { font-size: var(--fs-small); font-weight: 700; color: var(--blue); }
.path .actions { margin-top: auto; padding-top: .5rem; }
.path.is-blue { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.path.is-blue p, .path.is-blue .path__no { color: var(--on-blue); }
.path.is-blue .path__no { opacity: .75; }
.btn.on-blue { background: var(--on-blue); border-color: var(--on-blue); color: var(--blue); }
.btn.on-blue:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.link.on-blue { color: var(--on-blue); }

/* films: the one dark band on the sheet — a projection room */
.section.dark { --line: #2a2c38; --ink-2: #b9bccb; --ink-3: #8a8ea2; background: var(--ink); color: var(--on-blue); border-top: 0; }
.section.dark .label { color: var(--ink-3); }
.section.dark .frame { color: #5b5f73; }
.section.dark a.frame:hover { color: var(--on-blue); }
.film { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.film__player { position: relative; }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-s); background: #000; object-fit: cover; }
.film__toggle { position: absolute; right: 24px; bottom: 24px; border: 0; border-radius: 999px; padding: .45rem .9rem; background: rgba(12, 13, 18, .72); color: var(--on-blue); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.film__facts { display: flex; gap: .4rem 1.4rem; flex-wrap: wrap; margin-top: 1rem; padding-inline: 12px; font-size: var(--fs-small); color: var(--ink-3); }
.film__facts b { color: var(--on-blue); font-weight: 600; }
.film__text { display: grid; gap: 1.4rem; }
.film__text .lead { color: var(--ink-2); }
.steps { counter-reset: step; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .2rem 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.steps li::before { counter-increment: step; content: "0" counter(step); grid-row: span 2; font-size: var(--fs-small); font-weight: 700; color: var(--blue-mid); }
.steps b { font-variation-settings: "wdth" 110, "wght" 700; font-size: 1.1rem; }
.steps p { color: var(--ink-2); }
.honest { font-size: var(--fs-small); color: var(--ink-3); border-left: 2px solid var(--blue); padding-left: .9rem; }
.dark .btn.line { background: transparent; color: var(--on-blue); border-color: var(--on-blue); }
.dark .btn.line:hover { background: var(--on-blue); color: var(--ink); }

/* case study */
.crumb { font-size: var(--fs-small); color: var(--ink-3); }
.crumb a { color: var(--ink-2); }
.case__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; margin-block: 1.25rem clamp(2rem, 5vw, 3.5rem); }
.case__top h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); margin-block: .6rem 1.1rem; }
.case__name { font-size: var(--fs-small); color: var(--ink-3); }
.case__name b { color: var(--ink); font-weight: 700; }
.case__top .actions { margin-top: 1.5rem; }
.facts-box { border-top: 1px solid var(--ink); }
.facts-box div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .2rem 1rem; padding-block: .75rem; border-bottom: 1px solid var(--line); }
.facts-box dt { font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: .2rem; }
.facts-box dd { overflow-wrap: anywhere; }
.case__shot .scroll { display: block; max-height: min(78vh, 900px); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--paper); overscroll-behavior: contain; }
.case__shot .scroll img { display: block; width: 100%; height: auto; }
.case__shot video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-s); background: #000; }
.case__hint { margin-top: .6rem; padding-inline: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.case__rows { margin-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--ink); }
.case__rows > div { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: .5rem clamp(1.5rem, 4vw, 4rem); padding-block: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--line); }
.case__rows h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); font-variation-settings: "wdth" 112, "wght" 750; letter-spacing: -.02em; }
.case__rows h2 span { display: block; font-size: var(--fs-small); color: var(--blue); margin-bottom: .2rem; }
.case__rows p { font-size: var(--fs-lead); color: var(--ink-2); max-width: 44rem; }
/* „Ekrany”: extra screens of a system (the pizzeria's till, kitchen, kiosk) — full images, wide and tall side by side */
.case__shots { margin-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--ink); padding-top: clamp(1.25rem, 3vw, 2rem); }
.case__shots h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); font-variation-settings: "wdth" 112, "wght" 750; letter-spacing: -.02em; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; }
.shots figure { display: grid; gap: .6rem; }
.shots a { display: block; border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: hidden; background: var(--paper); }
.shots a:hover, .shots a:focus-visible { border-color: var(--blue); }
.shots img { display: block; width: 100%; height: auto; }
.shots figcaption { font-size: var(--fs-small); color: var(--ink-2); }
.case__nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }
.case__nav a { display: grid; gap: .15rem; text-decoration: none; max-width: 48%; }
.case__nav a:last-child { text-align: right; margin-left: auto; }
.case__nav span { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.case__nav b { font-variation-settings: "wdth" 110, "wght" 700; font-size: 1.15rem; }
.case__nav a:hover b { color: var(--blue); }
.case__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--r); background: var(--blue); color: var(--on-blue); }
.case__cta h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
.case__cta .person { margin-top: 1.25rem; }
.case__cta .person__role, .case__cta .person__direct a, .case__cta .person__name { color: var(--on-blue); }
.case__cta .label, .case__cta .empty-inline { color: var(--blue-mid); }
.case__cta .person__photo { background: rgba(255, 255, 255, .16); color: var(--on-blue); }
.work__kind b { color: var(--ink); font-weight: 700; }
.work__head h3 { margin-top: .25rem; }
.crumb { margin-bottom: .25rem; }

/* before / after: the line itself is the handle, grabbed anywhere along its height (a 44px strip); the arrows on the knob
   and the cursor say which way it goes. Without a script the line stands still in the middle, with no knob. */
.ba { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.ba__stage { position: relative; overflow: hidden; border-radius: var(--r-s); aspect-ratio: 1200 / 896; background: var(--paper); }
.ba__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__stage .is-before { clip-path: inset(0 calc(100% - var(--p, 50%)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 2px; margin-left: -1px; background: var(--on-blue); box-shadow: 0 0 0 1px rgba(12, 13, 18, .25); pointer-events: none; }
html.has-js .ba__line { pointer-events: auto; cursor: ew-resize; touch-action: pan-y; }
html.has-js .ba__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -21px; width: 44px; }
.ba__line:focus-visible { outline: none; }
.ba__knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--blue); background: var(--bg); color: var(--blue); box-shadow: 0 2px 10px rgba(12, 13, 18, .25); }
.ba__knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ba__line:focus-visible .ba__knob { outline: 2px solid var(--blue); outline-offset: 3px; }
.ba.is-dragging, .ba.is-dragging * { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ba figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; font-size: var(--fs-small); color: var(--ink-2); }

/* the person you talk to */
.person { display: flex; gap: 1rem; align-items: center; min-width: 0; }
.person__photo { width: 4.5rem; height: 4.5rem; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-weight: 800; font-size: 1.3rem; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo svg { width: 2rem; height: 2rem; }
.person__name { font-size: 1.3rem; font-variation-settings: "wdth" 112, "wght" 750; letter-spacing: -.02em; line-height: 1.2; }
.person__role { color: var(--ink-2); font-size: var(--fs-small); }
.person__direct { display: flex; gap: .2rem 1rem; flex-wrap: wrap; margin-top: .3rem; font-weight: 600; }
.person__direct a { color: var(--blue); text-decoration: none; overflow-wrap: anywhere; }
.person-card { margin-top: 2rem; padding: 1.25rem; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.empty-inline { color: var(--ink-3); font-weight: 400; font-style: italic; }
.fieldset { border: 0; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.1rem; }
.fieldset legend { padding: 0; margin-bottom: .2rem; font-size: 1.15rem; font-variation-settings: "wdth" 112, "wght" 700; }

.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.about .big { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.3rem); font-variation-settings: "wdth" 106, "wght" 600; line-height: 1.22; letter-spacing: -.02em; }
/* „yuServer.com” in the sentence about the company: the product in the brand's blue, a link to it (the owner, 17.10.2026) */
.about__brand { color: var(--blue); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; }
.about__brand:hover, .about__brand:focus-visible { background-size: 100% 2px; }
.js .about__brand { transition: background-size .35s var(--ease); }
.about__who { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: 2rem; }
/* the owner's portrait (retouched 17.10.2026): 4:5, beside the line who is behind the company */
.about__who img { flex: none; width: clamp(8.5rem, 15vw, 12.5rem); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-s); background: var(--paper); }
.about__who figcaption { max-width: 20rem; }
.facts { display: grid; gap: 1.1rem; }
.facts div { display: grid; gap: .15rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 700; }
.facts dd { color: var(--ink-2); }

.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); }
.details { display: grid; gap: 1.1rem; margin-top: 2rem; }
.details dd { font-size: 1.1rem; font-weight: 500; overflow-wrap: anywhere; user-select: all; }
form { display: grid; gap: 1.1rem; min-width: 0; }
.field { display: grid; gap: .35rem; min-width: 0; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.1rem; }
label { font-size: var(--fs-small); font-weight: 600; }
input, select, textarea { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-s); padding: .75rem .9rem; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
textarea { min-height: 8.5rem; resize: vertical; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; color: var(--ink-2); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; flex: none; accent-color: var(--blue); }
.note { font-size: var(--fs-small); color: var(--ink-2); }
.note.ok { color: var(--blue); } .note.err { color: var(--error); }
.actions { display: flex; gap: .7rem 1.1rem; flex-wrap: wrap; align-items: center; }

.footer { border-top: 1px solid var(--line); padding-top: clamp(2rem, 5vw, 4rem); overflow: hidden; }
.footer__row { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink-2); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--blue); }
/* the word fills the footer's width and never runs past it (the owner, 16.10.2026: the prototype's 17.5vw spilled off the right
   edge at every width, and the page edge cut off the bottom of the letters). The word is 6.204 × its font size wide, so 16cqi
   of the wrap = 99%; min(14.5vw, 11.9rem) where cqi is not supported. */
.footer .wrap { container-type: inline-size; }
.footer__word { font-variation-settings: "wdth" 125, "wght" 900; letter-spacing: -.05em; line-height: 1; font-size: min(14.5vw, 11.9rem); font-size: 16cqi; color: var(--blue); margin: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2.5vw, 2rem); user-select: none; white-space: nowrap; }

/* article */
.page { padding-block: clamp(2.5rem, 6vw, 5rem) var(--space); }
.article { max-width: 44rem; display: grid; gap: 1.4rem; }
.article h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); }
.article h3 { font-size: 1.4rem; font-variation-settings: "wdth" 110, "wght" 700; letter-spacing: -.02em; margin-top: .6rem; }
.article ul { padding-left: 1.2rem; list-style: disc; display: grid; gap: .35rem; }
.article img { border-radius: var(--r); }

/* admin */
.admin-bar { border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.admin-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: .9rem; }
.admin-bar small { font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.proto { margin-top: 1.25rem; padding: .8rem 1rem; border-radius: var(--r-s); background: var(--paper); font-size: var(--fs-small); color: var(--ink-2); }
.tabs { display: flex; gap: .25rem 1.75rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-block: 1.5rem 2rem; }
.tabs a { font-weight: 600; text-decoration: none; padding: .8rem 0; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }
.panel-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.panel-head h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
td.num { font-size: var(--fs-small); white-space: nowrap; color: var(--ink-2); }
.pill { font-size: var(--fs-xs); font-weight: 600; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); white-space: nowrap; }
.pill.pub { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--blue-deep); }
.pill.new { border-color: var(--blue); color: var(--blue); }
.tag { font-size: var(--fs-xs); color: var(--ink-3); }
.editor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.box { display: grid; gap: 1.1rem; min-width: 0; align-content: start; }
.preview-img { max-height: 10rem; border-radius: var(--r-s); }
.shots-admin { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.shots-admin .panel-head { margin-bottom: 0; }
.shots-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.shots-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.shots-list .preview-img { width: 7rem; height: 4.5rem; object-fit: cover; object-position: top; }
.msg { padding: 1.4rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .55rem; }
.msg header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.msg strong { font-size: 1.1rem; font-weight: 700; }
.stack { border-top: 1px solid var(--ink); }

@media (max-width: 900px) {
  .hero__top, .about, .contact, .editor, .say li, .work.is-wide, .paths, .film, .case__top, .case__rows > div, .case__cta { grid-template-columns: minmax(0, 1fr); }
  .facts-box div { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .case__nav a { max-width: 100%; }
  .work.is-flip .frame { order: 0; }
  .nrow { grid-template-columns: minmax(0, 1fr) auto; }
  .nrow time { grid-column: 1 / -1; }
  .nrow__lead { grid-column: 1 / -1; }
  .ruler__labels span:nth-child(even) { visibility: hidden; }
}
@media (max-width: 720px) { .works { grid-template-columns: minmax(0, 1fr); } }

/* motion — only with script and without „reduce motion” */
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
  .btn:hover { transform: translateY(-1px); }
  .btn .icon, .link .icon, .nrow .icon, .cell .icon { transition: transform .3s var(--ease), color .2s; }
  .btn:hover .icon, .link:hover .icon, .nrow:hover .icon { transform: translateX(4px); }
  .cell:hover .icon { transform: translate(3px, -3px); }
  .nav a, .nrow__title { transition: color .2s; }
  .say h3 { transition: font-variation-settings .55s var(--ease), color .3s; }
  .cell { transition: background-color .25s, color .25s; }
  .cell p { transition: color .25s; }
  .frame, .shot { transition: color .25s, border-color .25s; }
  .path { transition: transform .35s var(--ease); }
  .path:hover { transform: translateY(-3px); }
  .shot img { transition: object-position 1.2s var(--ease); }
  a.frame:hover .shot img, a.frame:focus-visible .shot img { object-position: 50% 100%; transition: object-position 7s cubic-bezier(.45, 0, .55, 1); }
  .js .hero h1 .l > span { animation: rise .9s var(--ease) both; animation-delay: calc(.05s + var(--n, 0) * .1s); }
  .js .hero .in { animation: settle .8s var(--ease) both; animation-delay: var(--d, .3s); }
  .js .reveal { transform: translateY(26px); transition: transform .8s var(--ease); transition-delay: var(--rd, 0s); }
  .js .reveal.is-in { transform: none; }
}

/* ===================================================================== product additions
   1. The page is rendered on the server and has to work without JavaScript: what needs the script (the ruler, the replay
      button, the hint) shows only with `html.has-js`; without it the sketch stands in its final state.
   2. The CSP forbids inline styles — the prototype's style="" attributes became the classes below.
   3. Sentences at form fields (422), one-time notes after an action (flash), the login page, the delete confirmation. */
html:not(.has-js) .needs-js { display: none !important; }
/* With motion the show plays from its first step, so the page starts there: the HTML is the finished sketch (that is what a
   visitor without the script or with „reduce motion” sees), and `html.js` — set before the first paint — draws the start
   until site.js takes over. Without it the finished sketch flashed for a moment, then jumped to 0 (the owner, 16.10.2026). */
.js .plan .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .plan [data-s]:not(.d):not(.x) { opacity: 0; }
.js .plan .x { opacity: 1; }
.js .ruler__fill { transform: scaleX(0); }
.js .stage:not(.is-ready) #scrub { opacity: 0; }
.js .stage .at-end, html:not(.js) .stage .at-start { display: none; }
html:not(.has-js) .plan .o { opacity: 1; }

/* logo: the word alone with a solid block — the registration mark of the prototype is gone (the owner, 13.10.2026) */
.logo__mark { width: .82rem; height: .82rem; border-radius: 3px; background: var(--blue); flex: none; }
.hero h1 .l2 { color: var(--blue); }

.d0 { --d: 0s; } .d35 { --d: .35s; } .d50 { --d: .5s; } .n1 { --n: 1; } .rd8 { --rd: .08s; }
.mt-more { margin-top: 1.75rem; } .mb-label { margin-bottom: 1rem; } .no-top { border-top: 0; }
.contact__intro { margin-top: 1rem; max-width: 26rem; } .contact h2 { margin-top: .9rem; }
.span-all { grid-column: 1 / -1; }
.plan .t-name { font-weight: 800; fill: var(--ink); }
.panel-wrap { padding-bottom: 5rem; }
.panel-note { margin-bottom: 1.25rem; }
.after-table { margin-top: 1.1rem; }
.ta-short { min-height: 4.75rem; } .ta-body { min-height: 17rem; } .ta-desc { min-height: 8rem; } .ta-lead { min-height: 6rem; }
.content-form { max-width: 46rem; }
td strong { font-weight: 700; }

/* offer grid: four cells sit in one row on a wide screen, six in two rows of three */
@media (min-width: 1100px) { .grid.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the hidden trap field for bots — off screen, not display:none (some bots skip hidden fields) */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* sentences at fields */
.field-err { font-size: var(--fs-small); color: var(--error); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
.check[data-invalid="true"] input { outline: 2px solid var(--error); outline-offset: 2px; }
.note:empty { display: none; }

/* address of an entry is a link now — the same look */
a.addr { text-decoration: none; display: inline-block; }
a.addr:hover { text-decoration: underline; text-underline-offset: 4px; }

/* panel: header with the logged-in admin and logging out */
.admin-bar__right { display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink-2); }
.admin-bar__right form { display: inline; }
.linkish { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--blue); }
.actions form { display: inline-flex; }
.order form { display: inline-flex; }

/* delete with confirmation (<details> works without the script; the script makes „Anuluj” close it) */
details.confirm > summary { list-style: none; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm[open] > summary { display: none; }
details.confirm > .actions { display: inline-flex; }

/* state of the e-mail to the company at a message */
.mail-state { font-size: var(--fs-small); color: var(--ink-2); }
.mail-state.ok { color: var(--blue-deep); } .mail-state.err { color: var(--error); }

/* login */
.login { max-width: 26rem; margin: clamp(2.5rem, 8vw, 6rem) auto 0; display: grid; gap: 1.4rem; }
.login h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); }

/* preview of a draft opened from the panel */
.preview-bar { background: var(--blue-soft); color: var(--blue-deep); font-size: var(--fs-small); }
.preview-bar .wrap { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; padding-block: .7rem; }

/* version 5: the editor's textareas (were style="min-height") and the before / after range without the script */
.ta-card { min-height: 6rem; } .ta-challenge { min-height: 5rem; } .ta-built { min-height: 7rem; } .ta-result { min-height: 4.5rem; }
video.preview-img { display: block; max-width: 100%; }

/* ===================================================================== made to order (the owner, 16.10.2026)
   docs/moduly/M-one-platform/markgram-sciezka-klienta.md §4a: everything leads to a project made to order; the AI builder
   of yuserver.com is a calm band of information at the end. Friendly on a phone (the owner: „ma być friendly mobile”):
   one header row with „Menu”, small cards as rows with a thumbnail, buttons across the screen, anchors not hidden under
   the sticky header. */
section[id] { scroll-margin-top: 4.5rem; }

/* header: the links, then the one main button; „Menu” only on narrow screens and only with the script */
.nav { margin-left: auto; }
.header__cta { display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; align-items: center; gap: .55rem; min-height: 2.6rem; padding: .45rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--bg); font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.nav-toggle__bars { width: 1rem; height: 10px; flex: none; background:
  linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
  linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
  linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.nav-toggle[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
@media (max-width: 1080px) {
  .has-js .nav-toggle { display: inline-flex; }
  .has-js .header .wrap { flex-wrap: nowrap; }
  .has-js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: .25rem var(--gutter) 1.25rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 24px 32px -28px rgba(12, 13, 18, .45); }
  .has-js .nav.is-open { display: flex; }
  .has-js .nav a { padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); }
  .has-js .nav a.nav__panel { border-bottom: 0; }
  html:not(.has-js) .header__cta { order: 2; }
  html:not(.has-js) .nav { order: 3; width: 100%; margin: 0; }
}
@media (max-width: 420px) {
  .header .wrap { column-gap: .75rem; }
  .logo { font-size: 1.1rem; }
  .header .btn.small { padding: .5rem .8rem; font-size: .85rem; }
  .nav-toggle { padding: .45rem .7rem; }
  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* hero: the names of what we built, each leading to its case study */
.hero__cta .link { font-size: var(--fs-small); }
.built { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.75rem; margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.built__list { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; }
.built__list a { text-decoration: none; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.01em; }
.built__list a:hover, .built__list a:focus-visible { color: var(--blue); }
/* the hero fills the first screen under the sticky header (the owner, 17.10.2026): the headline and the lead in the middle
   of it, the names of what we built at its bottom edge, the next section starts at the fold. `svh` is the screen with the
   phone's address bar shown, so nothing hides under it; a screen too short for the content just lets the hero grow.
   --header-h is the sticky header measured (65.2px, with „Menu” 71.4px), rounded down: a hero a fraction of a pixel too
   short would show the next section's line at the bottom of the screen. */
:root { --header-h: 4rem; }
@media (max-width: 1080px) { html.has-js { --header-h: 4.4rem; } }
.hero { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.hero > .wrap { flex: 1; display: flex; flex-direction: column; }
.hero__top { margin-block: auto; }

/* portfolio: three big cards, then small ones; the rest open in place (<details> works without the script) */
.works--small { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem); }
.work.is-small h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); }
.works-more { margin-top: clamp(2rem, 4vw, 3rem); }
.works-more > summary { list-style: none; }
.works-more > summary::-webkit-details-marker { display: none; }
.works-more[open] > summary { display: none; }
.works-more .works--small { margin-top: 0; }

/* what we build: four kinds, each with examples from the portfolio */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.kind { display: grid; gap: .6rem; align-content: start; padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.75rem) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kind + .kind { padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 1px solid var(--line); }
.kind h3 { font-size: 1.3rem; font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.02em; }
.kind p { color: var(--ink-2); }
.kind__eg { font-size: var(--fs-small); }
.kind__eg a { color: var(--blue); font-weight: 600; text-decoration: none; }
.kind__eg a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* how we work: four numbered steps, no times or prices until the owner gives them */
.process { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem clamp(1rem, 2.5vw, 2rem); }
.process li { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--ink); min-width: 0; }
.process li::before { counter-increment: step; content: "0" counter(step); font-size: var(--fs-small); font-weight: 700; color: var(--blue); }
.process h3 { font-size: 1.3rem; font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.02em; }
.process p { color: var(--ink-2); }

/* the AI builder in yuserver.com, at the end: text and the sketch side by side, the button under the text */
.diy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "text stage" "cta stage"; grid-template-rows: auto 1fr; gap: 1.75rem clamp(2rem, 5vw, 4.5rem); }
.diy__text { grid-area: text; display: grid; gap: 1.1rem; align-content: start; }
/* information, not a second offer: a smaller heading than the sections about projects made to order */
.diy .h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.diy__cta { grid-area: cta; align-self: start; }
.diy__list { border-top: 1px solid var(--line-strong); }
.diy__list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .25rem 1rem; padding-block: .85rem; border-bottom: 1px solid var(--line-strong); }
.diy__list h3 { font-size: 1.1rem; font-variation-settings: "wdth" 112, "wght" 750; letter-spacing: -.01em; }
.diy__list p { color: var(--ink-2); font-size: var(--fs-small); }
.diy__account { font-size: var(--fs-small); color: var(--ink-2); }
.stage.diy__stage { grid-area: stage; align-self: center; margin-top: 0; padding: clamp(1rem, 2.5vw, 1.75rem); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.diy__stage .stage__clock { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.diy__stage .stage__now { font-size: 1rem; }

/* contact: who you talk to, in one card (who is behind it went back to „O nas”, 17.10.2026) */
.contact .person-card { background: var(--paper); border-color: transparent; }

@media (max-width: 1000px) {
  .kinds, .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kind:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .works--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "stage" "cta"; grid-template-rows: none; }
}
@media (max-width: 600px) {
  .section { padding-block: 3.5rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn, .mt-more .btn, .diy__cta .btn, .works-more > summary { width: 100%; justify-content: center; }
  .hero__cta .link { align-self: flex-start; }
  .kinds, .process { grid-template-columns: minmax(0, 1fr); }
  .kind, .kind + .kind { padding-inline: 0; border-left: 0; }
  .process { gap: 0; }
  .process li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .2rem .75rem; padding-block: 1rem; border-top: 1px solid var(--line); }
  .process li:first-child { border-top: 2px solid var(--ink); }
  .process li::before { grid-row: span 2; padding-top: .3rem; }
  .works--small { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .work.is-small { grid-template-columns: 7rem minmax(0, 1fr); gap: .9rem; align-items: start; }
  .work.is-small .frame { padding: 0; }
  .work.is-small .frame::before { display: none; }
  .work.is-small .shot { aspect-ratio: 1; }
  .work.is-small .badge { left: 6px; top: 6px; padding: .2rem .5rem; }
  .work.is-small .work__body { padding-inline: 0; gap: .45rem; }
  .work.is-small .work__no { display: none; }
  .diy__list li { grid-template-columns: minmax(0, 1fr); }
  /* a big card on a phone: the shot and the headline; the description waits on the case study */
  .work.is-wide .work__desc { display: none; }
  #contact-form .actions .btn { width: 100%; justify-content: center; }
}

/* ===================================================================== motion, version 6 (the owner, 17.10.2026: „przydałoby
   się trochę więcej animacji … niech będzie w niej trochę technologii, to ma być nasza reklama”). Everything moving needs
   the script and stays off with „reduce motion” (no `js` class) — then the page is the calm version above.
   1. The header slides away while reading down and comes back on the first move up; the blue line under it is how far
      down the page is (that one follows the hand, so it stays with „reduce motion” too). Away, the header leaves its last
      2px on screen — exactly the line, over the thin track of its border (the owner, 17.10.2026: „menu niech znika, ale
      pasek progresu może być lekko widoczny”).
   2. The phone menu drops in link by link; on a wide screen a line grows under the link the cursor is on.
   3. The names of what we built flow right to left in one row, like the logo strip on stripe.com; the cursor stops them.
   4. The hero is a blueprint (site.js draws it on a canvas): a grid of points the cursor lights up and pushes aside, the
      point under it snapped with its coordinates, a scan crossing the sheet now and then.
   5. Labels decode from random characters, section headlines rise word by word. */
.header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); pointer-events: none; }
.js .header { transition: transform .45s var(--ease), border-color .2s; }
.js .header.is-away { transform: translateY(calc(-100% + 2px)); }

@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1080px) {
  .js .nav.is-open { animation: drop .3s var(--ease) both; }
  .js .nav.is-open a { animation: settle .5s var(--ease) both; animation-delay: calc(.05s + var(--i, 0) * .045s); }
  .nav a:nth-child(2) { --i: 1; } .nav a:nth-child(3) { --i: 2; } .nav a:nth-child(4) { --i: 3; } .nav a:nth-child(5) { --i: 4; } .nav a:nth-child(6) { --i: 5; }
}
@media (min-width: 1081px) {
  .nav a:not(.btn) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; }
  .nav a:not(.btn):hover, .nav a:not(.btn):focus-visible { background-size: 100% 1.5px; }
  .js .nav a:not(.btn) { transition: color .2s, background-size .35s var(--ease); }
}

.built.is-flowing { display: grid; gap: .85rem; }
.built__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.built__track { display: flex; width: max-content; animation: flow var(--flow, 50s) linear infinite; }
.built__viewport:hover .built__track, .built__viewport:focus-within .built__track { animation-play-state: paused; }
.built.is-flowing .built__list { flex-wrap: nowrap; gap: 0; }
.built.is-flowing .built__list li { display: flex; align-items: center; white-space: nowrap; }
.built.is-flowing .built__list li::after { content: ""; flex: none; width: .42rem; height: .42rem; margin-inline: 1.7rem; border-radius: 2px; background: var(--blue-mid); }
@keyframes flow { to { transform: translateX(-50%); } }

.hero { position: relative; isolation: isolate; }
.hero__grid { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.label .noise { color: var(--blue); }
.label .done::after, .label .noise::after { content: attr(data-text); }
.built__list[aria-hidden] a::after { content: attr(data-name); }
.js .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js .words .w > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js .words.is-in .w > span { transform: none; }

/* Google Analytics consent (site.js, only with YS_MARKGRAM_GA_MEASUREMENT_ID): a card at the bottom, both answers alike */
.consent { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 40; max-width: 28rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink-2); box-shadow: 0 24px 60px -20px rgba(12, 13, 18, .28); font-size: var(--fs-small); line-height: 1.5; }
.consent b { color: var(--ink); }
.consent a { color: var(--blue); }
.consent .actions { margin-top: .9rem; }
.footer__consent { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.footer__consent:hover { color: var(--blue); }
@media (max-width: 520px) { .consent { right: var(--gutter); max-width: none; } .consent .btn { flex: 1; justify-content: center; } }
/* the privacy page: headings and the cookie table in the article column */
.legal h2 { font-size: 1.5rem; font-variation-settings: "wdth" 110, "wght" 700; letter-spacing: -.02em; margin-top: 1rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.legal th { color: var(--ink-3); font-weight: 600; }
.legal td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

/* Case study screens: the carousel and the full-screen view that site.js builds from .shots (without the script the plain
   list above stays). A proof sheet like the rest of the page: hairlines, paper, one ultramarine, the ruler as progress. */
.gal { display: grid; gap: .9rem; }
.gal__stage { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--paper); overflow: hidden; }
.gal__track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { flex: 0 0 100%; aspect-ratio: 16 / 10; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: clamp(.6rem, 2.4vw, 1.6rem) clamp(.6rem, 5vw, 4.5rem); min-width: 0; }
.gal__open { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; }
.gal__open img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 22px 44px -28px rgba(12, 13, 18, .45); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.gal__open:hover img { transform: translateY(-2px); box-shadow: 0 28px 52px -28px rgba(12, 13, 18, .5); }
.gal__open:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; }
.gal__nav { position: absolute; top: 50%; width: 2.9rem; height: 2.9rem; margin-top: -1.45rem; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .94); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gal__nav--prev { left: clamp(.5rem, 1.6vw, 1.1rem); }
.gal__nav--next { right: clamp(.5rem, 1.6vw, 1.1rem); }
.gal__nav--prev .icon, .lb__nav--prev .icon { transform: scaleX(-1); }
.gal__nav:hover, .gal__nav:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.gal__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
.gal__progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--blue); transition: width .45s var(--ease); }
.gal__bar { display: flex; align-items: baseline; gap: 1.1rem; min-height: 1.7em; }
.gal__count { font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; }
.gal__count b { color: var(--blue); font-weight: inherit; }
.gal__cap { flex: 1; min-width: 0; font-size: var(--fs-small); color: var(--ink-2); }
.gal__zoom { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: var(--blue); font-size: var(--fs-small); font-weight: 600; cursor: pointer; white-space: nowrap; }
.gal__zoom .icon { width: 15px; height: 15px; }
.gal__zoom:hover { text-decoration: underline; text-underline-offset: 3px; }
.gal__thumbs { display: flex; gap: .6rem; overflow-x: auto; padding: .25rem .1rem .5rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.gal__thumb { flex: 0 0 auto; width: clamp(5.4rem, 10vw, 7.6rem); aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); overflow: hidden; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s, box-shadow .2s; }
.gal__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gal__thumb:hover { opacity: .85; }
.gal__thumb[aria-current="true"] { opacity: 1; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0c0d12; color: #fff; overflow: hidden; }
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: lb-fade .25s ease-out; }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: .9rem var(--gutter); }
.lb__count { font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; color: #9a9db0; }
.lb__count b { color: #fff; font-weight: inherit; }
.lb__close, .lb__nav { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lb__close:hover, .lb__nav:hover, .lb__close:focus-visible, .lb__nav:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }
.lb :focus-visible { outline-color: #fff; }
.lb__stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.5rem, 2vw, 1.5rem); padding: 0 clamp(.5rem, 2.5vw, 2rem); min-height: 0; touch-action: pan-y; }
.lb__img { grid-column: 2; justify-self: center; max-width: 100%; max-height: calc(100dvh - 9.5rem); width: auto; height: auto; object-fit: contain; border-radius: 6px; background: #fff; }
.lb__img.is-in { animation: lb-in .35s var(--ease); }
.lb__cap { padding: .9rem var(--gutter) 1.3rem; text-align: center; color: #c8cad6; font-size: var(--fs-small); min-height: 3.2rem; }
html.lb-open { overflow: hidden; }
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } }
@media (max-width: 640px) {
  .gal__slide { aspect-ratio: 4 / 3; padding: .5rem; }
  .gal__nav { width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; }
  .gal__bar { flex-wrap: wrap; gap: .3rem .9rem; }
  .gal__cap { flex-basis: 100%; order: 3; }
  .gal__zoom { margin-left: auto; }
  .lb__stage { grid-template-columns: minmax(0, 1fr); padding: 0 .5rem; }
  .lb__img { grid-column: 1; grid-row: 1; max-height: calc(100dvh - 11rem); }
  .lb__nav { grid-row: 1; align-self: end; margin-bottom: -3.6rem; width: 2.5rem; height: 2.5rem; position: relative; z-index: 1; }
  .lb__nav--prev { grid-column: 1; justify-self: start; }
  .lb__nav--next { grid-column: 1; justify-self: end; }
  .lb__cap { padding-inline: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gal__open img, .gal__nav, .gal__thumb, .gal__progress::after, .lb__close, .lb__nav { transition: none; }
  .gal__open:hover img { transform: none; }
  .lb[open], .lb__img.is-in { animation: none; }
}

/* „O nas”, the right column (the owner, 05.11.2026): how Artur works as the page's ruler - four marks on one line that
   draws itself in ultramarine when the section settles in -, what he built as a proof-sheet table, the motto last. */
.about__side { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem); }
.about__story { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; }
.about__story b { color: var(--ink); font-weight: 650; }
.about__axis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; counter-reset: none; }
.about__axis li { position: relative; padding-top: 1.05rem; border-top: 2px solid var(--line); font-variation-settings: "wdth" 106, "wght" 650; font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); line-height: 1.25; }
.about__axis li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--blue); }
.about__axis li::after { content: ""; position: absolute; top: -2px; left: 0; right: -.75rem; height: 2px; background: var(--blue); transform-origin: left; }
.about__axis li:last-child::after { right: 0; }
.about__axis .num { display: block; font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; color: var(--blue); margin-bottom: .2rem; }
.js .about__axis li::after { transform: scaleX(0); transition: transform .55s var(--ease); }
.js .about__axis li:nth-child(2)::after { transition-delay: .18s; }
.js .about__axis li:nth-child(3)::after { transition-delay: .36s; }
.js .about__axis li:nth-child(4)::after { transition-delay: .54s; }
.js .about__axis.is-in li::after { transform: none; }
.about__built .label { margin-bottom: .6rem; }
.about__built dl { border-top: 1px solid var(--ink); }
.about__built dl div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .2rem 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.about__built dt { font-size: var(--fs-xs); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: .25rem; }
.about__built dd { color: var(--ink-2); }
.about__motto { margin: 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--blue); }
.about__motto p { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
@media (max-width: 640px) {
  .about__axis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem; }
  .about__axis li:nth-child(2)::after { right: 0; }
  .about__built dl div { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .about__axis li::after { transform: none; transition: none; } }