@charset "UTF-8";
/* ============================================================
   OknoVita — arkusz stylów
   Tokeny pochodzą z brand/_ds/.../tokens/ (wersja po korekcie AA).
   Tryb ciemny wyprowadzony z tej samej palety: zmieniana jest
   wyłącznie jasność, odcienie marki pozostają nietknięte.
   Wszystkie pary tekst/tło przechodzą WCAG AA w obu trybach.
   ============================================================ */

/* ---------- 0. krój: Nunito z własnego serwera ----------
   Bez Google Fonts: przeglądarka nie wysyła adresu IP do Google. Nunito
   to krój zmienny (SIL OFL), więc jeden plik na zakres znaków obsługuje
   wszystkie trzy grubości; latin-ext to polskie litery (ą, ę, ł, ń, ś, ź, ż). */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. tokeny ---------- */
:root {
  /* zielenie powierzchni: te same co na smaal.pl, żeby obie marki
     czytały się jako jedna firma; OknoVita różni się akcentem (terakota) */
  --green-900: #0f2e24;   /* nagłówek, hero, sekcje ciemne, CTA, stopka */
  --green-800: #163a2c;   /* pasek faktów pod hero */
  --green-700: #1e4a3a;   /* sekcje średnie, przeplatane z jasnymi */

  /* zieleń z logo: tylko znak i favicon, nie powierzchnie */
  --deep-bottle-green: #24500a;
  --mid-green: #3b6d11;
  --light-green: #97c459;
  --terracotta: #f0997b;
  --terracotta-hover: #e8886a;
  --off-white: #faece7;
  --white: #fff;

  /* warianty kontrastowe: ta sama rodzina, inna jasność */
  --deep-green-ink: #173404;
  --terracotta-text: #ad441f;
  --terracotta-on-dark: #f5b8a3;

  /* neutralna baza wspólna z marką Smaal: tło z papieru, atrament, ciepłe szarości */
  --bone: #f5f2eb;
  --bone-200: #ede9e0;
  --bone-300: #e2ddd2;
  --ink: #14120f;
  --grey-700: #514c44;
  --grey-500: #6b6558;

  /* role semantyczne, tryb jasny */
  --bg-page: var(--bone);
  --bg-sunken: var(--bone-200);
  --bg-band: var(--green-900);
  --surface: var(--white);

  --heading: var(--ink);
  --body: var(--grey-700);
  --muted: var(--grey-500);
  --on-band: var(--bone);
  --on-band-muted: #b9c6bd;   /* ten sam token co --sm-text-inverse-muted w Smaal */
  --accent-text: var(--terracotta-text);
  --accent-on-band: var(--terracotta-on-dark);

  --btn-bg: var(--terracotta);
  --btn-bg-hover: var(--terracotta-hover);
  --btn-text: var(--deep-green-ink);
  --btn-outline: var(--ink);

  --link: var(--mid-green);
  --line: var(--bone-300);
  --line-strong: var(--grey-500);
  --focus: var(--mid-green);

  --shadow-1: none;
  --shadow-2: none;

  /* typografia */
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* siatka, kształt */
  --wrap: 1200px;
  --narrow: 720px;
  --r-btn: 8px;
  --r-card: 12px;

  /* ruch */
  --quick: 160ms;
  --base: 240ms;
  --slow: 420ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* tryb ciemny: z ustawienia systemu, o ile nie wymuszono jasnego */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #14120f;
    --bg-sunken: #1b1814;
    --surface: #221e19;
    --heading: var(--bone);
    --body: #d8d2c8;
    --muted: #aea79b;
    --accent-text: var(--terracotta-on-dark);
    --btn-outline: var(--bone);
    --link: var(--light-green);
    --line: rgb(245 242 235 / 0.14);
    --line-strong: #7a7366;
    --focus: var(--light-green);
    --shadow-1: none;
    --shadow-2: none;
    color-scheme: dark;
  }
}

/* tryb ciemny wymuszony przełącznikiem */
:root[data-theme="dark"] {
  --bg-page: #14120f;
  --bg-sunken: #1b1814;
  --surface: #221e19;
  --heading: var(--bone);
  --body: #d8d2c8;
  --muted: #aea79b;
  --accent-text: var(--terracotta-on-dark);
  --btn-outline: var(--bone);
  --link: var(--light-green);
  --line: rgb(245 242 235 / 0.14);
  --line-strong: #7a7366;
  --focus: var(--light-green);
  --shadow-1: none;
  --shadow-2: none;
  color-scheme: dark;
}

/* ---------- 1b. motywy sekcji ----------
   Sekcja na zieleni przestawia lokalne tokeny; wszystko w środku (nagłówki,
   listy, hairline, przyciski obrysowe, zaślepki) dostraja się samo.
   Rytm jak na smaal.pl: ciemny nagłówek i hero, pasek, potem na przemian
   jasne tło i zieleń. */
.on-dark,
.on-mid,
.on-strip {
  --heading: var(--bone);
  --body: #b9c6bd;
  --muted: #b9c6bd;
  --accent-text: var(--terracotta-on-dark);
  --link: var(--terracotta-on-dark);
  --btn-outline: var(--bone);
  --line: rgb(245 242 235 / 0.18);
  --line-strong: rgb(245 242 235 / 0.45);
  --focus: var(--terracotta-on-dark);
  --surface: rgb(245 242 235 / 0.05);
  --bg-sunken: rgb(245 242 235 / 0.06);
  --bg-page: var(--green-900);
  color: var(--body);
}

/* zaślepka na zieleni: bez drugiej warstwy tła i bez przygaszania opisu,
   inaczej tekst spada poniżej 4,5:1 */
.on-dark .ph,
.on-mid .ph {
  background: transparent;
}

.on-dark .ph figcaption em,
.on-mid .ph figcaption em {
  opacity: 1;
}

.on-dark { background: var(--green-900); }
.on-mid { background: var(--green-700); --bg-page: var(--green-700); }
.on-strip { background: var(--green-800); }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Atrybut hidden musi wygrywać z display:block powyżej, inaczej ikony
   przełączane skryptem renderowałyby się obie naraz. */
[hidden] {
  display: none !important;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--heading);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 1.55rem + 1.9vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin: 0;
}

a {
  color: var(--link);
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--terracotta);
  color: var(--deep-green-ink);
}

.ico {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--heading);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  left: 24px;
  top: 24px;
}

/* ---------- 3. układ ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 20px;
}

.wrap.narrow {
  max-width: var(--narrow);
}

.sec {
  padding-block: 64px;
}

.sec.sunken {
  background: var(--bg-sunken);
}

.band {
  padding-block: 64px;
}

.band strong {
  color: var(--accent-text);
  font-weight: 600;
}

.lede {
  max-width: 62ch;
  font-size: 1.125rem;
  color: var(--muted);
}

.prose {
  max-width: 70ch;
  color: var(--body);
}

.prose + .prose {
  margin-top: 20px;
}

.eyebrow {
  margin-bottom: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- 4. przyciski ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--quick) var(--ease-io),
    color var(--quick) var(--ease-io),
    border-color var(--quick) var(--ease-io);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.btn-primary:hover {
  background: var(--btn-bg-hover);
}

.btn-outline {
  border-color: var(--btn-outline);
  color: var(--heading);
  background: transparent;
}

.btn-outline:hover {
  background: var(--heading);
  border-color: var(--heading);
  color: var(--bg-page);
}

.btn-sm {
  padding: 11px 20px;
  font-size: 0.875rem;
}

.btn-icon {
  padding: 0;
  width: 40px;
  height: 40px;
}

.btn-icon .ico {
  width: 18px;
  height: 18px;
}

/* ---------- 5. nagłówek strony ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green-900);
  border-bottom: 1px solid rgb(245 242 235 / 0.12);
  --heading: var(--bone);
  --muted: #b9c6bd;
  --btn-outline: var(--bone);
  --bg-sunken: rgb(245 242 235 / 0.08);
  --line: rgb(245 242 235 / 0.14);
  --line-strong: rgb(245 242 235 / 0.45);
  --bg-page: var(--green-900);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
}

.brand svg {
  width: 30px;
  height: 30px;
  color: var(--heading);
}

.brand span {
  font-size: 1.25rem;
  color: var(--heading);
  letter-spacing: -0.01em;
}

.brand b {
  font-weight: 800;
}

.brand i {
  font-style: normal;
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--quick) var(--ease-io);
}

.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--heading);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-links + .nav-tools {
  margin-left: 16px;
}

.nav-menu {
  display: none;
}

.nav-panel {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--green-900);
}

.nav-panel.open {
  display: block;
}

.nav-panel ul {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 8px 20px;
}

.nav-panel a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
}

.nav-panel li:last-child a {
  border-bottom: 0;
}

/* ---------- 6. hero ----------
   Jak na smaal.pl: ciemnozielona sekcja, tekst z lewej, fotografia z prawej
   w zaokrąglonej ramce. Bez panelu i bez nakładek na zdjęciu. */
.hero-dark {
  display: grid;
  gap: 32px;
  align-items: center;
  padding-block: 40px 56px;
}

.hero-dark h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.hero-dark .lede {
  margin-top: 16px;
  max-width: 52ch;
}

.hero-dark .hero-cta {
  margin-top: 28px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-dark .hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
}

.hero-dark .hero-media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.hero-dark .hero-media img {
  object-fit: cover;
  animation: hero-settle 1.6s var(--ease) both;
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

.hero-dark.compact {
  padding-block: 32px 48px;
}

.hero-dark.compact h1 {
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
}

/* pasek faktów pod hero, jak w Smaal */
.strip {
  border-top: 1px solid rgb(245 242 235 / 0.12);
}

.strip ul {
  display: grid;
  gap: 0;
}

.strip li {
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--heading);
  border-bottom: 1px solid rgb(245 242 235 / 0.12);
}

/* ---------- 6b. zaślepka zdjęcia ----------
   Nie udaje fotografii. Pole w kolorze warstwy, hairline i opis kadru,
   który ma tu trafić. Podmieniasz plik w assets/images pod tą samą nazwą
   i build sam zamienia zaślepkę na zdjęcie. */
.ph {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--bg-sunken);
  box-sizing: border-box;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.ph .ico {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  opacity: 0.7;
}

.ph figcaption {
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.5;
}

.ph figcaption b {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--heading);
}

.ph figcaption em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* ---------- 6c. para zdjęcie + tekst ----------
   Fotografia obok tekstu, nie pod nim. Dwie takie pary pod rząd to
   maksimum; trzecia byłaby już szablonem. */
.pair {
  display: grid;
  gap: 32px;
  align-items: center;
  margin-top: 48px;
}

.pair figure,
.pair .ph {
  margin: 0;
}

.pair .pair-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
}

.pair .pair-media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.pair .pair-media img {
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.pair:hover .pair-media img {
  transform: scale(1.025);
}

.pair-copy h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pair-copy p {
  max-width: 48ch;
  margin-top: 16px;
  color: var(--body);
}

/* ---------- 7. blok definicyjny ---------- */
.def {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.def p {
  max-width: 74ch;
  font-size: 1.125rem;
  color: var(--body);
}

.def a {
  font-weight: 600;
  color: var(--accent-text);
  text-underline-offset: 4px;
}

/* ---------- 8. listy rozwijane ---------- */
.disc {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.disc details {
  border-bottom: 1px solid var(--line);
}

.disc summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  transition: color var(--quick) var(--ease-io);
}

.disc summary::-webkit-details-marker {
  display: none;
}

.disc summary:hover {
  color: var(--link);
}

.disc summary .mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  color: var(--line-strong);
  transition: transform var(--base) var(--ease);
}

.disc details[open] summary .mark {
  transform: rotate(45deg);
}

.disc summary .mark .ico {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.disc .answer {
  max-width: 70ch;
  padding: 0 0 20px 40px;
  color: var(--muted);
}

/* ---------- 9. karty ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--quick) var(--ease),
    box-shadow var(--quick) var(--ease);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.card-body {
  padding: 24px;
}

.card h3 + p {
  margin-top: 8px;
  color: var(--muted);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.more .ico {
  width: 18px;
  height: 18px;
  transition: transform var(--quick) var(--ease);
}

.more:hover .ico {
  transform: translateX(4px);
}

.grid-3 {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

/* ---------- 10. jak wygląda wizyta: oś procesu ----------
   Pięć kroków jeden pod drugim. Grafiką jest numer, nie ikona ani zdjęcie:
   ikona telefonu przy „Umawiamy się" powtarzałaby nagłówek, a trzy z pięciu
   kroków (umawiamy, dojeżdżamy, wyceniamy) nie mają treści fotograficznej.
   Jeden układ na każdej szerokości, bez przypinania do przewijania. */
.steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 20px;
}

/* Numer i odcinek linii w jednej kolumnie. Linia rozciąga się na całą
   wysokość wiersza, więc dobiega do następnego numeru bez wyliczania
   odstępów ręcznie. Dopełnienie siedzi w treści, nie w pozycji listy,
   żeby kolumna numerów rozciągała się razem z nim. */
.step-n {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.step-n b {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.step-n i {
  flex: 1;
  width: 1px;
  background: var(--line-strong);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease);
}

.js .step.in .step-n i {
  transform: none;
}

.step:last-child .step-n i {
  display: none;
}

.step-copy {
  padding-bottom: 36px;
}

.step:last-child .step-copy {
  padding-bottom: 0;
}

.step-copy h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.step-copy p {
  margin-top: 10px;
  max-width: 54ch;
  color: var(--body);
}

.how-sum {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--heading);
}

@media (min-width: 768px) {
  .step {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0 32px;
  }
  .step-n b {
    font-size: 2.75rem;
  }
  .step-copy {
    padding-bottom: 48px;
  }
  .step-copy h3 {
    font-size: 1.5rem;
  }
}

/* ---------- 11. dlaczego warto: lista, nie kafle ----------
   Sześć krótkich zdań nie potrzebuje sześciu kart z ikonami. Dwie kolumny,
   hairline między pozycjami, tytuł w atramencie, treść w szarości. */
.why-list {
  display: grid;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.why-list li {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.why-list strong {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--heading);
}

.why-list span {
  color: var(--body);
  max-width: 44ch;
}

.why-list.numbered {
  counter-reset: krok;
}

.why-list.numbered li {
  grid-template-columns: 2.5rem 1fr;
  grid-template-areas: "n t" "n s";
  column-gap: 12px;
}

.why-list.numbered li::before {
  counter-increment: krok;
  content: counter(krok, decimal-leading-zero);
  grid-area: n;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  padding-top: 4px;
}

.why-list.numbered strong { grid-area: t; }
.why-list.numbered span { grid-area: s; }

/* ---------- 11b. kafle „Zobacz też" ----------
   Zdjęcie, tytuł, jedno zdanie, odnośnik. Bez ramki i tła: odstęp
   i hairline robią za strukturę, a zdjęcie za akcent. */
.tiles-3 {
  display: grid;
  gap: 32px;
  margin-top: 40px;
}

.tile {
  display: block;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--base) var(--ease),
    border-color var(--base) var(--ease);
}

/* Powiększenie kafelka po najechaniu. Tylko transform, więc nic się nie
   przelicza w układzie i sąsiednie kafelki stoją w miejscu.
   Selektor z trzema klasami, bo musi przebić stan końcowy odsłaniania
   (.js .rv.in ustawia transform: none). */
.js .tile.rv.in:hover,
.tile:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--line-strong);
}

.tile .tile-media > * {
  transition: transform 0.6s var(--ease);
}

.tile:hover .tile-media > * {
  transform: scale(1.04);
}

.tile .tile-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 16px;
}

/* Zawartość kadru jest wyjęta z układu (position: absolute). To kluczowe:
   element poza układem nie wpływa na wysokość rodzica, więc height: 100%
   nie ma jak rozkręcić pętli. Ta sama wysokość w procentach na elemencie
   w układzie, wewnątrz rodzica z aspect-ratio, rozpychała kadr w Safari
   przy każdym przerysowaniu, czyli przy każdym najechaniu myszą. */
.tile .tile-media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.tile .tile-media img {
  object-fit: cover;
}

.tile h3 {
  font-size: 1.25rem;
}

.tile p {
  margin-top: 6px;
  color: var(--body);
}

.tile .more {
  margin-top: 12px;
}

/* ---------- 12. miasta ---------- */
.cities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 60rem;
  margin-top: 32px;
}

.city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--heading);
  transition: border-color var(--quick) var(--ease-io);
}

.city:hover {
  border-color: var(--line-strong);
}

.city .ico {
  width: 16px;
  height: 16px;
  color: var(--accent-text);
}

.city-main {
  border-color: transparent;
  background: var(--green-900);
  color: var(--bone);
}

.city-main .ico {
  color: var(--accent-on-band);
}

/* ---------- 13. wykaz danych ---------- */
.data {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.data dt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}

.data dd {
  margin-top: 4px;
  font-weight: 600;
  color: var(--heading);
}

.data .todo {
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

.bullets {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.bullets li {
  display: flex;
  gap: 12px;
  color: var(--body);
}

.bullets li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ---------- 13b. tabela ---------- */
.table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

thead th {
  padding: 14px 20px;
  text-align: left;
  font-weight: 600;
  color: var(--heading);
  background: var(--bg-sunken);
  white-space: nowrap;
}

tbody td {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  color: var(--body);
}

/* Ostatnia kolumna to zwykle cena: wyróżniamy ją wagą, nie kolorem. */
tbody td:last-child {
  font-weight: 600;
  color: var(--heading);
  white-space: nowrap;
}

.todo {
  font-weight: 400;
  font-style: italic;
  opacity: 0.75;
}

/* ---------- 14. formularz ---------- */
.form {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--body);
  font: inherit;
  transition: border-color var(--quick) var(--ease-io);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field .hint {
  font-size: 0.875rem;
  color: var(--muted);
}

.field .err {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--accent-text);
}

.field.invalid .err {
  display: flex;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: var(--accent-text);
}

.field .err .ico {
  width: 15px;
  height: 15px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--body);
}

.consent input {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex: none;
  accent-color: var(--terracotta);
}

.form-note {
  padding: 16px;
  border-radius: var(--r-btn);
  background: var(--bg-sunken);
  font-size: 0.875rem;
}

.form-note a {
  font-weight: 600;
  color: var(--accent-text);
}

/* Pułapka na roboty. Nie display:none, bo część botów to wykrywa; pole jest
   poza ekranem i poza kolejnością tabulacji, więc człowiek go nie dotknie. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 15. stopka ---------- */
.foot {
  padding-block: 64px;
  background: var(--green-900);
  color: #b9c6bd;
  border-top: 1px solid rgb(245 242 235 / 0.12);
}

.foot-grid {
  display: grid;
  gap: 40px;
}

.foot h2 {
  margin-bottom: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-band);
}

.foot a {
  color: var(--on-band-muted);
  text-decoration: none;
  transition: color var(--quick) var(--ease-io);
}

.foot a:hover {
  color: var(--accent-on-band);
}

.foot ul {
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
}

.foot .brand span {
  color: var(--on-band);
}

.foot .brand svg {
  color: var(--on-band);
}

.foot-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--on-band);
}

.foot-note {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgb(217 227 206 / 0.25);
  font-size: 0.875rem;
}

.tel-big {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--heading);
  text-decoration: none;
}

.tel-big .ico {
  color: var(--accent-text);
}

.tel-big:hover {
  color: var(--link);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.band .tel-big {
  color: var(--on-band);
}

.band .tel-big .ico {
  color: var(--accent-on-band);
}

/* ---------- 16. odsłanianie przy przewijaniu ----------
   Stan ukryty obowiązuje tylko pod .js, którą dopisuje skrypt.
   Bez JavaScriptu treść jest widoczna od razu. */
.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--slow) var(--ease),
    transform var(--slow) var(--ease);
}

.js .rv.in {
  opacity: 1;
  transform: none;
}

/* ---------- 17. szerokie ekrany ---------- */
@media (min-width: 640px) {
  .wrap {
    padding-inline: 32px;
  }
  .nav-in {
    padding-inline: 32px;
  }
  .grid-3,
  .tiles-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .cell-wide {
    grid-column: span 2;
  }
  .data {
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot-grid > :first-child {
    grid-column: 1 / -1;
  }
  .bullets {
    grid-template-columns: 1fr 1fr;
    gap: 12px 32px;
  }
}

@media (min-width: 1024px) {
  .wrap {
    padding-inline: 48px;
  }
  .nav-in {
    padding-inline: 48px;
  }
  .sec {
    padding-block: 96px;
  }
  .band,
  .foot {
    padding-block: 96px;
  }
  .hero {
    grid-template-columns: 1.25fr 0.75fr;
    padding-block: 64px 48px;
  }
  .hero-dark {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding-block: 56px 72px;
  }
  .hero-dark.compact {
    grid-template-columns: 1.1fr 0.9fr;
    padding-block: 40px 56px;
  }
  .strip ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .strip li {
    border-bottom: 0;
    border-right: 1px solid rgb(245 242 235 / 0.12);
  }
  .strip li:last-child {
    border-right: 0;
  }
  .pair {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
  }
  .pair.rev .pair-media {
    order: 2;
  }
  .why-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
  .hero-media {
    aspect-ratio: 4 / 5;
  }
  .hero-page {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .tiles {
    grid-template-columns: 1.4fr 1fr;
  }
  .strip li {
    padding: 18px 24px;
  }
  /* marka + trzy grupy odnośników + kolumna kontaktowa, jeden rząd */
  .foot-grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }
  .foot-grid > :first-child {
    grid-column: auto;
  }
}

/* ---------- 18. wąskie ekrany ---------- */
@media (max-width: 1023px) {
  .nav-links {
    display: none;
  }
  .nav-menu {
    display: grid;
  }
}

@media (max-width: 639px) {
  .nav-cta {
    display: none;
  }
  .brand span {
    font-size: 1.125rem;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .hero-dark .hero-media {
    order: -1;
  }
}

@media (min-width: 640px) {
  .nav-tel {
    display: none;
  }
}

/* ---------- 19. ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .js .rv {
    opacity: 1;
    transform: none;
  }
  .js .step-n i {
    transform: none;
  }
}

/* ---------- 20. druk ---------- */
@media print {
  .nav,
  .foot,
  .btn,
  .skip {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ---------- 21. rezerwacja przeglądu (umow-przeglad.html) ----------
   Kalendarz dni, lista godzin i formularz. Kolory wyłącznie z tokenów,
   więc tryb ciemny dostraja się sam. */
.bk-sec { padding-top: 24px; }

.bk-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: bk;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}

.bk-steps li { counter-increment: bk; display: flex; align-items: center; gap: 8px; }

.bk-steps li::before {
  content: counter(bk);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--heading);
  font-size: 0.75rem;
}

.bk-grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .bk-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.bk-cal-card,
.bk-hours-card { padding: 24px; }

.bk-cal-card:hover,
.bk-hours-card:hover,
.bk-form:hover { transform: none; }

.bk-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.bk-cal-head h2 { font-size: 1.25rem; text-align: center; }
.bk-cal-head .btn:disabled { opacity: 0.35; cursor: default; }

.bk-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-height: 280px;
  align-content: start;
}

.bk-wd {
  padding-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}

.bk-day {
  display: grid;
  place-items: center;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-btn);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.bk-off { color: var(--muted); opacity: 0.45; }

.bk-free {
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--terracotta) 22%, var(--surface));
  color: var(--heading);
  font-weight: 800;
  cursor: pointer;
  transition: background-color var(--quick) var(--ease-io), color var(--quick) var(--ease-io);
}

.bk-free:hover { background: color-mix(in srgb, var(--terracotta) 45%, var(--surface)); }

.bk-free.is-selected,
.bk-hour.is-selected {
  background: var(--btn-bg);
  border-color: var(--heading);
  color: var(--btn-text);
}

.bk-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.bk-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--terracotta) 22%, var(--surface));
  flex: none;
}

.bk-hours-title { font-size: 1.125rem; margin-bottom: 16px; }

.bk-hours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
}

.bk-hour {
  padding: 13px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--quick) var(--ease-io), background-color var(--quick) var(--ease-io);
}

.bk-hour:hover { border-color: var(--btn-bg); }

.bk-hint { grid-column: 1 / -1; color: var(--muted); font-size: 0.9375rem; }

.bk-status { margin-top: 20px; }
.bk-status.bk-error { color: var(--accent-text); font-weight: 600; }

.bk-form { margin-top: 24px; scroll-margin-top: 96px; }

.bk-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 16px;
  border-radius: var(--r-btn);
  background: var(--bg-sunken);
}

.bk-summary span { font-size: 0.875rem; color: var(--muted); }
.bk-summary strong { color: var(--heading); }

.bk-summary .btn-link {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.bk.is-loading .bk-cal,
.bk.is-loading .bk-hours { opacity: 0.4; }

.bk-done h2 { margin-bottom: 12px; }
.bk-done p + p { margin-top: 12px; }

.bk-how {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding-left: 20px;
  max-width: 70ch;
}

/* karta na stronie kontakt */
.bk-promo-sec { padding-block: 8px 0; }

.bk-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 20px 24px;
  color: var(--body);
  text-decoration: none;
}

.bk-promo strong { display: block; color: var(--heading); font-size: 1.0625rem; }

.bk-promo-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--terracotta) 22%, var(--surface));
  color: var(--heading);
  flex: none;
}

.bk-promo-ico .ico { width: 22px; height: 22px; }

.bk-promo-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-weight: 600;
  color: var(--accent-text);
}

.bk-promo-go .ico { width: 18px; height: 18px; }