/* ── Design tokens (onyx + purple) ──────────────────────────────── */
:root {
  /* Surfaces — onyx black base, cool-charcoal alts */
  --surface-0: #1c1c22;     /* page background */
  --surface-1: #242430;     /* section alt */
  --surface-2: #2e2e3a;     /* card edges, dividers */

  /* Google-review look for testimonials: star gold + initials-avatar tones */
  --gold: #f5b301;
  --av-1: rgba(94, 106, 210, 0.85);
  --av-2: rgba(46, 139, 116, 0.85);
  --av-3: rgba(181, 82, 59, 0.85);
  --av-4: rgba(123, 79, 184, 0.85);
  --av-5: rgba(59, 123, 181, 0.85);
  --av-6: rgba(138, 109, 47, 0.85);

  /* Ink — high-contrast cool whites */
  --ink-900: #f0eff5;       /* headlines */
  --ink-700: #c8c6d4;       /* body */
  --ink-500: #7e7c8e;       /* secondary */
  --ink-300: #4e4c58;       /* muted */

  /* Accent — electric purple */
  --accent:      #9b30ff;
  --accent-soft: #6a0fcc;
  --accent-hot:  #b86bff;   /* for hover/glow */

  /* Tone palette for placeholder blocks (cool onyx on dark) */
  --tone-stone:    #1a1a22;
  --tone-sand:     #22202e;
  --tone-clay:     #2a1a3a;
  --tone-moss:     #1a1e2a;
  --tone-graphite: #111118;

  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --s-9: 160px; --s-10: 200px;

  --container: 1200px;
  --gutter: 24px;

  --font-display: "DM Serif Display", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  /* Condensed display face for headings, product names and prices. Introduced
     with the hero H1 and extended across the page so the site reads as one
     system instead of a condensed hero bolted onto serif sections.
     Unlike --font-display (DM Serif Display, single weight) this has real
     400/800 weights, so font-weight actually does something. */
  --font-condensed: "Barlow Condensed", "DM Serif Display", Georgia, serif;

  /* RGB channel triples — so rgba() can use tokens instead of literals */
  --accent-rgb:      155, 48, 255;
  --accent-soft-rgb: 106, 15, 204;
  --accent-hot-rgb:  184, 107, 255;
  --accent-deep-rgb: 100, 20, 180;
  --surface-0-rgb:   28, 28, 34;
  --shadow-rgb:      0, 0, 0;
  --shadow-warm-rgb: 12, 10, 8;
  --shadow-deep-rgb: 9, 9, 9;
  --on-accent-rgb:   255, 255, 255;

  /* Text on an accent-filled surface */
  --on-accent: #fff;

  /* Status colours (oferta badges, form errors) */
  --status-green:     34, 197, 94;
  --status-green-ink: #4ade80;
  --status-fire:      249, 115, 22;
  --status-fire-ink:  #fb923c;
  --status-error-ink: #ff6b6b;
}
@media (min-width: 800px) { :root { --gutter: 48px; } }

/* ── Reset-ish ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body {
  overflow-x: clip;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(var(--accent-rgb), 0.04), transparent 60%),
    var(--surface-0);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, video, svg { max-width: 100%; }

/* ── Layout primitives ─────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
}
.section {
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(48px, 6vw, 80px);
  scroll-margin-top: 56px;
}

/* ── Typography ────────────────────────────────────────────────── */
.display {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  margin: 0;
}
.hero-accent {
  display: block;
  color: var(--ink-900);
  text-shadow: none;
  position: relative;
  width: fit-content;
}
.hero-accent::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hot) 60%, transparent 100%);
}

/* ── Header ────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: var(--s-2) var(--gutter);
  background: rgba(var(--surface-0-rgb), 0.92);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--surface-2);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink-900);
}
.logo-cap {
  font-size: 1.45em;
  line-height: 1;
  vertical-align: baseline;
}

/* ── Hero banner (below nav) ────────────────────────────────────── */
.hero-banner {
  text-align: center;
  padding: 10px var(--gutter);
  overflow: hidden;
}
.hero-banner-text {
  font-family: var(--font-body);
  font-size: clamp(9px, 2.2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-hot);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--ink-700);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 220ms ease;
}
.nav-toggle:hover { background: rgba(var(--accent-rgb), 0.22); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* gap approved at 44px on a wide desktop, but it must shrink on narrow ones:
   at a ~900px window the fixed 44px pushed the first link flush against the
   wordmark (0px clearance — no overlap, but no breathing room either). The
   clamp keeps the approved look above ~1460px and eases off below it. */
.nav { display: flex; gap: clamp(22px, 2.4vw, 36px); justify-content: center; }
.nav a { color: var(--ink-700); transition: color 120ms ease; }
.nav a:hover { color: var(--accent); }
/* Scoped as .nav .nav-btn, not .nav-btn: `.nav a` above is (0,1,1) and beat a
   bare `.nav-btn` (0,1,0), so the font-size here was silently ignored and the
   links rendered at 14px. Do not flatten this selector back. */
.nav .nav-btn {
  /* Plain uppercase text, no pill. The bordered pills read as five competing
     buttons crammed together; the client asked for the cleaner treatment he saw
     on a reference site. Condensed face to match headings and the hero H1. */
  /* Body face, regular weight, small (variant D, client choice Oct 2026):
     the condensed 700 at 19px read as too heavy next to a reference site. */
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-700);
  padding: 6px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
  transition: color 180ms ease;
  white-space: nowrap;
}
/* Accent rule wipes in from the left on hover — replaces the pill as the
   affordance, so the link still reads as interactive without a border. */
.nav-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.2, 0.65, 0.2, 1);
}
.nav-btn:hover {
  color: var(--ink-900);
}
.nav-btn:hover::after {
  transform: scaleX(1);
}

/* ukryj mobilny blok flag na desktopie */
.nav-lang-mobile { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--s-2); }

/* mobile nav */
@media (max-width: 768px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: var(--s-2);
  }
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--gutter);
    background: rgba(var(--surface-0-rgb), 0.98);
    backdrop-filter: blur(12px);
  }
  .nav.is-open { display: flex; }
  /* Must stay .nav .nav-btn to match the desktop rule's specificity (0,2,0) —
     a media query adds none, so a bare .nav-btn here would lose and the mobile
     menu would inherit the 19px desktop size. */
  .nav .nav-btn {
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 16px;
    text-align: center;
    width: auto;
    border: none;
    background: none;
  }
  .nav .nav-btn:hover {
    background: none;
    border: none;
  }
  /* No underline sweep in the dropdown — the rule would span the full row. */
  .nav .nav-btn::after { display: none; }
  /* flagi w menu mobilnym */
  .nav-lang-mobile {
    display: flex;
    justify-content: center;
    padding: var(--s-2) 0 var(--s-1);
    margin-top: var(--s-1);
  }
  .nav-lang-mobile .lang-btn { font-size: 16px; padding: 8px 12px; }
  /* ukryj flagi w header-actions na mobile */
  .lang-toggle--desktop { display: none; }
  /* ukryj cały header-actions na mobile */
  .header-actions { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
}
/* "PL | EN" as text (client asked to replace the flags, Oct 2026 — flags also
   don't render on Windows). Same face/size/tracking as the nav links. Active
   language: full ink + accent underline; inactive: dimmed, lights up on hover. */
.lang-toggle { display: flex; align-items: center; gap: 2px; background: none; border: 0; padding: 0; }
.lang-btn {
  background: none; border: 0; padding: 4px 6px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 400;
  letter-spacing: 0.09em; line-height: 1;
  color: var(--ink-700);
  opacity: 0.5;
  transition: opacity 150ms ease, color 150ms ease;
  cursor: pointer;
}
.lang-btn.is-active {
  opacity: 1; color: var(--ink-900);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.lang-btn:hover { opacity: 1; }
.lang-sep { color: var(--ink-500); font-size: 13.5px; opacity: .6; }
/* Desktop only, and only the inactive flag: dimmed to 0.30 so the header reads
   quieter, revealed on hover (client choice, Sep 2026).
   Scoped to .lang-toggle--desktop deliberately — the mobile dropdown flags have
   no hover to restore them, so they keep the 0.5 base.
   :not(.is-active) also matters: `.lang-btn.is-active` above is (0,2,0), the
   same as `.lang-toggle--desktop .lang-btn`, so without :not() source order
   would dim the ACTIVE flag too and you could not tell which language is on. */
.lang-toggle--desktop .lang-btn:not(.is-active) { opacity: 0.45; }
/* Must repeat the hover at this specificity (0,3,1): the bare `.lang-btn:hover`
   above is (0,2,0) and loses to the dim rule, so without this the flag would
   stay at 0.3 on hover and the whole reveal-on-hover idea would silently not
   work. Verified in the browser, not assumed. */
.lang-toggle--desktop .lang-btn:not(.is-active):hover {
  opacity: 1;
}
.cart-badge {
  font-size: 13px; letter-spacing: 0.06em;
  border: 1px solid var(--accent); padding: 8px 14px;
  color: var(--accent);
  transition: background 120ms ease, color 120ms ease;
}
.cart-badge:hover { background: var(--accent); color: var(--surface-0); }

/* ── Hero placeholder (filled in Task 7) ───────────────────────── */
.section--hero { padding: 0; overflow: hidden; }

/* ── Hero style B ──────────────────────────────────────────────── */
.hero-b-wrap {
  position: relative;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: flex-start;
  background: var(--surface-0);
  overflow: hidden;
}

/* Ukośne zdjęcie po prawej */
.hero-b-photo {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 46%;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
}
.hero-b-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(0.82) contrast(1.05);
}
/* Fade zdjęcia w lewo */
.hero-b-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--surface-0) 0%, transparent 30%);
}

/* Fioletowe poświaty */
.hero-b-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 75% 50%, rgba(var(--accent-rgb), 0.10), transparent 65%),
    radial-gradient(400px 300px at 10% 80%, rgba(var(--accent-deep-rgb), 0.07), transparent 60%);
  pointer-events: none;
}

.hero-b-copy {
  position: relative;
  z-index: 1;
  max-width: 62%;
  /* Left padding mirrors .container's content edge so the hero copy starts on
     the same vertical line as every other section. Previously a flat
     clamp(36px,5vw,80px) put it ~90px left of everything below it, which the
     client spotted as the page looking "rozjechana".

     Uses 100% (the section's own width), NOT 100vw: 100vw includes the
     scrollbar gutter and left the text 7px off on every scrollable page.
     max() keeps the 48px minimum once the viewport drops under 1200px. */
  padding: clamp(48px, 7vw, 100px) var(--s-4) clamp(40px, 6vw, 80px)
    max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
}

.hero-b-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-hot);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.hero-b-kicker-line {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent-hot);
  flex-shrink: 0;
}

.hero-b-h1 {
  /* One uniform size with emphasis carried by weight alone (client brief,
     Sep 2026): previously this was two spans at 36px and 72px, which he read as
     "stylistycznie dziwny".

     --font-condensed rather than --font-display: DM Serif Display ships a
     single weight, so font-weight: 800 on it is a no-op — measured identical
     text widths at 400 and 800. Anton, Bebas Neue and Archivo Black have the
     same problem and were rejected for it.

     The condensed face started here and was later extended to section headings,
     names and prices (client approved), so the page reads as one system rather
     than a condensed hero bolted onto serif sections. Body copy stays
     --font-body; --font-display now only carries the wordmark and small bits. */
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 62px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink-700);
  margin-bottom: var(--s-3);
}
.hero-b-em {
  font-weight: 800;
  color: var(--ink-900);
}

.hero-b-stats {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(var(--on-accent-rgb), 0.08);
}
.hero-b-stat { display: flex; flex-direction: column; gap: 3px; }
.hero-b-stat-n {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--ink-900);
  font-weight: 400;
  line-height: 1;
}
.hero-b-stat-l {
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: .04em;
}
.hero-b-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(var(--on-accent-rgb), 0.1);
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 799px) {
  /* Hero photo becomes a full-bleed background with the copy layered on top.
     The portrait source (848x1264) was previously squeezed into a 390x240
     landscape strip, which object-fit: cover had to crop by 59% — it kept a
     sliver of the head and threw away the whole torso. Filling the section
     instead gives the tall image a tall box, so almost all of it survives. */
  .hero-b-wrap {
    flex-direction: column;
    min-height: calc(100vh - 56px);
    justify-content: flex-end;
  }
  .hero-b-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
    /* order is irrelevant once absolutely positioned, but keep it off the
       flex flow explicitly so the copy is the only in-flow child. */
    order: 0;
  }
  .hero-b-photo img {
    /* The cut-out's head sits at ~40% of its width (the arms on hips make the
       figure asymmetric), so 50% left the face off-centre on phones. 22%
       puts the face on the screen's centre line (client, Oct 14 2026). */
    object-position: 22% 8%;
    /* Darker than the desktop 0.82: text sits directly over the photo here,
       so the image has to recede far enough to keep the headline legible. */
    filter: brightness(0.55) contrast(1.05);
  }
  /* Bottom-up scrim: opaque at the base so the copy reads as if on the page
     background, clearing by mid-frame so the photo stays visible. */
  .hero-b-photo::after {
    background: linear-gradient(
      to top,
      var(--surface-0) 8%,
      rgba(var(--shadow-rgb), 0.35) 55%,
      transparent 100%
    );
  }
  .hero-b-copy {
    position: relative;
    z-index: 2;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: var(--s-6);
  }
  .hero-b-stats { gap: var(--s-3); flex-wrap: wrap; }
  .hero-ctas { flex-wrap: nowrap; }
  .hero-ctas .btn { flex: 1; padding: 11px 14px; font-size: 13px; white-space: nowrap; }
}

/* zachowaj stare klasy dla innych sekcji */
.hero-copy { max-width: 580px; }
.hero-sub {
  margin: var(--s-3) 0 var(--s-5);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-500);
  max-width: 46ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btn--wide { width: 100%; max-width: 340px; justify-content: center; }
.testi-cta { margin-top: var(--s-5); text-align: center; }
.testi-cta .btn--wide { max-width: 320px; }

/* Social media w hero */
.hero-social {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.hero-social-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.hero-social-icons { display: flex; gap: var(--s-2); }
/* Four icons since the second Instagram (Oct 2026): on phones the label
   + icons no longer fit one row at 390px and TikTok was pushed off-screen,
   so the label goes above the icons there. */
@media (max-width: 480px) {
  .hero-social { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}
.hero-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--ink-500);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms ease;
}
.hero-social-icon svg { width: 18px; height: 18px; }
.hero-social-icon:hover {
  border-color: var(--accent);
  color: var(--accent-hot);
  background: rgba(var(--accent-rgb), 0.1);
  transform: translateY(-2px);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  /* Condensed face and a 4px radius shared with .oferta-btn: the page had three
     unrelated button shapes (10px rect, 999px pill, underlined text), which read
     as three different design systems. One shape, one font. */
  font-family: var(--font-condensed);
  font-size: 16px; letter-spacing: 0.1em;
  font-weight: 800;
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
/* Primary: the purple gradient at ~60% so the background shows through, a
   light hairline edge and only a faint shadow (client choice "A1", Oct 2026 —
   the full-strength gradient + strong glow read as an AI template). Hover
   brings it back to full strength so it still clearly reacts. */
.btn--primary {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.60) 0%, rgba(var(--accent-soft-rgb), 0.60) 100%);
  color: var(--on-accent);
  border: 1px solid rgba(var(--accent-hot-rgb), 0.55);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
}
.btn--primary:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.85) 0%, rgba(var(--accent-soft-rgb), 0.85) 100%);
  border-color: var(--accent-hot);
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28);
  transform: translateY(-2px);
}
.btn--ghost {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%);
  color: var(--ink-900);
  border-color: rgba(var(--accent-rgb), 0.40);
}
.btn--ghost:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0.10) 100%);
  border-color: var(--accent);
  color: var(--ink-900);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.25);
  transform: translateY(-2px);
}
.btn:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }

/* ── Pending state for HTMX form submits ───────────────────────────
   Two-stage feedback: the moment a lead form is submitted the button
   swaps its label for a spinner and goes disabled, so the visitor can
   see the request is in flight rather than wondering whether the click
   registered. htmx adds .htmx-request to whatever hx-indicator names
   for the duration of the request, which is the only hook needed — no
   JavaScript.

   The label and the sending state are separate spans rather than a
   textContent swap, because a handler that rewrites its own label from
   a JS string will render Polish on the English page the moment anyone
   forgets the i18n lookup. Here both spans come from {{ .T }}.

   Scoped to .btn-sending itself rather than to .btn, so it works on any
   button shape — the wizard's footer uses .wizard-nav-btn, not .btn. */
.btn-sending { display: none; align-items: center; gap: var(--s-1); }
.htmx-request > .btn-label { display: none; }
.htmx-request > .btn-sending { display: inline-flex; }
/* Disabled via hx-disabled-elt — stop the hover lift from firing while
   the pointer still sits on a button that no longer responds. */
button:disabled { cursor: progress; opacity: 0.75; }
button:disabled:hover { transform: none; box-shadow: none; }

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--on-accent-rgb), 0.35);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: btn-spin 600ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Respect a reduced-motion preference: keep the state change visible,
   drop the rotation. */
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2400ms; }
}

/* ── Lead captured but not delivered (HTTP 202) ────────────────────
   Visually distinct from both success and a hard error: the enquiry is
   safe, but nobody has read it yet. Amber rather than red, and the phone
   number is the prominent element because it is the route that works. */
.lead-warn { text-align: center; }
.lead-warn-mark {
  width: 56px; height: 56px;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-condensed);
  font-size: 30px; font-weight: 800;
  color: var(--status-fire-ink);
  background: rgba(var(--status-fire), 0.12);
  border: 1px solid rgba(var(--status-fire), 0.45);
}
.lead-warn-phone {
  display: block;
  width: fit-content;
  margin: var(--s-2) auto var(--s-4);
  font-family: var(--font-condensed);
  font-size: 24px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
/* ── Async delivery progress ───────────────────────────────────────
   Shown while a background worker attempts the send. Reuses the
   .form-success box so the swap does not shift layout. */
.lead-progress-spinner {
  width: 28px; height: 28px;
  margin: 0 auto var(--s-3);
  border: 3px solid rgba(var(--accent-rgb), 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lead-progress-spin 0.8s linear infinite;
}
@keyframes lead-progress-spin { to { transform: rotate(360deg); } }
.lead-progress-step {
  color: var(--text-dim);
  font-size: 0.95rem;
}
/* Respect a reduced-motion preference: keep the element as a static
   indicator rather than removing the only "working" signal. */
@media (prefers-reduced-motion: reduce) {
  .lead-progress-spinner { animation: none; opacity: 0.6; }
}

.lead-warn-phone:hover { color: var(--accent-hot); border-bottom-color: var(--accent-hot); }

/* ── Honeypot ──────────────────────────────────────────────────────
   Hidden off-screen rather than with display:none or type="hidden":
   bots skip genuinely hidden inputs, but fill a field that looks
   ordinary in the DOM. Humans never see it, so a non-empty value is a
   strong signal the submitter is a script.

   !important because these forms style their inputs by position and a
   later rule must not drag this back into view. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ── Placeholders ──────────────────────────────────────────────── */
.placeholder {
  position: relative;
  background: var(--tone-stone);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(var(--accent-rgb), 0.06) 0 12px,
      rgba(var(--shadow-rgb), 0.18) 12px 24px);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: var(--s-3);
  color: var(--ink-500);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.10);
}
.placeholder--stone    { background-color: var(--tone-stone); color: var(--ink-500); }
.placeholder--sand     { background-color: var(--tone-sand); color: var(--ink-500); }
.placeholder--clay     { background-color: var(--tone-clay); color: var(--ink-700); }
.placeholder--moss     { background-color: var(--tone-moss); color: var(--ink-500); }
.placeholder--graphite { background-color: var(--tone-graphite); color: var(--ink-500); }
.placeholder-label { position: absolute; bottom: var(--s-3); left: var(--s-3); }

.hero-placeholder { aspect-ratio: 4 / 5; min-height: 360px; }

/* ── Photo frames (duotone overlay; dims ODYS branding) ────────── */
.photo-frame {
  position: relative;
  overflow: hidden;
  background: var(--surface-1);
  border-radius: 16px;
}
.photo-frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.78) contrast(1.06) saturate(0.85);
}
.photo-frame::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--shadow-rgb), 0) 55%),
    linear-gradient(180deg, rgba(var(--shadow-rgb), 0.05), rgba(var(--shadow-rgb), 0.55));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.photo-frame--hero { aspect-ratio: 4 / 5; min-height: 420px; }
.photo-frame--square { aspect-ratio: 1 / 1; min-height: 320px; }
.photo-frame--card { aspect-ratio: 4 / 5; }

/* ── Generic typography helpers ───────────────────────────────── */
.kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.kicker::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.display--md { font-size: clamp(32px, 4vw, 56px); }

/* ── About ─────────────────────────────────────────────────────── */
.section--about { background: var(--surface-1); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
/* The about portrait is a pre-cropped 4:5 file (the figure is already framed and
   horizontally centred in the asset itself), so the frame matches the file's own
   ratio and object-fit has nothing left to crop. Keep the two in step: changing
   one without the other reintroduces an off-centre crop. */
.about-image { aspect-ratio: 4 / 5; min-height: 320px; }
.about-image img { object-position: 50% 50%; }
.about-copy p { color: var(--ink-700); margin: 0 0 var(--s-2); max-width: 52ch; }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--surface-2);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--accent);
  display: block;
  letter-spacing: -0.02em;
}
.stat-label { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-500); }

/* ── Services ──────────────────────────────────────────────────── */
.services-carousel-wrap { position: relative; }
.services-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-5);
}
@media (max-width: 799px) {
  .services-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--s-3);
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .services-grid .service {
    flex: 0 0 92%;
    scroll-snap-align: center;
  }
}
@media (min-width: 800px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
.services-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--s-4);
}
@media (max-width: 799px) {
  .services-dots { display: flex; }
}
.services-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-2);
  transition: background 200ms ease, transform 200ms ease;
}
.services-dot.is-active { background: var(--accent); transform: scale(1.25); }
.service {
  padding: var(--s-5);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.03) 60%);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-radius: 20px;
  display: flex; flex-direction: column;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.service:hover {
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.15);
}
.service-icon {
  color: var(--accent);
  margin-bottom: var(--s-3);
  width: 40px; height: 40px;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.service-icon svg { width: 100%; height: 100%; display: block; }
.service-name {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.service p { color: var(--ink-500); margin: 0 0 var(--s-2); font-size: 14px; }
.service-points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.service-points li {
  font-size: 14px;
  color: var(--ink-700);
  padding-left: 20px;
  position: relative;
}
.service-points li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
.service-from {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: 22px;
  color: var(--accent);
  margin-bottom: var(--s-3);
  letter-spacing: 0.02em;
}
.service-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-1);
}
.arrow-anim {
  display: inline-block;
  transition: transform 250ms ease;
}
.service-cta-btn:hover .arrow-anim {
  animation: arrow-bounce 0.5s ease infinite alternate;
}
@keyframes arrow-bounce {
  from { transform: translateX(0); }
  to   { transform: translateX(6px); }
}
.link-arrow {
  display: inline-block;
  padding: 10px 22px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  border: none;
}
.link-arrow:hover {
  background: var(--accent-hot);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.55);
  transform: translateY(-1px);
  color: var(--on-accent);
  border: none;
}

/* ── Metamorfozy ─────────────────────────────────────────────────── */
.meta-sub { color: var(--ink-500); margin: var(--s-2) 0 var(--s-5); max-width: 54ch; }

.meta-carousel-wrap { position: relative; }

.meta-carousel {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.meta-carousel::-webkit-scrollbar { display: none; }

/* Styl D — duże karty z tagami PRZED/PO */
.meta-card {
  flex: 0 0 calc(33.333% - var(--s-3));
  min-width: 280px;
  scroll-snap-align: start;
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.meta-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.18);
}
@media (max-width: 700px) {
  .meta-card { flex: 0 0 85%; }
}

.meta-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-1);
}
.meta-img-wrap img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.04);
  transition: transform 400ms ease;
}
.meta-card:hover .meta-img-wrap img { transform: scale(1.04); }

.meta-body {
  padding: var(--s-3) var(--s-4);
}
.meta-badges {
  display: flex;
  gap: 8px;
  margin-bottom: var(--s-2);
}
.meta-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 10px; border-radius: 999px;
}
.meta-badge--before { background: rgba(var(--on-accent-rgb), 0.08); color: var(--ink-500); }
.meta-badge--after  { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-hot); }
.meta-name {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink-900);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.meta-result {
  font-size: 16px; font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.meta-desc {
  font-size: 12px; color: var(--ink-500);
  line-height: 1.5;
}

/* Suwak */
.meta-scrollbar-wrap {
  margin-top: var(--s-3);
  padding: 4px 0;
}
.meta-scrollbar-track {
  position: relative;
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: visible;
}
.meta-scrollbar-thumb {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  height: 6px;
  background: var(--accent);
  border-radius: 999px;
  cursor: grab;
  transition: background 150ms ease;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}
.meta-scrollbar-thumb:hover,
.meta-scrollbar-thumb:active { background: var(--accent-hot); cursor: grabbing; }

/* ── Oferta ─────────────────────────────────────────────────────── */
.oferta-sub { color: var(--ink-500); margin: var(--s-2) 0 var(--s-5); max-width: 56ch; }

/* 3-column grid */
/* Mobile carousel wrapper.
   The 18px headroom for .oferta-popular-tag lives on .oferta-grid, not here:
   the grid is the scroll container (overflow-x: auto forces overflow-y: auto),
   so anything sticking out above its box — the tag sits at top: -14px — gets
   clipped flat. Padding is inside the scrollport, so the tag stays visible. */
.oferta-carousel-wrap { position: relative; }

.oferta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  align-items: stretch;
}
@media (max-width: 859px) {
  .oferta-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--s-3);
    /* Headroom for the featured card's "najczęściej wybierany" tag, which is
       absolutely positioned at top: -14px and would otherwise be sliced off
       by this scroll container. Moved here from .oferta-carousel-wrap so the
       section's total height — and every other card's position — is unchanged. */
    padding-top: 18px;
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-3);
  }
  .oferta-grid::-webkit-scrollbar { display: none; }
  .oferta-grid .oferta-card {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
  /* Cofamy — tag wraca na pozycję absolutną powyżej karty */
  .oferta-popular-tag {
    position: absolute;
    transform: translateX(-50%);
    top: -14px;
    left: 50%;
    display: block;
    margin-bottom: 0;
  }
}
/* Karta duetu ukryta globalnie — widoczna TYLKO na mobile w carousel */
.oferta-card--duet-mobile { display: none !important; }
@media (max-width: 859px) {
  .oferta-card--duet-mobile { display: flex !important; }
}
@media (min-width: 860px) {
  .oferta-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
}

/* Kropki nawigacyjne (mobile only) */
.oferta-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--s-4);
}
@media (max-width: 859px) {
  .oferta-dots { display: flex; }
}
.oferta-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--surface-2);
  transition: background 200ms ease, transform 200ms ease;
}
.oferta-dot.is-active { background: var(--accent); transform: scale(1.25); }

/* Base card */
.oferta-card {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0.02) 60%);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 20px;
  padding: var(--s-4);
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.oferta-card:hover {
  border-color: rgba(var(--accent-rgb), 0.50);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.12);
}

/* Featured card */
.oferta-card--featured {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0.06) 60%);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.18);
  overflow: visible;
}
.oferta-card--featured:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 48px rgba(var(--accent-rgb), 0.28);
}
@media (max-width: 859px) {
  .oferta-popular-tag {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: var(--s-2);
  }
}

.oferta-popular-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

@media (max-width: 859px) {
  .oferta-card { padding: var(--s-3); }
  .oferta-card-top { margin-bottom: var(--s-2); }
  .oferta-name { font-size: 24px; }
  .oferta-price-main { font-size: 32px; }
  .oferta-price-block { padding: var(--s-2) 0; margin-bottom: var(--s-2); }
  .oferta-desc { display: none; }
  .oferta-points { gap: 5px; margin-bottom: var(--s-3); }
  .oferta-points li { font-size: 12px; }
}

.oferta-card-top { margin-bottom: var(--s-3); }
.oferta-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: var(--s-2);
}
.oferta-badge--green  { background: rgba(var(--status-green), 0.15); color: var(--status-green-ink); }
.oferta-badge--purple { background: rgba(var(--accent-rgb), 0.20); color: var(--accent-hot); }
.oferta-badge--fire   { background: rgba(var(--status-fire), 0.15); color: var(--status-fire-ink); }

.oferta-name {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 32px;
  color: var(--ink-900); line-height: 1;
  margin-bottom: 4px; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.oferta-freq {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: var(--s-2);
}
.oferta-desc { font-size: 13px; color: var(--ink-500); line-height: 1.5; }

.oferta-price-block {
  border-top: 1px solid var(--surface-2);
  border-bottom: 1px solid var(--surface-2);
  padding: var(--s-3) 0;
  margin-bottom: var(--s-3);
}
.oferta-price-main {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: 42px;
  color: var(--ink-900); line-height: 1;
  letter-spacing: -0.01em;
}
.oferta-price-sub {
  display: block;
  font-size: 13px; color: var(--ink-500);
  margin-top: 3px;
}
.oferta-price-unit {
  display: block;
  font-size: 12px; color: var(--accent);
  font-weight: 600; margin-top: 4px;
  letter-spacing: 0.04em;
}

.oferta-points {
  list-style: none; padding: 0; margin: 0 0 var(--s-4);
  display: flex; flex-direction: column; gap: 7px;
  flex: 1;
}
.oferta-points li {
  font-size: 13px; color: var(--ink-700);
  padding-left: 20px; position: relative; line-height: 1.4;
}
.oferta-points li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--accent); font-weight: 700; font-size: 12px;
}

.oferta-btn {
  display: block; text-align: center;
  padding: 12px 20px;
  /* Matches .btn: same 4px radius, same condensed face. Was a 999px pill. */
  border-radius: 4px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  cursor: pointer;
  width: 100%;
  /* reset button defaults */
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-condensed);
  outline: none;
  text-decoration: none;
}
/* Same "A1" treatment as .btn--primary (see there). */
.oferta-btn--primary {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.60) 0%, rgba(var(--accent-soft-rgb), 0.60) 100%);
  color: var(--on-accent);
  border: 1px solid rgba(var(--accent-hot-rgb), 0.55);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
}
.oferta-btn--primary:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.85) 0%, rgba(var(--accent-soft-rgb), 0.85) 100%);
  border-color: var(--accent-hot);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28);
  transform: translateY(-1px); color: var(--on-accent);
}
.oferta-btn--ghost {
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--ink-700);
}
.oferta-btn--ghost:hover {
  background: rgba(var(--accent-rgb), 0.20);
  border-color: var(--accent);
  color: var(--ink-900);
}

/* Duet banner */
.oferta-duet {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.03) 60%);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 20px;
  padding: var(--s-5);
  display: none; /* hidden on mobile — duet is in carousel */
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 860px) {
  .oferta-duet { display: grid; }
}
@media (min-width: 700px) {
  .oferta-duet { grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center; }
}
.oferta-duet-name {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink-900); margin: var(--s-2) 0 var(--s-1);
  text-transform: uppercase;
}
.oferta-duet-tagline {
  font-size: 14px; color: var(--ink-500); margin-bottom: var(--s-3); line-height: 1.5;
}
.oferta-points--duet { margin-bottom: var(--s-3); }
.oferta-duet-right {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  min-width: 180px;
}
.oferta-duet-price-wrap { text-align: center; }
.oferta-duet-price-main {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: 52px;
  color: var(--ink-900); line-height: 1;
}
.oferta-duet-price-sub { font-size: 13px; color: var(--ink-500); display: block; margin-top: 4px; }
.oferta-duet-divider { width: 40px; height: 1px; background: var(--surface-2); }
.oferta-duet-per { text-align: center; }
.oferta-duet-per-num {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: 30px;
  color: var(--accent); line-height: 1;
}
.oferta-duet-per-label { font-size: 12px; color: var(--ink-500); display: block; margin-top: 3px; }

/* ── Shop ──────────────────────────────────────────────────────── */
.shop-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin: var(--s-4) 0 var(--s-5);
}
.chip {
  background: transparent;
  border: 1px solid var(--surface-2);
  color: var(--ink-700);
  padding: 8px 16px;
  font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); color: var(--surface-0); border-color: var(--accent); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-4);
}
.product-card {
  display: flex; flex-direction: column;
  transition: transform 160ms ease;
}
.product-card:hover { transform: translateY(-2px); }
.product-card-image { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; }
.product-card:hover .photo-frame::after {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--shadow-rgb), 0) 55%),
    linear-gradient(180deg, rgba(var(--shadow-rgb), 0.05), rgba(var(--shadow-rgb), 0.45));
}
.product-card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: var(--s-2) 0 4px;
}
.product-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-900); margin: 0;
}
.product-price { font-size: 14px; color: var(--accent); font-weight: 600; }
.product-desc {
  font-size: 13px; color: var(--ink-500);
  margin: 0 0 var(--s-2); flex: 1;
}
.btn--sm { padding: 10px 18px; font-size: 12px; }

/* ── Cart drawer ───────────────────────────────────────────────── */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--surface-1);
  border-left: 1px solid var(--accent);
  box-shadow: -16px 0 40px rgba(var(--shadow-rgb), 0.5);
  transform: translateX(100%);
  transition: transform 220ms ease;
  z-index: 20;
  overflow: hidden;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-inner {
  display: flex; flex-direction: column;
  height: 100%;
  padding: var(--s-3) var(--s-3) var(--s-4);
}
.cart-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--surface-2);
  padding-bottom: var(--s-2);
}
.cart-drawer-head h2 {
  font-family: var(--font-display);
  font-size: 22px; color: var(--ink-900); margin: 0;
}
.cart-close {
  background: transparent; border: 0; font-size: 28px; line-height: 1;
  color: var(--ink-700); padding: 0 6px;
}
.cart-items { list-style: none; padding: 0; margin: var(--s-3) 0; flex: 1; overflow-y: auto; }
.cart-item {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--surface-2);
  align-items: center;
}
.cart-thumb { aspect-ratio: 1 / 1; min-height: 0; }
.cart-item-meta { display: flex; flex-direction: column; gap: 4px; }
.cart-item-name { font-size: 14px; color: var(--ink-900); font-family: var(--font-display); }
.cart-item-price { font-size: 13px; color: var(--ink-500); }
.cart-remove { background: none; border: 0; color: var(--ink-500); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.cart-remove:hover { color: var(--ink-900); }
.cart-empty { color: var(--ink-500); margin: var(--s-4) 0; }
.cart-drawer-foot { border-top: 1px solid var(--surface-2); padding-top: var(--s-3); }
.cart-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-2);
  font-size: 14px;
  color: var(--ink-700);
}
.cart-subtotal strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
}
.btn--block { width: 100%; }
.checkout-success { padding: var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-3); }
.checkout-success p { color: var(--ink-700); margin: 0; }

/* ── Testimonials ──────────────────────────────────────────────── */
/* Dead block removed: the pre-grid testimonials styles — .section--testimonials
   (background surface-1, overridden by surface-0 further down),
   .testimonials-grid (no longer in any template), and
   .testimonial / -quote / -name / -prog (all redefined ~200 lines below when
   the section moved to the two-column layout). The duplicate quote rule was
   the one still claiming --font-display in italic at 26px. */

/* ── Forms / contact ───────────────────────────────────────────── */
.contact-sub { color: var(--ink-500); margin: var(--s-2) 0 var(--s-5); max-width: 52ch; }
.contact-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
}
.contact-info { display: flex; flex-direction: column; gap: var(--s-3); }
.contact-form-wrap { display: flex; flex-direction: column; }
.calendar-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0.06) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 12px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15);
}
.calendar-btn svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.calendar-btn:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28) 0%, rgba(var(--accent-rgb), 0.10) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.25);
}
.contact-form-divider {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-3) 0;
  color: var(--ink-300);
  font-size: 13px; letter-spacing: 0.06em;
}
.contact-form-divider::before,
.contact-form-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--surface-2);
}
.contact-item {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease;
}
.contact-item:hover { border-color: var(--accent-soft); }
.contact-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 8px;
  color: var(--accent);
}
.contact-icon svg { width: 18px; height: 18px; }
.contact-item-label {
  display: block; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 3px;
}
.contact-item-value {
  display: block; font-size: 14px; color: var(--ink-900); font-weight: 500;
}
.contact-form { margin-top: var(--s-1); }
.contact-map-inline {
  border-radius: 12px; overflow: hidden;
  height: 220px; position: relative;
  border: 1px solid var(--surface-2);
  margin-top: var(--s-1);
}
.contact-map-inline iframe { display: block; width: 100%; height: 100%; }
.form-row { display: flex; flex-direction: column; }
.form-row--split { flex-direction: row; gap: var(--s-2); flex-wrap: wrap; }
.form-row--split .input--email { flex: 3; min-width: 0; width: auto; }
.form-row--split .input--phone { flex: 2; min-width: 0; width: auto; }
/* Re-rendered form: each input + its error message share a cell. */
.form-cell { display: flex; flex-direction: column; min-width: 0; }
/* Top-align the cells: a two-line message under one input would otherwise
   stretch the other input to match its height. */
.form-row--split:has(> .form-cell) { align-items: flex-start; }
.form-cell--email { flex: 3; }
.form-cell--phone { flex: 2; }
.form-cell > input { width: 100%; }
/* On a phone the side-by-side pair leaves ~130px per field — too narrow for
   the input and its message. Stack them. */
@media (max-width: 520px) {
  .form-row--split:has(> .form-cell) { flex-direction: column; align-items: stretch; }
}
.input--name    { max-width: 100%; height: 44px; }
.input--goal    { width: 100%; max-width: 100%; height: 44px; }
.input--message { resize: vertical; min-height: 160px; }
.form select {
  font: inherit;
  font-size: 13px;
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--surface-2); background: var(--surface-0);
  color: var(--ink-900); border-radius: 10px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237e7c8e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  width: 100%;
  cursor: pointer;
  transition: border-color 150ms ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select option { background: var(--surface-1); }
.contact-map {
  border-radius: 16px; overflow: hidden;
  min-height: 420px; position: relative;
  border: 1px solid var(--surface-2);
}
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; }
.map-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--s-2) var(--s-3);
  background: linear-gradient(transparent, rgba(var(--shadow-deep-rgb), 0.75));
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.map-link-wrap { display: block; width: 100%; height: 100%; position: relative; text-decoration: none; }
.map-cta {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--on-accent); background: var(--accent);
  padding: 8px 16px; border-radius: 999px;
  pointer-events: auto;
}
.form { display: flex; flex-direction: column; gap: var(--s-2); }
.form--inline { flex-direction: row; align-items: stretch; gap: var(--s-1); flex-wrap: wrap; }
.form input, .form textarea {
  font: inherit; padding: 11px 14px;
  border: 1px solid var(--surface-2); background: var(--surface-0);
  color: var(--ink-900); border-radius: 10px;
  width: 100%;
  transition: border-color 150ms ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-300); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Server-rendered messages (contact form re-render): same bubble as the
   client-side .field-error, so both paths look identical. */
.form-error {
  position: relative; display: block; margin-top: 10px; padding: 7px 12px;
  border-radius: 8px; border-left: 2px solid var(--accent-hot);
  background: rgba(var(--accent-rgb), 0.14); color: var(--ink-900);
  font-size: 13px; line-height: 1.45;
}
.form-error::before {
  content: ""; position: absolute; top: -6px; left: 16px;
  border: 6px solid transparent; border-top: 0;
  border-bottom-color: rgba(var(--accent-rgb), 0.14);
}
.form-success {
  padding: var(--s-3) 0;
  /* Body font, not --font-display: the serif is the wordmark face, and setting
     it here made every confirmation message render in Georgia-ish serif at
     18px. Prose uses the body font per the type system. */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-900);
}

/* ── Lead result (progress / delivered / undelivered) ──────────────
   This same partial is swapped into three different containers: the inline
   contact section, the consultation modal body and the calculator modal body.

   Inline it needs a card of its own, or it reads as loose text floating in the
   page. Inside a modal it must NOT have one — .clead-panel already draws an
   identical surface (same background, same 1px border, same 14px radius), so a
   second box nested in it produced the frame-inside-a-frame, with 32px of
   padding counted twice. Hence the card is the default and the modal bodies
   opt out below. */
.lead-result {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: var(--s-4);
  text-align: center;
  border-radius: 14px;
  border: 1px solid var(--surface-2);
  background: var(--surface-1);
}
/* Already inside a modal panel: keep the centring and the typography, drop the
   duplicated surface.
   The panel body carries a uniform 32px pad, which is right for a form but
   leaves a short confirmation looking squat and over-wide — two lines of text
   stretched across 620px. So the result overrides the body's padding directly
   rather than fighting it: more room above and below, less at the sides.
   (Negative side margins were the first attempt and are wrong here: `width:100%`
   resolves against the parent BEFORE margins, so the box came out 32px narrow
   and sat 16px left of centre.) */
#consult-body > .lead-result,
#clead-body > .lead-result,
.wizard-panel .lead-result {
  max-width: none;
  padding: var(--s-3) 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/* Trade the body's uniform padding for something that suits a short message:
   32px -> 16px at the sides, kept at 32px top and bottom so the total reads as
   56px of breathing room above and below the text. */
#consult-body:has(> .lead-result),
#clead-body:has(> .lead-result) {
  padding-left: var(--s-2);
  padding-right: var(--s-2);
}
.lead-result p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
}
.lead-result .clead-done-title {
  /* Slightly tighter than the modal default: this card is narrower. */
  font-size: clamp(18px, 1.8vw, 21px);
}
/* The icon and the phone number need room from the text around them. */
.lead-result .lead-warn-mark,
.lead-result .lead-progress-spinner { margin-bottom: var(--s-3); }
.lead-result .lead-warn-phone { display: inline-block; margin-top: var(--s-3); }

/* ── Stats ─────────────────────────────────────────────────────── */
.section--stats {
  background: var(--surface-1);
  border-top: 1px solid var(--surface-2);
  border-bottom: 1px solid var(--surface-2);
  padding: var(--s-6) 0;
}
.stats-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
@media (min-width: 700px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-4) var(--s-3);
  text-align: center;
  border-right: 1px solid var(--surface-2);
}
.stat:last-child { border-right: none; }
.stat-number {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 72px);
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-plus {
  color: var(--accent);
  font-size: 0.6em;
  vertical-align: super;
}
/* "od" / "r." around the year tile: small and muted so the year stays the
   dominant element and the tile still scans as a number, not a sentence.
   Not vertical-align: super — unlike .stat-plus these sit on the baseline. */
.stat-affix {
  font-size: 0.42em;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}
.stat-label {
  margin-top: var(--s-1);
  font-size: 13px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  max-width: 14ch;
  line-height: 1.4;
}

/* ── Testimonials ───────────────────────────────────────────────── */
.section--testimonials { background: var(--surface-0); }

.testimonial {
  background: transparent;
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
  margin: 0;
}
.testimonial-stars {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 2px;
}
.testimonial-quote {
  /* Body font, not --font-display. These quotes run 100-320 characters and a
     display serif is cut for short headings — at that length it slows reading
     and the page's longest-form social proof is the worst place for that. */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  font-style: normal;
}
.testimonial figcaption {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: auto;
}
.testimonial-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.20);
  border: 1px solid var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.testimonial-name {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--ink-900);
}
.testimonial-prog {
  display: block;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface-0);
  border-top: 1px solid var(--surface-2);
  padding: var(--s-7) 0 0;
  margin-top: var(--s-7);
}
.site-footer a { color: var(--ink-500); transition: color 150ms ease; text-decoration: none; }
.site-footer a:hover { color: var(--ink-900); }

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
/* Phones: "Strona" and "Więcej" side by side, brand and contact full width
   (client chose "B", Oct 14 2026 — one long list read as "lista bez końca"). */
@media (max-width: 699px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }
  .footer-nav ul { gap: 12px; }
}
@media (min-width: 700px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-8); align-items: start; }
}
@media (min-width: 1000px) {
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--s-7); }
}
.footer-address { display: inline-block; }
.footer-address address { font-style: normal; line-height: 1.55; }

.footer-wordmark { font-size: 20px; display: inline-block; margin-bottom: var(--s-2); }
.footer-desc { color: var(--ink-500); font-size: 13px; line-height: 1.6; max-width: 30ch; margin-bottom: var(--s-4); }

.footer-socials { display: flex; gap: var(--s-2); }
.footer-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--ink-500);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.footer-social-icon svg { width: 17px; height: 17px; }
.footer-social-icon:hover { border-color: var(--accent); color: var(--accent-hot); background: rgba(var(--accent-rgb), 0.08); }

.footer-nav-title {
  display: block;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 600;
  margin-bottom: var(--s-3);
}
.footer-nav ul, .footer-contact ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px;
}
/* Footer nav links use the header nav's type (client asked, Oct 2026):
   body face, regular weight, .09em tracking, uppercase — one step smaller
   (12px vs 13.5px), also his call. Contact details stay in normal body text —
   they are data to read, not navigation. */
.footer-nav a {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 12px;
}
.footer-contact ul li { color: var(--ink-500); }

.footer-copy {
  margin-top: var(--s-6);
  border-top: 1px solid var(--surface-2);
  padding: var(--s-3) 0;
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: .04em;
}

/* ── Privacy policy page ──────────────────────────────────────── */
.legal-wrap { max-width: 72ch; }
.legal-wrap h2 {
  font-family: var(--font-condensed);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 20px;
  color: var(--ink-900);
  margin: var(--s-5) 0 var(--s-2);
}
.legal-wrap h3 {
  font-family: var(--font-condensed);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--ink-900);
  margin: var(--s-4) 0 var(--s-1);
}
.legal-wrap p, .legal-wrap li { color: var(--ink-700); line-height: 1.7; }
.legal-wrap ul { padding-left: 1.2em; margin: 0 0 var(--s-2); }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap a { color: var(--accent); }
.legal-wrap code { font-size: .9em; color: var(--ink-900); }
.legal-meta { color: var(--ink-500); font-size: 13px; }
.legal-note {
  font-size: 13px; color: var(--ink-500);
  border-left: 2px solid var(--accent);
  padding-left: var(--s-2);
}

/* ── Health-data consent checkbox (wizard + calculator lead) ──── */
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: var(--s-2) 0;
  font-size: 12px; line-height: 1.5;
  color: var(--ink-500);
  cursor: pointer;
  text-align: left;
}
.consent input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent a { color: var(--accent); text-decoration: underline; }
/* Site.fieldErrors inserts the message right after the <input>, i.e. INSIDE this
   flex row, between the box and its label. Wrap the row and push the message to
   its own full-width line below, so the box and its text stay side by side. */
.consent { flex-wrap: wrap; }
.consent > span:not(.field-error) { flex: 1 1 0; min-width: 0; }
.consent > .field-error { order: 3; flex-basis: 100%; margin-left: 28px; }

/* ── Cart qty stepper ──────────────────────────────────────────── */
.cart-qty {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.cart-qty-form { margin: 0; }
.cart-qty-btn {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid var(--surface-2);
  color: var(--ink-700);
  font-size: 14px; line-height: 1;
  padding: 0;
  transition: border-color 120ms ease, color 120ms ease;
}
.cart-qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.cart-qty-value {
  min-width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

/* ── Shop "view all" CTA ──────────────────────────────────────── */
.shop-view-all { display: flex; justify-content: center; margin-top: var(--s-5); }

/* ── Product card category tag (overlay on photo) ─────────────── */
.product-card-tag {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  background: rgba(var(--shadow-rgb), 0.55);
  color: var(--accent);
  padding: 4px 10px;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--accent);
  z-index: 1;
}

/* ── Motion: scroll-reveal ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms cubic-bezier(0.2, 0.65, 0.2, 1),
                transform 600ms cubic-bezier(0.2, 0.65, 0.2, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }
  .reveal-delay-4 { transition-delay: 320ms; }

  /* hero wchodzi od razu */
  .hero-photo, .about-image {
    animation: fade-in 900ms ease both;
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* hero gradient pulsuje */
  body {
    background-size: 200% 200%;
    animation: gradient-shift 12s ease infinite;
  }
  @keyframes gradient-shift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }
}

/* ── Variant chips ─────────────────────────────────────────────── */
/* Default: stacked vertical, full-width — used for descriptive
   variants (equipment specs, program tiers, nutrition cadence). */
.variant-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--s-2) 0 var(--s-3);
}
.variant-legend {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0 0 4px;
}
.variant-chip {
  display: flex;
  cursor: pointer;
  margin: 0;
}
.variant-chip input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.variant-chip-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  min-height: 36px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-700);
  border: 1px solid var(--surface-2);
  background: transparent;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.variant-chip-text {
  flex: 1;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
}
.variant-chip-delta {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.variant-chip:hover .variant-chip-label {
  border-color: var(--accent);
  color: var(--accent);
}
.variant-chip input:checked + .variant-chip-label {
  background: var(--accent);
  color: var(--surface-0);
  border-color: var(--accent);
  font-weight: 600;
}
.variant-chip input:checked + .variant-chip-label .variant-chip-delta {
  color: var(--surface-0);
  border-color: rgba(var(--shadow-warm-rgb), 0.45);
  background: rgba(var(--shadow-warm-rgb), 0.18);
}
.variant-chip input:focus-visible + .variant-chip-label {
  outline: 2px solid var(--accent-hot);
  outline-offset: 1px;
}

/* Inline modifier — apparel sizes stay as a compact horizontal row.
   Reserve room for 2 rows of chips so the legend lines up across cards
   even when one product has 4 sizes and another has 6. */
.variant-chips--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  min-height: 92px;
}
.variant-chips--inline .variant-legend { width: 100%; }
.variant-chips--inline .variant-chip { display: inline-flex; }
.variant-chips--inline .variant-chip-label {
  flex: 0 0 auto;
  justify-content: center;
  padding: 6px 14px;
  min-width: 44px;
  min-height: 32px;
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.variant-chips--inline .variant-chip-text { flex: 0 0 auto; }

/* Push the Add button to the bottom so cards line up across the row. */
.product-card-cta { margin-top: auto; align-self: stretch; }
.product-card { height: 100%; }

/* ── Cart line item: variant label + price stack ──────────────── */
.cart-item-variant {
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ── SVG product card image ────────────────────────────────────── */
.product-card-svg {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.20);
}
.product-card-svg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.product-card-svg .product-card-tag {
  background: rgba(var(--shadow-rgb), 0.7);
}

/* ── Offer Wizard Overlay ──────────────────────────────────────── */
.wizard-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(var(--shadow-rgb), 0.75);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: var(--s-3);
}
.wizard-overlay.is-open { display: flex; }

.wizard-panel {
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 20px;
  width: 100%; max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(var(--shadow-rgb), 0.5);
}

.wizard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5) var(--s-2);
  border-bottom: 1px solid var(--surface-2);
  flex-shrink: 0;
}
.wizard-title { font-family: var(--font-display); font-size: 20px; color: var(--ink-900); }
.wizard-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface-2); border: none;
  color: var(--ink-500); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms, color 150ms;
}
.wizard-close:hover { background: var(--accent); color: var(--on-accent); }

.wizard-progress {
  height: 3px; background: var(--surface-2); flex-shrink: 0;
}
.wizard-progress-bar {
  height: 100%; background: var(--accent);
  transition: width 350ms ease; width: 25%;
}
.wizard-steps-label {
  padding: var(--s-2) var(--s-5) 0;
  font-size: 11px; color: var(--ink-500); letter-spacing: .08em; text-transform: uppercase;
}

.wizard-step { padding: var(--s-4) var(--s-5); flex: 1; }
.wizard-step-title { font-family: var(--font-display); font-size: 22px; color: var(--ink-900); margin-bottom: var(--s-2); line-height: 1.2; }
.wizard-step-sub { font-size: 13px; color: var(--ink-500); margin-bottom: var(--s-3); }

/* Pakiety */
.wizard-packages { display: flex; flex-direction: column; gap: var(--s-2); }
.wpkg {
  text-align: left; padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border: 2px solid transparent;
  border-radius: 12px; cursor: pointer;
  transition: border-color 200ms, background 200ms;
  position: relative;
}
.wpkg:hover { border-color: rgba(var(--accent-rgb), 0.4); background: var(--surface-1); }
.wpkg--selected { border-color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.08) !important; }
.wpkg--highlight { border-color: rgba(var(--accent-rgb), 0.3); }
.wpkg-badge {
  position: absolute; top: -10px; right: 14px;
  background: var(--accent); color: var(--on-accent);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 10px; border-radius: 999px;
}
.wpkg-name { display: block; font-weight: 600; color: var(--ink-900); font-size: 14px; }
.wpkg-price { display: block; color: var(--accent); font-weight: 700; font-size: 16px; margin-top: 2px; }
.wpkg-freq { display: block; color: var(--ink-500); font-size: 12px; }

/* Cele */
.wizard-goals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.wgoal {
  padding: var(--s-3); background: var(--surface-2); border: 2px solid transparent;
  border-radius: 12px; cursor: pointer; font-size: 14px; color: var(--ink-700);
  text-align: left; transition: border-color 200ms, background 200ms;
}
.wgoal:hover { border-color: rgba(var(--accent-rgb), 0.4); background: var(--surface-1); }
.wgoal--selected { border-color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.08) !important; color: var(--ink-900); }

/* Textarea */
.wizard-textarea {
  width: 100%; padding: var(--s-3);
  background: var(--surface-2); border: 1px solid var(--surface-2);
  border-radius: 10px; color: var(--ink-900); font-family: var(--font-body); font-size: 14px;
  resize: vertical; transition: border-color 200ms;
}
.wizard-textarea:focus { outline: none; border-color: var(--accent); }
.wizard-char-count { display: block; text-align: right; font-size: 11px; color: var(--ink-500); margin-top: 4px; }

/* Tak/Nie */
.wizard-yesno { display: flex; gap: var(--s-2); }
.wyesno {
  flex: 1; padding: var(--s-3); background: var(--surface-2);
  border: 2px solid transparent; border-radius: 12px; cursor: pointer;
  font-size: 14px; color: var(--ink-700); transition: border-color 200ms, background 200ms;
}
.wyesno:hover { border-color: rgba(var(--accent-rgb), 0.4); }
.wyesno--selected { border-color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.08) !important; color: var(--ink-900); }

/* Kontakt krok 5 */
.wizard-fields { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.wizard-input {
  width: 100%; padding: 12px 16px;
  background: var(--surface-2); border: 1px solid var(--surface-2);
  border-radius: 10px; color: var(--ink-900); font-family: var(--font-body); font-size: 14px;
  transition: border-color 200ms;
}
.wizard-input:focus { outline: none; border-color: var(--accent); }
/* Validation messages under the wizard's contact fields.
   :empty drives visibility so BOTH writers work — the client-side check sets
   textContent, and the server's 422 is swapped in by htmx, which cannot run JS
   to toggle an inline style. An empty box takes no vertical space. */
.wizard-error {
  margin-top: var(--s-2); padding: 10px 14px; border-radius: 8px;
  border-left: 2px solid var(--accent-hot); background: rgba(var(--accent-rgb), 0.14);
  color: var(--ink-900); font-size: 13px;
}
.wizard-error:empty { padding: 0; }
.wizard-error:empty { display: none; margin-top: 0; }
.wizard-error p { margin: 0 0 var(--s-1); }
.wizard-error p:last-child { margin-bottom: 0; }

/* ── Field-level validation ─────────────────────────────────────────
   site.js (Site.fieldErrors) adds .is-invalid to the offending input — or to a
   row of option cards in the wizard — and inserts a .field-error message right
   after it, so each message sits under the field it is about.

   Brand palette, not a generic red: the first version used #ff6b6b and it
   stood out against the purple/onyx site. Errors are told apart from focus by
   SHAPE rather than hue — focus is a plain 1px accent border; an invalid field
   gets the brighter accent-hot border plus a soft glow ring, and its message is
   a tinted bubble with a caret pointing up at the field. */
.is-invalid,
.is-invalid:focus {
  border-color: var(--accent-hot) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-hot-rgb), 0.22);
}
.wizard-packages.is-invalid,
.wizard-goals.is-invalid,
.wizard-yesno.is-invalid {
  border-radius: 14px;
  outline: 1px solid var(--accent-hot);
  outline-offset: 6px;
  box-shadow: 0 0 0 9px rgba(var(--accent-hot-rgb), 0.14);
}
.field-error {
  position: relative;
  display: block;
  margin-top: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  border-left: 2px solid var(--accent-hot);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
}
/* Caret: ties the bubble to the field above it. */
.field-error::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: rgba(var(--accent-rgb), 0.14);
}
.wizard-packages.is-invalid + .field-error,
.wizard-goals.is-invalid + .field-error,
.wizard-yesno.is-invalid + .field-error { margin-top: 12px; }
/* In a flex column with a gap, the gap would sit both above and below the
   message and leave it floating between two fields. Pull it up to its own
   field and keep the full gap before the next one. */
.wizard-fields > .field-error { margin-top: calc(10px - var(--s-2)); }
/* Inside the calculator/consult rows, keep a little air before the next
   row's label so the message does not read as that label's caption. */
.calc-field > .field-error { margin-bottom: var(--s-1); }

/* Sukces */
.wizard-success { text-align: center; padding: var(--s-6) var(--s-4); }
.wizard-success-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.15); border: 2px solid var(--accent);
  color: var(--accent); font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-4);
}
.wizard-success h2 { font-family: var(--font-display); font-size: 26px; margin-bottom: var(--s-2); }
.wizard-success p { color: var(--ink-500); margin-bottom: var(--s-4); }
.wizard-btn-close-success {
  padding: 11px 28px; background: var(--accent); color: var(--on-accent);
  border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px;
}

/* Footer */
.wizard-footer {
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--surface-2);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.wizard-nav-btn {
  padding: 11px 24px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: background 150ms, color 150ms;
}
.wizard-nav-back { background: var(--surface-2); border: none; color: var(--ink-500); }
.wizard-nav-back:hover { background: var(--surface-1); color: var(--ink-700); }
.wizard-nav-next { background: var(--accent); border: none; color: var(--on-accent); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35); }
.wizard-nav-next:hover { background: var(--accent-hot); }

@media (max-width: 600px) {
  .wizard-goals { grid-template-columns: 1fr; }
  .wizard-panel { border-radius: 16px 16px 0 0; position: fixed; bottom: 0; left: 0; right: 0; max-height: 95vh; }
  .wizard-overlay.is-open { align-items: flex-end; padding: 0; }
}

/* ── Kalkulatory (/kalkulatory) ─────────────────────────────────── */
/* Colours and spacing go through tokens only —
   TestCSS_NoColourLiteralsOutsideTokenBlock fails CI on a literal hex or
   channel-rgba below :root. */

.section--calc { background: var(--surface-0); }
.calc-sub {
  max-width: 62ch;
  color: var(--ink-500);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  margin: var(--s-2) 0 var(--s-5);
}

.calc-panel {
  border: 1px solid var(--surface-2);
  border-radius: 12px;
  background: var(--surface-1);
  margin-bottom: var(--s-3);
  overflow: hidden;
}
.calc-panel[open] { border-color: rgba(var(--accent-rgb), 0.45); }

.calc-summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease;
}
/* Remove the native disclosure triangle — a styled chevron replaces it. */
.calc-summary::-webkit-details-marker { display: none; }
.calc-summary::marker { content: ""; }
.calc-summary:hover { background: var(--surface-2); }

.calc-panel-name {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 23px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-900);
}
.calc-panel-tag {
  font-size: 13px;
  color: var(--ink-500);
  margin-left: auto;
  text-align: right;
}
.calc-chev {
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.calc-panel[open] .calc-chev { transform: rotate(180deg); }

.calc-body {
  padding: 0 var(--s-4) var(--s-4);
  border-top: 1px solid var(--surface-2);
  padding-top: var(--s-4);
}

.calc-form { display: flex; flex-direction: column; gap: var(--s-3); }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field--full { grid-column: 1 / -1; }
.calc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: 0.02em;
}
.calc-unit { color: var(--ink-300); font-weight: 400; }
.calc-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--surface-2);
  background: var(--surface-0);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 160ms ease;
}
.calc-input:focus {
  outline: none;
  border-color: var(--accent);
}
/* select needs an explicit font-size or it inherits 16px and clips on mobile */
select.calc-input {
  appearance: none; -webkit-appearance: none;
  font-size: 15px;
  padding: 0 36px 0 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-btn { align-self: flex-start; margin-top: var(--s-1); }

.calc-out {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--surface-2);
}
.calc-result { display: flex; flex-direction: column; gap: 4px; }
.calc-result--hero {
  padding: var(--s-3) var(--s-4);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  margin-bottom: var(--s-3);
}
.calc-result-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
}
.calc-result-value {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  color: var(--accent-hot);
}
.calc-result-value--sm {
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ink-900);
}
.calc-result-note { font-size: 13px; color: var(--ink-500); line-height: 1.5; }

.calc-result-grid {
  /* Four tiles (TDEE, BMR, protein, BMI). auto-fit rather than a fixed 4
     columns: at 4 across each tile is too narrow for "Podstawowa przemiana
     materii" plus its number, so they reflow to 2×2 on mid widths. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
}

.calc-rm-table { margin-top: var(--s-3); }

/* ── Makroskładniki ──────────────────────────────────────────────── */
/* A bordered set rather than three loose tiles: protein + fat + carbs are
   one answer that adds up to the calorie target above, and a visible
   container is what says so without a sentence. */
.calc-macros {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  background: var(--surface-1);
}
.calc-result-grid--macros {
  /* Narrower than the stats grid below: these labels are one word, so they
     hold three across on far less width and should not reflow to 2+1. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.calc-macros-note { margin: 0; }
.calc-rm-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.calc-rm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-0);
  border: 1px solid var(--surface-2);
}
.calc-rm-reps { font-size: 13px; color: var(--ink-500); }
.calc-rm-kg {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-900);
}

.calc-warning {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 2px solid var(--accent-soft);
  background: var(--surface-0);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-500);
}

.calc-cta {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  border-radius: 14px;
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
}
.calc-cta-title {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
}
.calc-cta-sub {
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto var(--s-4);
}

/* Legal disclaimer — deliberately quieter than .calc-warning: it is a
   safeguard, not advice the reader needs to act on. */
.calc-disclaimer {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--surface-2);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-300);
  max-width: 78ch;
}

@media (max-width: 700px) {
  /* One column: two 46px inputs side by side leave ~150px each on a 390px
     screen, which clips the longer select labels. */
  .calc-row { grid-template-columns: 1fr; }
  .calc-result-grid { grid-template-columns: 1fr; }
  .calc-rm-rows { grid-template-columns: repeat(2, 1fr); }
  .calc-panel-tag { display: none; }
  .calc-btn { align-self: stretch; width: 100%; }
}

/* ── FAQ żywieniowe pod kalkulatorami ───────────────────────────── */
/* Reuses the blog/home accordion (.post-faq-item); only the spacing above it
   is page-specific, so the last calculator panel does not run straight into
   the first question. */
.calc-faq { margin-top: var(--s-6); }
.calc-faq .post-faq { margin-top: var(--s-4); }
.calc-faq .post-faq-item p { color: var(--ink-700); line-height: 1.7; padding-top: var(--s-1); }
.calc-faq .calc-warning { margin-top: var(--s-3); }

/* ── Okno zgłoszenia z kalkulatora ──────────────────────────────── */
/* Mirrors .wizard-overlay so the two modals on the site behave identically. */

.clead-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(var(--shadow-rgb), 0.72);
  backdrop-filter: blur(4px);
}
.clead-overlay.is-open { display: flex; }

.clead-panel {
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 14px;
}

.clead-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--surface-2);
}
.clead-title {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-900);
}
.clead-close {
  background: none;
  border: 0;
  color: var(--ink-500);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease;
}
.clead-close:hover { color: var(--ink-900); background: var(--surface-2); }

.clead-body { padding: var(--s-4); }
.clead-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
  margin: 0 0 var(--s-3);
}

.clead-summary {
  padding: var(--s-3);
  border-radius: 10px;
  background: var(--surface-0);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  margin-bottom: var(--s-4);
}
.clead-summary--empty { border-color: var(--surface-2); }
.clead-summary-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hot);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.clead-summary--empty .clead-summary-label { color: var(--ink-500); }
.clead-summary-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px var(--s-3);
}
.clead-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  font-size: 13px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--surface-2);
}
.clead-summary-k { color: var(--ink-500); }
.clead-summary-v { color: var(--ink-900); font-weight: 600; text-align: right; }
.clead-summary-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-500);
}

.clead-block { margin-top: var(--s-3); }
.clead-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.clead-chip {
  padding: 9px 16px;
  border-radius: 4px;
  border: 1px solid var(--surface-2);
  background: var(--surface-0);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.clead-chip:hover { border-color: var(--accent-soft); color: var(--ink-900); }
.clead-chip.is-on {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--ink-900);
}

.clead-textarea {
  height: auto;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: var(--font-body);
}

.clead-error {
  margin: var(--s-3) 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  font-size: 13px;
  color: var(--ink-900);
}
/* :empty drives visibility so BOTH writers work — the client-side check sets
   textContent, and the server's 422 is swapped in by htmx, which cannot run JS
   to toggle `hidden` or an inline style. An empty box takes no space at all. */
.clead-error:empty { display: none; }
.clead-error p { margin: 0 0 4px; }
.clead-error p:last-child { margin-bottom: 0; }
.clead-privacy {
  margin: var(--s-3) 0 var(--s-2);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-300);
}
.clead-send { width: 100%; justify-content: center; }

.clead-done { text-align: center; padding: var(--s-4) var(--s-2); }
.clead-done-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--on-accent);
  background: var(--accent);
}
.clead-done-title {
  font-family: var(--font-condensed);
  font-weight: 800;
  /* Sentence case. The copy in i18n is already written with normal
     capitalisation, so uppercasing it here turned every confirmation into
     shouting — and a long Polish sentence in caps wraps to three cramped
     lines in a modal. */
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
}
.clead-done-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-500);
  margin: 0 0 var(--s-4);
}

@media (max-width: 700px) {
  /* Bottom sheet on phones, matching .wizard-panel. */
  .clead-overlay { align-items: flex-end; padding: 0; }
  .clead-panel { max-width: 100%; max-height: 95vh; border-radius: 16px 16px 0 0; }
  .clead-summary-rows { grid-template-columns: 1fr; }
}

/* ── Podstrona /poznajmy-sie ────────────────────────────────────── */

.section--story { background: var(--surface-0); }
/* Name, role and city — the one line a visitor must not miss, so it sits
   above the lead and carries more weight than the running copy. */
.story-intro {
  max-width: 62ch;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.4;
  color: var(--ink-900);
  margin: var(--s-3) 0 0;
}
.story-lead {
  max-width: 62ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-700);
  margin: var(--s-2) 0 var(--s-5);
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.story-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-700);
  margin: 0 0 var(--s-3);
  max-width: 70ch;
}
.story-h {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  margin: var(--s-4) 0 var(--s-2);
  padding-left: var(--s-2);
  border-left: 2px solid var(--accent);
}
/* Sub-heading inside a section — continues the same thought rather than
   opening a new chapter, so it drops the accent rule and sits smaller. */
.story-sub {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: var(--s-4) 0 var(--s-2);
}
.story-list {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
.story-list li {
  position: relative;
  padding-left: 18px;
}
.story-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.story-copy .story-h:first-child { margin-top: 0; }

/* Pas ze zdjęciem wewnątrz kolumny tekstu. Kadr jest szerszy niż oryginały,
   więc każde zdjęcie dostaje własne object-position — wspólna wartość ucinała
   głowę na pionowych portretach. */
.story-band {
  margin: var(--s-5) 0 var(--s-4);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface-2);
  max-width: 70ch;
}
.story-band img {
  display: block;
  width: 100%;
  /* Jeden kształt kadru na każdej szerokości (818×380 na desktopie ≈ 43/20).
     Wcześniej była tu clamp() na wysokości, co przy średnich szerokościach
     dawało inne proporcje niż na desktopie. */
  height: auto;
  aspect-ratio: 43 / 20;
  object-fit: cover;
}
.story-band--sumo img  { object-position: 52% 34%; }
.story-band--awf img   { object-position: 60% 36%; }
.story-band--hall img  { object-position: 50% 55%; }
/* Podpis ze źródłem zdjęcia: wymagany, ale nie ma konkurować z kadrem. */
.story-credit {
  padding: 6px var(--s-2);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-500);
  opacity: 0.7;
  text-align: right;
}

.story-cta {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  border-radius: 14px;
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
}
.story-cta-title {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
}
.story-cta-sub {
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto var(--s-4);
}

.story-back {
  display: inline-block;
  margin-top: var(--s-4);
  font-size: 14px;
  color: var(--ink-500);
  transition: color 150ms ease;
}
.story-back:hover { color: var(--accent-hot); }

/* Button under the landing "O mnie" copy. */
.about-more { margin-top: var(--s-3); }

/* ── Blog (/blog, /blog/{slug}) ────────────────────────────────── */
.section--blog, .section--post { background: var(--surface-0); }
.blog-intro {
  max-width: 60ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-700);
  margin: var(--s-2) 0 var(--s-5);
}
.blog-meta {
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Cards — "read next" under a post. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}
.blog-card {
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.blog-card:hover {
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.35);
}
.blog-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); flex: 1; }
.blog-card-title {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0;
}
.blog-card-excerpt { font-size: 15px; line-height: 1.6; color: var(--ink-700); margin: 0; }
.blog-card-more {
  margin-top: auto; padding-top: var(--s-1);
  font-family: var(--font-condensed); font-weight: 800;
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.blog-card:hover .blog-card-more { color: var(--accent-hot); }
.blog-grid--compact .blog-card-img { aspect-ratio: 16 / 9; }
.blog-grid--compact .blog-card-title { font-size: 18px; }

/* Index — list rows. */
.blog-list { display: grid; gap: var(--s-3); }
.blog-row {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  color: inherit;
  transition: border-color 160ms ease, background 160ms ease;
}
.blog-row:hover { border-color: rgba(var(--accent-rgb), 0.6); background: var(--surface-2); }
.blog-row-img { aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.blog-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-row-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
@media (min-width: 700px) { .blog-row { grid-template-columns: 200px 1fr; } }
@media (max-width: 479px) { .blog-row .blog-card-excerpt { display: none; } }

/* Single post. */
.post-wrap { max-width: 760px; }
.post-crumbs { font-size: 13px; color: var(--ink-500); margin-bottom: var(--s-3); }
.post-crumbs a { color: var(--ink-500); }
.post-crumbs a:hover { color: var(--accent-hot); }
.post-title {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
}
.post-meta { margin-bottom: var(--s-5); }
.post-body p, .post-body li { font-size: 17px; line-height: 1.75; color: var(--ink-700); }
.post-body p { margin: 0 0 var(--s-3); }
.post-body strong { color: var(--ink-900); }
.post-body a:not(.btn) {
  color: var(--accent-hot);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb), 0.5);
}
.post-body .story-h { margin-top: var(--s-6); }
.post-body .story-list { margin: 0 0 var(--s-3); }
.post-lines {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-condensed); font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  text-transform: uppercase; color: var(--ink-900) !important;
  padding-left: var(--s-2); border-left: 2px solid var(--accent);
}
.post-figure { margin: var(--s-4) 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--surface-2); }
.post-figure img { display: block; width: 100%; height: auto; }
/* Portrait photos would otherwise fill a whole screen in the 760px column. */
.post-figure--portrait { max-width: 440px; margin-left: auto; margin-right: auto; }
.post-figure--case { max-width: 420px; margin-bottom: 0; }
.post-case {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 14px;
}
.post-case p:last-child { margin-bottom: 0; }
.post-case-title {
  font-family: var(--font-condensed); font-weight: 800;
  font-size: 20px; text-transform: uppercase; color: var(--accent-hot);
  margin: 0 0 var(--s-1);
}
.post-btn-row { margin: var(--s-1) 0 var(--s-4) !important; }
.post-cta { margin-top: var(--s-6); }
.post-cta .story-cta-sub { color: var(--ink-700); }
.post-cta-list { text-align: left; max-width: 54ch; margin: 0 auto var(--s-4) !important; }
.post-cta-phone { margin: var(--s-3) 0 0 !important; font-size: 15px !important; color: var(--ink-500) !important; }
.post-faq { margin-top: var(--s-5); }
.post-faq-item {
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  background: var(--surface-1);
  margin-bottom: var(--s-2);
}
.post-faq-item summary {
  cursor: pointer; list-style: none;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-condensed); font-weight: 700;
  font-size: 18px; color: var(--ink-900);
  display: flex; justify-content: space-between; gap: var(--s-2);
}
.post-faq-item summary::-webkit-details-marker { display: none; }
.post-faq-item summary::after { content: "+"; color: var(--accent); font-weight: 800; }
.post-faq-item[open] summary::after { content: "−"; }
.post-faq-item p { padding: 0 var(--s-3) var(--s-2); margin: 0 !important; }
.post-more { margin-top: var(--s-6); }

/* ── SEO headings (Oct 2026) ─────────────────────────────────────
   The search phrase moved into the <h1>; these keep the look the client
   approved. .kicker--h1 is an h1 that looks exactly like a .kicker. */
h1.kicker--h1 { margin-top: 0; font-weight: 600; line-height: 1.6; }
h1.kicker--h1 { font-family: inherit; font-size: 12px; }
p.display { margin-top: 0; }
/* Search phrase as a small purple tag line closing the hero <h1>. */
.hero-b-h1-tag {
  display: block;
  margin-top: var(--s-2);
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--accent-hot);
}
.nowrap { white-space: nowrap; }

/* Home/office visits note under the packages. */
.oferta-travel {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-1);
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  border-radius: 14px;
}
.oferta-travel-icon { font-size: 26px; line-height: 1; }
.oferta-travel-title {
  font-family: var(--font-condensed); font-weight: 800;
  font-size: 20px; text-transform: uppercase; color: var(--ink-900);
  margin: 0 0 var(--s-1);
}
.oferta-travel-text { margin: 0; color: var(--ink-700); line-height: 1.6; max-width: 70ch; }
.oferta-travel-text a { color: var(--accent-hot); white-space: nowrap; }

/* ── Jak wygląda współpraca (home above #contact, /poznajmy-sie above CTA)
   Four step cards + the long-term-model box. */
.wsp { margin-top: var(--s-6); }
.wsp-title { margin-top: var(--s-1); }
.wsp-lead { color: var(--ink-700); margin: 0 0 var(--s-4); font-size: 17px; }
.wsp-steps { list-style: none; margin: 0; padding: 0; }
.wsp-num {
  font-family: var(--font-condensed); font-weight: 800; color: var(--on-accent);
  background: var(--accent); border-radius: 50%;
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}
.wsp-step-t {
  font-family: var(--font-condensed); font-weight: 800; text-transform: uppercase;
  font-size: 19px; letter-spacing: .03em; color: var(--ink-900); margin: 0 0 4px;
}
.wsp-step-d { margin: 0; color: var(--ink-700); line-height: 1.6; }

/* Cards with big numbers — /poznajmy-sie. */
.wsp--cards .wsp-steps { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wsp--cards .wsp-step {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-3);
  background: var(--surface-1); border: 1px solid var(--surface-2); border-top: 3px solid var(--accent); border-radius: 14px;
}
.wsp--cards .wsp-num { background: none; color: var(--accent); width: auto; height: auto; font-size: 46px; line-height: 1; justify-content: flex-start; }


/* On home the section sits in its own band above #contact; drop the
   /poznajmy-sie top margin there. */
.section--wspolpraca .wsp { margin-top: 0; }
.wsp-step-d a { color: var(--accent-hot); }

/* Booking button under the contact form ("lub" divider above it). */
.contact-book { width: 100%; justify-content: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Home-page FAQ — reuses the blog accordion (.post-faq-item). */
.faq-wrap { max-width: 860px; }
.section--faq .post-faq { margin-top: var(--s-4); }
.section--faq .post-faq-item p { color: var(--ink-700); line-height: 1.7; padding-top: var(--s-1); }

/* ---- Kursy i szkolenia (/poznajmy-sie) ---------------------------------- */
.kursy { margin: var(--s-6) 0 var(--s-5); }
.kursy-lead, .kursy-books { color: var(--ink-500); max-width: 68ch; }
.kursy-books em { font-style: italic; color: var(--ink-700); }
.kursy-all { margin: var(--s-3) 0 var(--s-4); }
/* Muted button, same family as .oferta-btn--ghost (no loud CTA here). */
.kursy-all > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-700);
  padding: 12px 22px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.10);
  transition: background .2s, border-color .2s;
}
.kursy-all > summary:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.6); }
.kursy-all > summary::-webkit-details-marker { display: none; }
.kursy-all > summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--accent-hot); }
.kursy-all[open] > summary::after { content: "−"; }
.kursy-all[open] > summary { margin-bottom: var(--s-3); }
.kursy-year ul { list-style: none; margin: 0; padding: 0; }
.kursy-year li {
  font-size: 15px;
  line-height: 1.45;
  padding: 5px 0;
  border-top: 1px solid rgba(var(--on-accent-rgb), 0.06);
}
.kursy-year li:first-child { border-top: 0; }
.kursy-year li span { display: block; font-size: 13px; color: var(--ink-500); }
.kursy-year {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(var(--accent-rgb), 0.18);
}
.kursy-y {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
}
@media (max-width: 640px) {
  .kursy-year { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Hero, desktop: full standing figure on the client's gym (Oct 2026) ─────
   The client disliked the slanted crop that hid one arm and cut the other
   ("po co zasłaniać tę rękę?") and the purple glow behind the cut-out ("dziwnie
   wygląda"). On desktop the transparent cut-out now stands on the page, whole,
   over a darkened photo of his actual gym. Mobile keeps the existing treatment
   (composited portrait + bottom scrim) untouched. */
/* Gym layer on every width (phone added Oct 14 2026: "a w wersji na telefon
   w tle nie ma siłki?"). Client chose "E3": sharp, heavily darkened, light
   purple tint. */
.hero-b-wrap { isolation: isolate; background: var(--surface-0); }
.hero-b-wrap::before { display: none; }
.hero-gym {
  position: absolute; inset: -20px; z-index: -1;
  background: url(/static/img/story-silownia-fitness-academy.jpg) center 40% / cover no-repeat;
  filter: brightness(0.30) saturate(0.35);
}
.hero-gym::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--shadow-rgb), 0.78) 0%, rgba(var(--shadow-rgb), 0.35) 60%, rgba(var(--shadow-rgb), 0.55) 100%),
    linear-gradient(to top, var(--surface-0) 0%, transparent 25%),
    linear-gradient(rgba(var(--accent-deep-rgb), 0.28), rgba(var(--accent-deep-rgb), 0.28));
}
@media (max-width: 799px) {
  /* Phone: text sits over the figure, so the photo stays dim (same 0.55 as
     before) and the gym behind it a touch darker than on desktop. */
  .hero-gym { filter: brightness(0.24) saturate(0.35); background-position: 30% 40%; }
}
@media (min-width: 800px) {

  .hero-b-photo {
    width: 50%;
    clip-path: none;
    display: flex; align-items: flex-end; justify-content: center;
  }
  .hero-b-photo::after { display: none; }
  .hero-b-photo picture { display: contents; }
  .hero-b-photo img {
    width: auto; height: 94%; max-width: 100%;
    object-fit: contain; object-position: bottom center;
    filter: none;
    -webkit-mask-image: linear-gradient(to top, transparent 0, var(--surface-0) 9%);
            mask-image: linear-gradient(to top, transparent 0, var(--surface-0) 9%);
  }
  .hero-b-copy { max-width: 54%; }
  /* Slogan in exactly two lines (client, Oct 16 2026: "dlaczego napis nie
     mieści się w dwóch wierszach?"). At 62px the copy column was narrower than
     "TWOJA METAMORFOZA SYLWETKI", so "DZIŚ." fell to a third line. Now: a fixed
     break after "metamorfoza", each line kept whole, font capped at 56px.
     Measured: the second line ends 43–100px left of the figure at 1280–1920. */
  .hero-b-copy { max-width: none; }
  .hero-b-h1 { font-size: clamp(28px, 3.9vw, 56px); white-space: nowrap; }
  .hero-b-h1-tag { white-space: normal; }
}
/* Phones: one flowing phrase, no forced break. */
@media (max-width: 799px) {
  .hero-br { display: none; }
}

/* ── Contact: client's gym behind the section (Oct 2026, client request) ────
   Same photo and E3 grade as the hero, but darker still: this block carries a
   form and contact cards, so the photo must stay well behind them. Top and
   bottom fade into the page so the section has no hard edges. */
.section--contact { position: relative; isolation: isolate; overflow: hidden; }
.contact-gym {
  position: absolute; inset: 0; z-index: -1;
  background: url(/static/img/story-silownia-fitness-academy.jpg) center 45% / cover no-repeat;
  filter: brightness(0.24) saturate(0.35);
}
.contact-gym::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--surface-0) 0%, transparent 18%, transparent 82%, var(--surface-0) 100%),
    linear-gradient(rgba(var(--accent-deep-rgb), 0.28), rgba(var(--accent-deep-rgb), 0.28));
}

/* ── Section rhythm (client chose "D", Oct 14 2026) ───────────────────────
   "O mnie" and the stats strip sat on --surface-1 while everything from
   Usługi to Kontakt was --surface-0, which read as a stray band. One page
   background everywhere; sections are separated by a hairline instead. */
.section--about, .section--stats { background: var(--surface-0); }
.section--about,
.section--services,
.section--metamorfozy,
.section--oferta,
.section--testimonials,
.section--wspolpraca { border-top: 1px solid var(--surface-2); }

/* ── Jak wygląda współpraca, home (client chose "N", Oct 14 2026) ─────────
   No tiles, no arrows ("ciężko to wygląda", "strzałka niepotrzebna"): big
   purple numbers carry the order, the title sits under them, and a small
   "Rozwiń/Zwiń" text link says it opens. <details name="wsp"> keeps one step
   open at a time with no JS. */
.wsp-acc-row { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.wsp-acc-item > summary {
  list-style: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  cursor: pointer;
}
.wsp-acc-item > summary::-webkit-details-marker { display: none; }
.wsp-acc-item .wsp-num {
  background: none; width: auto; height: auto;
  color: var(--accent);
  font-family: var(--font-condensed); font-weight: 700;
  font-size: 44px; line-height: 1;
}
.wsp-acc-item .wsp-step-t { margin: 0; }
.wsp-more {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb), 0.4);
}
.wsp-acc-item > summary:hover .wsp-more { color: var(--ink-900); text-decoration-color: var(--accent); }
.wsp-more-c { display: none; }
.wsp-acc-item[open] .wsp-more-o { display: none; }
.wsp-acc-item[open] .wsp-more-c { display: inline; }
.wsp-acc-item .wsp-step-d { padding-top: var(--s-2); }
@media (min-width: 900px) {
  /* One horizontal line on desktop. */
  .wsp-acc-row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
}

/* ── Testimonials, Google-review look (client, Oct 15 2026; review b/c/d) ──
   Person first (round initials avatar, name), then gold stars, then the text
   without the big quote marks — the order and look of a Google Business
   Profile review. --gold is the only new colour: Google's star yellow is what
   makes the block read as "reviews" at a glance. */
.g-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: var(--s-2) 0 0; }
.g-score { font-family: var(--font-condensed); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink-900); }
.g-stars { color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.g-count { color: var(--ink-500); font-size: 14px; }
.g-link {
  font-size: 13px; color: var(--ink-700);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb), 0.5);
}
.g-link:hover { color: var(--ink-900); text-decoration-color: var(--accent); }

.testimonial { border-left: 0; gap: 10px; }
.testimonial figcaption { margin-top: 0; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 17px;
  color: var(--ink-900);
}
.testi-track .testimonial:nth-child(6n+1) .testimonial-avatar { background: var(--av-1); }
.testi-track .testimonial:nth-child(6n+2) .testimonial-avatar { background: var(--av-2); }
.testi-track .testimonial:nth-child(6n+3) .testimonial-avatar { background: var(--av-3); }
.testi-track .testimonial:nth-child(6n+4) .testimonial-avatar { background: var(--av-4); }
.testi-track .testimonial:nth-child(6n+5) .testimonial-avatar { background: var(--av-5); }
.testi-track .testimonial:nth-child(6n+6) .testimonial-avatar { background: var(--av-6); }
.testimonial-name { font-size: 15px; }
.testimonial-prog { color: var(--ink-500); letter-spacing: 0; }
.testimonial-stars { color: var(--gold); font-size: 15px; letter-spacing: 1px; }
/* <blockquote> keeps the browser's 40px side margin otherwise, which pushed
   every review's text in from the card edge. */
.testimonial-quote { margin: 0; }

/* Marquee (client chose "D" + auto-scroll, Oct 15 2026): Google-style cards
   in one row drifting left forever. The track holds the 20 reviews twice, so
   animating to -50% lands exactly where it started. Pauses while the mouse is
   over it or a finger is on it (.is-paused, set in sections.js). */
.testi-marquee {
  margin-top: var(--s-4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--surface-0) 4%, var(--surface-0) 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, var(--surface-0) 4%, var(--surface-0) 96%, transparent 100%);
}
.testi-track {
  display: flex; gap: 16px; width: max-content;
  animation: testi-drift 200s linear infinite;
}
/* Paused by sections.js: mouse over the strip, or a finger/button held on it. */
.testi-marquee.is-paused .testi-track { animation-play-state: paused; }
@keyframes testi-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
.testi-track .testimonial {
  flex: 0 0 min(360px, 82vw);
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  padding: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .testi-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .testi-track { animation: none; }
  .testi-track .testimonial[aria-hidden="true"] { display: none; }
}
.testi-cta { text-align: center; margin-top: var(--s-5); }
/* "Darmowa konsultacja" breathes: slightly larger with a stronger purple
   glow, then back, every 2.8 s (client chose "C", Oct 16 2026). Paused on
   hover so it holds still under the cursor; off for prefers-reduced-motion. */
.testi-cta-btn { animation: cta-breathe 2.8s ease-in-out infinite; }
.testi-cta-btn:hover, .testi-cta-btn:focus-visible { animation-play-state: paused; }
@keyframes cta-breathe {
  0%, 100% { transform: scale(1);     box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18); }
  50%      { transform: scale(1.045); box-shadow: 0 6px 30px rgba(var(--accent-rgb), 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .testi-cta-btn { animation: none; }
}