/* =========================================================================
   Drukmania3D — v5 „Cream"
   Źródło: Claude Design, projekt „Redesign strony drukowania 3D",
   plik „Drukmania3D Cream.dc.html" (import 17 września 2026).

   Kierunek oryginału: ciepła monochromia. Brak koloru akcentowego — hierarchię
   niesie wyłącznie waga (Inter 300/400/500), skala i ciepła szarość.
   Czerń jest akcentem. Duże promienie (20/24 px), pigułki, siatki auto-fit
   bez ani jednego media query.

   ODSTĘPSTWA OD ORYGINAŁU — wszystkie z powodu dostępności.
   Prototyp z Claude Design miał pięć par poniżej progu WCAG AA:
     #a59f97 na #fdfcfc   2,56:1  → --muted  #6E6862 (4,91:1)
     #a59f97 na #f5f3f1   2,37:1  → --muted na powierzchni (4,55:1)
     #777169 na #f5f3f1   4,36:1  → --ink-2  #6B655E (5,07:1 / 4,70:1)
     #e5e5e5 obwódki      1,23:1  → --line-strong rgba(0,0,0,.32)
     #ebe8e4 linie        1,19:1  → --line rgba(0,0,0,.14)
   Dodatkowo: copyright 10px → 12px, focus-visible zamiast `outline: none`
   (oryginał używał atrybutu `style-focus`, który istnieje tylko w runtime x-dc).

   Struktura pliku: tokeny → baza → prymitywy → komponenty (w kolejności
   sekcji strony) → galeria → banner cookies → @media → .prose
   ========================================================================= */

:root {
  /* ---- Kolor: ciepła monochromia ---- */
  --paper: #FDFCFC;        /* tło strony */
  --paper-2: #FFFFFF;      /* pola formularza, karty na tle powierzchni */
  --paper-3: #F5F3F1;      /* powierzchnia: karty, sekcje naprzemienne */
  --chip: #EBE8E4;         /* tło pigułek z danymi */

  --ink: #000000;          /* 20,51:1 — nagłówki, tekst główny */
  --ink-2: #6B655E;        /* 5,07:1 na tle, 4,70:1 na powierzchni */
  --muted: #6E6862;        /* 4,91:1 na tle, 4,55:1 na powierzchni */
  --nav-ink: #44403B;      /* 10,04:1 — linki nawigacji */

  --line: rgba(0, 0, 0, .14);
  --line-strong: rgba(0, 0, 0, .32);

  /* Czerń niesie akcje (przyciski) — miedź niesie markę (nagłówki, linki, logo).
     #8A5424 zamiast #9A5F28, bo tylko ono przechodzi AA na WSZYSTKICH trzech
     powierzchniach: papier 6,08:1, karta 5,62:1, pigułka 5,10:1.
     #B87333 nie przechodzi nigdzie (3,70 / 3,43 / 3,10) — nie używać jako tekst. */
  --accent: var(--ink);
  --on-accent: var(--paper);
  --brand: #8A5424;

  /* ---- Kolory funkcyjne ---- */
  --ok: #1B6E3A;
  --ok-bg: #E4F1E7;
  --err: #A8261D;
  --err-bg: #F8E4E1;

  /* ---- Typografia ---- */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 12px;         /* podniesione z 10px oryginału */
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: clamp(24px, 3vw, 32px);
  --text-3xl: clamp(28px, 4vw, 36px);
  --text-4xl: clamp(34px, 5.6vw, 48px);

  /* ---- Spacing ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --space-section: clamp(56px, 8vw, 96px);
  --space-band: clamp(56px, 7vw, 96px);

  /* ---- Geometria: oryginał jest miękki, nie ostry ---- */
  --wrap: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 20px;
  --radius-lg: 24px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .2s;

  --cookie-h: 0px;
}

/* =========================================================================
   Baza
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--space-5);
  scroll-padding-bottom: calc(var(--cookie-h) + var(--space-4));
  background: var(--paper);
}

body {
  margin: 0;
  padding-bottom: var(--cookie-h);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
input, textarea { font-family: inherit; }
::selection { background: var(--chip); }

/* Nagłówki w wadze 300 — to jest sygnatura tego kierunku. */
h1, h2 {
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: none;
  word-break: normal;
}
h3 { font-weight: 400; letter-spacing: 0; text-wrap: pretty; }
/* Jedyne miejsce, gdzie pojawia się kolor marki w nagłówku. */
em { font-style: normal; font-weight: inherit; color: var(--brand); }
.logo em { font-weight: 500; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  padding: var(--space-3) var(--space-4);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-sm); z-index: 100; font-weight: 500;
}
.skip-link:focus { top: var(--space-4); }

/* Oryginał miał `outline: none` i atrybut `style-focus` z runtime x-dc.
   W czystym HTML to nie istnieje — stąd realny pierścień focusu. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =========================================================================
   Ruch — odwzorowanie [data-reveal] z oryginału, ale na klasie .reveal,
   której używa istniejący script.js.
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================================
   Prymitywy
   ========================================================================= */
.kicker {
  font-family: var(--font-mono); font-size: var(--text-sm);
  line-height: 1.69; color: var(--muted); margin: 0 0 var(--space-5);
}
.meta { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.69; color: var(--muted); }

.h2 { font-size: var(--text-3xl); line-height: 1.17; }
.h1 { font-size: var(--text-4xl); line-height: 1.08; }

.lead { max-width: 48ch; font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }
.lead a, .works__more a, .cookie__text a, .consent a, .prose a { color: var(--brand); }

/* Sekcja: siatki auto-fit, zero media queries — tak jak w oryginale. */
.section { max-width: var(--wrap); margin: var(--space-section) auto 0; padding-inline: var(--gutter); }
.section--band { max-width: none; margin-top: var(--space-section); padding: var(--space-band) var(--gutter); background: var(--paper-3); }
.section--band > .wrap { padding-inline: 0; }
.section__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8); align-items: end; }

/* Pigułka z danymi — tag materiału, numer sekcji, etykieta. */
.pill {
  display: inline-block; padding: var(--space-1) 11px;
  border-radius: var(--radius-pill); background: var(--chip);
  font-family: var(--font-mono); font-size: var(--text-sm);
  max-width: 100%; overflow-wrap: anywhere;
}
.pill--light { background: var(--paper); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* =========================================================================
   Przyciski
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 11px 18px; min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { text-decoration: none; background: var(--chip); }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #2A2A2A; border-color: #2A2A2A; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }

/* =========================================================================
   Nawigacja
   ========================================================================= */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav {
  max-width: var(--wrap); margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8);
  align-items: center; min-height: 50px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em;
}
.logo:hover { text-decoration: none; }
.logo__mark { flex-shrink: 0; width: 28px; height: 28px; }
.nav__links {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  margin-left: auto; align-items: center; font-size: 14px;
}
.nav__links a { color: var(--nav-ink); padding-block: var(--space-2); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
/* `.nav__links a` (0,1,1) bije `.btn--primary` (0,1,0) i przykrywał kolor tekstu
   przycisku — czarne tło z szarym napisem dawało 2,04:1. Stąd te dwie reguły. */
.nav__links a.btn { color: var(--ink); padding-block: 0; }
.nav__links a.btn--primary { color: var(--paper); }
.nav__phone { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--nav-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav__phone:hover { color: var(--brand); }

/* =========================================================================
   Hero — układ przeniesiony z wariantu v4, wykończenie z Cream
   ========================================================================= */
.hero {
  position: relative; overflow: hidden;
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter) 0;
}
/* Papier milimetrowy — bardzo delikatny, w tonie kremowym. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 95px, rgba(0,0,0,.05) 95px 96px),
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(0,0,0,.05) 95px 96px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(0,0,0,.022) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(0,0,0,.022) 23px 24px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 78%);
}
.hero > * { position: relative; z-index: 1; }

/* align-items: start, nie center. Kolumna ze zdjęciem jest o ~230 px wyższa
   od kolumny z tekstem; przy wyśrodkowaniu połowa tej różnicy lądowała nad
   kickerem i dawała 210 px pustki pod nagłówkiem strony. */
.hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
/* Zdjęcie zaczyna się nieco niżej niż tekst — optyczne wyrównanie do linii H1. */
.hero__visual { margin-top: var(--space-6); }
.hero__title { font-size: var(--text-4xl); line-height: 1.08; }
.hero__lead { margin-top: var(--space-6); max-width: 52ch; font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Kropka przy kickerze — jedyny element dekoracyjny w kolorze marki. */
.kicker__dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); margin-right: var(--space-2);
  vertical-align: middle; flex-shrink: 0;
}

.hero__visual { position: relative; }
.hero__frame { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-3); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Karta specyfikacji nachodzi na kadr od dołu z lewej. */
.spec-card {
  position: absolute; left: calc(-1 * var(--space-6)); bottom: var(--space-8);
  min-width: 248px; max-width: calc(100% - var(--space-6));
  background: var(--paper); border-radius: 10px;
  padding: var(--space-5); box-shadow: 0 20px 44px -22px rgba(0,0,0,.34);
}
.spec-card__label { display: block; font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.spec-card__title { display: block; font-weight: 500; font-size: var(--text-base); margin: var(--space-2) 0 var(--space-3); }
.spec-card__list { display: grid; gap: var(--space-2); }
.spec-card__list div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 14px; border-top: 1px solid var(--line); padding-top: var(--space-2); }
.spec-card__list dt { color: var(--ink-2); flex-shrink: 0; }
.spec-card__list dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); text-align: right; }

/* Linia wymiarowa z cechami oferty: belka u góry + pionowe kreski na granicach. */
.usp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-5); margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--ink);
}
.usp li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-5); }
.usp li::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 9px; background: var(--ink); }
.usp li + li { border-left: 1px solid var(--line); padding-left: var(--space-5); }
.usp strong { font-size: var(--text-base); font-weight: 500; }
.usp span { font-size: 14px; color: var(--ink-2); }

/* =========================================================================
   Pasek liczb
   ========================================================================= */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); padding: var(--space-10) 0; border-block: 1px solid var(--line); }
.stat__value { font-size: 32px; font-weight: 300; line-height: 1.13; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat p { margin-top: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* =========================================================================
   Usługi
   ========================================================================= */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-10); }
.service { background: var(--paper-3); border-radius: var(--radius); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.service__num { align-self: flex-start; }
.service__title { font-size: var(--text-xl); line-height: 1.35; }
.service p { font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }
.service .pill-row { margin-top: auto; padding-top: var(--space-2); }

/* Kafelek wyróżnika: tekst + zdjęcie na całą wysokość. */
.service--feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; margin-top: var(--space-4); background: var(--paper-3); border-radius: var(--radius-lg); overflow: hidden; }
.service--feature .service__body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.service--feature .service__title { font-size: var(--text-2xl); font-weight: 300; line-height: 1.13; letter-spacing: -0.02em; }
.service--feature .service__media { min-height: 280px; position: relative; }
.service--feature .service__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.service--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4) var(--space-8); align-items: center; margin-top: var(--space-4); }
.service--split > div { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }

/* =========================================================================
   Realizacje
   ========================================================================= */
.case { margin-top: var(--space-10); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.case__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); }
.case__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.case__body { background: var(--paper-3); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: 14px; }
.case__title { font-size: var(--text-2xl); font-weight: 300; line-height: 1.13; letter-spacing: -0.02em; }
.case__body p { font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }
.case__quote { font-size: var(--text-xl); font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.case__body .btn { margin-top: auto; align-self: flex-start; }

.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.work__media { border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
.work__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work__title { margin-top: var(--space-4); font-size: var(--text-lg); line-height: 1.6; }
.work__desc { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.works__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; margin-top: var(--space-8); }
.works__more { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.works__more a { color: var(--ink); }

/* =========================================================================
   Materiały — wiersze, bez pasków oceny
   ========================================================================= */
.materials { margin-top: var(--space-10); border-top: 1px solid var(--line); }
.material { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3) var(--space-8); padding: 28px 0; border-bottom: 1px solid var(--line); }
.material__code { font-size: 32px; font-weight: 300; line-height: 1.13; letter-spacing: -0.02em; }
.material__label { margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.material p { font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }

/* =========================================================================
   Proces
   ========================================================================= */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-10); }
.step { background: var(--paper); border-radius: var(--radius); padding: var(--space-8); }
.step__title { margin-top: var(--space-4); font-size: var(--text-xl); line-height: 1.35; }
.step p { margin-top: var(--space-2); font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }

/* =========================================================================
   Pracownia
   ========================================================================= */
.studio { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8); }
.studio__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.studio__facts dt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.studio__facts dd { margin: 2px 0 0; font-size: var(--text-lg); line-height: 1.6; }
.studio__social { background: var(--paper-3); border-radius: var(--radius); padding: var(--space-8); }
.studio__social h3 { font-size: var(--text-xl); line-height: 1.35; }
.studio__social > p { margin-top: var(--space-2); font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }

/* Lista linków: nazwa z lewej, uchwyt z prawej. */
.linklist { margin-top: var(--space-5); border-top: 1px solid var(--line); }
.linklist a, .linklist div {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: var(--text-base); min-height: 44px; align-items: center;
}
.linklist > :last-child { border-bottom: 0; }
.linklist span:last-child { color: var(--muted); text-align: right; }

/* =========================================================================
   FAQ — natywny <details>, generowany przez script.js
   ========================================================================= */
.faq-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-8); align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__heading { margin: 0; font-size: inherit; font-weight: inherit; }
.faq__button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  width: 100%; padding: var(--space-5) 0; min-height: 44px;
  background: none; border: 0; text-align: left;
  font-size: var(--text-lg); font-weight: 400; line-height: 1.6; cursor: pointer;
}
.faq__icon { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; font-size: var(--text-lg); transition: transform .3s var(--ease); }
.faq__button[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding: 0 0 var(--space-5); font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

/* =========================================================================
   Wycena
   ========================================================================= */
.quote { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-10); }
.quote__title { font-size: var(--text-4xl); line-height: 1.08; }
.quote__lead { margin-top: var(--space-5); max-width: 46ch; font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }

.form { background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-5); align-content: start; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field__label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.field__input {
  padding: 11px 12px; min-height: 44px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink);
  font-size: var(--text-base); letter-spacing: .01em;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
.field__input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px rgba(168,38,29,.12); }
.field__input--area { resize: vertical; min-height: 110px; }

.drop {
  position: relative; display: block; padding: var(--space-6);
  border-radius: 10px; background: var(--paper-3); text-align: center;
  border: 1px dashed var(--line-strong); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.drop:hover, .drop.is-dragging { background: var(--chip); border-color: var(--ink); }
.drop__label { font-size: var(--text-base); letter-spacing: .01em; }
.drop__hint { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); overflow-wrap: anywhere; }
.drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.consent input { margin-top: 2px; width: 24px; height: 24px; accent-color: var(--ink); flex-shrink: 0; }
.consent a { color: var(--ink); }

.form__status { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 14px; background: var(--paper-3); border-left: 3px solid var(--muted); }
.form__status.is-ok { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
.form__status.is-error { background: var(--err-bg); color: var(--err); border-left-color: var(--err); }

/* =========================================================================
   Stopka
   ========================================================================= */
.footer { max-width: var(--wrap); margin: var(--space-section) auto 0; padding: var(--space-10) var(--gutter) var(--space-8); }
.footer__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); }
.footer__brand { font-size: var(--text-lg); font-weight: 500; }
.footer__blurb { margin-top: var(--space-3); max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.footer__heading { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
.footer__list { display: grid; gap: var(--space-2); margin-top: var(--space-3); font-size: 14px; }
.footer__list a { color: var(--nav-ink); padding-block: 2px; }
/* Oryginał miał tu 10px — poniżej progu czytelności. */
.footer__legal { margin-top: var(--space-5); font-size: var(--text-xs); line-height: 1.6; color: var(--ink-2); }

/* =========================================================================
   Galeria (realizacje.html)
   ========================================================================= */
.page-head { max-width: var(--wrap); margin-inline: auto; padding: clamp(40px, 7vw, 96px) var(--gutter) 0; }
.page-head__title { font-size: var(--text-4xl); line-height: 1.08; }
.page-head__lead { margin-top: var(--space-5); max-width: 56ch; font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-10); }
.filter {
  padding: var(--space-2) var(--space-4); min-height: 44px;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--text-sm); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter:hover { background: var(--chip); }
.filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters__status { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); min-height: 1.2em; }
.filters__status:empty { margin: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.tile { background: var(--paper-3); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.tile[hidden] { display: none; }
.tile__button { display: block; width: 100%; padding: 0; border: 0; background: var(--paper-3); cursor: zoom-in; }
.tile__button img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile__caption { padding: var(--space-4); }
.tile__title { font-size: var(--text-lg); font-weight: 400; line-height: 1.6; }
.tile__meta { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); overflow-wrap: anywhere; }
.tiles__empty { margin-top: var(--space-10); text-align: center; color: var(--muted); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); max-height: 96vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox__figure { display: grid; gap: var(--space-3); justify-items: center; }
.lightbox__img { max-width: 96vw; max-height: 84vh; width: auto; height: auto; border-radius: var(--radius); }
.lightbox__caption { color: var(--paper); font-size: 14px; text-align: center; }
.lightbox__close {
  position: fixed; top: var(--space-4); right: var(--space-4);
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.6);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.cta__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-8); align-items: center; }

/* =========================================================================
   Banner cookies
   ========================================================================= */
.cookie {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: 90; margin-inline: auto; max-width: 720px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: 0 20px 44px -22px rgba(0,0,0,.4);
}
.cookie[hidden] { display: none; }
.cookie__title { font-size: var(--text-lg); font-weight: 400; }
.cookie__text { margin-top: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cookie__text a { color: var(--ink); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.cookie__btn {
  flex: 1 1 160px; padding: 11px 18px; min-height: 44px;
  border-radius: var(--radius-pill); border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background var(--t-fast);
}
.cookie__btn:hover { background: #2A2A2A; }
.cookie__settings { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
.cookie__settings[hidden] { display: none; }
.cookie__opt { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.cookie__opt input { margin-top: 2px; width: 24px; height: 24px; accent-color: var(--ink); flex-shrink: 0; }
.cookie__opt input:disabled { accent-color: var(--muted); cursor: not-allowed; }
.cookie__opt strong { color: var(--ink); }
.cookie__settings .cookie__btn { justify-self: start; flex: none; }

/* =========================================================================
   Jedyny media query w pliku — oryginał nie miał żadnego, ale przy 400 px
   pasek nawigacji i pigułki wymagają ratunku.
   ========================================================================= */
@media (max-width: 720px) {
  /* Poniżej tej szerokości karta wychodziłaby poza kadr — wraca pod zdjęcie. */
  .spec-card { position: static; max-width: none; margin-top: var(--space-4); box-shadow: none; border: 1px solid var(--line); }
}

@media (max-width: 400px) {
  .usp li + li { border-left: 0; padding-left: 0; }
  .spec-card__list div { flex-direction: column; gap: 2px; }
  .spec-card__list dd { text-align: left; }
  .nav { gap: var(--space-2) var(--space-4); }
  .nav__links { gap: var(--space-2) var(--space-3); width: 100%; margin-left: 0; }
  .nav__phone { display: none; }           /* numer pozostaje w stopce i w Wycenie */
  .works__foot { flex-direction: column; align-items: flex-start; }
  .linklist a, .linklist div { flex-wrap: wrap; gap: var(--space-1); }
  .linklist span:last-child { text-align: left; }
}

/* =========================================================================
   Strony tekstowe (.prose)
   ========================================================================= */
.prose { max-width: 760px; }
.prose h1 { margin-bottom: var(--space-2); font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-xl); font-weight: 400; margin: var(--space-10) 0 var(--space-3); }
.prose h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose li { color: var(--ink-2); line-height: 1.65; }
.prose p + p { margin-top: var(--space-3); }
.prose ul { list-style: disc; padding-left: var(--space-6); margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.prose a { color: var(--ink); }
.prose strong { color: var(--ink); }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--paper-3); padding: 1px 6px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.prose__table { overflow-x: auto; margin: var(--space-3) 0 var(--space-5); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); font-weight: 400; }