/* noriet.pl — main stylesheet.
   Tokens extracted from the approved design decks ("Noriet website redesign").
   Mobile-first; no inline styles anywhere (CODING-STANDARDS.md).
   Fonts: Petrona/Source Sans 3 to be self-hosted in Phase 2 (latin-ext);
   until then the stacks fall back to Georgia/system. */

:root {
  --brand: #0090b8; --brand-ink: #0a6f8e; --brand-wash: #eaf5f9; --brand-line: #bfdfeb;
  --btn-bg: #0a6f8e; --btn-bg-hover: #08556e; --btn-fg: #ffffff;
  --navy: #081830; --navy-2: #12294a;
  --paper: #ffffff; --paper-2: #f5f7f9; --paper-3: #eceff3;
  --ink: #0d1c30; --ink-2: #42536a; --ink-3: #5d6f86; --danger: #b3261e;
  --line: #dde3ea; --line-2: #c3ccd7;
  --on-dark: #eaf0f6; --on-dark-2: #a9bcd0;
  --focus: #0090b8;
  --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-base: 1.0625rem; --t-md: 1.1875rem;
  --t-lg: 1.375rem;
  --t-xl: clamp(1.5rem, 1.15rem + 1.4vw, 1.875rem);
  --t-2xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;
  --measure: 68ch; --radius: 6px; --radius-lg: 10px;
  --serif: 'Petrona', 'Petrona Fallback Georgia', 'Petrona Fallback Noto', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Source Sans 3 Fallback Arial', 'Source Sans 3 Fallback Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 1px 2px rgba(13, 28, 48, .05), 0 10px 28px -14px rgba(13, 28, 48, .22);
  color-scheme: light;
}

/* Dark theme: system preference by default, user override via data-theme
   (set by the inline head script _includes/js/theme-init.js + the header toggle; persisted in localStorage). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #2aa8cc; --brand-ink: #67c7e4; --brand-wash: #0e2740; --brand-line: #1d4767;
    --btn-bg: #2aa8cc; --btn-bg-hover: #67c7e4; --btn-fg: #04121f;
    --navy: #040e1c; --navy-2: #0b1e37;
    --paper: #0a1727; --paper-2: #101f33; --paper-3: #16293f;
    --ink: #e9eff6; --ink-2: #b3c3d4; --ink-3: #8fa2b7; --danger: #ff8a80;
    --line: #1e3450; --line-2: #2b4869;
    --on-dark: #e9eff6; --on-dark-2: #a4b8cd;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --brand: #2aa8cc; --brand-ink: #67c7e4; --brand-wash: #0e2740; --brand-line: #1d4767;
    --btn-bg: #2aa8cc; --btn-bg-hover: #67c7e4; --btn-fg: #04121f;
    --navy: #040e1c; --navy-2: #0b1e37;
    --paper: #0a1727; --paper-2: #101f33; --paper-3: #16293f;
    --ink: #e9eff6; --ink-2: #b3c3d4; --ink-3: #8fa2b7; --danger: #ff8a80;
    --line: #1e3450; --line-2: #2b4869;
    --on-dark: #e9eff6; --on-dark-2: #a4b8cd;
    color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  /* deck global: antialiased type (webkit prop from the decks + the
     standard macOS-Firefox companion for the same result) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p, li, dd { text-wrap: pretty; }
input, textarea, button, select { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-ink); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* Deck typography: serif headings are 600, never browser-default 700,
   with slight negative tracking on the two largest sizes. */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -.015em; margin: 0 0 var(--s4); }
h2 { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.012em; margin: var(--s7) 0 var(--s4); }
h3 { font-size: var(--t-lg); line-height: 1.3; margin: var(--s5) 0 var(--s3); }

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

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--navy); color: var(--on-dark);
  padding: var(--s2) var(--s4); z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: var(--s3) var(--s5);
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn { font-size: var(--t-base); }
/* doubled class outranks contextual "a" colour rules (.site-nav__list a, .list-card a) */
.btn--call, .btn.btn--call { background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; }
.btn--call:hover, .btn.btn--call:hover { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
.btn--ghost { border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }

/* ---------- header ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header__row {
  display: flex; align-items: center;
  gap: var(--s4); padding-block: var(--s3);
  flex-wrap: wrap;
}
/* brand takes the left, everything after it groups on the right */
.site-header__row .brand { margin-right: auto; }

/* Mobile tap-to-call (review04 #44). Below 64rem the nav CTA hides behind
   "Menu", which left articles and product pages without a phone in the first
   screen. Icon only, 40px, same frame as the theme toggle. */
.header-call { display: none; }
@media (max-width: 63.99rem) {
  .header-call {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    color: var(--brand-ink);
  }
  .header-call:hover { color: var(--ink); border-color: var(--brand); }
  .header-call svg { width: 20px; height: 20px; display: block; }
}
.brand { text-decoration: none; display: block; }

/* Inline SVG logo (partials/logo.njk): fills follow the theme.
   The teal mark keeps its brand colour on both themes. */
.brand-logo { display: block; height: 38px; width: auto; }
.brand-logo .logo__mark { fill: #009bbe; }
.brand-logo .logo__word { fill: var(--ink); }
.brand-logo .logo__sub { fill: var(--ink-3); }
/* Phones: logo 28px and a tighter gap, so logo + call + Menu + theme toggle
   fit one row at 390px (the call button made the toggle wrap, review04 #44). */
@media (max-width: 40rem) {
  .brand-logo { height: 28px; }
  .site-header__row { gap: var(--s2); }
}

.nav-toggle {
  display: none;
  align-items: center; gap: var(--s2);
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: var(--s2) var(--s4);
  font: inherit; color: var(--ink); cursor: pointer;
}
.nav-toggle__bar {
  width: 18px; height: 2px; background: currentColor; position: relative;
}
.nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor;
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }

.site-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s2);
  width: 100%;
}
.site-nav__list a {
  text-decoration: none; color: var(--ink); display: block;
  padding: var(--s2) 0; font-size: var(--t-sm); font-weight: 600;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--brand-ink); border-bottom-color: var(--line-2); }
.site-nav__cta .btn {
  font-size: var(--t-sm); display: block; text-align: center;
  padding: var(--s3) var(--s5); border-bottom: 0;
}
.site-nav__list a[aria-current="page"] { color: var(--brand-ink); font-weight: 600; }
.site-nav__cta { margin-top: var(--s2); }

/* JS present: collapse the menu behind the toggle on small screens */
.js .nav-toggle { display: inline-flex; }
.js .site-nav { display: none; width: 100%; }
.js .site-nav--open { display: block; }
/* The opened menu takes its own full-width row. Order it last so the theme
   toggle stays in the top row instead of wrapping below the menu (owner
   report 2026-09-12). Tab order stays DOM order: Menu, links, toggle. */
@media (max-width: 63.99rem) { .site-nav { order: 10; } }

@media (min-width: 64rem) {
  .nav-toggle, .js .nav-toggle { display: none; }
  .js .site-nav, .site-nav { display: block; width: auto; }
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--s5); width: auto; }
  .site-nav__cta { margin: 0 0 0 var(--s4); }
}

/* ---------- hero ---------- */
.hero { background: var(--navy); color: var(--on-dark); padding-block: var(--s6) var(--s8); }
.hero h1 { color: var(--on-dark); max-width: 26ch; }
.hero__lead { color: var(--on-dark-2); font-size: var(--t-md); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero .btn--ghost { border-color: var(--navy-2); color: var(--on-dark); }
.hero .btn--ghost:hover, .hero--light .btn--ghost:hover,
.service-hero .btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); }

/* ---------- cards / grids ---------- */
.card-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-lg); padding: var(--s6);
}
.card h3 { margin: 0; }
.card p { color: var(--ink-2); font-size: var(--t-base); margin: 0; }
.card .card__foot, .card__foot { margin-top: auto; padding-top: var(--s3); }
.card__more, .more { font-weight: 600; font-size: var(--t-sm); }
.more::after { content: "→"; margin-inline-start: 0.35em; }
.card__more { display: inline-flex; align-items: center; min-height: 44px; }

/* Category cards. One partial (partials/category-grid.njk) renders these on the
   homepage and on /kontakt/, so the two surfaces cannot drift. The linked title
   is the anchor that matters; the rows below it are the spokes. */
.cat-card { gap: var(--s4); }
.cat-card__title { margin: 0; font-size: var(--t-lg); }
.cat-card__title a { color: var(--brand-ink); text-decoration: none; }
.cat-card__title a::after { content: " \2192"; }
.cat-card__title a:hover { text-decoration: underline; }
.cat-card__list { list-style: none; margin: 0; padding: 0; }
.cat-card__list a {
  display: flex; align-items: center; min-height: 44px;
  border-top: 1px solid var(--line); padding: var(--s2) 0;
  font-size: var(--t-base); line-height: 1.35;
  text-decoration: none; color: var(--ink-2);
}
.cat-card__list a:hover { color: var(--brand-ink); text-decoration: underline; }
.cat-card__note { color: var(--ink-3); font-size: var(--t-sm); }

.areas, .offer { padding-block: var(--s6); }

/* ---------- article / prose ---------- */
.breadcrumb { font-size: var(--t-xs); margin-block: var(--s4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; color: var(--ink-3); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s2); }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb li:last-child {
  color: var(--ink-2); font-weight: 600;
  min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.service { padding-block: var(--s4) var(--s6); }
/* overflow-wrap: migrated bodies contain bare URLs that cannot wrap and made
   /obligacje/ scroll sideways at 390 px (review03 #30). */
.prose { max-width: var(--measure); overflow-wrap: anywhere; }
.prose h2 { font-size: var(--t-xl); }
.prose h3 { font-size: var(--t-lg); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 0.35em 0; }
.prose ol ol { list-style-type: lower-alpha; }
.prose img { border-radius: var(--radius); }

.stub-note {
  background: var(--brand-wash); border: 1px solid var(--brand-line);
  border-radius: var(--radius); padding: var(--s4);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  margin-block: var(--s6);
  max-width: var(--measure);
}
.cta-band h2 { margin-top: 0; }
.cta-band p { color: var(--ink-2); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta-band--home { max-width: none; background: var(--paper-2); border: 0; border-top: 1px solid var(--line); border-radius: 0; margin-block: 0; padding-block: var(--s7); }
.cta-band--home .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); }
.cta-band--home h2 { margin: 0 0 var(--s2); }
.cta-band--home p { margin: 0; }
.cta-band--home .wrap { padding-block: var(--s2); }

/* Homepage consultations bar. Reuses .cta-band--home for the full-bleed strip,
   and swaps the single button for the products themselves. */
.consult-bar .wrap { align-items: start; }
.consult-bar__intro { max-width: 26rem; }
.consult-bar__intro p { margin: 0 0 var(--s2); }
.consult-bar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .consult-bar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.consult-bar__list a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 44px; height: 100%; padding: var(--s3) var(--s4);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.consult-bar__list a:hover { border-color: var(--brand); color: var(--brand-ink); }
.consult-bar__name { font-size: var(--t-sm); line-height: 1.3; }
.consult-bar__price { font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: var(--on-dark-2); }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__cols {
  display: grid; gap: var(--s6); grid-template-columns: 1fr;
  padding-block: var(--s7);
}
@media (min-width: 40rem) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer-col__title {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: #fff; margin: 0 0 var(--s3); line-height: 1.65;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-block: var(--s2); font-size: var(--t-sm); line-height: 1.35; }
.footer-col address { font-style: normal; font-size: var(--t-sm); line-height: 1.7; }
.site-footer__bottombar { border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3);
  padding-block: var(--s4); font-size: var(--t-xs);
}
.site-footer__legal { list-style: none; display: flex; gap: var(--s4); margin: 0; padding: 0; }

/* ---------- topbar ---------- */
/* The phone leaves the topbar on small screens: it wraps to a second line
   there, and the header's Zadzwoń button already keeps a tap-to-call one
   tap away. */
.topbar { background: var(--navy); color: var(--on-dark-2); font-size: var(--t-xs); }
.topbar__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); }
.topbar p { margin: var(--s2) 0; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.topbar a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 48rem) { .topbar__phone { display: none; } }


/* ---------- split hero + info card ---------- */
.kicker {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-ink); margin: 0 0 var(--s3);
}
/* Homepage hero. The brand name keeps the h1 for document structure, the claim
   below it carries the visual weight. Heading level and type size are set apart
   on purpose: the h1 is smaller than the h2 here, and only here. */
.hero__brand { font-size: var(--t-lg); letter-spacing: normal; margin: 0 0 var(--s2); }
.hero--light .hero__brand { color: var(--ink-2); }
.hero__claim {
  font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -.015em;
  margin: 0 0 var(--s4); max-width: 26ch;
}

.hero__grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 448px; align-items: start; }
}
.hero__card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s5);
  font-size: var(--t-sm);
}
.hero__card-title {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 var(--s3); line-height: 1.65;
}
.hero__card address { font-style: normal; font-size: var(--t-base); color: var(--ink-2); line-height: 1.6; margin-bottom: var(--s4); }
.hero__card-list { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s4); }
.hero__card-list dt { color: var(--ink-3); min-width: 3.5rem; }
.hero__card-list dd { margin: 0; }
.hero__card a { color: var(--brand-ink); font-weight: 600; }
.hero__card a[href^="mailto:"] { font-weight: 400; }
@media (max-width: 63.99rem) { .hero__card { display: none; } }

/* ---------- trust strip ---------- */
.trust { background: var(--navy); color: var(--on-dark-2); }
.trust__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s7); padding-block: var(--s5); }
.trust__item { margin: 0; font-size: var(--t-sm); }
.trust__item strong { font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; line-height: 1; color: #fff; margin-right: var(--s2); }

/* ---------- article ---------- */
.article-meta { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: var(--s5); }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: left; }
.prose blockquote { border-left: 3px solid var(--brand-line); margin-left: 0; padding-left: var(--s4); color: var(--ink-3); }

/* ---------- listing cards (blog) ---------- */
.list-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .list-grid { grid-template-columns: repeat(3, 1fr); } }
.list-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s5);
}
.list-card h2, .list-card h3 { font-size: var(--t-md); letter-spacing: normal; margin: 0 0 var(--s2); }
.list-card a { text-decoration: none; color: var(--ink); }
.list-card a:hover { color: var(--brand-ink); }
.list-card time, .list-card .list-card__meta { color: var(--ink-3); font-size: var(--t-xs); }
.list-card p { color: var(--ink-2); font-size: var(--t-sm); }
.pagination { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: var(--s6) 0; }
.pagination a, .pagination [aria-current] {
  display: inline-block; min-width: 2.4em; text-align: center;
  padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none;
}
.pagination [aria-current] { background: var(--brand-ink); color: var(--btn-fg); border-color: var(--brand-ink); }

/* ---------- publications (/publikacje/) ----------
   One row per publication: cover, description, publisher data. The covers are
   2016 uploads capped at 270 px wide (tools/covers.mjs), so the cover column
   stays narrow enough for them to render at roughly 2x. They sit in a padded
   square frame, because five covers with five different edge colours need one
   shared edge to line up against.
   Narrow screens stack the frame above the text — a side-by-side thumbnail
   squeezes the description into about 40 characters a line. */
/* top gap matches .team-index — the other index page under a bordered hero */
.pub-list { list-style: none; margin: var(--s6) 0 var(--s8); padding: 0; display: grid; gap: var(--s6); }
.pub { display: grid; gap: var(--s4); padding-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.pub:last-child { padding-bottom: 0; border-bottom: 0; }
.pub__frame { width: 144px; padding: var(--s3); border: 1px solid var(--line); }
.pub__cover { display: block; width: 100%; height: auto; }
.pub__title { font-size: var(--t-md); letter-spacing: normal; margin: 0 0 var(--s3); }
.pub__desc p { margin: 0 0 var(--s3); }
.pub__desc p:last-child { margin-bottom: 0; }
/* two classes, so the shared .kv reset further down does not win */
.pub .pub__meta { margin-top: var(--s5); }
@media (min-width: 34rem) {
  .pub { grid-template-columns: 178px 1fr; gap: var(--s6); align-items: start; }
  .pub__frame { width: 100%; }
}
@media (min-width: 64rem) {
  .pub__body { display: grid; grid-template-columns: minmax(0, 66ch) minmax(180px, 1fr); column-gap: var(--s6); }
  .pub__title { grid-column: 1 / -1; }
  .pub .pub__meta { margin-top: 0; }
}

/* ---------- blog taxonomy (rail card, category page, archive) ----------
   The rail card carries ten links plus counts. It stacks above the article on
   narrow screens, so the rows stay compact: label and count on one line, the
   count right-aligned in a tabular column so the numbers line up. */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-block: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-sm);
}
.cat-list a, .cat-list__current { text-decoration: none; font-weight: 600; line-height: 1.35; }
.cat-list a { color: var(--ink); }
.cat-list a:hover { color: var(--brand-ink); }
.cat-list__current { color: var(--brand-ink); }
.cat-list__count { color: var(--ink-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
/* two classes, so the shared `.rail-card > p` size rule does not win */
.rail-card p.rail-card__lead { margin: calc(var(--s2) * -1) 0 var(--s3); color: var(--brand-ink); font-weight: 600; }
.list-count { color: var(--ink-3); font-size: var(--t-xs); margin: 0 0 var(--s2); }

/* archive: every post on one page, grouped by category */
.archive-jump { margin: var(--s6) 0 var(--s8); }
.archive-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.archive-jump a {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-size: var(--t-sm); font-weight: 600;
}
.archive-jump a:hover { border-color: var(--brand-line); color: var(--brand-ink); }
.archive-group { margin-bottom: var(--s8); }
/* scroll-margin: the sticky header would otherwise cover a jump target */
.archive-group h2 { scroll-margin-top: 84px; }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li {
  display: grid; gap: var(--s1); padding-block: var(--s3); border-top: 1px solid var(--line);
}
.archive-list a { text-decoration: none; color: var(--ink); font-weight: 600; line-height: 1.4; }
.archive-list a:hover { color: var(--brand-ink); }
.archive-list time { color: var(--ink-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
@media (min-width: 34rem) {
  .archive-list li { grid-template-columns: 1fr auto; gap: var(--s4); align-items: baseline; }
}

/* ---------- team ---------- */
.team-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { text-align: center; }
.team-card img { border-radius: var(--radius-lg); }
.team-card h2, .team-card h3 { font-size: var(--t-md); letter-spacing: normal; margin: var(--s3) 0 0; }
.team-card p { color: var(--ink-3); font-size: var(--t-sm); margin: var(--s1) 0 0; }
.team-card a { text-decoration: none; color: inherit; }
.bio { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .bio { grid-template-columns: 260px 1fr; align-items: start; } }
.bio__photo img { border-radius: var(--radius-lg); }
.bio__facts { margin: var(--s4) 0 0; font-size: var(--t-sm); }
.bio__facts dt { font-weight: 600; color: var(--ink-3); margin-top: var(--s3); }
.bio__facts dd { margin: 0; }

/* ---------- consultation product ---------- */
.product__price { font-family: var(--serif); font-size: var(--t-xl); margin: var(--s2) 0; }
.price-was { color: var(--ink-3); font-weight: 400; }
.price-was del { text-decoration: line-through; }
.price-card .price-was,
.upsell-card__price .price-was,
.product__price .price-was,
.product-card .price-was {
  display: block; font-size: var(--t-md); margin-bottom: var(--s2);
}
.consult-bar__price .price-was { margin-right: 0.35em; }
.product__subtitle { color: var(--ink-3); }
.price-tag { font-weight: 700; }

/* ---------- forms (static markup; backend arrives with Cloudflare) ---------- */
.form-grid { display: grid; gap: var(--s4); max-width: 36rem; }
.form-grid label { font-weight: 600; font-size: var(--t-sm); color: var(--ink); display: block; margin-bottom: var(--s1); }
.form-grid button { font: inherit; }
.form-grid input, .form-grid textarea {
  width: 100%; padding: var(--s3); font: inherit;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}

/* ---------- header fix: prevent CTA clipping at ~1280px ---------- */
@media (min-width: 64rem) {
  .site-nav__list { gap: var(--s5); }
  .site-nav__cta .btn { padding: var(--s2) var(--s4); }
}

/* ---------- breadcrumb band + service hero (deck port) ---------- */
.crumb-band { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.crumb-band .breadcrumb { margin-block: 0; padding-block: var(--s3); }
/* Layouts whose article starts straight after the band, with no hero to
   open the page: match the breathing room .service-hero gives elsewhere. */
.page-top { padding-top: var(--s6); }

.service-hero { padding-block: var(--s7); border-bottom: 1px solid var(--line); }
/* index-page heroes: page container aligns with everything else;
   the text block is measure-capped at 52rem, left-aligned. (The decks
   centre a 52rem box — a double max-width bug in one style attribute.) */
.service-hero--center .wrap > * { max-width: 52rem; }
.service-hero__lead { font-size: var(--t-md); color: var(--ink-2); max-width: 58ch; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; padding: 0; }
.chips li { font-size: var(--t-sm); color: var(--ink-2); }
.chips li::before { content: "●"; color: var(--brand); font-size: .6em; margin-right: var(--s2); vertical-align: 2px; }
.service-hero .hero__actions { margin-top: var(--s5); }
.service-hero .btn--ghost { border-color: var(--line-2); color: var(--ink); }

/* ---------- service two-column layout with sticky rail ---------- */
.service-layout { display: grid; gap: var(--s6); grid-template-columns: 1fr; padding-block: var(--s5); }
@media (min-width: 64rem) {
  .service-layout { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); align-items: start; }
  .rail { position: sticky; top: 84px; }
}
.rail { display: flex; flex-direction: column; gap: var(--s4); }
.rail-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow);
}
.rail-card--tint { background: var(--paper-2); box-shadow: none; }
.rail-card__title {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 var(--s3); line-height: 1.65;
}
.toc-card ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc-card li { counter-increment: toc; margin-block: var(--s2); display: flex; gap: var(--s3); font-size: var(--t-sm); }
.toc-card li::before { content: counter(toc, decimal-leading-zero); color: var(--brand); font-weight: 600; }
.toc-card a { text-decoration: none; color: var(--ink-2); }
.toc-card a:hover { color: var(--brand-ink); }

.lawyer-card__row { display: flex; gap: var(--s4); align-items: flex-start; }
.lawyer-card__row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); flex: none; }
.lawyer-card__name { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; line-height: 1.25; margin: 0; }
.lawyer-card__role { color: var(--brand-ink); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: var(--s1) 0; }
.lawyer-card__spec { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; margin: 0; }
.team-card p.lawyer-card__role { color: var(--brand-ink); font-size: var(--t-xs); letter-spacing: .1em; }
.team-card p.lawyer-card__spec { color: var(--ink-2); font-size: var(--t-sm); }
.lawyer-card > p:last-child { margin-bottom: 0; font-size: var(--t-sm); }

.upsell-card { background: var(--brand-wash); border-color: var(--brand-line); }
.upsell-card__title { font-size: var(--t-lg); letter-spacing: normal; margin: 0 0 var(--s2); }
.upsell-card__price, .rail-card > p.upsell-card__price { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); margin: var(--s3) 0; }
.upsell-card > p:last-child { margin-bottom: 0; font-size: var(--t-sm); }
.btn--block { display: block; text-align: center; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

.related { margin-top: var(--s7); }
.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.related li a {
  display: inline-block; padding: var(--s2) var(--s4);
  border: 1px solid var(--line-2); border-radius: 999px;
  text-decoration: none; color: var(--ink-2); font-size: var(--t-sm);
}
.related li a:hover { border-color: var(--brand); color: var(--brand-ink); }

/* Hub page service list. Sits between the hero and the body, so the spokes come
   before the prose for a reader and for a crawler. */
/* No rule of its own: .service-hero already draws a border-bottom directly
   above, and a second line 32px below it read as a double separator. */
.hub-services { margin: var(--s6) 0 var(--s7); }
.hub-services__title { font-size: var(--t-lg); margin: 0 0 var(--s4); }
.hub-services__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .hub-services__list { grid-template-columns: repeat(2, 1fr); } }
.hub-services__list a {
  display: flex; align-items: center; min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  text-decoration: none; color: var(--ink-2); font-size: var(--t-base);
}
.hub-services__list a:hover { border-color: var(--brand); color: var(--brand-ink); }

/* /oferta/: the complete service list under each category description */
.offer-list { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.offer-list a {
  display: flex; align-items: center; min-height: 44px;
  border-top: 1px solid var(--line); padding: var(--s2) 0;
  text-decoration: none; color: var(--ink-2);
}
.offer-list a:hover { color: var(--brand-ink); text-decoration: underline; }
.practice-row h2 a { color: var(--brand-ink); text-decoration: none; }
.practice-row h2 a::after { content: " \2192"; }
.practice-row h2 a:hover { text-decoration: underline; }

/* smooth anchor jumps from the TOC, minus the sticky header */
html { scroll-behavior: smooth; }
.prose h2 { scroll-margin-top: 90px; }

/* grid blowout guard: allow the content track to shrink below intrinsic width */
.service-layout > * { min-width: 0; }


/* ---------- deck parity: shared blocks ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* light homepage hero (deck: white hero, navy info card) */
.hero--light { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.hero--light h1 { color: var(--ink); }
.hero--light .hero__lead { color: var(--ink-2); }
.hero--light .btn--ghost { border-color: var(--line-2); color: var(--ink); }

/* full-width tinted section */
.band { background: var(--paper-2); border-bottom: 1px solid var(--line); padding-block: var(--s8); }
.band .rail-layout { padding-block: 0; }
.section-rule { border-bottom: 1px solid var(--line); }
.band > .wrap > h2:first-child { margin-top: 0; }
.price-section { padding-block: var(--s8); }
.price-section > .wrap > h2:first-child { margin-top: 0; }

/* section heading with a trailing "all →" link */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.section-head h2 { margin-bottom: var(--s5); }
.section-head .more { font-weight: 600; font-size: var(--t-sm); text-decoration: none; white-space: nowrap; }

/* homepage: chips + consultations teaser */
.teaser { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: stretch; padding-block: var(--s8); }
.teaser-box {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s5);
}
@media (min-width: 64rem) { .teaser { grid-template-columns: 26fr 18fr; } }
@media (min-width: 64rem) { .teaser--solo { grid-template-columns: minmax(0, 34rem); justify-content: center; } }
.teaser h3 { margin-top: 0; }
.teaser .chips li { font-size: var(--t-base); }
.consult-card {
  background: var(--brand-wash); border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg); padding: var(--s5);
}
.consult-card p { color: var(--ink-2); font-size: var(--t-sm); }
.consult-card h2, .consult-card h3 { font-size: var(--t-lg); margin: 0 0 var(--s2); }

/* generic content + 360px rail split (blog article, homepage, publikacja) */
.rail-layout { display: grid; gap: var(--s6); grid-template-columns: 1fr; padding-block: var(--s5); }
@media (min-width: 64rem) { .rail-layout { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); align-items: start; } }
.rail-layout > * { min-width: 0; }

/* Below the two-column breakpoint the rail stacks under the article, which put
   the blog's category navigation 4 000 px down the page. `display: contents`
   lets the rail's cards become grid items in their own right, so the category
   card can move above the list while the CTA card stays below it. The list
   itself becomes a wrapping chip row: all ten links stay visible and nothing
   hides behind a toggle. */
@media (max-width: 63.99rem) {
  .rail-layout > .rail { display: contents; }
  .rail-layout > .rail > .cat-card { order: -1; }
  /* The card ships open (no-JS and crawlers). Here the deferred nav.js
     closes it, which was a 0.56 layout shift after first paint (review03
     #23). With JS, hide the body until nav.js has synced the open state and
     added .cat-card--ready; the close then changes nothing that is painted. */
  /* details.cat-card only: the category GRID cards share the class and
     must never be hidden (review04 follow-up 2026-09-12). */
  .js details.cat-card:not(.cat-card--ready) > :not(summary) { display: none; }
}

/* The summary is the toggle only where the card can collapse. On the desktop
   sidebar it is always open, so it renders as a plain card heading. */
.cat-card__summary { list-style: none; cursor: default; }
.cat-card__summary::-webkit-details-marker { display: none; }
.cat-card__summary .rail-card__title { margin: 0; }
@media (max-width: 63.99rem) {
  .cat-card__summary {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); min-height: 44px;
  }
  .cat-card__summary::after {
    content: ""; flex: none; width: 9px; height: 9px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .cat-card[open] .cat-card__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .cat-card[open] .cat-card__summary { margin-bottom: var(--s3); }
}

.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { padding-block: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.rail-list a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: var(--t-base); line-height: 1.4; }
.rail-list a:hover { color: var(--brand-ink); }
.rail-list .rail-list__meta { display: block; color: var(--ink-3); font-size: var(--t-xs); margin-top: var(--s1); font-weight: 400; }
.rail-card .more { font-weight: 600; }
.rail-card__heading { font-size: var(--t-lg); margin: 0 0 var(--s3); }
.kv--caps dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* article summary box ("W skrócie") */
.summary-box {
  background: var(--brand-wash); border: 1px solid var(--brand-line);
  border-left: 4px solid var(--brand); border-radius: var(--radius);
  padding: var(--s4) var(--s5); margin-block: var(--s5);
}
.summary-box > .rail-card__title { color: var(--brand-ink); }
.summary-box ul { margin: 0; padding-left: 1.2em; }
.summary-box li { color: var(--ink-2); margin-block: var(--s2); }

/* navy CTA card (article end, publikacja) */
.cta-card {
  background: var(--navy); color: var(--on-dark-2);
  border-radius: var(--radius-lg); padding: var(--s5); margin-block: var(--s6);
}
.cta-card h2 { color: #fff; font-size: var(--t-lg); letter-spacing: normal; margin: 0 0 var(--s2); }
.cta-card p { font-size: var(--t-sm); }
.cta-card .btn--ghost { border-color: var(--navy-2); color: #fff; }
.cta-card .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* consultation price cards */
.price-card { display: flex; flex-direction: column; }
.price-card h3 { font-size: var(--t-lg); letter-spacing: normal; margin: 0; }
.price-card .price-card__sub { color: var(--ink-2); font-size: var(--t-base); margin: var(--s2) 0 var(--s4); }
.price-card .price-card__desc { color: var(--ink-2); font-size: var(--t-base); margin: 0 0 var(--s4); }
.price-card .price-card__desc a { color: var(--brand-ink); }
.price-card .btn + .btn { margin-top: var(--s2); }
.price-card .price-card__price {
  font-family: var(--serif); font-size: var(--t-2xl); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink);
  margin: auto 0 var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line);
}
.price-card__price small, .upsell-card__price small { font-size: var(--t-base); font-family: var(--sans); font-weight: 400; color: var(--ink); }
.price-card h3 a { color: var(--brand-ink); text-decoration: underline; }
.price-card h3 a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.buy-terms { font-size: var(--t-xs); color: var(--ink-2); margin: var(--s3) 0 0; }
.buy-terms a { color: var(--brand-ink); }
.price-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

/* homepage team strip: boxless cards (deck) */
.team-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.team-strip a { display: flex; flex-direction: column; gap: var(--s3); text-decoration: none; }
.team-strip a:hover { text-decoration: none; }
.team-strip img { border-radius: var(--radius-lg); width: 100%; height: auto; }
.team-strip .team-strip__name { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0; }
.team-strip .lawyer-card__role { margin: var(--s1) 0 0; }
.team-strip .lawyer-card__spec { margin: var(--s1) 0 0; line-height: 1.5; }

/* zespół index: detailed cards */
.team-index { padding-block: var(--s6) var(--s8); }
.team-card--detail { text-align: left; }
.team-card--detail img { width: 100%; object-fit: cover; }
.team-card--detail dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-sm); }
.team-card--detail dt { color: var(--ink-3); white-space: nowrap; }
.team-card--detail dd { overflow-wrap: anywhere; }
.team-card--detail dd a { color: var(--brand-ink); }
.team-card--detail dd a[href^="tel:"] { font-weight: 600; }
.team-card--detail dd { margin: 0; }

/* team bio hero */
.bio-hero { padding-block: var(--s6); border-bottom: 1px solid var(--line); }
.bio-hero__grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 48rem) { .bio-hero__grid { grid-template-columns: 220px 1fr; } }
.bio-hero img { border-radius: var(--radius-lg); }
.bio-hero h1 { margin-bottom: var(--s2); }
.bio-hero__role { color: var(--brand-ink); font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--s3); }
.bio-hero__spec { color: var(--ink-2); font-size: var(--t-md); max-width: 52ch; }
.bio-hero__contacts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding-block: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-base); margin: var(--s4) 0; }
.bio-hero__contacts span { color: var(--ink-3); margin-right: var(--s2); }
.bio-hero__contacts a { color: var(--ink); font-weight: 600; }
.bio-hero__contacts a:hover { color: var(--brand-ink); }

@media (min-width: 64rem) { .card-grid--three { grid-template-columns: repeat(3, 1fr); } }

/* key–value rows on light cards (rail cards, info cols) */
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; font-size: var(--t-sm); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.rail-card address { font-style: normal; font-size: var(--t-sm); margin-bottom: var(--s3); }
.rail-card__note { border-top: 1px solid var(--line); padding-top: var(--s4); }
.rail-card > p { font-size: var(--t-sm); color: var(--ink-2); }

/* oferta: practice-area rows (heading left, copy right) */
.practice-row { display: grid; gap: var(--s3) var(--s7); grid-template-columns: 1fr; padding-block: var(--s6); border-bottom: 1px solid var(--line); }
@media (min-width: 64rem) { .practice-row { grid-template-columns: 1fr 1fr; } }
.practice-row:last-of-type { border-bottom: 0; }
.practice-row h2 { margin: 0; scroll-margin-top: 90px; }
.practice-row__sub { color: var(--brand-ink); font-weight: 600; font-size: var(--t-sm); margin: var(--s2) 0 var(--s4); }
.practice-row__body { min-width: 0; }
.practice-row__body p { color: var(--ink-2); margin-top: 0; }
.practice-row__summary { color: var(--ink-2); margin: var(--s4) 0 0; }
.offer-list li:first-child a { border-top: 0; }

/* kontakt info band */
.info-cols { display: grid; gap: var(--s5); grid-template-columns: 1fr; padding-block: var(--s6); }
@media (min-width: 40rem) { .info-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .info-cols { grid-template-columns: repeat(4, 1fr); } }
.info-col address { font-style: normal; }
.info-col p, .info-col address, .info-col dl { font-size: var(--t-base); color: var(--ink-2); margin: 0; }
.info-col dl + p { margin-top: var(--s4); }
.info-col a { color: var(--ink); font-weight: 600; }
.info-col a:hover { color: var(--brand-ink); }
.info-col dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); }
.info-col dt { color: var(--ink-3); }
.info-col dd { margin: 0; }
.info-col ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-base); }
.info-col li { padding-block: var(--s2); border-bottom: 1px solid var(--line); }
.info-col li:last-child { border-bottom: 0; }

/* form + aside card section (kontakt, service "Opisz swoją sprawę", homepage) */
.form-section { padding-block: var(--s6); }
.form-section--rule { border-top: 1px solid var(--line); }
/* The RODO notice takes the tinted box the deployment placeholder used to
   have, one step smaller. No max-width: as a box it spans the form. */
.form-smallprint {
  background: var(--paper-3); border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: var(--t-xs); color: var(--ink-2);
}
.section-lead { font-size: var(--t-md); color: var(--ink-2); max-width: 52ch; }
.home-sections > h2:first-child { margin-top: 0; }
.home-sections h2 { margin-top: var(--s6); }
.home-sections p { line-height: 1.72; }

/* blog index: single-column list */
.post-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.post-list > li { padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.post-list h2 { font-size: var(--t-md); letter-spacing: normal; margin: var(--s2) 0; }
.post-list h2 a { text-decoration: none; color: var(--ink); }
.post-list h2 a:hover { color: var(--brand-ink); }
.post-list time { color: var(--ink-3); font-size: var(--t-xs); }
.post-list p { color: var(--ink-2); font-size: var(--t-sm); }
.post-list .more { font-weight: 600; font-size: var(--t-sm); }
.pagination__gap { align-self: center; color: var(--ink-3); }
.pagination-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); }

/* footer: firm column + registry bottom bar */
.footer-col--firm { font-size: var(--t-sm); }
.site-footer .brand-logo { height: 30px; margin-bottom: var(--s2); }
.site-footer .logo__word { fill: #fff; }
.site-footer .logo__sub { fill: var(--on-dark-2); }
.footer-col--firm a[href^="tel:"] { color: #fff; font-weight: 600; }
.footer-col--firm address { margin-bottom: var(--s4); }
.footer-col--firm a { display: inline-block; margin-block: var(--s1); }
.footer-col__note { font-size: var(--t-xs); color: var(--on-dark-2); opacity: .85; max-width: 32ch; }
.site-footer__registry { margin: 0; }

/* ---------- theme toggle ---------- */
.theme-toggle {
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: var(--s2); color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center;
}
.theme-toggle:hover { color: var(--brand-ink); border-color: var(--brand); }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* B2B landing page (/stala-biezaca-obsluga-prawna-przedsiebiorcy/) */
/* .card-grid goes to 4 columns at 64rem; this page shows a pair. */
@media (min-width: 64rem) { .card-grid--pair { grid-template-columns: repeat(2, 1fr); } }
.card-grid--pair .card h2 { font-size: var(--t-lg); letter-spacing: normal; margin: 0; }
.trigger-note { margin-top: var(--s6); max-width: 60ch; }

/* doubled class outranks .card p (0,1,1), like .price-card__price does */
.product-card .badge {
  align-self: start; margin: 0;
  background: var(--brand-wash); color: var(--brand-ink);
  border: 1px solid var(--brand-line); border-radius: 999px;
  padding: var(--s1) var(--s3);
  font-size: var(--t-xs); font-weight: 600;
}
.product-card { max-width: 40rem; gap: var(--s4); }
.product-card h2 { margin: 0; }
.product-card .chips { margin-top: 0; }
.product-card .product-card__points li { font-size: var(--t-base); }
.product-card .product-card__price {
  font-family: var(--serif); font-size: var(--t-2xl); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink);
  margin: 0; padding-top: var(--s4); border-top: 1px solid var(--line);
}
.product-card .product-card__price small {
  font-family: var(--sans); font-size: var(--t-base); font-weight: 400; color: var(--ink-2);
}

/* client logos — sized by height so mixed aspect ratios sit on one line */
.partners {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s7);
}
.partners a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.partner__logo { display: block; width: auto; height: auto; max-width: 9rem; max-height: 2.25rem; }

/* Light/dark logo pairs. Same selector shape as the theme tokens above, so the
   swap follows both the system preference and the manual toggle. The hidden
   image is display:none, so screen readers announce the alt text only once. */
.partner__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner__logo--light { display: none; }
  :root:not([data-theme="light"]) .partner__logo--dark { display: block; }
}
:root[data-theme="dark"] .partner__logo--light { display: none; }
:root[data-theme="dark"] .partner__logo--dark { display: block; }

/* Optical balance: a tall emblem and a long wordmark need different caps to
   read at the same visual weight as the rest of the row. */
.partner--silk .partner__logo { max-height: 2.75rem; }
.partner--soldent .partner__logo { max-height: 1.75rem; }
.partner--smeo .partner__logo { max-height: 2rem; }

/* Entropia Dev has no logo file — set their name in their own wordmark face
   (Space Grotesk 600). Colour follows the theme, so it needs no dark variant. */
.partner__wordmark {
  font-family: 'Space Grotesk', var(--sans);
  font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap;
}
/* "Dev" is a fixed brand accent on entropiadev.com — the same blue on their
   light header and their dark footer, so it does not follow our theme. */
.partner__wordmark-accent { color: #1E55F0; }
.partners a:hover .partner__wordmark { color: var(--brand-ink); }

/* 404 page */
.error-help { margin-top: var(--s6); }

/* Contact form: spam trap and submit states (form.js + functions/api/kontakt.js) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { display: none; color: var(--danger); font-size: var(--t-sm); margin: 0; }
.form-error.show { display: block; }
.form-success { background: var(--brand-wash); border-radius: var(--radius); padding: var(--s4); color: var(--ink); }