@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&family=IBM+Plex+Mono:wght@400;500&family=Source+Sans+3:wght@400;600&display=swap');

/* ============================================================
   Zakład Szewski Glanek — szewc.rzeszow.pl
   Arkusz stylów oparty na design systemie „Classical”
   ============================================================ */

/* --- 1. Tokeny ------------------------------------------------ */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  /* wariant akcentu do tekstu na jasnym tle — #b68235 daje tylko 3,0:1 */
  --color-accent-ink: #8a5e15;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-600: #403e3a;
  --color-neutral-700: #403e3a;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #8a5e15;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;

  /* ciemne tło sekcji */
  --color-ink: #1a1918;
  --color-ink-deep: #0f0e0d;
  --color-cream: #f6f3ee;
  --color-cream-dim: #d6d0c7;
  --color-cream-mute: #c4beb4;
  --color-ink-divider: rgba(246, 243, 238, 0.18);

  /* Trzyczęściowy system:
     display  — szeryf, tylko h1/h2 i tekst od 36 px w górę, wyłącznie waga 400
     body     — bezszeryfowy, cały tekst czytany (h3, h4, akapity, nawigacja, przyciski)
     mono     — liczby (ceny, terminy, godziny, telefon) i etykiety wersalikami
     Podmiana kroju robi się TUTAJ i rozchodzi w dół — nie w komponentach. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);

  /* rytm strony — na makiecie 1440 px: 56 px marginesu, 80 px sekcji */
  --pad: clamp(20px, 3.9vw, 56px);
  --section-y: clamp(48px, 5.6vw, 80px);
  --maxw: 1440px;
}

/* --- 2. Reset i podstawy ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--sticky-h, 84px); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  text-wrap: pretty;
}
/* display — wyłącznie waga 400, innej nie ładujemy */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.008em;
}
/* h3 i h4 to już tekst czytany, nie display */
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Cormorant Garamond domyślnie daje cyfry nautyczne — jedynka wygląda jak małe I,
   czwórka i siódemka schodzą pod linię pisma. W nagłówku „7–14 dni, nie 45"
   jest to nieczytelne, więc wszędzie wymuszamy cyfry równe. */
h1, h2, h3, h4, p, li, td, th, figcaption, summary, button, a {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
ul { margin: 0; }

a { color: var(--color-accent-ink); text-underline-offset: 3px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* liczby w jednej szerokości — ceny, telefony, terminy */
.num { font-variant-numeric: tabular-nums lining-nums; }

/* wszystko, co układa się w kolumnę liczb */
.table, .hours, .datalist .dd, .factbar .fact-val, .compare-num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* nadtytuł / etykieta */
.kick {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.45;
}
.kick-muted { color: var(--color-neutral-600); }
.kick-accent { color: var(--color-accent-600); }
.kick-gold   { color: var(--color-accent-400); }

.muted { color: var(--color-neutral-700); }

/* Dopisek pod ceną albo pod tabelą. Osobna klasa, bo .kick daje wersaliki
   i monospace — przy tekście dłuższym niż trzy słowa czyta się to
   litera po literze i łamie w przypadkowych miejscach. */
.note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0;
}
.note-sm { font-size: 13px; }
.on-dark .note, .section-dark .note, .site-footer .note, .cta-band .note { color: var(--color-cream-mute); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-ink); color: var(--color-cream);
  padding: 12px 20px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --- 3. Kontener i sekcje ------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-y); }
.section-tight { padding-block: 0 var(--section-y); }
.section-line   { border-bottom: 1px solid var(--color-divider); }
.section-surface { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.section-dark {
  background: var(--color-ink);
  color: var(--color-cream);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-cream); }
.section-dark p { color: var(--color-cream-mute); }

/* Sekcja Vibram na stronie głównej — złoty blok na szerokość contentu, nie na
   całą szerokość ekranu. Gradient prowadzi od czerni po lewej, gdzie stoją
   zdjęcia (buty czytają się lepiej na ciemnym), do złota po prawej, pod tekst.
   Przejście kończy się na 53%, czyli zanim zacznie się kolumna z tekstem —
   dzięki temu czarny tekst nigdzie nie ląduje na średnim brązie. */
.vibram-panel {
  background: linear-gradient(90deg,
    #100d09 0%, #1e1710 26%, #4d3517 38%, #b8863a 46%, #e1ad66 53%, #e9bd80 100%);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: clamp(28px, 3.4vw, 56px);
  overflow: hidden;
}

/* prawa kolumna — na złocie wszystko czarne */
.vibram-copy h2, .vibram-copy h3, .vibram-copy h4, .vibram-copy p { color: var(--color-text); }
.vibram-copy .kick { color: #3a2a10; }
.vibram-copy .hero-price { color: var(--color-text); }
.vibram-panel .factlist { border-top-color: rgba(32, 31, 29, 0.3); }
.vibram-panel .factlist > div { border-bottom-color: rgba(32, 31, 29, 0.3); color: var(--color-text); }
/* złoty przycisk na złocie by zniknął */
.vibram-panel .btn-primary { color: var(--color-text); border-color: rgba(32, 31, 29, 0.55); }
.vibram-panel .btn-primary:hover { background: rgba(32, 31, 29, 0.1); }
.vibram-panel .btn-primary:active { background: rgba(32, 31, 29, 0.18); }

/* lewa kolumna — ciemne ramy i jasne podpisy, bo tam tło jest czarne */
.vibram-panel .plate { border-color: #241c14; outline-color: rgba(246, 243, 238, 0.16); }
.vibram-panel .imgslot { background: #1b1610; }
.vibram-panel figcaption.cap-kick { color: var(--color-cream-dim); }

/* Pas z opiniami Google — białe tło odcina go od sąsiednich sekcji, które
   stoją na --color-bg; bez tego cytaty zlewały się z blokiem kontaktowym. */
.section-quotes {
  background: #fff;
  border-block: 1px solid var(--color-divider);
}
.section-quotes .quotes blockquote { background: var(--color-bg); border-color: var(--color-divider); }

/* nagłówek sekcji: tytuł + dopisek, rozdzielone kreską */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 18px;
  margin-bottom: 36px;
}
.sec-head h2 { margin: 0; }
.h-lg { font-size: clamp(28px, 3.1vw, 40px); }
.h-xl { font-size: clamp(30px, 3.6vw, 46px); }

/* --- 4. Przyciski -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-sm { font-size: 15px; padding: 9px 17px; }

.btn-primary { color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* warianty na ciemnym tle */
.on-dark .btn-primary, .btn-gold {
  color: var(--color-accent-400);
  border-color: var(--color-accent-400);
}
.on-dark .btn-primary:hover, .btn-gold:hover {
  background: color-mix(in srgb, var(--color-accent-400) 16%, transparent);
}
.on-dark .btn-secondary, .btn-outline-light {
  color: var(--color-cream);
  border-color: rgba(246, 243, 238, 0.4);
}
.on-dark .btn-secondary:hover, .btn-outline-light:hover {
  background: rgba(246, 243, 238, 0.12);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- 5. Nagłówek strony i nawigacja --------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; text-decoration: none; color: inherit; }
.brand-name {
  /* sygnet marki, nie tekst — zostaje szeryfowy mimo rozmiaru poniżej 36 px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-sub { color: var(--color-neutral-600); }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); }
.nav a { font-size: 15px; color: inherit; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-accent-600); }

/* aktualna strona — złota kreska pod linkiem, żeby było widać gdzie jesteśmy */
.nav a[aria-current="page"] {
  /* bez pogrubienia — zmieniałoby szerokość linku, a przez to pozycje
     sąsiadów przy przechodzeniu między stronami. Kolor i kreska wystarczą. */
  position: relative;
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  background: var(--color-accent);
}
.nav .nav-tel {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: inherit;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: inherit;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}
.nav-toggle .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle .bars i { display: block; width: 16px; height: 1.5px; background: currentColor; }

/* --- 5b. Skoki do sekcji w treści ----------------------------- */
/* Był tu sticky pasek podnawigacji pod głównym menu (.subnav). Usunięty —
   skoki do sekcji stoją teraz jako zwykłe linki pod akapitem wstępnym. */
.jumplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 22px;
}
.jumplinks a {
  font-size: 16px;
  color: var(--color-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  padding-bottom: 2px;
}
.jumplinks a:hover { border-bottom-color: var(--color-accent-ink); }
.on-dark .jumplinks a, .section-dark .jumplinks a, .hero-overlay .jumplinks a {
  color: var(--color-accent-400);
  border-bottom-color: color-mix(in srgb, var(--color-accent-400) 50%, transparent);
}

/* --- 6. Hero ------------------------------------------------- */
/* 6a. hero ze zdjęciem w tle i gradientem */
.hero-overlay {
  position: relative;
  background: var(--color-ink);
  min-height: clamp(420px, 44vw, 640px);
  display: flex;
}
.hero-overlay .hero-media { position: absolute; inset: 0; }
.hero-overlay .hero-media .imgslot { height: 100%; }
.hero-overlay .hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,14,13,0.93) 0%, rgba(15,14,13,0.82) 50%, rgba(15,14,13,0.42) 100%);
}
.hero-overlay .hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: flex-end;
  padding-block: clamp(48px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--color-cream);
}
.hero-overlay .hero-body.center { align-self: center; }
.hero-title {
  font-size: clamp(38px, 5.3vw, 76px);
  line-height: 1.1;
  color: var(--color-cream);
  max-width: 900px;
  margin: 0;
}
.hero-title-xl { font-size: clamp(40px, 5.9vw, 84px); line-height: 1.08; max-width: 960px; }
.hero-lead {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.6;
  color: var(--color-cream-dim);
  max-width: 620px;
  margin: 0;
}
.hero-price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--color-accent-400);
}

/* 6b. hero dwudzielny: tekst + zdjęcie */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(420px, 40vw, 560px);
}
.hero-split .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 5.5vw, 80px) var(--pad);
}
.hero-split .hero-copy h1 {
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.1;
  margin: 20px 0 0;
}
.hero-split .hero-copy > p:not(.kick):not(.note) {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  margin: 24px 0 0;
  max-width: 560px;
}
.hero-split .hero-figure { min-height: 320px; }
.hero-split .hero-figure .imgslot { height: 100%; min-height: 320px; }
.price-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  color: var(--color-accent-600);
  line-height: 1.05;
  margin-top: 28px;
}

/* Bloki pełnoszerokościowe bez .wrap w środku — na ekranach szerszych niż
   1440 px zatrzymują się na krawędzi planszy, tak jak w makiecie. */
.hero-split,
.factbar {
  padding-inline: max(0px, calc((100% - var(--maxw)) / 2));
}

/* --- 7. Pasek faktów ----------------------------------------- */
.factbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.factbar > div {
  padding: 24px clamp(18px, 2.2vw, 32px);
  border-right: 1px solid var(--color-divider);
}
.factbar > div:last-child { border-right: 0; }
/* Listwa faktów, nie nagłówek — jeden krój we wszystkich polach, stały
   stopień, żeby nie konkurowała z hero. Selektor bez .factbar, bo ta sama
   listwa stoi na /realizacje/ w kontenerze .steps. */
.fact-val {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
}
.fact-val + .kick { font-size: 12px; margin-top: 4px; }

/* gwiazdka przy ocenie Google — mniejsza niż liczba, żeby nie dominowała */
.star {
  font-size: 0.62em;
  line-height: 1;
  color: var(--color-accent);
  vertical-align: 0.14em;
}
.on-dark .star, .section-dark .star { color: var(--color-accent-400); }

/* --- 8. Miejsca na zdjęcia ----------------------------------- */
/* Podmiana na prawdziwe zdjęcie: wstaw <img src="..." alt="..."> do środka .imgslot */
.imgslot {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  background:
    repeating-linear-gradient(135deg,
      rgba(32,31,29,0.055) 0 12px,
      rgba(32,31,29,0.02) 12px 24px),
    var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgslot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imgslot::after {
  content: attr(data-label);
  position: relative;
  z-index: 1;
  max-width: 78%;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}
.imgslot:has(> img)::after { content: none; }
.imgslot-dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(246,243,238,0.05) 0 12px,
      rgba(246,243,238,0.02) 12px 24px),
    #232120;
}
.imgslot-dark::after { color: rgba(246, 243, 238, 0.42); }

/* slot pod tekstem (hero, blok CTA) — etykieta w rogu, żeby nie kolidowała z nagłówkiem */
.imgslot-bg::after {
  position: absolute;
  top: 14px;
  left: 16px;
  max-width: 320px;
  text-align: left;
  padding: 0;
}

/* rama „płyty” — sepiowana odbitka w passe-partout */
.plate {
  box-sizing: border-box;
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
  overflow: hidden;
}
.plate > .imgslot { width: 100%; height: 100%; filter: sepia(0.22) saturate(0.82) contrast(1.05); }

/* mapa Google (zwykły embed, bez klucza API) — wypełnia ramkę jak zdjęcie.
   Filtr zdejmuje jaskrawość Map, żeby nie biła po oczach obok sepii;
   usuń linię z `filter`, jeśli mapa ma być w oryginalnych kolorach. */
.map-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(0.18) saturate(0.8) contrast(1.03);
}
.plate-dark { border-color: var(--color-neutral-900); outline-color: rgba(246,243,238,0.14); }

/* wysokości kadrów */
.ratio-sm { height: clamp(200px, 20vw, 240px); }
.ratio-md { height: clamp(220px, 22vw, 300px); }
.ratio-lg { height: clamp(260px, 30vw, 420px); }
.ratio-xl { height: clamp(320px, 40vw, 600px); }

/* Kadry pionowe. Wysokość liczona z proporcji, nie z clamp() — 62% zdjęć
   z warsztatu to pionowe 3:4, a wpychane w ramkę poziomą traciły przy
   kadrowaniu ~44% wysokości (butom znikały czubki i obcasy).
   4:5 zabiera z pionowego oryginału tylko 6%. */
.ratio-portrait { height: auto; aspect-ratio: 4 / 5; }
.ratio-tall     { height: auto; aspect-ratio: 3 / 4; }

/* --- 9. Siatki ----------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gap-lg { gap: 36px; }

/* dwie kolumny: media + tekst */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.split-start { align-items: start; }
.split-media-fixed { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }

/* --- 10. Karty usług ----------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: transparent;
}
.card > .imgslot, .card > .card-media { height: clamp(190px, 18vw, 260px); }
.card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body h3 { font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; margin: 0; }
.card-body p { margin: 0; color: var(--color-neutral-700); flex: 1; }
.card-price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  margin-top: 6px;
}

/* --- 11. Kafle bez marginesu (siatka 1 px) -------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.tiles > div { background: var(--color-bg); padding: 28px; }
.tiles h4 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; margin: 0 0 8px; }
.tiles p { margin: 0; color: var(--color-neutral-700); }

.brandlist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
  font-size: 15px;
  color: var(--color-neutral-700);
  letter-spacing: 0.04em;
}

/* --- 12. Kroki (siatka z pionowymi kreskami) ------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-text);
}
.steps > div { padding: 28px; border-right: 1px solid var(--color-divider); }
.steps > div:first-child { padding-left: 0; }
.steps > div:last-child { padding-right: 0; border-right: 0; }
.steps .step-no {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  /* #c28d41 dawało 2,6:1 na jasnym tle — poniżej progu 3:1 dla dużego tekstu */
  color: var(--color-accent-600);
}
.steps h4 { font-size: 22px; font-weight: 600; margin: 14px 0 8px; }
.steps p { margin: 0; color: var(--color-neutral-700); }

.section-dark .steps { border-top-color: rgba(246, 243, 238, 0.28); }
/* na ciemnym tle ciemne złoto z .steps .step-no byłoby nieczytelne */
.section-dark .steps .step-no, .on-dark .steps .step-no { color: var(--color-accent-400); }
.section-dark .steps > div { border-right-color: var(--color-ink-divider); }
.section-dark .steps p { color: var(--color-cream-mute); }

/* proces ze zdjęciami */
.process .step-no { font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: 0.02em; margin-top: 14px; }
.process h4 { font-size: 22px; font-weight: 600; margin: 8px 0 6px; }
.process p { margin: 0; color: var(--color-neutral-700); }
.section-dark .process .step-no { color: var(--color-accent-400); }
.section-dark .process p { color: var(--color-cream-mute); }

/* --- 13. Porównanie dwóch kolumn ----------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-text);
  margin-top: 32px;
}
.compare > div { padding: 28px 0; }
.compare > div:first-child {
  padding-right: clamp(24px, 3.4vw, 48px);
  border-right: 1px solid var(--color-divider);
}
.compare > div:last-child { padding-left: clamp(24px, 3.4vw, 48px); }
.compare-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
}
.compare-num-first { margin-top: 10px; }
/* Jedna barwa na kolumnę: konkurencja szara, warsztat złoty. Wcześniej
   w prawej kolumnie cena była czarna, a termin złoty — dwa akcenty
   w jednym bloku ciągnęły wzrok w dwie strony. */
.compare .dim { color: var(--color-neutral-700); }
.compare > div:last-child .compare-num { color: var(--color-accent-600); }
.compare ul { margin: 20px 0 0; padding-left: 20px; font-size: 18px; line-height: 1.65; }
.compare li + li { margin-top: 6px; }

/* --- 14. Tabela cennika -------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.55; min-width: 560px; }
/* kolumny cen i terminów — mono trzyma je w pionie równo */
.table .ta-r { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: 10px;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.table td { padding: 12px 10px; border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table .ta-r { text-align: right; }
.table tr.row-highlight { background: var(--color-accent-100); }
.table tr.row-highlight td {
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}
.table tr.row-highlight td:last-child { color: var(--color-accent-700); }

/* --- 15. FAQ ------------------------------------------------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--color-text); }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span:first-child { font-family: var(--font-body); font-weight: 600; font-size: clamp(19px, 1.6vw, 22px); }
.faq .faqsign {
  color: var(--color-accent);
  font-size: 20px;
  line-height: 1;
  flex: none;
  transition: transform 0.15s ease;
}
.faq details[open] .faqsign { transform: rotate(45deg); }
.faq details > p { margin: 0 0 22px; max-width: 900px; color: var(--color-neutral-700); }

/* --- 16. Opinie ---------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.quotes blockquote {
  margin: 0;
  padding: 26px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.quotes blockquote p { font-size: 17px; line-height: 1.65; margin: 0 0 16px; }
.quotes blockquote footer { color: var(--color-neutral-600); }

/* --- 17. Etykiety -------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: #f8f4f4; color: #444141; }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-ink); }

.filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 22px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.filterbar .filter-btn {
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filterbar .filter-btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.filterbar .filter-btn[aria-pressed="true"] {
  background: var(--color-accent-ink);
  color: var(--color-bg);
  border-color: var(--color-accent-ink);
}

/* --- 18. Lista danych (adres, godziny) ----------------------- */
.datalist { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.datalist-strong { border-top-color: var(--color-text); }
.datalist > div, .datalist > a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}
.datalist .dt { color: var(--color-neutral-600); flex: none; }
.datalist .dd { font-size: 17px; text-align: right; }
.datalist .dd-tel { font-family: var(--font-mono); font-weight: 500; font-size: clamp(19px, 1.8vw, 24px); }

.hours { display: flex; flex-direction: column; border-top: 1px solid var(--color-text); }
.hours > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-mono);
  font-size: 16px;
}

/* --- 19. Blok CTA -------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--color-ink);
  color: var(--color-cream);
}
.cta-band .cta-media { position: absolute; inset: 0; }
.cta-band .cta-media .imgslot { height: 100%; }
.cta-band .cta-scrim { position: absolute; inset: 0; background: rgba(15, 14, 13, 0.8); }
.cta-band .cta-body {
  position: relative;
  z-index: 2;
  padding-block: clamp(56px, 6.6vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.cta-band h2 {
  font-size: clamp(30px, 4.1vw, 60px);
  line-height: 1.05;
  color: var(--color-cream);
  margin: 0;
  max-width: 900px;
}
.cta-band .cta-meta { font-size: clamp(16px, 1.3vw, 19px); color: var(--color-cream-dim); margin: 0; }

/* --- 20. Stopka --------------------------------------------- */
.site-footer {
  background: var(--color-ink-deep);
  color: var(--color-cream-mute);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 32px;
  flex-wrap: wrap;
  padding-block: 40px;
}
.site-footer a { color: var(--color-cream-mute); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-400); }
.site-footer .foot-brand { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--color-cream); }
.site-footer .foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 15px; }
.site-footer .foot-legal { font-size: 14px; line-height: 1.7; text-align: right; }

/* --- 21. Drobiazgi ------------------------------------------- */
.hr { height: 1px; border: 0; margin: 18px 0; background: var(--color-divider); }
.prose p:not(.kick):not(.note) { font-size: 18px; line-height: 1.65; max-width: 680px; margin-bottom: 16px; }
.stack { display: flex; flex-direction: column; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; }

/* lista faktów rozdzielona kreskami (sekcja Vibram) */
.factlist { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--color-ink-divider); }
.factlist > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-ink-divider);
  font-size: 16px;
  color: var(--color-cream);
}

/* karta realizacji na stronie /realizacje/ */
.work { margin: 0; }
.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 10px;
}
.work-head h3 { font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; margin: 0; }
.work figcaption { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); margin-top: 12px; }
.work-meta { color: var(--color-accent-600); margin-top: 12px; }

figure > figcaption.cap {
  font-size: 15px;
  margin-top: 12px;
  color: var(--color-neutral-700);
  line-height: 1.6;
}
figcaption.cap-kick { margin-top: 8px; }
.section-dark figcaption.cap-kick { color: var(--color-cream-mute); }

/* --- 22. Responsywność --------------------------------------- */
@media (max-width: 1180px) {
  /* Poniżej tej szerokości poziome menu się nie mieści, więc całą nawigację
     przejmuje pływający hamburger. Wcześniej w przedziale 861–1180 px linki
     były ukryte, a hamburger jeszcze nie wchodził — nie było żadnego menu. */
  html { scroll-padding-top: 16px; }

  .site-header { position: static; }
  .site-header .wrap {
    padding-block: 14px;
    gap: 12px;
    /* rezerwa na pływający przycisk menu w prawym górnym rogu */
    padding-right: calc(var(--pad) + 108px);
  }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factbar > div:nth-child(2n) { border-right: 0; }
  .factbar > div:nth-child(-n + 2) { border-bottom: 1px solid var(--color-divider); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > div { padding: 24px; border-bottom: 1px solid var(--color-divider); }
  .steps > div:nth-child(odd) { padding-left: 0; }
  .steps > div:nth-child(even) { padding-right: 0; border-right: 0; }
  .section-dark .steps > div { border-bottom-color: var(--color-ink-divider); }
  .grid-3, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-media-fixed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* na wąskim ekranie tekst hero idzie przez całą szerokość, więc gradient
     poziomy przestaje go osłaniać — przełączamy go na pionowy */
  .hero-overlay .hero-scrim {
    background: linear-gradient(180deg, rgba(15,14,13,0.58) 0%, rgba(15,14,13,0.82) 40%, rgba(15,14,13,0.95) 100%);
  }

  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero-figure { order: -1; min-height: 260px; }
  .hero-split .hero-figure .imgslot { min-height: 260px; }
  .hero-split-media-first .hero-figure { order: -1; }

  .split, .split-media-fixed { grid-template-columns: 1fr; }
  /* Kolumny idą jedna pod drugą, a wysokość panelu zmienia się z łamaniem
     tekstu — procentowe stopy gradientu przestają trafiać w granicę zdjęć.
     Dlatego na wąskim ekranie panel dzieli się na dwa pasy: ciemny ze
     zdjęciami i złoty z tekstem, każdy z własnym przejściem. */
  .vibram-panel { padding: 0; background: none; gap: 0; }
  .vibram-panel > .grid {
    background: linear-gradient(180deg, #100d09 0%, #1c1610 72%, #3d2c15 100%);
    padding: clamp(24px, 5vw, 36px);
    margin: 0;
  }
  .vibram-copy {
    background: linear-gradient(180deg, #cf9c50 0%, #e1ad66 20%, #e9bd80 100%);
    padding: clamp(24px, 5vw, 36px);
  }
  /* para „przed / po" zostaje obok siebie — ma sens tylko w zestawieniu */
  .vibram-panel .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare { grid-template-columns: 1fr; }
  .compare > div:first-child {
    padding-right: 0;
    padding-bottom: 32px;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .compare > div:last-child { padding-left: 0; padding-top: 32px; }

  .quotes { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .site-footer .foot-legal { text-align: left; }

  .datalist .dd { font-size: 16px; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .grid-3, .grid-4, .tiles, .steps { grid-template-columns: 1fr; }
  /* cztery pola w jednej kolumnie zjadały cały ekran — siatka 2x2 */
  .factbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factbar > div { padding: 18px clamp(14px, 4vw, 20px); }
  .factbar > div:nth-child(2n) { border-right: 0; }
  .factbar > div:nth-child(-n + 2) { border-bottom: 1px solid var(--color-divider); }
  .factbar .fact-val { font-size: 18px; }
  .steps > div { padding: 22px 0 !important; border-right: 0; }
  .grid { gap: 22px; }
  .sec-head { margin-bottom: 26px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .datalist > div, .datalist > a { flex-direction: column; align-items: flex-start; gap: 4px; }
  .datalist .dd { text-align: left; }
  .hours > div { font-size: 16px; }
  .prose p { text-align: left; }
  .work-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Telefon w pionie: przy 38 px nagłówek hero łamie się na „Zakład szewski w /
   Rzeszowie od 1991 roku" — druga linia dobija do krawędzi, pierwsza wisi
   w połowie. 31 px przenosi łamanie za „Rzeszowie" i zostawia ~4% zapasu.
   Krój bez zmian, tylko stopień. */
@media (max-width: 480px) {
  .hero-title { font-size: 31px; }
  .hero-title-xl { font-size: 31px; }
}

/* --- 23. Menu mobilne: pływający hamburger + dolny arkusz ----- */
/* blokada scrolla tła gdy arkusz otwarty */
body.mmenu-lock {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

.mmenu { display: none; }

@media (max-width: 1180px) {

  /* 23a. Pływający przycisk menu ------------------------------- */
  .nav-toggle {
    position: fixed;
    z-index: 90;
    right: max(14px, env(safe-area-inset-right));
    top: calc(14px + env(safe-area-inset-top));
    gap: 9px;
    padding: 11px 17px 11px 14px;
    background: var(--color-ink);
    color: var(--color-cream);
    border: 1px solid color-mix(in srgb, var(--color-accent-400) 55%, transparent);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(15, 14, 13, 0.34);
    transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.26, 1), opacity 0.2s ease;
  }
  .nav-toggle .bars i { width: 18px; background: var(--color-accent-400); }
  .nav-toggle:active { transform: scale(0.96); }
  .nav-toggle[aria-expanded="true"] {
    transform: translateY(-130%) scale(0.9);
    opacity: 0;
    pointer-events: none;
  }

  /* 23b. Arkusz ------------------------------------------------ */
  .mmenu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
  }
  .mmenu[hidden] { display: none; }

  .mmenu-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 14, 13, 0.5);
    opacity: 0;
    transition: opacity 0.34s ease;
  }
  .mmenu.is-open .mmenu-scrim { opacity: 1; }

  .mmenu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    /* na tabletach arkusz nie rozlewa się na całą szerokość */
    max-width: 620px;
    margin-inline: auto;
    max-height: min(86dvh, 680px);
    padding-top: env(safe-area-inset-top);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 44px rgba(15, 14, 13, 0.34);
    transform: translateY(-101%);
    transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.26, 1);
    overscroll-behavior: contain;
  }
  .mmenu.is-open .mmenu-panel { transform: translateY(0); }
  .mmenu-panel.is-dragging { transition: none; }

  /* 23c. Nagłówek arkusza (chwyt do zsuwania) ------------------- */
  .mmenu-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--pad) 12px;
    border-bottom: 1px solid var(--color-divider);
  }

  /* uchwyt do zsuwania — u dołu panelu, bo arkusz opada z góry */
  .mmenu-grab {
    flex: none;
    display: grid;
    place-items: center;
    padding: 5px 0 11px;
    background: var(--color-surface);
    border-radius: 0 0 18px 18px;
    touch-action: none;
  }
  .mmenu-grip {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 20%, transparent);
  }
  .mmenu-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
  }
  .mmenu-close {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    color: inherit;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  .mmenu-close:active { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

  /* 23d. Treść ------------------------------------------------- */
  .mmenu-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px var(--pad) 10px;
  }
  .mmenu-label {
    color: var(--color-neutral-600);
    margin: 0 0 6px;
  }
  .mmenu-label + * { margin-top: 0; }
  .mmenu-group + .mmenu-label { margin-top: 22px; }

  .mmenu-list { display: flex; flex-direction: column; }
  .mmenu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 14px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--color-divider);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 0.32s ease,
      transform 0.38s cubic-bezier(0.22, 0.8, 0.26, 1),
      background-color 0.15s ease,
      padding-left 0.2s ease;
    transition-delay: calc(var(--i, 0) * 40ms);
  }
  .mmenu.is-open .mmenu-item { opacity: 1; transform: none; }
  .mmenu-item:last-child { border-bottom: 0; }
  .mmenu-item:active { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
  .mmenu-item[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--color-accent);
    padding-left: 13px;
  }
  .mmenu-item[aria-current="page"] .mmenu-t { color: var(--color-accent-600); }

  .mmenu-t {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
  }
  .mmenu-d {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--color-neutral-600);
    font-size: 13.5px;
    line-height: 1.4;
  }
  .mmenu-price {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    color: var(--color-accent-600);
    font-size: 14px;
    white-space: nowrap;
  }

  .mmenu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .mmenu-chips a {
    padding: 9px 15px;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    color: inherit;
    font-size: 14px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 0.3s ease,
      transform 0.34s cubic-bezier(0.22, 0.8, 0.26, 1);
    transition-delay: calc(var(--i, 0) * 40ms);
  }
  .mmenu.is-open .mmenu-chips a { opacity: 1; transform: none; }
  .mmenu-chips a:active { background: color-mix(in srgb, var(--color-text) 10%, transparent); }

  /* 23e. Stopka arkusza ---------------------------------------- */
  .mmenu-foot {
    flex: none;
    display: grid;
    gap: 10px;
    padding: 14px var(--pad) 12px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
  }
  .mmenu-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    background: var(--color-ink);
    color: var(--color-cream);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: 0.01em;
    text-decoration: none;
  }
  .mmenu-tel:active { background: var(--color-ink-deep); }
  .mmenu-foot .btn { width: 100%; justify-content: center; }
  .mmenu-meta {
    margin: 2px 0 0;
    text-align: center;
    color: var(--color-neutral-600);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .mmenu-item, .mmenu-chips a { transition-delay: 0s !important; }
}

@media print {
  .site-header, .nav-toggle, .mmenu, .cta-band, .filterbar { display: none !important; }
  body { background: #fff; }
}