/* ==========================================================================
   MOMA Poznań — main.css
   Arlek.pl. Vanilla CSS, custom properties, mobile-first.
   Zasady: jedna rodzina fontu (wymóg klienta), jeden akcent (błękit z logo),
   pomarańcz wyłącznie dla tematu ciepła. Zero max-width na tekście.
   ========================================================================== */

/* --- 1. TOKENY ----------------------------------------------------------- */
:root {
  /* kolor */
  --mm-ink:        #0E1519;
  --mm-ink-2:      #55636E;
  --mm-ink-3:      #8A96A0;
  --mm-bg:         #FFFFFF;
  --mm-bg-2:       #F4F6F8;
  --mm-bg-3:       #EAEEF2;
  --mm-line:       #DFE5EB;
  --mm-blue:       #00A0E3;   /* akcent z logo — płaszczyzny, ikony */
  --mm-blue-deep:  #0077A8;   /* ten sam akcent, wariant kontrastowy na tekst */
  --mm-blue-dark:  #005B80;
  --mm-blue-wash:  #E8F6FD;
  --mm-orange:     #EF7F1A;   /* TYLKO temat ciepła */
  --mm-orange-wash:#FDF1E4;
  /* ciemny motyw (sekcje ink, stopka) */
  --mm-inv-soft:   #B8C4CE;   /* tekst wtórny na ciemnym */
  --mm-inv-muted:  #8FA0AC;   /* okruszki, drobiazgi na ciemnym */
  --mm-blue-light: #6FD0F5;   /* akcent na ciemnym tle */
  --mm-error:      #B3261E;

  /* v3 (02.08, po uwagach klienta „za jasna, mdła" + wzorzec heaton.com.pl):
     ciemna granatowa baza jako charakter marki, błękit z logo zostaje akcentem */
  --mm-navy:       #0B1E38;   /* pasek nawigacji, sekcje ciemne */
  --mm-navy-2:     #071527;   /* najciemniejszy: stopka, hero */
  --mm-navy-3:     #12294A;   /* karty/pola na granacie */
  --mm-topbar:     #1A222C;   /* górny pasek informacyjny */
  --mm-navy-line:  rgba(255,255,255,.12);

  /* siatka 8px */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* sekcje — świadomie ciaśniej: strona ma płynąć, nie ziać pustką */
  --section-sm: clamp(2rem, 4vw, 3rem);
  --section-md: clamp(2.75rem, 5vw, 4.5rem);
  --section-lg: clamp(3.5rem, 6.5vw, 6rem);

  /* szerokości — JEDEN system, bez wyjątków */
  --w-content: 78rem;
  --w-wide:    92rem;
  --px:        clamp(1.5rem, 5vw, 3rem);

  /* typografia — jedna rodzina zmienna; skala zbita (display ~3.2x body, nie 4.2x) */
  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2rem, 1.35rem + 2.8vw, 3.4rem);
  --fs-h2:      clamp(1.55rem, 1.16rem + 1.7vw, 2.43rem);
  --fs-h3:      clamp(1.08rem, .99rem + .4vw, 1.3rem);
  --fs-lead:    clamp(1.03rem, .98rem + .3vw, 1.2rem);
  --fs-body:    clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  /* reszta */
  --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px;
  --sh-1: 0 1px 2px rgba(14,21,25,.06), 0 1px 3px rgba(14,21,25,.04);
  --sh-2: 0 4px 12px rgba(14,21,25,.07), 0 2px 4px rgba(14,21,25,.04);
  --sh-3: 0 18px 46px rgba(14,21,25,.13), 0 4px 12px rgba(14,21,25,.06);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 220ms;         /* mikrointerakcje */
  --dur-slow: 320ms;    /* panele, menu */
  --dur-media: 560ms;   /* skale obrazow */
  --header-h: 72px;
}

@media (min-width: 1024px) { :root { --header-h: 88px; } }

/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--mm-ink);
  background: var(--mm-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                 /* clip TYLKO na body */
  font-variant-numeric: tabular-nums lining-nums;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.1; font-weight: 800; letter-spacing: -.022em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible {
  outline: 3px solid var(--mm-blue-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--mm-blue); color: #fff; }

/* --- 3. UKŁAD ------------------------------------------------------------ */
.mm-container {
  inline-size: 100%; max-inline-size: var(--w-content);
  margin-inline: auto; padding-inline: var(--px);
}
.mm-container--wide { max-inline-size: var(--w-wide); }
.mm-section { padding-block: var(--section-md); }
.mm-section--lg { padding-block: var(--section-lg); }
.mm-section--alt {
  background:
    radial-gradient(70% 90% at 8% 0%, rgba(0,160,227,.055), transparent 55%),
    linear-gradient(var(--mm-bg-2), var(--mm-bg-2));
}
.mm-section--ink { position: relative; background: var(--mm-navy-2); color: #fff; overflow: hidden; }
.mm-section--ink::before {              /* delikatna poświata marki w rogu */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 95% 8%, rgba(0,160,227,.14), transparent 60%);
}
.mm-section--ink > * { position: relative; }

/* tło „instalacyjne" — izometryczny rysunek rur (Magnific), mocno wyciszony */
.mm-section--blueprint {
  position: relative; overflow: hidden;
}
.mm-section--blueprint::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/tlo-instalacje.webp') center/cover no-repeat;
  /* .5 dawalo za jasne tlo pod krokami 03/04 — tekst tracil kontrast */
  opacity: .26;
  -webkit-mask-image: linear-gradient(105deg, transparent 28%, #000 82%);
          mask-image: linear-gradient(105deg, transparent 28%, #000 82%);
}
/* warstwa wyrownujaca tlo — z-index 0, tresc (z-index 1) zostaje nad nia */
.mm-section--blueprint::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg, rgba(7,21,39,0) 30%, rgba(7,21,39,.55) 78%);
}
.mm-section--blueprint > * { position: relative; z-index: 1; }

/* techniczna siatka — bardzo subtelna, tylko tam gdzie ją wprost włączamy */
.mm-grid-bg {
  background-image:
    linear-gradient(rgba(14,21,25,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,21,25,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 85% at 50% 20%, #000 30%, transparent 78%);
          mask-image: radial-gradient(75% 85% at 50% 20%, #000 30%, transparent 78%);
}

.mm-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mm-blue-deep);
}
.mm-eyebrow::before {
  content: ""; inline-size: 28px; block-size: 2px;
  background: var(--mm-blue); border-radius: 2px;
}
.mm-section--ink .mm-eyebrow { color: var(--mm-blue-light); }
.mm-section--ink .mm-eyebrow::before { background: var(--mm-blue-light); }

.mm-h2 { font-size: var(--fs-h2); margin-block: var(--sp-3) var(--sp-3); }
.mm-lead { font-size: var(--fs-lead); color: var(--mm-ink-2); line-height: 1.55; }
.mm-section--ink .mm-lead { color: var(--mm-inv-soft); }

/* --- 4. PRZYCISKI -------------------------------------------------------- */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: 48px; padding: 0 var(--sp-8);
  font-weight: 700; font-size: var(--fs-body); letter-spacing: -.01em;
  border: 2px solid transparent; border-radius: var(--r-md); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mm-btn:active { transform: translateY(1px); }
.mm-btn--primary { background: var(--mm-blue-deep); color: #fff; }
.mm-btn--primary:hover { background: var(--mm-blue-dark); }
.mm-btn--ghost { background: transparent; color: var(--mm-ink); border-color: var(--mm-line); }
.mm-btn--ghost:hover { border-color: var(--mm-ink); background: var(--mm-bg-2); }
.mm-section--ink .mm-btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.mm-section--ink .mm-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.mm-btn svg { inline-size: 18px; block-size: 18px; flex: none; }

/* --- 5. HEADER v3 — trzy poziomy (pasek info / logo+kontakt / belka nawigacji)
   Układ wskazany przez klienta (heaton.com.pl). Po zjechaniu w dół górne
   poziomy się zwijają, zostaje logo + nawigacja. --------------------------- */
.mm-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: var(--mm-bg);
  box-shadow: 0 1px 0 var(--mm-line);
  transition: box-shadow var(--dur) var(--ease);
}
.mm-header.is-scrolled { box-shadow: var(--sh-2); }

/* 1. pasek informacyjny */
.mm-topbar {
  display: none;
  background: var(--mm-topbar); color: rgba(255,255,255,.72);
  font-size: var(--fs-xs);
}
@media (min-width: 1024px) {
  .mm-topbar { display: block; overflow: hidden; max-block-size: 40px; transition: max-block-size var(--dur-slow) var(--ease); }
  .mm-header.is-scrolled .mm-topbar { max-block-size: 0; }
}
.mm-topbar__inner { display: flex; align-items: center; gap: var(--sp-8); block-size: 40px; }
.mm-topbar p { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; white-space: nowrap; }
.mm-topbar svg { inline-size: 14px; block-size: 14px; color: var(--mm-blue); flex: none; }
.mm-topbar__area { margin-inline-start: auto; }

/* 2. pas główny: logo + kontakty */
.mm-header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  block-size: var(--header-h);
}
.mm-logo { display: flex; align-items: center; flex: none; }
.mm-logo svg, .mm-logo img { block-size: 40px; inline-size: auto; transition: block-size var(--dur) var(--ease); }
@media (min-width: 1024px) {
  .mm-logo svg, .mm-logo img { block-size: 54px; }
  .mm-header.is-scrolled .mm-logo img { block-size: 42px; }
}

.mm-header__contacts { display: none; }
@media (min-width: 1024px) {
  .mm-header__contacts { display: flex; align-items: center; gap: var(--sp-6); margin-inline-start: auto; }
}
.mm-hcontact { display: inline-flex; align-items: center; gap: var(--sp-3); }
.mm-hcontact__ico {
  inline-size: 42px; block-size: 42px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--mm-blue-wash); color: var(--mm-blue-deep);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mm-hcontact:hover .mm-hcontact__ico { background: var(--mm-blue-deep); color: #fff; }
.mm-hcontact__ico svg { inline-size: 19px; block-size: 19px; }
.mm-hcontact__txt { display: grid; line-height: 1.25; }
.mm-hcontact__k { font-size: var(--fs-xs); color: var(--mm-ink-3); }
.mm-hcontact strong { font-size: 1.0625rem; color: var(--mm-ink); font-weight: 800; letter-spacing: -.01em; }
.mm-header__quote { white-space: nowrap; }

/* 3. ciemna belka nawigacji */
.mm-navbar { display: none; background: var(--mm-navy); }
@media (min-width: 1024px) { .mm-navbar { display: block; } }
.mm-navbar__inner { display: flex; align-items: stretch; gap: var(--sp-6); }
.mm-navbar__note {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 0 auto; color: rgba(255,255,255,.62);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
}
.mm-navbar__note svg { inline-size: 14px; block-size: 14px; color: var(--mm-blue); }

.mm-nav { display: none; }
@media (min-width: 1024px) {
  .mm-nav { display: flex; align-items: stretch; }
  .mm-nav > a, .mm-nav .mm-mega > a {
    display: inline-flex; align-items: center;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm); font-weight: 700; color: rgba(255,255,255,.86);
    letter-spacing: .01em;
    border-inline-end: 1px solid var(--mm-navy-line);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .mm-nav > a:first-child { border-inline-start: 1px solid var(--mm-navy-line); }
  .mm-nav > a:hover, .mm-nav > a[aria-current="page"] { background: rgba(255,255,255,.07); color: #fff; }
  .mm-nav > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--mm-blue); }
}
/* --- 5b. MEGA MENU „Usługi" (desktop, CSS-only: hover + focus-within) ----- */
.mm-mega { position: relative; }
.mm-mega > a { display: inline-flex; align-items: center; gap: 6px; }
.mm-mega > a::before {                    /* chevron */
  content: ""; order: 2; inline-size: 8px; block-size: 8px;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.mm-mega:hover > a::before, .mm-mega:focus-within > a::before { transform: rotate(-135deg) translateY(-3px); }
.mm-mega__panel {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 50%;
  transform: translateX(-50%) translateY(6px);
  inline-size: min(680px, calc(100vw - 2 * var(--px)));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1);
  padding: var(--sp-3);
  background: #fff; border: 1px solid var(--mm-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mm-mega::after {                          /* mostek — kursor nie gubi panelu po drodze */
  content: ""; position: absolute; inset-block-start: 100%; inset-inline: -20px; block-size: 14px;
}
.mm-mega:hover .mm-mega__panel, .mm-mega:focus-within .mm-mega__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.mm-mega__item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3);
  align-items: center;                      /* ikona = środek całego bloku tekstu */
  padding: var(--sp-3);
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease);
}
.mm-mega__item:hover { background: var(--mm-blue-wash); }
.mm-mega__ico {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  background: var(--mm-blue-wash); color: var(--mm-blue-dark); border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mm-mega__item:hover .mm-mega__ico { background: var(--mm-blue-deep); color: #fff; }
.mm-mega__item--heat .mm-mega__ico { background: var(--mm-orange-wash); color: var(--mm-orange); }
.mm-mega__item--heat:hover .mm-mega__ico { background: var(--mm-orange); color: #fff; }
.mm-mega__ico svg { inline-size: 20px; block-size: 20px; }
.mm-mega__item strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--mm-ink); letter-spacing: -.01em; }
.mm-mega__item span {
  display: block; font-size: var(--fs-xs); color: var(--mm-ink-2); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  /* zawsze 1 linia */
}
/* UWAGA: regula wyzej (span) nadpisywala display:grid kafelka — ikona siedziala
   10px za wysoko. Wyzsza specyficznosc przywraca centrowanie. */
.mm-mega__item .mm-mega__ico { display: grid; place-items: center; overflow: visible; }
.mm-mega__all {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-block-start: var(--sp-1); padding: var(--sp-3);
  border-block-start: 1px solid var(--mm-line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--mm-blue-deep);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.mm-mega__all:hover { background: var(--mm-bg-2); }
.mm-mega__all svg { inline-size: 15px; block-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .mm-mega__panel { transition: none; }
}

.mm-header__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 800; color: var(--mm-ink); white-space: nowrap;
}
.mm-header__cta svg { inline-size: 17px; block-size: 17px; color: var(--mm-blue-deep); }
@media (min-width: 1024px) { .mm-header__cta { display: none; } }  /* desktop ma pelne kontakty */
@media (max-width: 1023px) {
  /* szybki telefon mobile: okrągła ikona obok burgera, widoczna od razu */
  .mm-header__cta {
    margin-inline-start: auto;
    inline-size: 44px; block-size: 44px; justify-content: center;
    background: var(--mm-blue-wash); border-radius: 50%;
  }
  .mm-header__cta svg { inline-size: 19px; block-size: 19px; }
  .mm-header__cta-label { display: none; }
  .mm-burger { margin-inline-start: var(--sp-2); }
}

/* hamburger */
.mm-burger {
  margin-inline-start: auto; inline-size: 48px; block-size: 48px;
  /* flex column + gap: grid ze stretch rozciagal rzedy i X stawal sie chevronem */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: none; border: 0; cursor: pointer;
}
@media (min-width: 1024px) { .mm-burger { display: none; } }
.mm-burger span {
  display: block; inline-size: 24px; block-size: 2px; background: var(--mm-ink);
  border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (max-width: 1023px) {
  /* telefon dokleja się do burgera (bazowy auto-margin burgera rozsuwał parę) */
  .mm-burger { margin-inline-start: var(--sp-2); }
}
body.mm-menu-open .mm-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.mm-menu-open .mm-burger span:nth-child(2) { opacity: 0; }
body.mm-menu-open .mm-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* menu mobilne */
.mm-mobile {
  position: fixed; inset: 0; z-index: 99;
  background: var(--mm-bg);
  padding: calc(var(--header-h) + var(--sp-8)) var(--px) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
body.mm-menu-open .mm-mobile { transform: translateX(0); }
@media (min-width: 1024px) { .mm-mobile { display: none; } }
.mm-mobile a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 0; font-size: 1.375rem; font-weight: 700;
  border-block-end: 1px solid var(--mm-line);
}
.mm-mobile a svg { inline-size: 18px; block-size: 18px; color: var(--mm-ink-3); }
.mm-mobile__foot {
  /* dwa CTA obok siebie, kompaktowe — nie przygniatają menu */
  margin-block-start: auto; padding-block-start: var(--sp-8);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}
.mm-mobile__foot .mm-btn {
  padding: var(--sp-3); min-block-size: 50px; white-space: nowrap;
  font-size: .875rem; justify-content: center; text-align: center;
}
@media (max-width: 359px) { .mm-mobile__foot { grid-template-columns: 1fr; } }
body.mm-menu-open { overflow: hidden; }

/* --- 6. HERO ------------------------------------------------------------- */
.mm-hero { position: relative; padding-block: var(--sp-8) 0; }
.mm-hero::before {                       /* subtelna siatka techniczna za treścią */
  content: ""; position: absolute; inset: 0 0 30% 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,21,25,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,21,25,.032) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}
.mm-hero > * { position: relative; }
.mm-hero__grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 1024px) {
  .mm-hero { padding-block: var(--sp-12) 0; }
  .mm-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--sp-12); }
}
.mm-hero__claim {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-4) 6px var(--sp-2); margin-block-end: var(--sp-5);
  background: #fff; color: var(--mm-blue-dark);
  border: 1px solid var(--mm-line); border-radius: var(--r-md);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--sh-1);
}
.mm-hero__claim::before {
  content: ""; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--mm-blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.mm-hero h1 { font-size: var(--fs-display); margin-block-end: var(--sp-5); }
.mm-hero h1 em {
  font-style: normal; color: var(--mm-blue-deep);
  background: linear-gradient(transparent 68%, rgba(0,160,227,.18) 68%);
}
.mm-hero__lead { font-size: var(--fs-lead); color: var(--mm-ink-2); margin-block-end: var(--sp-6); }
.mm-hero__lead span { display: block; }
.mm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* na waskich ekranach oba CTA rownej szerokosci - inaczej wygladaja jak blad */
@media (max-width: 559px) {
  .mm-hero__actions .mm-btn { flex: 1 1 100%; }
}
.mm-hero__media { position: relative; }
.mm-hero__media img {
  inline-size: 100%; aspect-ratio: 16 / 11; object-fit: cover;
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
}
@media (min-width: 1024px) {
  .mm-hero__media img { aspect-ratio: 4 / 3.4; }
}

/* pasek zaufania — karty z ikonami w ringu, akcent przy hover */
.mm-trust {
  margin-block-start: clamp(2rem, 4.5vw, 3.5rem);
  display: grid; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .mm-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mm-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
.mm-trust__item {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-5);
  background: #fff;
  border: 1px solid var(--mm-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.mm-trust__item::before {                /* pasek akcentu, wjezdza przy hover */
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px;
  background: linear-gradient(90deg, var(--mm-blue), var(--mm-blue-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .mm-trust__item:hover { border-color: transparent; box-shadow: var(--sh-2); transform: translateY(-2px); }
  .mm-trust__item:hover::before { transform: scaleX(1); }
}
.mm-trust__ico {
  inline-size: 48px; block-size: 48px; display: grid; place-items: center;
  background: var(--mm-blue-wash); color: var(--mm-blue-dark);
  border: 1px solid rgba(0,160,227,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0,160,227,.07);
}
.mm-trust__ico svg { inline-size: 21px; block-size: 21px; }
.mm-trust__k {
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25;
  margin-block-end: 2px; text-wrap: balance;
}
.mm-trust__v { font-size: var(--fs-xs); color: var(--mm-ink-2); line-height: 1.45; }

/* --- 7. KAFELKI USŁUG ---------------------------------------------------- */
.mm-services__head { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-8); }
@media (min-width: 900px) {
  .mm-services__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: var(--sp-10); }
}
.mm-services__head .mm-lead { font-size: var(--fs-body); }
/* klient w wytycznych: grid 2x2 lub 3x2 - trzymamy sie tego,
   auto-fit rozjezdzal sie do 4 kolumn na szerokich ekranach */
.mm-grid-services { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .mm-grid-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mm-grid-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }
.mm-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--mm-bg); border: 1px solid var(--mm-line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .mm-card:hover { border-color: transparent; box-shadow: var(--sh-3); transform: translateY(-3px); }
}
.mm-card__media { position: relative; overflow: hidden; background: var(--mm-bg-3); }
.mm-card__media img {
  inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--dur-media) var(--ease);
}
@media (hover: hover) {
  .mm-card:hover .mm-card__media img { transform: scale(1.04); }
}
.mm-card__icon {
  position: absolute; inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4);
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); border-radius: var(--r-md);
  color: var(--mm-blue-deep); box-shadow: var(--sh-1);
}
.mm-card--heat .mm-card__icon { color: var(--mm-orange); }
.mm-card__icon svg { inline-size: 22px; block-size: 22px; }
/* kafelek bez zdjęcia — panel markowy zamiast dziury w układzie */
.mm-card__media--blank {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--mm-blue-wash) 0%, #F4F6F8 62%),
    var(--mm-bg-2);
}
.mm-card__blank { inline-size: 44%; block-size: auto; color: var(--mm-blue); opacity: .38; }

.mm-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.mm-card h3 { font-size: var(--fs-h3); }
.mm-card p { color: var(--mm-ink-2); font-size: var(--fs-sm); }
.mm-card__more {
  margin-block-start: auto; padding-block-start: var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-sm); color: var(--mm-blue-deep);
}
.mm-card__more svg { inline-size: 16px; block-size: 16px; transition: transform var(--dur) var(--ease); }
@media (hover: hover) {
  .mm-card:hover .mm-card__more svg { transform: translateX(4px); }
}
.mm-card__link { position: absolute; inset: 0; }
.mm-card__link:focus-visible { outline-offset: -4px; }

/* --- 8. DLACZEGO MY ------------------------------------------------------ */
.mm-why { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .mm-why { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-12); align-items: start; } }
.mm-why__list { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .mm-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mm-why__item {
  display: grid; gap: var(--sp-3); align-content: start;
  padding: var(--sp-6) var(--sp-5);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) {
  .mm-why__item:hover { background: rgba(0,160,227,.09); border-color: rgba(0,160,227,.3); }
}
.mm-why__num {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  background: rgba(0,160,227,.12);
  border: 1px solid rgba(0,160,227,.3); border-radius: var(--r-md);
  font-weight: 800; font-size: var(--fs-sm); color: var(--mm-blue-light);
}
.mm-why__item h3 { font-size: var(--fs-h3); }
.mm-why__item p { color: var(--mm-inv-soft); font-size: var(--fs-sm); }

/* pas marek w sekcji ink — oddzielony linia, wiekszy oddech */
.mm-section--ink .mm-brands {
  margin-block-start: var(--sp-10);
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid rgba(255,255,255,.1);
}

/* --- 9. REALIZACJE ------------------------------------------------------- */
.mm-works { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .mm-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mm-works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mm-work { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--mm-bg-3); }
.mm-work img { inline-size: 100%; block-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-media) var(--ease); }
@media (hover: hover) {
  .mm-work:hover img { transform: scale(1.05); }
}

.mm-work__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--sp-10) var(--sp-5) var(--sp-5);
  background: linear-gradient(to top, rgba(8,14,18,.88) 12%, rgba(8,14,18,.55) 52%, transparent);
  color: #fff;
}
.mm-work__cap strong { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.mm-work__cap span { font-size: var(--fs-sm); color: rgba(255,255,255,.82); }
/* rowna siatka: kadry panoramiczne tez trzymaja 3:2 (cover przytnie) */

/* --- 10. KROK PO KROKU --------------------------------------------------- */
.mm-steps { display: grid; gap: var(--sp-8); counter-reset: mmstep; }
@media (min-width: 768px) { .mm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); } }
@media (min-width: 1100px) { .mm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mm-step { position: relative; padding-block-start: var(--sp-6); border-block-start: 2px solid var(--mm-line); }
.mm-step::before {
  counter-increment: mmstep; content: counter(mmstep, decimal-leading-zero);
  position: absolute; inset-block-start: calc(-1 * var(--sp-4)); inset-inline-start: 0;
  padding: 4px 10px;
  background: #fff; border: 1px solid var(--mm-line); border-radius: var(--r-md);
  font-size: .9375rem; font-weight: 800; letter-spacing: .02em; color: var(--mm-blue-deep);
  line-height: 1.4; box-shadow: var(--sh-1);
}
.mm-step h3 { font-size: var(--fs-h3); margin-block-end: var(--sp-2); }
.mm-step p { color: var(--mm-ink-2); font-size: var(--fs-sm); }

/* --- 11. FORMULARZ ------------------------------------------------------- */
.mm-quote { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .mm-quote { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-12); align-items: start; } }
/* formularz jako karta — mniej "gołego" AI layoutu */
@media (min-width: 1024px) {
  .mm-quote > form {
    padding: var(--sp-8);
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--r-xl);
    box-shadow: var(--sh-2);
  }
  .mm-section--alt .mm-quote > form { box-shadow: var(--sh-3); border-color: transparent; }
}
.mm-form { display: grid; gap: var(--sp-5); }
.mm-field { display: grid; gap: var(--sp-2); }
.mm-field label { font-size: var(--fs-sm); font-weight: 700; }
.mm-field input, .mm-field textarea {
  inline-size: 100%; min-block-size: 52px; padding: var(--sp-3) var(--sp-4);
  background: var(--mm-bg); border: 2px solid var(--mm-line); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mm-field textarea { min-block-size: 120px; resize: vertical; }
.mm-field input:hover, .mm-field textarea:hover { border-color: var(--mm-ink-3); }
.mm-field input:focus, .mm-field textarea:focus {
  outline: none; border-color: var(--mm-blue-deep);
  box-shadow: 0 0 0 4px rgba(0,160,227,.16);
}
.mm-field ::placeholder { color: var(--mm-ink-3); }
.mm-row { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .mm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mm-chip { position: relative; }
.mm-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mm-chip span {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 var(--sp-4);
  border: 2px solid var(--mm-line); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mm-chip input:hover + span { border-color: var(--mm-ink-3); }
.mm-chip input:checked + span { border-color: var(--mm-blue-deep); background: var(--mm-blue-wash); color: var(--mm-blue-dark); }
.mm-chip input:focus-visible + span { outline: 3px solid var(--mm-blue-deep); outline-offset: 3px; }

.mm-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.mm-consent input { inline-size: 22px; block-size: 22px; margin-block-start: 2px; accent-color: var(--mm-blue-deep); }
.mm-consent p { font-size: var(--fs-xs); color: var(--mm-ink-2); line-height: 1.5; }
.mm-hp { position: absolute; left: -9999px; opacity: 0; }

.mm-contactbox { display: grid; gap: var(--sp-5); }
.mm-contactbox__row { display: flex; gap: var(--sp-4); align-items: start; }
.mm-contactbox__ico {
  flex: none; inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  background: var(--mm-blue-wash); color: var(--mm-blue-dark); border-radius: var(--r-md);
}
.mm-contactbox__ico svg { inline-size: 20px; block-size: 20px; }
.mm-contactbox dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-ink-3); }
.mm-contactbox dd { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.mm-contactbox dd small { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--mm-ink-2); }

/* obszar działania — docx wymaga go przy stopce/kontakcie */
.mm-area {
  margin-block-start: var(--sp-8); padding: var(--sp-6);
  background: var(--mm-bg-2); border-radius: var(--r-lg);
}
.mm-area__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  /* ink-3 na jasnoszarym panelu dawal 2,79:1 przy normie 4,5 */
  text-transform: uppercase; color: #5A6672; margin-block-end: var(--sp-3);
}
.mm-area__cities { font-weight: 600; line-height: 1.7; }
.mm-area__note { margin-block-start: var(--sp-2); font-size: var(--fs-sm); color: var(--mm-ink-2); }

/* przycisk formularza: nie rozciągamy na całą kolumnę na desktopie */
.mm-form > button[type="submit"] { justify-self: start; padding-inline: var(--sp-10); }
@media (max-width: 559px) { .mm-form > button[type="submit"] { justify-self: stretch; } }

/* --- 12. FOOTER ---------------------------------------------------------- */
.mm-footer { background: var(--mm-ink); color: var(--mm-inv-soft); padding-block: var(--section-md) var(--sp-8); }
.mm-footer__grid { display: grid; gap: var(--sp-10); }
@media (min-width: 768px) { .mm-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-10); } }
@media (min-width: 1100px) { .mm-footer__grid { grid-template-columns: 1.3fr .8fr 1fr 1fr; gap: var(--sp-10); } }
.mm-footer li { font-size: var(--fs-sm); }
.mm-footer h4 { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-block-end: var(--sp-4); }
.mm-footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.mm-footer a { color: var(--mm-inv-soft); transition: color var(--dur) var(--ease); }
/* na dotyku linki w stopce mialy 19 px wysokosci - za malo, zeby w nie trafic */
@media (max-width: 1023px) {
  .mm-footer li a, .mm-footer__bar a {
    display: inline-flex; align-items: center; min-block-size: 40px;
  }
  .mm-footer ul { gap: 0; }
  .mm-crumbs a, .mm-crumbs span { display: inline-flex; align-items: center; min-block-size: 32px; }
}
/* mobile: stopka kompaktowa — pelna wersja byla za dluga (11 landingow po 40px) */
@media (max-width: 767px) {
  .mm-footer { padding-block: var(--sp-10) var(--sp-5); }
  .mm-footer__grid { gap: var(--sp-7, 1.75rem); }
  .mm-footer__logo img { block-size: 30px; inline-size: auto; margin-block-end: var(--sp-3); }
  .mm-footer__grid > div:first-child p { font-size: var(--fs-xs); }
  .mm-footer__social { margin-block-start: var(--sp-4); }
  .mm-footer__social a { inline-size: 40px; block-size: 40px; }
  .mm-footer h4 { margin-block-end: var(--sp-3); }
  /* uslugi w dwoch kolumnach zamiast jednej dlugiej */
  .mm-footer__grid > div:nth-child(2) ul { grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); }
  /* miasta jako chipy: samo miasto, prefiks schowany (pelny anchor zostaje w DOM) */
  .mm-footer__cities { display: flex !important; flex-wrap: wrap; gap: var(--sp-2) !important; }
  .mm-footer__cities a {
    min-block-size: 36px; padding-inline: var(--sp-3);
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md);
    font-size: var(--fs-xs);
  }
  .mm-footer__bar { margin-block-start: var(--sp-8); }
}
.mm-footer a:hover { color: #fff; }
.mm-footer__logo svg, .mm-footer__logo img { block-size: 38px; inline-size: auto; margin-block-end: var(--sp-5); }
.mm-footer__social { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.mm-footer__social a {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mm-footer__social a:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.mm-footer__social svg { inline-size: 18px; block-size: 18px; }
.mm-footer__bar {
  margin-block-start: var(--sp-12); padding-block-start: var(--sp-6);
  border-block-start: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  align-items: center; justify-content: space-between; font-size: var(--fs-xs);
}

/* --- 13. TELEFON MOBILE -------------------------------------------------- */
.mm-callbar {
  position: fixed; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); z-index: 90;
  inline-size: 60px; block-size: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mm-blue-deep); color: #fff; box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mm-callbar.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1024px) { .mm-callbar { display: none; } }
.mm-callbar svg { inline-size: 24px; block-size: 24px; }
.mm-callbar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--mm-blue); pointer-events: none;   /* nie blokuj tapnięć */
  animation: mm-pulse 2.6s var(--ease) infinite;
}
@keyframes mm-pulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- 14. ANIMACJE WEJŚCIA ------------------------------------------------
   Ukrywamy WYŁĄCZNIE gdy JS działa (klasa .mm-js ustawiana inline w <head>).
   Bez tego treść znikałaby przy wyłączonym lub zepsutym JS.                */
.mm-js .mm-anim { opacity: 0; transform: translateY(18px); }
.mm-anim { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.mm-js .mm-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mm-js .mm-anim { opacity: 1; transform: none; }
}

/* --- 15. POMOCNICZE ------------------------------------------------------ */
.mm-sr {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mm-skip {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--sp-4); z-index: 200;
  padding: var(--sp-3) var(--sp-5); background: var(--mm-ink); color: #fff;
  border-radius: var(--r-md); transition: inset-block-start var(--dur) var(--ease);
}
.mm-skip:focus { inset-block-start: var(--sp-3); }

/* ==========================================================================
   16. PASEK MAREK
   ========================================================================== */
.mm-brands { margin-block-start: var(--section-sm); }
.mm-brands__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mm-ink-3);
  margin-block-end: var(--sp-5); text-align: center;
}
.mm-brands__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-8) var(--sp-10);
}
.mm-brands__row a, .mm-brands__row span { display: block; }
.mm-brands img {
  block-size: 26px; inline-size: auto;
  filter: grayscale(1); opacity: .55;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (min-width: 768px) { .mm-brands img { block-size: 32px; } }
/* kwadratowe znaki wyzsze — inaczej napis w kaflu jest nieczytelny */
.mm-brands img.is-square { block-size: 44px; }
@media (min-width: 768px) { .mm-brands img.is-square { block-size: 52px; } }
.mm-brands a:hover img, .mm-brands a:focus-visible img { filter: none; opacity: 1; }
/* na ciemnym tle logotypy odwracamy do bieli — czarny Stiebel znikał w graficie */
.mm-section--ink .mm-brands img { filter: grayscale(1) invert(1) brightness(1.8) contrast(.85); opacity: .8; }
.mm-section--ink .mm-brands a:hover img,
.mm-section--ink .mm-brands a:focus-visible img { filter: grayscale(1) invert(1) brightness(2); opacity: 1; }
.mm-brands__note { margin-block-start: var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--mm-ink-2); }

/* ==========================================================================
   17. HERO — dopracowanie
   ========================================================================== */
.mm-hero__media::before {
  content: ""; position: absolute; inset: -8% -6% -12% 2%;
  background: radial-gradient(60% 60% at 70% 30%, rgba(0,160,227,.20), transparent 70%);
  filter: blur(28px); z-index: -1; pointer-events: none;
}
.mm-hero__badge {
  position: absolute; inset-block-end: calc(-1 * var(--sp-6)); inset-inline-start: calc(-1 * var(--sp-4));
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--mm-bg); border: 1px solid var(--mm-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  max-inline-size: min(19rem, 78%);
}
@media (max-width: 639px) {
  .mm-hero__badge { inset-inline-start: var(--sp-3); inset-block-end: calc(-1 * var(--sp-5)); padding: var(--sp-3) var(--sp-4); }
}
.mm-hero__badge-ico {
  flex: none; inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  background: var(--mm-blue-wash); color: var(--mm-blue-dark); border-radius: var(--r-md);
}
.mm-hero__badge-ico svg { inline-size: 21px; block-size: 21px; }
.mm-hero__badge > span:last-child { font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; color: var(--mm-ink-2); }
.mm-hero__badge strong { display: block; font-size: .875rem; color: var(--mm-ink); margin-block-end: 1px; }

@keyframes mm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.mm-js .mm-hero__claim,
.mm-js .mm-hero h1,
.mm-js .mm-hero__lead,
.mm-js .mm-hero__actions,
.mm-js .mm-hero__media { animation: mm-rise .7s var(--ease) backwards; }
.mm-js .mm-hero h1        { animation-delay: .06s; }
.mm-js .mm-hero__lead     { animation-delay: .13s; }
.mm-js .mm-hero__actions  { animation-delay: .2s; }
.mm-js .mm-hero__media    { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .mm-js .mm-hero__claim, .mm-js .mm-hero h1, .mm-js .mm-hero__lead,
  .mm-js .mm-hero__actions, .mm-js .mm-hero__media { animation: none; }
}

/* ==========================================================================
   18. FLOAT BAR (wymog docx: telefon + wycena, stale na dole ekranu)
   ========================================================================== */
.mm-floatbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-block-start: 1px solid var(--mm-line);
  box-shadow: 0 -6px 24px rgba(14,21,25,.09);
  transform: translateY(105%); transition: transform var(--dur-slow) var(--ease);
  padding-block-end: env(safe-area-inset-bottom, 0);
}
.mm-floatbar.is-visible { transform: none; }
@media (min-width: 1024px) { .mm-floatbar { display: none; } }
.mm-floatbar a {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: 58px; font-weight: 800; font-size: .9375rem;
}
.mm-floatbar a svg { inline-size: 18px; block-size: 18px; }
.mm-floatbar__call { color: var(--mm-ink); }
.mm-floatbar__quote { background: var(--mm-blue-deep); color: #fff; }
body.mm-menu-open .mm-floatbar { transform: translateY(105%); }
@media (max-width: 1023px) { body { padding-block-end: 58px; } }

/* ==========================================================================
   19. PODSTRONY
   ========================================================================== */
.mm-pagehero { position: relative; background: var(--mm-ink); color: #fff; overflow: hidden; }
.mm-pagehero__bg { position: absolute; inset: 0; }
.mm-pagehero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .55; }
.mm-pagehero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(102deg, rgba(14,21,25,.96) 42%, rgba(14,21,25,.72) 68%, rgba(14,21,25,.55));
}
.mm-pagehero__inner { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem); }
.mm-pagehero h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem); margin-block: var(--sp-4) var(--sp-5); }
.mm-pagehero p { font-size: var(--fs-lead); color: var(--mm-inv-soft); }

.mm-crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--mm-inv-muted); }
.mm-crumbs a { color: var(--mm-inv-muted); }
.mm-crumbs a:hover { color: #fff; }
.mm-crumbs span[aria-current] { color: #fff; }

.mm-split { display: grid; gap: var(--sp-10); }
@media (min-width: 1024px) { .mm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: start; } }

.mm-stages { list-style: none; padding: 0; display: grid; gap: var(--sp-5); counter-reset: st; }
.mm-stages li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4);
  align-items: start; padding-block-end: var(--sp-5);
  border-block-end: 1px solid var(--mm-line);
}
.mm-stages li:last-child { border-block-end: 0; padding-block-end: 0; }
.mm-stages li::before {
  counter-increment: st; content: counter(st);
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  background: var(--mm-blue-wash); color: var(--mm-blue-dark);
  border-radius: 50%; font-size: var(--fs-sm); font-weight: 800;
}
.mm-stages strong { display: block; margin-block-end: var(--sp-1); }
.mm-stages p { color: var(--mm-ink-2); font-size: var(--fs-sm); }

.mm-benefits { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .mm-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-benefit {
  padding: var(--sp-6); background: var(--mm-bg); border: 1px solid var(--mm-line);
  border-radius: var(--r-lg);
}
.mm-benefit svg { inline-size: 24px; block-size: 24px; color: var(--mm-blue-deep); margin-block-end: var(--sp-3); }
.mm-benefit h3 { font-size: 1.0625rem; margin-block-end: var(--sp-2); }
.mm-benefit p { font-size: var(--fs-sm); color: var(--mm-ink-2); }

.mm-audience { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .mm-audience { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mm-audience div {
  padding: var(--sp-5) var(--sp-6); background: var(--mm-bg-2);
  border-radius: var(--r-lg); border-inline-start: 3px solid var(--mm-blue);
}
.mm-audience h3 { font-size: 1rem; margin-block-end: var(--sp-1); }
.mm-audience p { font-size: var(--fs-sm); color: var(--mm-ink-2); }

.mm-devices { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .mm-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-device {
  /* mobile: pion — link pod tekstem; wiersz obok siebie dusił opis do ~10 znaków */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) var(--sp-6); background: var(--mm-bg);
  border: 1px solid var(--mm-line); border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mm-device:hover { border-color: transparent; box-shadow: var(--sh-2); }
.mm-device img { block-size: 26px; inline-size: auto; flex: none; filter: grayscale(1); opacity: .7;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.mm-device:hover img { filter: none; opacity: 1; }
.mm-device__txt { flex: 1; min-inline-size: 0; }
.mm-device__txt strong { display: block; font-size: 1rem; }
.mm-device__txt span { font-size: var(--fs-sm); color: var(--mm-ink-2); }
.mm-device__go { flex: none; color: var(--mm-blue-deep); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: var(--sp-1); }
.mm-device__go svg { inline-size: 14px; block-size: 14px; }
@media (max-width: 1023px) {
  /* wąskie karty (mobile 1 kol., tablet 2 kol.): tekst na pełną szerokość,
     link producenta w osobnym wierszu — inline dusił opis do ~11 znaków */
  .mm-device__txt { flex: 1 1 100%; }
  .mm-device__go { margin-inline-start: 0; }
}

.mm-faq { display: grid; gap: var(--sp-3); }
.mm-faq details {
  border: 1px solid var(--mm-line); border-radius: var(--r-lg);
  background: var(--mm-bg); overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.mm-faq details[open] { border-color: var(--mm-blue); }
.mm-faq summary {
  list-style: none; cursor: pointer; padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-weight: 700; min-block-size: 56px;
}
.mm-faq summary::-webkit-details-marker { display: none; }
.mm-faq summary::after {
  content: ""; flex: none; inline-size: 11px; block-size: 11px;
  border-inline-end: 2px solid var(--mm-ink-3); border-block-end: 2px solid var(--mm-ink-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}
.mm-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.mm-faq__body { padding: 0 var(--sp-6) var(--sp-6); color: var(--mm-ink-2); font-size: var(--fs-sm); }
.mm-faq details:not([open]) .mm-faq__body { display: none; }

.mm-cta {
  display: grid; gap: var(--sp-6); align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--mm-ink); color: #fff; border-radius: var(--r-xl);
}
@media (min-width: 900px) { .mm-cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-10); } }
.mm-cta h2 { font-size: var(--fs-h3); }
.mm-cta p { color: var(--mm-inv-soft); font-size: var(--fs-sm); margin-block-start: var(--sp-2); }
.mm-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* .mm-cta to ciemny blok wewnatrz jasnej sekcji - regula .mm-section--ink go nie lapala
   i przycisk ghost mial ciemny tekst na ciemnym tle (pusta ramka) */
.mm-cta .mm-btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.mm-cta .mm-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* siatka realizacji na podstronie - 3 kolumny bez wyroznien */
.mm-works--plain .mm-work--wide { grid-column: auto; }
.mm-works--plain .mm-work--wide img { aspect-ratio: 3 / 2; }

/* ==========================================================================
   20. DŁUGA TREŚĆ (landingi SEO, blog, polityka) — pełna szerokość, zero ch
   ========================================================================== */
.mm-prose { font-size: var(--fs-body); }
.mm-prose h2 {
  font-size: var(--fs-h2); margin-block: var(--sp-10) var(--sp-4);
  padding-block-start: var(--sp-6); border-block-start: 1px solid var(--mm-line);
}
.mm-prose h2:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.mm-prose h3 { font-size: var(--fs-h3); margin-block: var(--sp-8) var(--sp-3); }
.mm-prose h4 { font-size: 1rem; margin-block: var(--sp-6) var(--sp-2); }
.mm-prose p { margin-block-end: var(--sp-4); color: var(--mm-ink-2); }
.mm-prose p strong { color: var(--mm-ink); }
.mm-prose ul, .mm-prose ol { margin: 0 0 var(--sp-5); padding-inline-start: var(--sp-6); color: var(--mm-ink-2); }
.mm-prose li { margin-block-end: var(--sp-2); }
.mm-prose li::marker { color: var(--mm-blue-deep); font-weight: 700; }
.mm-prose a { color: var(--mm-blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mm-prose a:hover { color: var(--mm-blue-dark); }
.mm-prose img { border-radius: var(--r-lg); margin-block: var(--sp-6); }

/* ==========================================================================
   21. STANY FORMULARZA + DETALE (audyt UI)
   ========================================================================== */
/* przycisk w trakcie wysyłki */
.mm-btn:disabled {
  opacity: .55; cursor: not-allowed; transform: none;
}
.mm-btn--primary:disabled:hover { background: var(--mm-blue-deep); }

/* pole z błędem — dopiero po interakcji użytkownika, nie na dzień dobry */
.mm-field input:user-invalid,
.mm-field textarea:user-invalid {
  border-color: var(--mm-error);
}
.mm-field input:user-invalid:focus,
.mm-field textarea:user-invalid:focus {
  box-shadow: 0 0 0 4px rgba(179,38,30,.12);
}

/* komunikat statusu formularza — klasy zamiast stylowania z JS */
.mm-form__status { font-weight: 700; font-size: var(--fs-sm); }
.mm-form__status.is-ok { color: var(--mm-blue-dark); }
.mm-form__status.is-err { color: var(--mm-error); }

/* delikatny scrollbar w kolorze marki (desktop) */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { inline-size: 12px; }
  ::-webkit-scrollbar-track { background: var(--mm-bg-2); }
  ::-webkit-scrollbar-thumb {
    background: #C2CDD6; border-radius: 8px;
    border: 3px solid var(--mm-bg-2);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--mm-ink-3); }
}

/* ==========================================================================
   22. MENU MOBILNE — sekcja usług z ikonami + drobny szlif odstępów
   ========================================================================== */
.mm-mobile > a {
  font-size: 1.25rem;                       /* było 1.375 — 9 pozycji musi oddychać */
  padding: var(--sp-4) 0;
}
.mm-mobile__label {
  margin-block-start: var(--sp-4);
  padding-block: var(--sp-3) var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mm-ink-3);
  border-block-end: 1px solid var(--mm-line);
}
.mm-mobile__sub { display: grid; }
.mm-mobile__sub a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: 52px; padding: var(--sp-2) 0;
  font-size: 1.0625rem; font-weight: 600;
  border-block-end: 1px solid var(--mm-line);
}
.mm-mobile__sub a[aria-current="page"] { color: var(--mm-blue-dark); }
.mm-mobile__ico {
  flex: none; inline-size: 36px; block-size: 36px;
  display: grid; place-items: center;
  background: var(--mm-blue-wash); color: var(--mm-blue-dark);
  border-radius: var(--r-md);
}
.mm-mobile__ico--heat { background: var(--mm-orange-wash); color: var(--mm-orange); }
.mm-mobile__ico svg { inline-size: 19px; block-size: 19px; }
.mm-mobile__all {
  justify-content: center; color: var(--mm-blue-deep);
  font-size: var(--fs-sm) !important; font-weight: 700;
}
.mm-mobile__all svg { inline-size: 15px; block-size: 15px; }
/* dobitki specyficzności — stara reguła .mm-mobile a (space-between, svg 18px szary)
   nie może rządzić pozycjami usług */
.mm-mobile__sub a { justify-content: flex-start; }
.mm-mobile__sub .mm-mobile__ico svg { inline-size: 19px; block-size: 19px; color: currentColor; }
.mm-mobile__all { justify-content: center !important; }

/* blueprint na waskich ekranach delikatniejszy — pelnil tam role tla pod tekstem */
@media (max-width: 767px) {
  .mm-section--blueprint::before {
    opacity: .3;
    -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 55%);
            mask-image: linear-gradient(180deg, transparent 8%, #000 55%);
  }
}

/* ==========================================================================
   19. PLANSZA "W PRZYGOTOWANIU" (prezentacja pierwszego projektu)
   ========================================================================== */
.mm-wip { padding-block: clamp(4rem, 10vw, 8rem); }
.mm-wip__box {
  text-align: center; max-inline-size: 640px; margin-inline: auto;  /* celowo wysrodkowany blok CTA */
  padding: var(--sp-10) var(--sp-6);
  background: var(--mm-bg); border: 1px solid var(--mm-line); border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}
.mm-wip__badge {
  display: grid; place-items: center; inline-size: 64px; block-size: 64px;
  margin: 0 auto var(--sp-5); border-radius: 50%;
  background: var(--mm-blue-wash); color: var(--mm-blue-dark);
}
.mm-wip__badge svg { inline-size: 28px; block-size: 28px; }
.mm-wip .mm-h2 { margin-block-end: var(--sp-4); }
.mm-wip .mm-lead { margin-block-end: var(--sp-8); }
.mm-wip__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ==========================================================================
   20. HERO v2 — ciemny, render producenta (uwagi klienta 31.07: "za jasna, mdla",
   wzorzec heaton.com.pl). Trust bar w ciemnej strefie.
   ========================================================================== */
.mm-hero--dark {
  position: relative; overflow: hidden;
  background: var(--mm-navy-2); color: #fff;
  /* wyzszy kadr — 483px na 1440 bylo za plytko jak na hero */
  padding-block: clamp(4.5rem, 11vw, 9rem) clamp(2rem, 4vw, 3.5rem);
}
.mm-hero--dark::before { display: none; }              /* siatka jasnej wersji zbedna */
.mm-hero__bg { position: absolute; inset: 0; z-index: 0; }
.mm-hero__bg img {
  inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center right;
}
.mm-hero--dark::after {                                 /* czytelnosc tekstu + zakrycie napisow banera */
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* klient prosil, zeby material producenta bylo WIDAC — zaslona tylko pod
     tekstem, prawa strona kadru niemal odsloniona */
  background:
    linear-gradient(90deg, rgba(7,21,39,.94) 0%, rgba(7,21,39,.78) 30%, rgba(7,21,39,.30) 56%, rgba(7,21,39,0) 82%),
    linear-gradient(0deg, rgba(7,21,39,.62) 0%, transparent 26%);
}
.mm-hero--dark .mm-hero__inner { position: relative; z-index: 2; padding-block-end: clamp(3rem, 6vw, 5rem); }
.mm-hero--dark h1 { color: #fff; }
.mm-hero--dark h1 em {
  color: var(--mm-blue);
  background: linear-gradient(transparent 70%, rgba(0,160,227,.28) 70%);
}
.mm-hero--dark .mm-hero__claim {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.18); box-shadow: none;
  backdrop-filter: blur(4px);
}
.mm-hero--dark .mm-hero__lead { color: var(--mm-inv-soft); }
.mm-btn--hero-ghost {
  background: rgba(255,255,255,.06); color: #fff;
  border: 2px solid rgba(255,255,255,.28);
}
.mm-btn--hero-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }

/* trust bar zanurzony w ciemnym hero */
.mm-trust--dark {
  position: relative; z-index: 2;
  margin-block-start: 0; padding-block: var(--sp-6);
  border-block-start: 1px solid rgba(255,255,255,.14);
  background: transparent; border-radius: 0; box-shadow: none;
}
.mm-trust--dark .mm-trust__item { background: transparent; border: 0; box-shadow: none; transform: none !important; }
.mm-trust--dark .mm-trust__item::before { display: none; }   /* pasek hover jasnej wersji */
.mm-trust--dark .mm-trust__k { color: #fff; }
.mm-trust--dark .mm-trust__v { color: var(--mm-inv-soft); }
.mm-trust--dark .mm-trust__ico { background: rgba(255,255,255,.08); color: var(--mm-blue); }
@media (max-width: 767px) {
  .mm-hero--dark .mm-hero__bg img { object-position: 68% center; }
  .mm-hero--dark::after {
    background:
      linear-gradient(0deg, rgba(7,21,39,.97) 8%, rgba(7,21,39,.74) 55%, rgba(7,21,39,.42) 100%);
  }
}

/* ==========================================================================
   21. BOX „USŁUGI" na ciemnej belce (wzorzec: box kategorii z heaton.com.pl)
   ========================================================================== */
@media (min-width: 1024px) {
  .mm-nav .mm-mega > a {
    background: var(--mm-blue-deep); color: #fff;
    gap: var(--sp-3); padding-inline: var(--sp-6);
    border-inline-end: 0; font-weight: 800; letter-spacing: .02em;
    text-transform: uppercase; font-size: var(--fs-xs);
  }
  .mm-nav .mm-mega > a .mm-mega__cat { inline-size: 18px; block-size: 18px; order: 0; }
  .mm-nav .mm-mega > a::before { order: 3; margin-inline-start: var(--sp-2); }
  .mm-nav .mm-mega:hover > a, .mm-nav .mm-mega > a:hover { background: var(--mm-blue); color: #fff; }
  /* panel wychodzi od lewej krawedzi boxa, nie od srodka */
  .mm-nav .mm-mega__panel {
    inset-inline-start: 0; transform: translateX(0) translateY(6px);
    inset-block-start: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg);
    border-block-start: 3px solid var(--mm-blue);
  }
  .mm-nav .mm-mega:hover .mm-mega__panel,
  .mm-nav .mm-mega:focus-within .mm-mega__panel { transform: translateX(0) translateY(0); }
  .mm-nav .mm-mega::after { inset-inline: 0; block-size: 8px; }
}

/* ==========================================================================
   22. RYTM SEKCJI v3 — centrowany nagłówek + kreska akcentu
   ========================================================================== */
.mm-shead { text-align: center; margin-block-end: var(--sp-10); }
.mm-shead__eyebrow {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mm-blue-deep);
  margin-block-end: var(--sp-3);
}
.mm-shead h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -.02em; margin: 0; }
.mm-shead h2::after {
  content: ""; display: block; inline-size: 64px; block-size: 4px;
  margin: var(--sp-5) auto 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--mm-blue), var(--mm-blue-deep));
}
/* UWAGA: ':not(.mm-shead__eyebrow)' jest KONIECZNE — bez tego ta regula (0,1,1)
   nadpisywala klase nadtytulu (0,1,0) i eyebrow rosl z 13px do 19.2px,
   psujac hierarchie kazdej sekcji. Ta sama pulapka co z ikonami w mega menu. */
.mm-shead > p:not(.mm-shead__eyebrow) {
  margin: var(--sp-5) auto 0; color: var(--mm-ink-2); font-size: var(--fs-lead);
}
.mm-section--ink .mm-shead h2 { color: #fff; }
.mm-section--ink .mm-shead p { color: var(--mm-inv-soft); }
.mm-section--ink .mm-shead__eyebrow { color: var(--mm-blue-light); }

/* ==========================================================================
   23. PASEK ZAUFANIA pod hero (ciemny, przylega do hero — jak pasek zakładek
   w referencji) + blok firmowy dwukolumnowy + lista z haczykami
   ========================================================================== */
.mm-tstrip { background: var(--mm-navy); color: #fff; }
.mm-tstrip__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .mm-tstrip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mm-tstrip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mm-tstrip__item {
  /* start, nie center — przy 2-liniowym opisie ikona uciekala w dol i rzad
     wygladal na krzywy (ta sama pulapka co w mega menu) */
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  border-inline-end: 1px solid var(--mm-navy-line);
  border-block-end: 1px solid var(--mm-navy-line);
}
@media (min-width: 1024px) {
  .mm-tstrip__item { border-block-end: 0; }
  .mm-tstrip__item:last-child { border-inline-end: 0; }
}
.mm-tstrip__ico {
  inline-size: 46px; block-size: 46px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-md);
  background: rgba(255,255,255,.07); color: var(--mm-blue);
}
.mm-tstrip__ico svg { inline-size: 21px; block-size: 21px; }
.mm-tstrip__k { font-weight: 800; font-size: var(--fs-sm); color: #fff; margin: 0 0 2px; }
.mm-tstrip__v { font-size: var(--fs-xs); color: var(--mm-inv-soft); margin: 0; line-height: 1.4; }

/* blok firmowy */
.mm-about__grid { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 1024px) {
  .mm-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-16); }
}
.mm-about__txt .mm-h2 { margin-block: var(--sp-3) var(--sp-4); }
.mm-about__txt .mm-lead { margin-block-end: var(--sp-6); }
.mm-checks { list-style: none; padding: 0; margin: 0 0 var(--sp-8); display: grid; gap: var(--sp-4); }
.mm-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.mm-checks__ico {
  inline-size: 26px; block-size: 26px; display: grid; place-items: center;
  background: var(--mm-blue-deep); color: #fff; border-radius: 50%;
}
.mm-checks__ico svg { inline-size: 15px; block-size: 15px; }
.mm-checks strong { display: block; font-size: var(--fs-body); color: var(--mm-ink); }
.mm-checks li > span:not(.mm-checks__ico) span { color: var(--mm-ink-2); }
.mm-checks li > span:not(.mm-checks__ico) { font-size: var(--fs-sm); color: var(--mm-ink-2); line-height: 1.55; }
.mm-about__media { position: relative; }
.mm-about__media img {
  inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); display: block;
}
.mm-about__badge {
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  background: var(--mm-navy); color: #fff;
  padding: var(--sp-5) var(--sp-6); border-radius: 0 var(--r-lg) 0 var(--r-lg);
  max-inline-size: 60%;
}
.mm-about__badge strong { display: block; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1; letter-spacing: -.02em; }
.mm-about__badge span { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--mm-inv-soft); line-height: 1.4; }

.mm-center { text-align: center; }

/* ==========================================================================
   24. POPRAWKI KONTRASTU w ciemnych sekcjach + stopka w rytmie v3
   ========================================================================== */
.mm-section--ink .mm-step p,
.mm-section--ink .mm-steps p { color: var(--mm-inv-soft); }
.mm-section--ink .mm-step h3 { color: #fff; }

/* stopka: kolumny z linkami prowadzonymi strzalka */
.mm-footer__grid > div h4 { color: #fff; }
.mm-footer ul li a {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
}
.mm-footer__grid > div:nth-child(2) ul li a::before,
.mm-footer__grid > div:nth-child(3) ul li a::before {
  content: ""; inline-size: 5px; block-size: 5px; flex: none;
  border-inline-end: 1.5px solid var(--mm-blue); border-block-start: 1.5px solid var(--mm-blue);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.mm-footer__grid > div:nth-child(2) ul li a:hover::before,
.mm-footer__grid > div:nth-child(3) ul li a:hover::before { transform: rotate(45deg) translate(2px, -2px); }
.mm-footer { background: var(--mm-navy-2); }
.mm-footer__bar { border-block-start-color: var(--mm-navy-line); }

/* ==========================================================================
   25. HERO PODSTRON w rytmie v3 (granat zamiast czerni, mocniejszy kadr)
   ========================================================================== */
.mm-pagehero { background: var(--mm-navy-2); }
.mm-pagehero__bg img { opacity: .5; }
.mm-pagehero__inner { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.mm-pagehero h1 { letter-spacing: -.02em; }
.mm-pagehero h1::after {
  content: ""; display: block; inline-size: 64px; block-size: 4px;
  margin-block-start: var(--sp-5); border-radius: 2px;
  background: linear-gradient(90deg, var(--mm-blue), var(--mm-blue-deep));
}
/* eyebrow poza blokiem centrowanym zostaje do lewej */
.mm-shead__eyebrow { display: block; }

/* ==========================================================================
   26. DOPRACOWANIE v3 (A) — mikrodetale: ikony na osi, hover kart, rytm podpisów
   ========================================================================== */
/* tytul w pasku zaufania ma te sama wysokosc co ikona -> ikony w jednym rzedzie */
.mm-tstrip__k { min-block-size: 46px; display: flex; align-items: center; }
.mm-tstrip__v { margin-block-start: -6px; }

/* ikona uslugi: szklane tlo zamiast plaskiej bieli */
.mm-card__icon {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.7);
}
/* podpis realizacji: tytul zawsze jedna linia (rowny rytm rzedu) */
.mm-work__cap strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-work__cap span { display: block; margin-block-start: 2px; line-height: 1.4; }
/* realizacje: subtelne podniesienie kafla */
@media (hover: hover) {
  .mm-work { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .mm-work:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
}

/* przyciski: wyrazniejszy stan wcisniecia i focus */
.mm-btn { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mm-btn:active { transform: translateY(1px); }
.mm-btn--primary { box-shadow: 0 6px 18px rgba(0,119,168,.28); }
.mm-btn--primary:hover { box-shadow: 0 10px 26px rgba(0,119,168,.34); }

/* hero: mocniejsza hierarchia — lead nieco ciszej, CTA wyzej w kadrze */
.mm-hero--dark .mm-hero__lead span { display: block; }
.mm-hero--dark .mm-hero__actions { margin-block-start: var(--sp-8); }

/* ==========================================================================
   27. WERSJA B strony głównej — druga propozycja układu (page-wersja-b.php)
   Hero dzielony, usługi jako bloki poziome, pas faktów, ciemny formularz.
   ========================================================================== */
.mmb-hero { display: grid; background: var(--mm-navy-2); color: #fff; }
@media (min-width: 900px) { .mmb-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mmb-hero__txt { display: flex; align-items: center; padding: clamp(2.5rem, 6vw, 5.5rem) var(--px); }
@media (min-width: 900px) { .mmb-hero__txt { padding-inline-start: max(var(--px), calc((100vw - var(--w-wide)) / 2 + var(--px))); } }
.mmb-hero__txtInner { inline-size: 100%; }
.mmb-hero h1 {
  font-size: clamp(2rem, 1.2rem + 2.9vw, 3.25rem); line-height: 1.08;
  letter-spacing: -.025em; margin-block: var(--sp-5) var(--sp-5); color: #fff;
}
.mmb-hero h1 em {
  font-style: normal; color: var(--mm-blue);
  background: linear-gradient(transparent 70%, rgba(0,160,227,.26) 70%);
}
.mmb-hero .mm-hero__claim {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.18); box-shadow: none;
}
.mmb-hero__lead { font-size: var(--fs-lead); color: var(--mm-inv-soft); }
.mmb-hero__lead span { display: block; }
.mmb-hero__phone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-block-start: var(--sp-8); padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--mm-navy-line);
  inline-size: 100%; font-size: var(--fs-sm); color: var(--mm-inv-soft);
}
.mmb-hero__phone svg { inline-size: 17px; block-size: 17px; color: var(--mm-blue); }
.mmb-hero__phone a { color: #fff; font-weight: 800; font-size: 1.0625rem; }
.mmb-hero__media { position: relative; min-block-size: 260px; }
.mmb-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .mmb-hero__media { min-block-size: 560px; } }

/* pasek szybkiego wyboru usługi */
.mmb-quick { background: var(--mm-navy); }
.mmb-quick__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .mmb-quick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mmb-quick__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mmb-quick__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-3); text-align: center;
  color: rgba(255,255,255,.88); font-size: var(--fs-xs); font-weight: 700; line-height: 1.3;
  border-inline-end: 1px solid var(--mm-navy-line);
  border-block-end: 1px solid var(--mm-navy-line);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mmb-quick__item:hover { background: rgba(255,255,255,.07); color: #fff; }
.mmb-quick__ico {
  inline-size: 46px; block-size: 46px; display: grid; place-items: center;
  border-radius: var(--r-md); background: rgba(255,255,255,.07); color: var(--mm-blue);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mmb-quick__item:hover .mmb-quick__ico { background: var(--mm-blue-deep); color: #fff; }
.mmb-quick__item--heat .mmb-quick__ico { color: var(--mm-orange); }
.mmb-quick__ico svg { inline-size: 22px; block-size: 22px; }

/* usługi jako bloki poziome */
.mmb-rows { display: grid; gap: clamp(2rem, 3.5vw, 3.25rem); }
.mmb-row { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) {
  .mmb-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-10); }
  .mmb-row--rev .mmb-row__media { order: 2; }
}
.mmb-row__media { position: relative; }
.mmb-row__media img {
  inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-lg); display: block;
}
.mmb-row__num {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--mm-navy); color: #fff;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .06em;
  border-radius: var(--r-lg) 0 var(--r-lg) 0;
}
.mmb-row__ico {
  display: grid; place-items: center; inline-size: 52px; block-size: 52px;
  border-radius: var(--r-md); background: var(--mm-blue-wash); color: var(--mm-blue-dark);
  margin-block-end: var(--sp-4);
}
.mmb-row__ico svg { inline-size: 25px; block-size: 25px; }
.mmb-row__txt h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.02em; margin-block-end: var(--sp-3); }
.mmb-row__txt p { color: var(--mm-ink-2); margin-block-end: var(--sp-5); }
.mm-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--mm-blue-deep); }
.mm-link svg { inline-size: 16px; block-size: 16px; transition: transform var(--dur) var(--ease); }
.mm-link:hover svg { transform: translateX(3px); }

/* pas faktów */
.mmb-facts { background: var(--mm-navy); color: #fff; padding-block: var(--section-md); }
.mmb-facts__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 640px) { .mmb-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mmb-facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-10); } }
.mmb-facts__grid > div { padding-inline-start: var(--sp-5); border-inline-start: 3px solid var(--mm-blue); }
.mmb-facts strong {
  display: block; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1; letter-spacing: -.03em; margin-block-end: var(--sp-3);
}
.mmb-facts span { display: block; font-size: var(--fs-sm); color: var(--mm-inv-soft); line-height: 1.5; }

/* realizacje: pierwszy kadr szerszy */
.mmb-works { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .mmb-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .mmb-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mmb-works > *:first-child { grid-column: span 2; grid-row: span 2; }
  .mmb-works > *:first-child img { block-size: 100%; }
}
.mmb-works > * { margin: 0; }

/* urządzenia producenta */
.mmb-devices { padding-block: var(--section-md); }
.mmb-devices__grid { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 900px) { .mmb-devices__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-16); } }
.mmb-devices__img { display: block; }
.mmb-devices__img img { inline-size: 100%; block-size: auto; display: block; aspect-ratio: 1400 / 1062; object-fit: contain; }
.mmb-devices .mm-h2 { margin-block: var(--sp-3) var(--sp-4); }
.mmb-devices .mm-lead { margin-block-end: var(--sp-8); }

/* ciemny blok formularza */
.mmb-quote { background: var(--mm-navy-2); color: #fff; }
.mmb-quote .mm-h2 { color: #fff; }
.mmb-quote .mm-lead { color: var(--mm-inv-soft); }
.mmb-quote .mm-shead__eyebrow { color: var(--mm-blue-light); }
.mmb-quote .mm-contact__k { color: var(--mm-inv-muted); }
.mmb-quote .mm-contact__v, .mmb-quote .mm-contact strong { color: #fff; }
.mmb-quote .mm-contact__ico { background: rgba(255,255,255,.08); color: var(--mm-blue); }
.mmb-quote .mm-contact a { color: #fff; }
.mmb-quote .mm-area { background: rgba(255,255,255,.05); border-color: var(--mm-navy-line); }
.mmb-quote .mm-area p, .mmb-quote .mm-area li { color: var(--mm-inv-soft); }
.mmb-quote .mm-area__k { color: var(--mm-inv-muted); }

/* ==========================================================================
   28. CELE DOTYKOWE — audyt wykazal 26 (A) i 33 (B) elementow ponizej 44px.
   Reguly celowane: nawigacja, kontakt, stopka, linki akcji. Proza nietkniejeta.
   ========================================================================== */
@media (max-width: 1023px), (pointer: coarse) {
  /* stopka: linki list i kontakt (telefon/mail mialy 20px) */
  .mm-footer li a,
  .mm-footer li a[href^="tel:"],
  .mm-footer li a[href^="mailto:"],
  .mm-footer__bar a {
    min-block-size: 44px; display: inline-flex; align-items: center;
  }
  .mm-footer__cities a { min-block-size: 36px; }
  /* ikony społecznościowe */
  .mm-footer__social a { inline-size: 44px; block-size: 44px; }
  /* linki akcji („Zobacz szczegóły") — w wersji B mialy 27px */
  .mm-link, .mm-card__more, .mmb-row__txt .mm-link {
    min-block-size: 44px; display: inline-flex; align-items: center;
  }
  /* pozycje szybkiego wyboru i menu mobilne */
  .mmb-quick__item { min-block-size: 88px; }
  .mm-mobile__all { min-block-size: 44px; }
  /* telefon w bloku kontaktowym */
  .mm-contact a[href^="tel:"], .mm-contact a[href^="mailto:"] {
    min-block-size: 44px; display: inline-flex; align-items: center;
  }
  /* hero: telefon doradcy w wersji B */
  .mmb-hero__phone a { min-block-size: 44px; display: inline-flex; align-items: center; }
  /* blok kontaktowy: telefon w <dd> (struktura dl/dt/dd, nie lista) */
  .mm-contactbox dd a { min-block-size: 44px; display: inline-flex; align-items: center; }
  /* logotypy producentow — linki wysokosci obrazka (26px) */
  .mm-brands__row a { min-block-size: 44px; display: inline-flex; align-items: center; }
  /* logo w naglowku */
  .mm-logo { min-block-size: 44px; }
}

/* ==========================================================================
   29. POLISH — rytm łamania nagłówków, granice w układzie 1-kolumnowym,
   równe rzędy logotypów. Wynik oględzin na 320/375/768/1440.
   ========================================================================== */
/* nagłówki nie zostawiają sierot i łamią się optycznie, nie przypadkowo */
h1, h2, h3, .mm-h2, .mmb-row__txt h3, .mm-shead h2 { text-wrap: balance; }
p, .mm-lead, .mm-shead p { text-wrap: pretty; }

@media (max-width: 639px) {
  /* w jednej kolumnie pionowa kreska po prawej nie ma sensu — zostaje pozioma */
  .mm-tstrip__item { border-inline-end: 0; }
  .mm-tstrip__item:last-child { border-block-end: 0; }
}
@media (max-width: 699px) {
  .mmb-quick__item:nth-child(2n) { border-inline-end: 0; }
  .mmb-quick__item:nth-last-child(-n+2) { border-block-end: 0; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .mmb-quick__item:nth-child(3n) { border-inline-end: 0; }
  .mmb-quick__item:nth-last-child(-n+3) { border-block-end: 0; }
}

/* logotypy producentów: równe rzędy zamiast 3+1 */
@media (max-width: 599px) {
  .mm-brands__row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-4); justify-items: center; align-items: center;
  }
  .mm-brands__row a, .mm-brands__row span { inline-size: 100%; justify-content: center; }
  .mm-brands img { block-size: 24px; }
  .mm-brands img.is-square { block-size: 40px; }
}

/* wersja B: bloki usług ciaśniej na mobile (zdjęcie ↔ tekst) */
@media (max-width: 899px) {
  .mmb-row { gap: var(--sp-5); }
  .mmb-row__ico { inline-size: 46px; block-size: 46px; margin-block-end: var(--sp-3); }
}

/* radius spójny — 2px i 8px zastąpione tokenami */
.mm-btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--mm-blue); outline-offset: 2px; border-radius: var(--r-sm);
}

/* lista etapow w bloku uslugi (wersja B) — konkret zamiast pustej kolumny */
.mmb-row__list {
  list-style: none; padding: 0; margin: 0 0 var(--sp-6);
  display: grid; gap: var(--sp-3);
}
.mmb-row__list li {
  position: relative; padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm); color: var(--mm-ink-2); line-height: 1.5;
}
.mmb-row__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--mm-blue);
}

/* ==========================================================================
   30. OSTATNIE SZLIFY — reakcje na wskazanie, spojnosc cieni, wygaszone stany
   ========================================================================== */
/* kontakt w naglowku: reaguje caly blok, nie tylko ikona */
.mm-hcontact { border-radius: var(--r-md); padding: var(--sp-2); margin: calc(-1 * var(--sp-2)); }
.mm-hcontact:hover { background: var(--mm-bg-2); }
.mm-hcontact strong { transition: color var(--dur) var(--ease); }
.mm-hcontact:hover strong { color: var(--mm-blue-deep); }

/* pozycje paska zaufania nie sa klikalne — kursor domyslny, zero falszywych sygnalow */
.mm-tstrip__item { cursor: default; }

/* przycisk wylaczony (formularz w trakcie wysylki) */
.mm-btn[disabled], .mm-btn:disabled {
  opacity: .55; cursor: not-allowed; transform: none;
  box-shadow: none; pointer-events: none;
}

/* spojna skala cieni — karty i kafle uzywaja tych samych poziomow */
.mm-card, .mm-work { box-shadow: var(--sh-1); }
@media (hover: hover) {
  .mm-card:hover, .mm-work:hover { box-shadow: var(--sh-3); }
}

/* zaznaczenie tekstu w kolorze marki */
::selection { background: var(--mm-blue); color: #fff; }

/* animacje wejscia: jeden czas i easing, wylaczone przy redukcji ruchu */
.mm-anim { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .mm-anim { transition: none !important; transform: none !important; opacity: 1 !important; }
  .mm-card:hover, .mm-work:hover { transform: none; }
}

/* formularz na ciemnym (B): zgoda i status czytelne */
.mmb-quote .mm-consent p, .mmb-quote .mm-consent { color: var(--mm-inv-soft); }
.mmb-quote .mm-consent a { color: #fff; text-decoration: underline; }
.mmb-quote .mm-form__status.is-err { color: #FFB4A8; }
.mmb-quote .mm-form__status.is-ok { color: #9FE3B4; }

/* ==========================================================================
   31. WERSJA B = OSOBNY PROJEKT (scope: body.page-template-page-wersja-b)
   Charakter: pelny dark, font Sora, ostre naroza, cienkie linie techniczne.
   A = jasna, miekkie rogi, Figtree, header Heaton. B ma byc INNYM projektem.
   ========================================================================== */
body.page-template-page-wersja-b {
  --font: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px;
  background: var(--mm-navy-2); color: var(--mm-inv-soft);
  font-family: var(--font);
}
.page-template-page-wersja-b h1, .page-template-page-wersja-b h2,
.page-template-page-wersja-b h3, .page-template-page-wersja-b h4 { color: #fff; }

/* header B: jeden pas, minimalny */
.mmb-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: rgba(7,21,39,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--mm-navy-line);
}
.mmb-header__inner { display: flex; align-items: center; gap: var(--sp-6); block-size: 76px; }
.mmb-header .mm-logo img { block-size: 40px; inline-size: auto; }
.mmb-nav { display: none; }
@media (min-width: 1024px) {
  .mmb-nav { display: flex; gap: var(--sp-1); margin-inline: auto; }
  .mmb-nav a {
    padding: var(--sp-2) var(--sp-4); color: rgba(255,255,255,.78);
    font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
    border-block-end: 2px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .mmb-nav a:hover { color: #fff; border-block-end-color: var(--mm-blue); }
}
.mmb-header__tel { display: none; }
@media (min-width: 1024px) {
  .mmb-header__tel {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    color: #fff; font-weight: 800; font-size: 1.0625rem;
  }
  .mmb-header__tel svg { inline-size: 18px; block-size: 18px; color: var(--mm-blue); }
}
.mmb-header__cta { display: none; }
@media (min-width: 1024px) { .mmb-header__cta { display: inline-flex; min-block-size: 44px; padding-inline: var(--sp-6); } }
.mmb-header .mm-header__cta { background: rgba(255,255,255,.08); }
.mmb-header .mm-burger span { background: #fff; }
@media (min-width: 1024px) { .mmb-header .mm-header__cta, .mmb-header .mm-burger { display: none; } }

/* sekcje jasne szablonu -> ciemne w scope B */
.page-template-page-wersja-b .mm-section { background: transparent; }
.page-template-page-wersja-b .mm-section--alt {
  background: var(--mm-navy);
}
.page-template-page-wersja-b .mm-shead p,
.page-template-page-wersja-b .mm-lead { color: var(--mm-inv-soft); }
.page-template-page-wersja-b .mm-shead__eyebrow { color: var(--mm-blue-light); }
.page-template-page-wersja-b .mmb-row__txt p { color: var(--mm-inv-soft); }
.page-template-page-wersja-b .mmb-row__list li { color: var(--mm-inv-soft); }
.page-template-page-wersja-b .mmb-row__ico { background: rgba(255,255,255,.07); color: var(--mm-blue); }
.page-template-page-wersja-b .mm-link { color: var(--mm-blue-light); }
.page-template-page-wersja-b .mmb-row__media img { border: 1px solid var(--mm-navy-line); }
.page-template-page-wersja-b .mmb-row__num { background: var(--mm-blue-deep); }

/* realizacje na ciemnym */
.page-template-page-wersja-b .mm-work { box-shadow: none; border: 1px solid var(--mm-navy-line); }
.page-template-page-wersja-b .mm-btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.page-template-page-wersja-b .mm-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* urzadzenia: karta na granacie */
.page-template-page-wersja-b .mmb-devices { background: var(--mm-navy); }
.page-template-page-wersja-b .mmb-devices__img { background: #fff; border-radius: var(--r-lg); padding: var(--sp-6); }
.page-template-page-wersja-b .mm-brands__note { color: var(--mm-inv-soft); }
.page-template-page-wersja-b .mm-section--ink .mm-brands img,
.page-template-page-wersja-b .mm-brands img { filter: grayscale(1) invert(1) brightness(1.8) contrast(.85); opacity: .8; }

/* kroki na ciemnym */
.page-template-page-wersja-b .mm-step { border-block-start-color: var(--mm-navy-line); }
.page-template-page-wersja-b .mm-step h3 { color: #fff; }
.page-template-page-wersja-b .mm-step p { color: var(--mm-inv-soft); }

/* formularz: jasna karta na ciemnym zostaje — mmb-quote juz ostylowane */
.page-template-page-wersja-b .mmb-quote { background: transparent; }
.page-template-page-wersja-b .mmb-quote [data-mm-form] { background: #fff; }

/* stopka i tak ciemna — w B dodatkowa kreska oddzielajaca */
.page-template-page-wersja-b .mm-footer { border-block-start: 1px solid var(--mm-navy-line); }

/* ==========================================================================
   32. BOX „USŁUGI" — wyrownanie do dna belki
   Box mial 53px przy pozostalych pozycjach 57px, bo jego tekst jest mniejszy
   (13px uppercase vs 15px). Kончil sie 3px nad dnem paska i przeswitywal
   granat — to byl ten „odstajacy piksel". Rozciagamy go na pelna wysokosc.
   ========================================================================== */
@media (min-width: 1024px) {
  /* wysokosc trzyma BELKA, pozycje tylko sie do niej rozciagaja */
  .mm-navbar__inner { min-block-size: 56px; align-items: stretch; }
  .mm-nav { align-items: stretch; }
  .mm-nav .mm-mega { display: flex; align-items: stretch; }
  .mm-nav .mm-mega > a, .mm-nav > a { padding-block: 0; block-size: auto; }
  .mm-navbar__note { align-self: center; }
  .mm-nav .mm-mega__panel { inset-block-start: 100%; }
}

/* ==========================================================================
   33. HEADER — koniec skakania przy scrollu
   Zwijanie topbara zmienialo wysokosc naglowka o 40px w trakcie scrolla.
   Histereza jest w JS; tutaj: plynne przejscie i brak skoku logo.
   ========================================================================== */
@media (min-width: 1024px) {
  .mm-topbar { transition: max-block-size var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); }
  .mm-header.is-scrolled .mm-topbar { opacity: 0; }
  /* logo nie zmienia wysokosci — zmiana rozmiaru w trakcie scrolla dokladala drgania */
  .mm-header.is-scrolled .mm-logo img { block-size: 54px; }
}

/* CTA w hero podstrony — wariant na zdjęciu + rytm przycisków */
.mm-pagehero__btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); }
.mm-btn--onphoto {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.34); backdrop-filter: blur(6px);
}
.mm-btn--onphoto:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.mm-btn--onphoto svg { inline-size: 18px; block-size: 18px; }

/* Hero podstrony: treść na jednolitym ciemnym tle + zdjęcie producenta obok.
   Powód: tekst rozciągnięty na zdjęciu miał kontrast 1,67:1 na jasnym kadrze.
   Ten układ daje 12:1 na treści i pokazuje zdjęcie bez przyciemniania. */
@media (min-width: 1000px) {
  .mm-pagehero--split .mm-pagehero__bg { inset-inline-start: 52%; }
  .mm-pagehero--split .mm-pagehero__bg img { opacity: 1; }
  .mm-pagehero--split .mm-pagehero__bg::after {
    background: linear-gradient(90deg, var(--mm-navy-2) 0%, rgba(11,43,76,.35) 22%, transparent 55%);
  }
  /* kontener zostaje pelny (ta sama lewa krawedz co naglowek i sekcje),
     tresc siada w pierwszej kolumnie siatki */
  .mm-pagehero--split .mm-pagehero__inner { display: grid; grid-template-columns: 52% 1fr; column-gap: var(--sp-10); }
  .mm-pagehero--split .mm-pagehero__inner > * { grid-column: 1; }
}
.mm-pagehero--split p { color: #D7E2EC; }

/* Mobile/tablet: zamiast tekstu NA zdjeciu (pomiar: 2,15:1 na okruszkach)
   — tresc na czystym granacie, a zdjecie producenta pod spodem w pelnej jakosci.
   Klient (mail 31.07) prosil wprost o uzycie jego materialow zdjeciowych. */
@media (max-width: 999.98px) {
  .mm-pagehero--split { display: flex; flex-direction: column; }
  .mm-pagehero--split .mm-pagehero__inner { order: 1; padding-block: clamp(2rem, 5vw, 3rem) var(--sp-10); }
  .mm-pagehero--split .mm-pagehero__bg { order: 2; position: static; aspect-ratio: 16 / 10; }
  .mm-pagehero--split .mm-pagehero__bg img { opacity: 1; block-size: 100%; }
  .mm-pagehero--split .mm-pagehero__bg::after { background: none; }
}

/* Przyciski hero: rowne krawedzie zamiast poszarpanych szerokosci */
@media (max-width: 639.98px) {
  .mm-pagehero__btns { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  .mm-pagehero__btns .mm-btn { inline-size: 100%; }
}

/* Okruszki na mobile: link miał 32px wysokosci klikalnej — powiekszamy pole dotyku,
   nie zmieniajac rytmu wizualnego (ujemny margines kompensuje padding). */
@media (max-width: 767.98px) {
  .mm-crumbs a { display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -6px; }
}

/* Menu mobilne: wskazanie biezacej strony. Bez tego focus ring na pierwszej
   pozycji czytal sie jako "jestes na stronie glownej" niezaleznie od tego, gdzie user jest. */
.mm-mobile a[aria-current="page"] { color: var(--mm-blue-dark); font-weight: 800; }
.mm-mobile a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 10px;
  inline-size: 3px; background: var(--mm-blue); border-radius: 2px;
}
.mm-mobile > a, .mm-mobile__sub a { position: relative; }
.mm-mobile a[aria-current="page"] .mm-mobile__ico { background: var(--mm-blue); color: #fff; }

/* Miasta w stopce: w linku zostaje pelna frazа ("Pompy ciepla Poznan") dla wyszukiwarek
   i czytnikow ekranu, ale WIDOCZNE jest samo miasto. Wczesniej regula ukrywajaca prefiks
   byla tylko w sekcji mobilnej i na desktopie stopka powtarzala "Pompy ciepla" 11 razy. */
.mm-footer__city-prefix {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}