/* Service pages (templates/page-usluga.html). Their own sections live here; the price card, the
   gallery, the questions and the contact reuse the front-page styles, which load next to this
   file. Every section shares the content width of the front page through --mm-section-gutter.
   Rhythm of "Instalacja elektryczna w nowym domu": navy first screen, grey prices, navy band with
   Mariusz, paper stages, grey documents, white gallery, paper questions, navy contact. */

/* The page content is one HTML block; WordPress would put its block gap between the sections. */
.mm-service-page__content,
.mm-service-page__content > * {
  margin-block: 0 !important;
}

.mm-service-page__content {
  max-width: none;
  padding-inline: 0 !important;
}

/* Shared pieces */
.mm-sp-signal {
  background: #f4c542;
  border-radius: 999px;
  display: block;
  height: 4px;
  margin-bottom: 1.1rem;
  width: 56px;
}

.mm-sp-head {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
  max-width: 60rem;
}

.mm-sp-h2 {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(2.05rem, 3.3vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

.mm-sp-h2--light {
  color: #fff;
}

.mm-sp-accent {
  color: #315bff;
}

.mm-sp-accent--yellow {
  color: #f4c542;
}

.mm-sp-h3 {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 1rem;
}

.mm-sp-answer {
  color: #101827;
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
  line-height: 1.5;
  margin: 1rem 0 0;
  max-width: 48rem;
}

.mm-sp-answer strong {
  font-weight: 600;
}

.mm-sp-answer + .mm-sp-note {
  font-size: 0.92rem;
  margin-top: 0.5rem;
}

.mm-sp-note {
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0.85rem 0 0;
  max-width: 46rem;
}

/* What a picture is, said on the picture: yellow for Mariusz's own jobs, navy for the frames of
   the generated films. */
.mm-sp-tag {
  background: #f4c542;
  border-radius: 3px;
  color: #101827;
  font-family: Epilogue, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  left: 0.6rem;
  letter-spacing: 0.07em;
  line-height: 1;
  margin: 0;
  padding: 0.4rem 0.5rem 0.34rem;
  position: absolute;
  text-transform: uppercase;
  top: 0.6rem;
  z-index: 2;
}

.mm-sp-tag--ai {
  background: rgb(7 26 48 / 72%);
  color: #fff;
  font-weight: 600;
}

.mm-sp-photo {
  background: #0d2747;
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.mm-sp-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.mm-sp-photo__caption {
  background: linear-gradient(180deg, transparent, rgb(7 26 48 / 86%));
  bottom: 0;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 500;
  left: 0;
  line-height: 1.3;
  padding: 1.6rem 0.8rem 0.6rem;
  position: absolute;
  right: 0;
}

.mm-sp-stars {
  display: inline-flex;
  gap: 2px;
}

.mm-sp-stars svg {
  fill: #f2b300;
  height: 16px;
  width: 16px;
}

/* The call button: the blue of the front-page hero and cards, one line, the number on it. */
.mm-sp-call {
  align-items: center;
  background: #175dff;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  gap: 0.7rem;
  justify-content: center;
  line-height: 1;
  min-height: 60px;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  transition: background-color 160ms ease-out, transform 140ms ease-out;
  white-space: nowrap;
}

.mm-sp-call svg {
  fill: currentColor;
  flex: none;
  height: 22px;
  width: 22px;
}

.mm-sp-call:active {
  transform: scale(0.985);
}

.mm-sp-call:focus-visible {
  outline: 3px solid #f4c542;
  outline-offset: 3px;
}

/* First screen: a landing page. One promise, the price in one sentence, the call button with
   the hours, a short proof line (the rating and three facts of the front page) and one square
   picture of a moment of the work. Finished jobs and opinions come further down, where the
   visitor has time to read (owner's decision of 2026-09-22). */
.mm-sp-hero {
  background: radial-gradient(circle at 74% 46%, rgb(24 55 91 / 60%), transparent 50%), #071a30;
  color: #fff;
  padding-block: clamp(1.25rem, 2.2vw, 2rem) clamp(2.5rem, 4.6vw, 4.25rem);
}

.mm-sp-hero__inner {
  align-items: center;
  column-gap: clamp(2rem, 4.4vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  padding-inline: var(--mm-section-gutter);
}

.mm-sp-hero__copy {
  min-width: 0;
}

.mm-sp-crumbs ol {
  color: #9fb0c7;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 0.15rem 0.5rem;
  line-height: 1.4;
  list-style: none;
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
  padding: 0;
}

.mm-sp-crumbs li + li::before {
  content: "›";
  margin-right: 0.5rem;
}

.mm-sp-crumbs a {
  color: #c3cfe0;
}

.mm-sp-hero__kicker {
  align-items: center;
  color: #f4c542;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 0.2rem 0.5rem;
  letter-spacing: 0.09em;
  line-height: 1.3;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.mm-sp-hero__kicker::before {
  background: #f4c542;
  border-radius: 999px;
  content: "";
  flex: none;
  height: 3px;
  width: 26px;
}

.mm-sp-hero__title {
  color: #fff;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(2.7rem, 4.5vw, 4.7rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 0.96;
  margin: 0;
  text-wrap: balance;
}

.mm-sp-hero__title-accent {
  color: #f4c542;
  display: block;
}

.mm-sp-hero__price {
  color: #e4ebf7;
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  margin: 1.1rem 0 0;
  max-width: 36rem;
}

.mm-sp-hero__price strong {
  color: #f4c542;
  font-weight: 700;
  white-space: nowrap;
}

.mm-sp-hero__actions {
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
}

.mm-sp-call--hero {
  font-size: clamp(1.4rem, 1.7vw, 1.75rem);
  min-height: 72px;
  width: min(100%, 440px);
}

.mm-sp-call--hero svg {
  height: 26px;
  width: 26px;
}

.mm-sp-hero__hours {
  align-items: center;
  color: #b9c6d8;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 0.35rem 1.4rem;
  line-height: 1.35;
  margin: 0.85rem 0 0;
}

.mm-sp-hero__hours-item {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

.mm-sp-hero__hours strong {
  color: #fff;
  font-weight: 600;
}

/* The red dot of the front page: someone answers now. It does not blink. */
.mm-sp-hero__hours-dot {
  background: #ef3f35;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(239 63 53 / 18%), 0 0 10px rgb(239 63 53 / 55%);
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

/* The front page's rating and facts in one short line: a mention, not an opinion card. */
.mm-sp-hero__trust {
  border-top: 1px solid rgb(220 227 234 / 14%);
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  padding-top: clamp(1.1rem, 2vw, 1.4rem);
}

.mm-sp-hero__rating {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
}

/* Lightness is inverted for the navy ground, as on the front page; the hue turn keeps the orange. */
.mm-sp-hero__rating-logo img {
  display: block;
  filter: invert(1) hue-rotate(180deg) brightness(1.12);
  height: 24px;
  width: auto;
}

.mm-sp-hero__rating-score {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.mm-sp-hero__rating-scale {
  color: #aebbd0;
  font-size: 0.95rem;
  margin-left: -0.3rem;
}

.mm-sp-hero__rating-stars {
  color: #f4c542;
  font-size: 1.15rem;
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
}

.mm-sp-hero__rating-note {
  color: #aebbd0;
  font-size: 0.88rem;
}

.mm-sp-hero__trust .mm-sp-chips {
  margin: 0;
}

.mm-sp-hero__photo {
  aspect-ratio: 1;
  justify-self: end;
  width: min(100%, 560px);
}

/* Prices */
.mm-sp-price {
  background: #eef1f5;
  color: #101827;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 1rem;
}

.mm-sp-price__inner,
.mm-sp-stages__inner {
  padding-inline: var(--mm-section-gutter);
}

/* The three scopes at a glance: name and price, a tap away from their cards. The tiles are the
   situation tiles of the front page, three in a row. */
.mm-sp-scopes {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.mm-sp-scopes .mm-situations__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mm-sp-scopes .mm-situation__desc {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 899px) {
  .mm-sp-scopes .mm-situations__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One scope per card, one under another, like the services on the front page: each has its own
   film, its own prices and its full list. Even cards mirror, so the films zigzag down the page. */
.mm-sp-offers {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  grid-template-columns: minmax(0, 1fr);
}

.mm-sp-offer {
  scroll-margin-top: 1.25rem;
}

/* Between the phone and the wide-desktop layouts of the front-page card a full-width card would
   show a film as wide as the screen, so here the film and the prices already sit side by side. */
@media (min-width: 900px) and (max-width: 1279px) {
  .mm-sp-offer {
    display: grid;
    grid-template-areas:
      "cover body"
      "close close";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mm-sp-offer:nth-child(even) {
    grid-template-areas:
      "body cover"
      "close close";
  }

  .mm-sp-offer:nth-child(even) .mm-service__close > .mm-promise {
    order: 2;
  }

  .mm-sp-offer .mm-service__cover {
    align-self: stretch;
    aspect-ratio: auto;
    grid-area: cover;
    min-height: 100%;
  }

  .mm-sp-offer .mm-service__body {
    grid-area: body;
    padding-bottom: 1.4rem;
  }

  .mm-sp-offer .mm-service__close {
    align-items: center;
    background: #f4f6f9;
    border-top: 1px solid #e3e8ee;
    display: grid;
    gap: 0;
    grid-area: close;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
  }

  .mm-sp-offer .mm-promise {
    background: none;
    padding: 1rem 1.5rem;
  }

  .mm-sp-offer .mm-service__action {
    padding: 1rem 1.5rem;
  }
}

/* One card alone never dims or lifts like the rows of the front page. */
.mm-sp-offer::after {
  content: none;
}

.mm-sp-offer .mm-service__title {
  font-size: clamp(1.5rem, 2vw, 2rem);
}

.mm-sp-factors {
  margin-top: clamp(2.5rem, 4.4vw, 3.75rem);
}

.mm-sp-factors__list,
.mm-sp-docs__list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-sp-factors__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mm-sp-tile {
  align-content: start;
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 8px;
  column-gap: 0.9rem;
  display: grid;
  grid-template-areas:
    "icon name"
    "icon text";
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 1rem 1.1rem 1.05rem;
  row-gap: 0.25rem;
}

.mm-sp-tile__icon {
  color: #101827;
  grid-area: icon;
  height: 48px;
  width: 48px;
}

.mm-sp-tile__icon svg,
.mm-sp-extra__icon svg {
  display: block;
  fill: none;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  width: 100%;
}

.mm-sp-tile__name {
  align-self: end;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  grid-area: name;
  line-height: 1.15;
}

.mm-sp-tile__text {
  color: #4b5563;
  font-size: 0.93rem;
  grid-area: text;
  line-height: 1.5;
}

/* The rule "more points, cheaper per point" as a shape: the bar is as tall as the price of one
   point, from about 120 zł for a single point down to about 50 zł in a whole house. */
.mm-sp-scale {
  align-items: center;
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 8px;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  display: grid;
  grid-template-areas:
    "title track"
    "rule ends";
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  margin: 0.75rem 0 0;
  padding: 1.2rem 1.4rem 1.1rem;
  row-gap: 0.4rem;
}

.mm-sp-scale__title {
  align-self: end;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  grid-area: title;
  line-height: 1.15;
}

.mm-sp-scale__title span {
  color: #5b6675;
  display: block;
  font-family: Epilogue, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.2rem;
}

.mm-sp-scale__rule {
  align-self: start;
  color: #4b5563;
  font-size: 0.93rem;
  grid-area: rule;
  line-height: 1.5;
  margin: 0;
}

.mm-sp-scale__track {
  align-self: end;
  grid-area: track;
  height: 52px;
}

.mm-sp-scale__bar {
  background: linear-gradient(90deg, #315bff, #7d98ff);
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 58%, 100% 100%, 0 100%);
  display: block;
  height: 100%;
}

.mm-sp-scale__ends {
  color: #5b6675;
  display: flex;
  font-size: 0.86rem;
  gap: 1rem;
  grid-area: ends;
  justify-content: space-between;
  line-height: 1.3;
  margin: 0;
}

.mm-sp-scale__ends span:last-child {
  text-align: right;
}

.mm-sp-scale__ends strong {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
}

/* Navy band: Mariusz and what comes with every scope */
.mm-sp-extras {
  background: radial-gradient(circle at 84% 60%, rgb(24 55 91 / 60%), transparent 46%), #071a30;
  color: #fff;
  overflow: hidden;
  scroll-margin-top: 1rem;
}

.mm-sp-extras__inner {
  align-items: end;
  column-gap: clamp(1.5rem, 3.4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.72fr);
  padding-inline: var(--mm-section-gutter);
}

.mm-sp-extras__person {
  align-self: end;
  margin: 0;
  order: 2;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  position: relative;
}

.mm-sp-extras__person img {
  display: block;
  height: auto;
  margin-inline: auto;
  max-height: 600px;
  object-fit: contain;
  object-position: bottom;
  width: 100%;
}

.mm-sp-extras__nameplate {
  background: rgb(7 26 48 / 86%);
  border-left: 3px solid #f4c542;
  bottom: 1.6rem;
  color: #fff;
  display: grid;
  font-family: "Barlow Semi Condensed", sans-serif;
  left: 0;
  padding: 0.55rem 1.1rem 0.6rem;
  position: absolute;
}

.mm-sp-extras__nameplate strong {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.mm-sp-extras__nameplate span {
  color: #c3cfe0;
  font-family: Epilogue, sans-serif;
  font-size: 0.8rem;
  line-height: 1.3;
}

.mm-sp-extras__copy {
  padding-block: clamp(3.25rem, 5.6vw, 5rem);
}

.mm-sp-extras__list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
  padding: 0;
}

.mm-sp-extra {
  --mm-sp-hole: #0c2340;
  align-content: start;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(220 227 234 / 16%);
  border-radius: 8px;
  column-gap: 0.9rem;
  display: grid;
  grid-template-areas:
    "icon name"
    "icon text";
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 1rem 1.1rem 1.05rem;
  row-gap: 0.3rem;
}

.mm-sp-extra__icon {
  color: #fff;
  grid-area: icon;
  height: 48px;
  width: 48px;
}

.mm-sp-extra__name {
  align-self: end;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  grid-area: name;
  line-height: 1.15;
}

.mm-sp-extra__text {
  color: #c3cfe0;
  font-size: 0.94rem;
  grid-area: text;
  line-height: 1.5;
}

.mm-sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 1.3rem 0 1.5rem;
  padding: 0;
}

.mm-sp-chips li {
  border: 1px solid rgb(220 227 234 / 22%);
  border-radius: 999px;
  color: #eef2f7;
  font-size: 0.84rem;
  line-height: 1.3;
  padding: 0.32rem 0.75rem;
}

/* Stages of the build */
.mm-sp-stages {
  background: #fafaf7;
  color: #101827;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 1rem;
}

.mm-sp-stages__list {
  counter-reset: none;
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-sp-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mm-sp-stage__media {
  aspect-ratio: 4 / 3;
  background: #dce3ea;
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.mm-sp-stage__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.mm-sp-stage__body {
  padding-top: 1.6rem;
  position: relative;
}

/* The yellow wire runs from each numbered node to the next one: the brand's cable, here as the
   order of the work. */
.mm-sp-stage__body::before {
  background: #f4c542;
  content: "";
  height: 3px;
  left: 34px;
  position: absolute;
  right: calc(-1 * clamp(1rem, 1.6vw, 1.5rem));
  top: -1.5px;
}

.mm-sp-stage:last-child .mm-sp-stage__body::before {
  content: none;
}

.mm-sp-stage__step {
  align-items: center;
  background: #f4c542;
  border: 3px solid #fafaf7;
  border-radius: 50%;
  color: #101827;
  display: flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  left: 0;
  line-height: 1;
  position: absolute;
  top: -20px;
  width: 40px;
  z-index: 1;
}

.mm-sp-stage__name {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}

.mm-sp-stage__flag {
  background: #fff4cf;
  border-left: 3px solid #f4c542;
  color: #101827;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.5rem 0 0;
  padding: 0.25rem 0.55rem;
}

.mm-sp-stage__text {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0.55rem 0 0;
}

.mm-sp-stages__hint {
  border-left: 3px solid #f4c542;
  color: #374151;
  font-size: 1rem;
  line-height: 1.5;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-left: 0.85rem;
}

.mm-sp-stages__hint strong {
  color: #101827;
}

.mm-sp-stages__hint a {
  color: #175dff;
  font-weight: 600;
  white-space: nowrap;
}

/* Documents */
.mm-sp-docs {
  background: #eef1f5;
  color: #101827;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 1rem;
}

.mm-sp-docs__inner {
  align-items: center;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  padding-inline: var(--mm-section-gutter);
}

.mm-sp-docs__photo {
  aspect-ratio: 4 / 3;
}

.mm-sp-docs__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.3rem, 2.2vw, 1.8rem);
}

/* Gallery head: title on the left, a client's words on the right */
.mm-sp-works__head {
  align-items: end;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.mm-works--service .mm-works__title {
  font-size: clamp(2.05rem, 3.3vw, 3.1rem);
  line-height: 1.03;
}

.mm-sp-works__review {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 1rem 1.2rem;
}

.mm-sp-works__score {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0;
}

.mm-sp-works__score a {
  align-items: baseline;
  color: #101827;
  display: inline-flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  gap: 0.3rem;
  text-decoration: none;
}

.mm-sp-works__score a img {
  align-self: center;
  height: 22px;
  margin-right: 0.35rem;
  width: auto;
}

.mm-sp-works__score a strong {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.mm-sp-works__score a span {
  color: #5b6675;
  font-size: 1rem;
  font-weight: 600;
}

.mm-sp-works__since {
  color: #5b6675;
  font-size: 0.82rem;
}

.mm-sp-works__review blockquote {
  margin: 0;
}

.mm-sp-works__review blockquote p {
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0;
}

.mm-sp-works__review figcaption {
  color: #5b6675;
  font-size: 0.88rem;
}

.mm-sp-works__review figcaption strong {
  color: #101827;
}

.mm-sp-works__all {
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
  text-align: center;
}

.mm-sp-works__all a {
  align-items: center;
  border: 1px solid #101827;
  border-radius: 8px;
  color: #101827;
  display: inline-flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  gap: 0.35rem;
  line-height: 1;
  min-height: 52px;
  padding: 0.7rem 1.1rem 0.7rem 1.4rem;
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.mm-sp-works__all svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .mm-sp-call:hover {
    background: #0c4fe6;
    transform: translateY(-1px);
  }

  .mm-sp-works__all a:hover {
    background: #101827;
    color: #fff;
  }

  .mm-sp-crumbs a:hover {
    color: #fff;
  }
}

/* Laptops: four stage photos would get too small in five columns, so the stages wrap and the
   wire between them goes. */
@media (max-width: 1279px) {
  .mm-sp-stages__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .mm-sp-stage__body::before {
    content: none;
  }

  .mm-sp-factors__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablets and phones: one column. Mariusz comes before his list; the documents' photo sits
   between the lead and the tiles. */
@media (max-width: 1023px) {
  .mm-sp-extras__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-sp-extras__person {
    border-bottom: 1px solid rgb(220 227 234 / 16%);
    order: -1;
    padding-top: 2rem;
  }

  .mm-sp-extras__person img {
    max-height: 340px;
    object-position: top;
    width: auto;
  }

  .mm-sp-extras__nameplate {
    bottom: 1.1rem;
  }

  .mm-sp-extras__copy {
    padding-block: 2.25rem 3.25rem;
  }

  .mm-sp-docs__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-sp-docs__copy {
    display: contents;
  }

  .mm-sp-docs__copy > .mm-sp-signal {
    order: 1;
  }

  .mm-sp-docs__copy > .mm-sp-h2 {
    order: 2;
  }

  .mm-sp-docs__copy > .mm-sp-note,
  .mm-sp-docs__copy > .mm-sp-answer {
    order: 3;
  }

  .mm-sp-docs__photo {
    margin-top: 1.4rem;
    order: 4;
  }

  .mm-sp-docs__copy > .mm-sp-docs__list {
    order: 5;
  }

  /* A line after the tiles (e.g. the call) stays after them. */
  .mm-sp-docs__copy > .mm-sp-stages__hint {
    order: 6;
  }

  .mm-sp-works__head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }
}

@media (max-width: 699px) {
  .mm-sp-hero {
    padding-block: 1rem 2.5rem;
  }

  .mm-sp-crumbs ol {
    font-size: 0.78rem;
    margin-bottom: 1.2rem;
  }

  .mm-sp-hero__title {
    font-size: clamp(2rem, 8.6vw, 2.35rem);
  }

  .mm-sp-hero__kicker {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .mm-sp-hero__kicker::before {
    width: 18px;
  }

  .mm-sp-photo__caption {
    font-size: 0.76rem;
    padding: 1.2rem 0.55rem 0.45rem;
  }

  .mm-sp-call,
  .mm-sp-call--hero {
    width: 100%;
  }

  .mm-sp-call--hero {
    min-height: 64px;
  }

  .mm-sp-factors__list,
  .mm-sp-docs__list,
  .mm-sp-extras__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-sp-tile,
  .mm-sp-extra {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 0.85rem 0.9rem 0.9rem;
  }

  .mm-sp-tile__icon,
  .mm-sp-extra__icon {
    height: 40px;
    width: 40px;
  }

  .mm-sp-scale {
    grid-template-areas:
      "title"
      "track"
      "ends"
      "rule";
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem 0.95rem;
    row-gap: 0.6rem;
  }

  .mm-sp-scale__track {
    height: 40px;
  }

  .mm-sp-stages__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.75rem;
  }

  .mm-sp-stage__media {
    aspect-ratio: 16 / 10;
  }

  .mm-sp-extras__person img {
    max-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-sp-call,
  .mm-sp-works__all a {
    transition: none;
  }

  .mm-sp-call:hover,
  .mm-sp-call:active {
    transform: none;
  }
}

/* "Wymiana instalacji elektrycznej": the pieces this page adds to the shared ones above. */

/* A variant card whose cover is a photo, not a film: the same still, and the yellow tag of a real
   job sits where the film note would. */
.mm-service__cover--photo > .mm-sp-tag {
  left: clamp(0.8rem, 1.2vw, 1.1rem);
  top: clamp(0.8rem, 1.2vw, 1.1rem);
}

/* Steps that have no finished picture (the visit, the chasing) show their icon on the navy of the
   card covers, so the row of five stays one row of objects. */
.mm-sp-stage__media--icon {
  align-items: center;
  background:
    radial-gradient(circle at 74% 30%, rgb(49 91 255 / 26%), transparent 52%),
    linear-gradient(160deg, #0d2747 0%, #071a30 72%);
  display: flex;
  justify-content: center;
}

.mm-sp-stage__media--icon svg {
  color: #fff;
  fill: none;
  height: 46%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: 46%;
}

/* Old fuses, new boards: three real boards in a row, then what a new board gives. */
.mm-sp-boards {
  background: #eef1f5;
  color: #101827;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 1rem;
}

.mm-sp-boards__inner {
  padding-inline: var(--mm-section-gutter);
}

.mm-sp-boards__grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-sp-boards__photo {
  aspect-ratio: 4 / 3;
}

.mm-sp-boards__facts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: clamp(1.3rem, 2.2vw, 1.8rem) 0 0;
  padding: 0;
}

.mm-sp-boards__hint {
  border-left: 3px solid #f4c542;
  color: #374151;
  font-size: 1rem;
  line-height: 1.5;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-left: 0.85rem;
}

.mm-sp-boards__hint strong {
  color: #101827;
}

.mm-sp-boards__hint a {
  color: #175dff;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .mm-sp-boards__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 699px) {
  .mm-sp-boards__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-sp-boards__photo {
    aspect-ratio: 16 / 10;
  }
}

/* "Pogotowie elektryczne": the pieces this page adds to the shared ones above. Rhythm: navy first
   screen, paper "whom to call", grey prices, paper situations, grey steps, navy band, white
   gallery, paper questions, navy contact. */

/* Whom to call: four cases side by side, each with its drawing, who handles it and the number.
   The rows of the four tiles line up (subgrid), so the numbers stand on one line. */
.mm-sp-who,
.mm-sp-fixes {
  background: #fafaf7;
  color: #101827;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 1rem;
}

.mm-sp-who__inner,
.mm-sp-fixes__inner {
  padding-inline: var(--mm-section-gutter);
}

.mm-sp-who__list {
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: 0.75rem;
}

.mm-sp-who__item {
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 8px;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  row-gap: 0.4rem;
}

.mm-sp-who__item--me {
  background: #f1f5ff;
  border-color: #315bff;
  box-shadow: inset 0 0 0 1px #315bff;
}

.mm-sp-who__item--danger {
  box-shadow: inset 0 4px 0 #b3261e;
}

.mm-sp-who__art {
  color: #101827;
  display: block;
  height: 56px;
  width: 56px;
}

.mm-sp-who__art svg {
  display: block;
  fill: none;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 100%;
}

.mm-sp-who__case {
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0.35rem 0 0;
}

.mm-sp-who__who {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.mm-sp-who__number {
  align-self: start;
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  justify-self: start;
  line-height: 1;
  margin: 0.25rem 0 0;
}

.mm-sp-who__number--text {
  font-size: 1.75rem;
  line-height: 1.3;
}

.mm-sp-who__item--danger .mm-sp-who__art,
.mm-sp-who__item--danger .mm-sp-who__number {
  color: #b3261e;
}

.mm-sp-who__call {
  align-items: center;
  background: #175dff;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 1.55rem;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.45rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.mm-sp-who__call svg {
  fill: currentColor;
  flex: none;
  height: 22px;
  width: 22px;
}

.mm-sp-who__call:focus-visible {
  outline: 3px solid #f4c542;
  outline-offset: 3px;
}

.mm-sp-who__note {
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.15rem 0 0;
}

.mm-sp-who__note a {
  color: #175dff;
  font-weight: 600;
}

/* Links in light text on navy: white with the yellow wire under them, never browser blue. */
.mm-sp-extra__text a {
  color: #fff;
  font-weight: 600;
  text-decoration-color: #f4c542;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.mm-sp-who__source {
  color: #5b6675;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 1rem 0 0;
}

/* Emergency rates: the table says them, the bars show what one, two or three hours cost. The
   bars grow from the navy line up; the tallest one is the 1 000 zł of three hours on a Sunday. */
.mm-sp-rates {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mm-sp-rates__card,
.mm-sp-bill {
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

.mm-sp-rates__table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.mm-sp-rates__table caption,
.mm-sp-bill__title {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
}

.mm-sp-rates__table caption {
  padding: 1.1rem 1.25rem 0.8rem;
}

.mm-sp-rates__table th,
.mm-sp-rates__table td {
  border-top: 1px solid #e3e8ee;
  overflow-wrap: break-word;
  padding: 0.85rem 1.25rem;
  text-align: left;
  vertical-align: middle;
}

.mm-sp-rates__table thead th {
  color: #5b6675;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  padding-block: 0.6rem;
}

.mm-sp-rates__table thead th:first-child {
  width: 38%;
}

.mm-sp-rates__table tbody th {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.mm-sp-rates__table td {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.mm-sp-rates__sunday {
  background: #fff8e1;
}

.mm-sp-rates__rule {
  border-top: 1px solid #e3e8ee;
  color: #4b5563;
  font-size: 0.93rem;
  line-height: 1.5;
  margin: auto 0 0;
  padding: 0.85rem 1.25rem 1rem;
}

.mm-sp-bill {
  --mm-track: 150px;
  padding: 1.1rem 1.25rem 1rem;
}

.mm-sp-bill__sub {
  color: #5b6675;
  display: block;
  font-family: Epilogue, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.2rem;
}

.mm-sp-bill__groups {
  align-items: end;
  display: grid;
  flex: 1;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.mm-sp-bill__bars {
  align-items: end;
  display: grid;
  gap: 0.45rem;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-sp-bill__bars li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: center;
}

.mm-sp-bill__bars strong {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(0.92rem, 1.05vw, 1.08rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  white-space: nowrap;
}

.mm-sp-bill__bar {
  background: #315bff;
  border-radius: 4px 4px 0 0;
  display: block;
  height: calc(var(--mm-bar) * var(--mm-track));
  margin-inline: auto;
  max-width: 64px;
  width: 100%;
}

.mm-sp-bill__group--sunday .mm-sp-bill__bar {
  background: #0d2747;
}

.mm-sp-bill__hours {
  border-top: 2px solid #101827;
  color: #4b5563;
  font-size: 0.8rem;
  line-height: 1.2;
  padding-top: 0.35rem;
}

.mm-sp-bill__label {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0.55rem 0 0;
  text-align: center;
}

.mm-sp-rates__facts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

/* Steps on grey: the ring round each number takes the grey of the section. Four steps without a
   finished picture: their icons stand on a low navy strip, not on photo-sized boxes. */
.mm-sp-stages--grey {
  background: #eef1f5;
}

.mm-sp-stages--grey .mm-sp-stage__step {
  border-color: #eef1f5;
}

.mm-sp-stages__list--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mm-sp-stages__list--four .mm-sp-stage__media--icon {
  aspect-ratio: auto;
  height: clamp(8rem, 11vw, 10rem);
}

@media (hover: hover) and (pointer: fine) {
  .mm-sp-who__call:hover {
    background: #0c4fe6;
  }
}

@media (max-width: 1279px) {
  .mm-sp-who__list,
  .mm-sp-stages__list--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .mm-sp-rates,
  .mm-sp-rates__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: each case is one row (drawing on the left), the bill turns into horizontal bars, and
   each step is its icon next to its text. */
@media (max-width: 699px) {
  .mm-sp-who__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-sp-who__item {
    column-gap: 0.9rem;
    grid-row: auto;
    grid-template-areas:
      "art case"
      "art who"
      "art number"
      "art note";
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: none;
    padding: 0.9rem 0.95rem 1rem;
    row-gap: 0.3rem;
  }

  .mm-sp-who__art {
    grid-area: art;
    height: 44px;
    width: 44px;
  }

  .mm-sp-who__case {
    grid-area: case;
    margin: 0;
  }

  .mm-sp-who__who {
    grid-area: who;
  }

  .mm-sp-who__number {
    font-size: 2.2rem;
    grid-area: number;
  }

  /* With large system text the word and the number still fit the tile: they stop growing at a
     share of the screen width instead of leaving the screen. */
  .mm-sp-who__number--text {
    font-size: min(1.5rem, 7vw);
  }

  .mm-sp-who__call {
    font-size: min(1.55rem, 7.2vw);
  }

  .mm-sp-who__note {
    grid-area: note;
  }

  .mm-sp-rates__table caption {
    padding: 0.95rem 0.8rem 0.7rem;
  }

  .mm-sp-rates__table th,
  .mm-sp-rates__table td {
    padding: 0.7rem 0.8rem;
  }

  .mm-sp-rates__table thead th {
    font-size: 0.74rem;
  }

  .mm-sp-rates__table tbody th {
    font-size: 0.88rem;
  }

  .mm-sp-rates__table td {
    font-size: 1.3rem;
  }

  .mm-sp-rates__rule {
    padding: 0.8rem 0.8rem 0.9rem;
  }

  .mm-sp-bill {
    padding: 0.95rem 0.9rem 0.9rem;
  }

  .mm-sp-bill__groups {
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-sp-bill__bars {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    row-gap: 0.4rem;
  }

  .mm-sp-bill__bars li {
    align-items: center;
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) 4.6rem;
    text-align: left;
  }

  .mm-sp-bill__hours {
    border-top: 0;
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }

  .mm-sp-bill__bar {
    border-radius: 0 4px 4px 0;
    box-shadow: -2px 0 0 #101827;
    grid-column: 2;
    grid-row: 1;
    height: 16px;
    margin-inline: 0;
    max-width: none;
    width: calc(var(--mm-bar) * 100%);
  }

  .mm-sp-bill__bars strong {
    font-size: 1rem;
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    text-align: right;
  }

  .mm-sp-bill__label {
    text-align: left;
  }

  .mm-sp-stages__list--four {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.1rem;
  }

  .mm-sp-stages__list--four .mm-sp-stage {
    align-items: start;
    column-gap: 0.95rem;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .mm-sp-stages__list--four .mm-sp-stage__media--icon {
    aspect-ratio: 1;
    height: auto;
  }

  /* Steps with a photo (emergency page) keep the picture full width above the text. */
  .mm-sp-stages__list--photos .mm-sp-stage {
    align-items: stretch;
    display: flex;
    row-gap: 0.85rem;
  }

  .mm-sp-stages__list--four .mm-sp-stage__body {
    column-gap: 0.55rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding-top: 0;
  }

  .mm-sp-stages__list--four .mm-sp-stage__step {
    border-width: 0;
    font-size: 0.95rem;
    grid-column: 1;
    grid-row: 1;
    height: 28px;
    position: static;
    width: 28px;
  }

  .mm-sp-stages__list--four .mm-sp-stage__name {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
  }

  .mm-sp-stages__list--four .mm-sp-stage__flag,
  .mm-sp-stages__list--four .mm-sp-stage__text {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Tablets and phones: promise, price, the picture (cut to 16:9), then the call, all in the first
   screen; the hours, rating and facts follow. Cards fold like on the front page (services-compact.js):
   photo, title, prices, call; what the work includes opens with one tap. On the emergency page
   the safety steps stay in view, under the call. */
@media (max-width: 899px) {
  .mm-sp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-sp-hero__copy {
    display: contents;
  }

  .mm-sp-hero__photo {
    aspect-ratio: 16 / 9;
    justify-self: start;
    margin-top: 1.1rem;
    order: 1;
    width: min(100%, 640px);
  }

  .mm-sp-hero__actions {
    order: 2;
  }

  .mm-sp-hero__trust {
    order: 3;
  }
}

@media (max-width: 699px) {
  .mm-sp-hero__price {
    font-size: 1.05rem;
    margin-top: 0.75rem;
  }

  .mm-sp-hero__actions {
    margin-top: 1.1rem;
  }

  .mm-sp-hero__hours {
    font-size: 0.85rem;
    gap: 0.3rem 1rem;
  }

  .mm-sp-hero__trust {
    margin-top: 1.1rem;
    padding-top: 1rem;
  }
}

@media (max-width: 700px) {
  .mm-sp-offer[data-mm-keep-promise] .mm-service__action {
    order: -1;
  }
}

/* "Pomiary elektryczne": the pieces this page adds to the shared ones above. Rhythm: navy first
   screen, grey prices and cards, paper "when", grey "what I measure", paper steps, navy band,
   white gallery, paper questions, navy contact. */
.mm-sp-when,
.mm-sp-checks {
  color: #101827;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 1rem;
}

.mm-sp-when {
  background: #fafaf7;
}

.mm-sp-checks {
  background: #eef1f5;
}

.mm-sp-when__inner,
.mm-sp-checks__inner {
  padding-inline: var(--mm-section-gutter);
}

/* Six measurements, three in a row; two on laptops, one on phones. */
.mm-sp-factors__list--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mm-sp-checks__note {
  margin-top: 1.25rem;
}

/* The price of measurements as a shape: the bar rises from a flat (from 350 zl) to a house (up to
   1 000 zl), the reverse of the per-point wedge on the rewiring page. */
.mm-sp-scale--rise {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.mm-sp-scale--rise .mm-sp-scale__bar {
  clip-path: polygon(0 58%, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 1279px) {
  .mm-sp-factors__list--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .mm-sp-factors__list--three {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Town pages ("Elektryk Rybnik"): the service-page pieces above plus a few of their own.
   Rhythm: navy first screen, white "what are you calling about", grey prices, paper "Tauron or
   electrician", grey "block, miners' house or new house", navy companies, white gallery, paper
   steps, navy band, paper questions, navy contact. */
.mm-city-start {
  background: #fff;
  color: #101827;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  scroll-margin-top: 1rem;
}

.mm-city-start__inner {
  padding-inline: var(--mm-section-gutter);
}

/* Six situations, three in a row: each leads to the section that answers it. */
.mm-city-situations {
  margin-bottom: 0;
}

.mm-city-situations .mm-situations__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mm-city-situations .mm-situation__desc {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

/* The price list: one table, three groups, the price in the middle column. On phones every row
   becomes a small block (name, then price and what it covers), so nothing scrolls sideways. */
.mm-city-table {
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 8px;
  overflow: hidden;
}

.mm-city-table__table {
  border-collapse: collapse;
  width: 100%;
}

.mm-city-table__table caption {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 1.1rem 1.25rem 0.8rem;
  text-align: left;
}

.mm-city-table__table th,
.mm-city-table__table td {
  border-top: 1px solid #e3e8ee;
  overflow-wrap: break-word;
  padding: 0.75rem 1.25rem;
  text-align: left;
  vertical-align: middle;
}

.mm-city-table__table thead th {
  color: #5b6675;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  padding-block: 0.55rem;
}

.mm-city-table__table tbody th[scope="row"] {
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.4;
  width: 46%;
}

.mm-city-table__table td {
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.45;
}

.mm-city-table__table td.mm-city-table__price {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

/* The group title stays a table cell: a flex cell would drop colspan and tint one column only. */
.mm-city-table__group th {
  background: #f6f8fb;
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mm-city-table__group svg {
  display: inline-block;
  fill: none;
  height: 20px;
  margin-right: 0.55rem;
  stroke: #315bff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vertical-align: -0.25em;
  width: 20px;
}

.mm-city-table__sunday {
  background: #fff8e1;
}

.mm-city-table__rule {
  border-top: 1px solid #e3e8ee;
  color: #4b5563;
  font-size: 0.93rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.85rem 1.25rem 1rem;
}

.mm-city-table__links {
  color: #374151;
  font-size: 1rem;
  line-height: 1.6;
  margin: 1.25rem 0 0;
}

.mm-city-table__links a {
  color: #175dff;
  font-weight: 600;
}

/* Whom to call in Rybnik: the four cases of the emergency page, then one line on how far the
   emergency service reaches, with the route drawing. */
.mm-city-outage__reach {
  align-items: start;
  color: #101827;
  display: grid;
  font-size: 1.02rem;
  gap: 0.85rem;
  grid-template-columns: 44px minmax(0, 1fr);
  line-height: 1.55;
  margin: 1.5rem 0 0;
  max-width: 56rem;
}

.mm-city-outage__reach svg {
  fill: none;
  height: 44px;
  stroke: #101827;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 44px;
}

.mm-city-outage__reach a {
  color: #175dff;
  font-weight: 600;
}

/* Districts from the Rybnik listing of Mariusz, as chips with a pin; they wrap, never scroll. */
.mm-city-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  padding: 0;
}

.mm-city-area li {
  align-items: center;
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 999px;
  color: #101827;
  display: inline-flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  gap: 0.35rem;
  line-height: 1.2;
  padding: 0.45rem 0.85rem 0.45rem 0.6rem;
}

.mm-city-area svg {
  fill: none;
  flex: none;
  height: 18px;
  stroke: #315bff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.mm-city-area .mm-city-area__all {
  background: transparent;
  border-style: dashed;
  color: #4b5563;
  font-weight: 500;
  padding-left: 0.85rem;
}

/* Companies: navy band, the answer and four facts on the left, two real jobs on the right. */
.mm-city-firms {
  background: radial-gradient(circle at 16% 30%, rgb(24 55 91 / 55%), transparent 46%), #071a30;
  color: #fff;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 1rem;
}

.mm-city-firms__inner {
  align-items: center;
  column-gap: clamp(2rem, 4.4vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  padding-inline: var(--mm-section-gutter);
  row-gap: 2rem;
}

.mm-city-firms__answer {
  color: #e4ebf7;
  font-size: clamp(1.08rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: 44rem;
}

.mm-city-firms__list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
}

.mm-city-firms__list li {
  border-left: 3px solid #f4c542;
  display: grid;
  gap: 0.15rem;
  padding-left: 0.85rem;
}

.mm-city-firms__list strong {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.mm-city-firms__list span {
  color: #c3cfe0;
  font-size: 0.97rem;
  line-height: 1.5;
}

.mm-city-firms__list a {
  color: #f4c542;
  font-weight: 600;
}

.mm-city-firms__note {
  color: #9fb0c7;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.85rem 0 0;
}

.mm-city-firms__photos {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

.mm-city-firms__photo {
  aspect-ratio: 16 / 9;
  background: #0d2747;
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.mm-city-firms__photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.mm-city-review__local {
  color: #4b5563;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0.6rem 0 0;
}

@media (max-width: 1023px) {
  .mm-city-situations .mm-situations__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-city-firms__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-city-firms__photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .mm-city-situations .mm-situations__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-city-table__table thead {
    display: none;
  }

  .mm-city-table__table tbody,
  .mm-city-table__table tr {
    display: block;
  }

  .mm-city-table__table tbody tr:not(.mm-city-table__group) {
    border-top: 1px solid #e3e8ee;
    display: grid;
    gap: 0.1rem 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.7rem 1rem;
  }

  .mm-city-table__table tbody tr:not(.mm-city-table__group) th,
  .mm-city-table__table tbody tr:not(.mm-city-table__group) td {
    border: 0;
    display: block;
    padding: 0;
    width: auto;
  }

  .mm-city-table__table td.mm-city-table__price {
    font-size: 1.3rem;
    margin-top: 0.15rem;
  }

  .mm-city-table__group th {
    display: block;
    padding: 0.7rem 1rem;
  }

  .mm-city-table__table caption {
    padding: 1rem 1rem 0.7rem;
  }

  .mm-city-table__rule {
    padding: 0.8rem 1rem 0.9rem;
  }

  .mm-city-firms__photos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Jastrzębie-Zdrój: the city page shares typography and trust components with Rybnik,
   but answers through a shorter three-path composition rather than another card catalogue. */
.mm-jz-hero .mm-sp-hero__title { max-width: 100%; }
.mm-jz-choice, .mm-jz-outage, .mm-jz-buildings { padding-block: clamp(3.25rem, 6vw, 5.75rem); scroll-margin-top: 1rem; }
.mm-jz-choice { background: #fff; }
.mm-jz-outage { background: #fafaf7; }
.mm-jz-buildings { background: #eef1f5; }
.mm-jz-choice__inner, .mm-jz-outage__inner, .mm-jz-buildings__inner { padding-inline: var(--mm-section-gutter); }
.mm-jz-choice__grid, .mm-jz-outage__grid, .mm-jz-buildings__grid { display: grid; gap: clamp(0.8rem, 1.5vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-jz-choice__item { background: #f7f9fc; border: 1px solid #dbe3ed; border-radius: 8px; color: #101827; display: flex; flex-direction: column; gap: 0.7rem; min-height: 15rem; padding: clamp(1.1rem, 2vw, 1.8rem); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.mm-jz-choice__item:hover { border-color: #315bff; transform: translateY(-3px); }
.mm-jz-choice__item:focus-visible, .mm-jz-outage__mine a:focus-visible, .mm-jz-buildings a:focus-visible { outline: 3px solid #f4c542; outline-offset: 3px; }
.mm-jz-choice__icon { align-items: center; background: #e9efff; border-radius: 6px; color: #315bff; display: inline-flex; height: 48px; justify-content: center; width: 48px; }
.mm-jz-choice__icon svg { fill: none; height: 30px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 30px; }
.mm-jz-choice__item strong, .mm-jz-outage h3, .mm-jz-buildings h3 { font-family: "Barlow Semi Condensed", sans-serif; font-size: clamp(1.4rem, 1.8vw, 1.8rem); font-weight: 700; line-height: 1.1; }
.mm-jz-choice__item > span:nth-of-type(2) { color: #4b5563; font-size: 0.96rem; line-height: 1.5; }
.mm-jz-choice__link { color: #175dff; font-weight: 700; margin-top: auto; }
.mm-jz-outage__grid article { background: #fff; border: 1px solid #dce3ea; border-radius: 8px; padding: clamp(1.15rem, 2vw, 1.75rem); }
.mm-jz-outage__number { color: #315bff; font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.2rem; font-weight: 700; }
.mm-jz-outage h3 { margin: 0.7rem 0; }
.mm-jz-outage p { line-height: 1.55; margin: 0; }
.mm-jz-outage a { color: #175dff; font-weight: 700; }
.mm-jz-outage__grid .mm-jz-outage__mine { background: #071a30; border-color: #071a30; color: #fff; }
.mm-jz-outage__mine p { color: #d6e2f0; }
.mm-jz-outage__mine a { color: #f4c542; display: inline-block; margin-top: 1rem; }
.mm-jz-outage__note { color: #4b5563; font-size: 0.95rem; line-height: 1.55; margin: 1.4rem 0 0; max-width: 60rem; }
.mm-jz-buildings__area-label { color: #4b5563; font-size: 0.95rem; margin: 0 0 0.65rem; }
.mm-jz-buildings__grid article { background: #fff; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.mm-jz-buildings__grid img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; }
.mm-jz-buildings__grid article > div { display: flex; flex: 1; flex-direction: column; padding: clamp(1.15rem, 1.8vw, 1.55rem); }
.mm-jz-buildings__eyebrow { color: #315bff; font-family: "Barlow Semi Condensed", sans-serif; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; margin: 0; text-transform: uppercase; }
.mm-jz-buildings h3 { margin: 0.4rem 0 0.75rem; }
.mm-jz-buildings__grid article > div > p:not(.mm-jz-buildings__eyebrow) { color: #4b5563; font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.2rem; }
.mm-jz-buildings__grid a { color: #175dff; font-weight: 700; margin-top: auto; text-decoration: none; }
.mm-jz-buildings__grid a:hover { text-decoration: underline; }
.mm-jz-buildings__source { color: #5b6675; font-size: 0.85rem; line-height: 1.5; margin: 1.2rem 0 0; }
.mm-jz-buildings__source a { color: #315bff; }
.mm-jz-firms, .mm-jz-person { background: #071a30; color: #fff; padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.mm-jz-firms__inner, .mm-jz-person__inner { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); padding-inline: var(--mm-section-gutter); }
.mm-jz-firms p, .mm-jz-person p { color: #e4ebf7; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; margin: 1rem 0 0; }
.mm-jz-firms .mm-sp-call, .mm-jz-person .mm-sp-call { margin-top: 1.5rem; }
.mm-jz-firms small { color: #aabbd1; display: block; line-height: 1.45; margin-top: 0.75rem; }
.mm-jz-firms figure, .mm-jz-person figure { border-radius: 8px; margin: 0; overflow: hidden; position: relative; }
.mm-jz-firms figure img { aspect-ratio: 16 / 10; display: block; object-fit: cover; width: 100%; }
.mm-jz-person__inner { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.mm-jz-person figure { background: #12304e; max-height: 450px; }
.mm-jz-person figure img { display: block; height: 450px; object-fit: cover; object-position: center 18%; width: 100%; }
.mm-jz-person figcaption { background: rgb(7 26 48 / 84%); bottom: 0; color: #fff; font-size: 0.75rem; left: 0; line-height: 1.35; padding: 0.6rem; position: absolute; right: 0; }
.mm-jz-faq .mm-faq__list { padding-left: 0; }
.mm-jz-faq .mm-faq__question { gap: 1rem; }
.mm-jz-faq .mm-faq__switch { color: #315bff; font-size: 1.75rem; font-weight: 500; line-height: 1; }
.mm-jz-faq .mm-faq__item[open] .mm-faq__switch { transform: rotate(45deg); }
@media (max-width: 1023px) {
  .mm-jz-choice__grid, .mm-jz-outage__grid { grid-template-columns: minmax(0, 1fr); }
  .mm-jz-choice__item { min-height: 0; }
  .mm-jz-buildings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-jz-firms__inner, .mm-jz-person__inner { grid-template-columns: minmax(0, 1fr); }
  .mm-jz-firms figure { max-width: 700px; }
  .mm-jz-person figure { max-width: 400px; }
}
@media (max-width: 699px) {
  .mm-jz-buildings__grid { grid-template-columns: minmax(0, 1fr); }
  .mm-jz-hero .mm-sp-hero__title { max-width: 100%; }
  .mm-jz-faq .mm-faq__title { overflow-wrap: anywhere; }
  .mm-jz-prices .mm-city-table__table td.mm-city-table__price { white-space: normal; }
}
@media (max-width: 359px) {
  .mm-jz-hero .mm-sp-hero__actions { order: 1; }
  .mm-jz-hero .mm-sp-hero__photo { order: 2; }
}

/* Żory: an editorial route through a flat, a new build and a business premise.
   Shared service primitives keep typography familiar, but the rhythm is not a city clone. */
.mm-zory-hero .mm-sp-hero__title { max-width: 100%; }
.mm-zory-hero .mm-sp-hero__photo img { object-position: 52% 49%; }
.mm-zory-route, .mm-zory-buildings, .mm-zory-home, .mm-zory-area, .mm-zory-firm, .mm-zory-process {
  padding-block: clamp(3.5rem, 6vw, 6rem);
  scroll-margin-top: 1rem;
}
.mm-zory-route__inner, .mm-zory-buildings__inner, .mm-zory-home__inner,
.mm-zory-area__inner, .mm-zory-firm__inner, .mm-zory-process__inner {
  padding-inline: var(--mm-section-gutter);
}
.mm-zory-route { background: #fff; }
.mm-zory-route__list { border-top: 1px solid #dbe3ed; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-zory-route__list a { align-items: start; border-right: 1px solid #dbe3ed; color: #101827; display: grid; gap: 0.9rem; grid-template-columns: 44px minmax(0, 1fr) 20px; min-height: 13rem; padding: 1.6rem clamp(0.75rem, 1.5vw, 1.5rem); text-decoration: none; transition: background-color 180ms ease; }
.mm-zory-route__list a:first-child { padding-left: 0; }
.mm-zory-route__list a:last-child { border-right: 0; }
.mm-zory-route__list a:hover { background: #f4f7fd; }
.mm-zory-route__list svg { fill: none; height: 40px; stroke: #315bff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 40px; }
.mm-zory-route__list small { color: #315bff; display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; }
.mm-zory-route__list strong { display: block; font-family: "Barlow Semi Condensed", sans-serif; font-size: clamp(1.55rem, 2.3vw, 2.2rem); font-weight: 800; line-height: 1.05; margin-top: 0.5rem; }
.mm-zory-route__list em { color: #4b5563; display: block; font-size: 0.94rem; font-style: normal; line-height: 1.5; margin-top: 0.55rem; }
.mm-zory-route__list b { color: #315bff; font-size: 1.35rem; font-weight: 500; }
.mm-zory-buildings { background: #f5f7fa; }
.mm-zory-buildings__inner, .mm-zory-home__inner, .mm-zory-firm__inner { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.mm-zory-buildings__lead > p, .mm-zory-home__inner > div > p, .mm-zory-firm__inner > div > p { font-size: clamp(1rem, 1.18vw, 1.13rem); line-height: 1.65; margin: 1.1rem 0 0; }
.mm-zory-buildings__lead > p { color: #374151; }
.mm-zory-buildings__lead > a, .mm-zory-home__link a { color: #175dff; display: inline-block; font-weight: 700; margin-top: 1.35rem; text-underline-offset: 0.2em; }
.mm-zory-buildings figure, .mm-zory-home figure, .mm-zory-firm figure { margin: 0; overflow: hidden; position: relative; }
.mm-zory-buildings figure img, .mm-zory-home figure img, .mm-zory-firm figure img { display: block; object-fit: cover; width: 100%; }
.mm-zory-buildings figure img { aspect-ratio: 4 / 3; }
.mm-zory-buildings figcaption, .mm-zory-firm figcaption { background: rgb(7 26 48 / 86%); bottom: 0; color: #fff; font-size: 0.8rem; left: 0; line-height: 1.35; padding: 0.6rem 0.8rem; position: absolute; right: 0; }
.mm-zory-home { background: #071a30; color: #fff; }
.mm-zory-home__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.mm-zory-home figure img { aspect-ratio: 4 / 3; }
.mm-zory-home__inner > div > p { color: #d9e5f2; }
.mm-zory-home .mm-sp-call { margin-top: 1.4rem; }
.mm-zory-home__link { margin-top: 0.5rem !important; }
.mm-zory-home__link a { color: #f4c542; margin-top: 0; }
.mm-zory-prices__note { color: #4b5563; font-size: 0.9rem; line-height: 1.55; margin: 1rem 0 0; max-width: 62rem; }
.mm-zory-area { background: #fff; }
.mm-zory-area__inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.mm-zory-area__inner > div > p { color: #374151; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.65; margin: 1.1rem 0 0; }
.mm-zory-area .mm-city-area { align-content: center; margin: 0; }
.mm-zory-area__source { color: #5b6675; font-size: 0.84rem; grid-column: 1 / -1; line-height: 1.5; margin: 0; }
.mm-zory-area__source a { color: #175dff; }
.mm-zory-firm { background: radial-gradient(circle at 80% 30%, rgb(32 66 108 / 48%), transparent 50%), #071a30; color: #fff; }
.mm-zory-firm__inner > div > p { color: #d9e5f2; }
.mm-zory-firm .mm-sp-call { margin-top: 1.4rem; }
.mm-zory-firm figure img { aspect-ratio: 16 / 10; }
.mm-zory-works .mm-sp-works__review { margin: 0; }
.mm-zory-process { background: #f5f7fa; }
.mm-zory-process .mm-sp-answer { max-width: 58rem; }
.mm-zory-process ol { border-top: 1px solid #cfd8e4; display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; }
.mm-zory-process li { border-right: 1px solid #cfd8e4; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.15rem; }
.mm-zory-process li:first-child { padding-left: 0; }
.mm-zory-process li:last-child { border: 0; }
.mm-zory-process li strong { color: #315bff; font-family: "Barlow Semi Condensed", sans-serif; font-size: 2rem; line-height: 1; }
.mm-zory-process li span { color: #101827; font-weight: 700; line-height: 1.4; }
.mm-zory-faq .mm-faq__list { padding-left: 0; }
.mm-zory-faq .mm-faq__switch { color: #315bff; font-size: 1.75rem; font-weight: 500; line-height: 1; }
.mm-zory-faq .mm-faq__item[open] .mm-faq__switch { transform: rotate(45deg); }
.mm-zory-route a:focus-visible, .mm-zory-buildings a:focus-visible, .mm-zory-home a:focus-visible,
.mm-zory-area a:focus-visible, .mm-zory-firm a:focus-visible { outline: 3px solid #f4c542; outline-offset: 3px; }
@media (max-width: 1023px) {
  .mm-zory-route__list { grid-template-columns: minmax(0, 1fr); }
  .mm-zory-route__list a { border-bottom: 1px solid #dbe3ed; border-right: 0; min-height: 0; padding: 1.1rem 0; }
  .mm-zory-route__list a:last-child { border-bottom: 0; }
  .mm-zory-buildings__inner, .mm-zory-home__inner, .mm-zory-firm__inner { grid-template-columns: minmax(0, 1fr); }
  .mm-zory-home figure { max-width: 720px; }
  .mm-zory-area__inner { grid-template-columns: minmax(0, 1fr); }
  .mm-zory-area__source { grid-column: auto; }
}
@media (max-width: 699px) {
  .mm-zory-route__list a { gap: 0.6rem; grid-template-columns: 36px minmax(0, 1fr) 16px; }
  .mm-zory-route__list svg { height: 32px; width: 32px; }
  .mm-zory-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-zory-process li:nth-child(2) { border-right: 0; }
  .mm-zory-process li:nth-child(n+3) { border-top: 1px solid #cfd8e4; }
  .mm-zory-process li:nth-child(3) { padding-left: 0; }
  .mm-zory-prices .mm-city-table__table td.mm-city-table__price { white-space: normal; }
  .mm-zory-faq .mm-faq__title { overflow-wrap: anywhere; }
}
@media (max-width: 359px) {
  .mm-zory-hero .mm-sp-hero__actions { order: 1; }
  .mm-zory-hero .mm-sp-hero__photo { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .mm-zory-route__list a { transition: none; } }

/* Objects drawn in code, the price picker and the AI mark. First used on "Elektryk Mikołów"
   (the seo-strony skill); every piece is generic and does nothing on a page without it.
   The objects (assets/images/obiekty, scripts/obiekty-3d/generuj.py) are light isometric
   drawings, so they stand on a pale plate wherever the block around them is darker. */

/* A realistic generated picture carries a small grey "i" in its top right corner; the words
   "Wizualizacja AI" show on hover, keyboard focus or a tap (service-page.js toggles data-open). */
.ai-host {
  position: relative;
}

.ai-znacznik {
  align-items: center;
  background: rgb(102 113 128 / 82%);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(16 24 39 / 30%);
  color: #fff;
  cursor: help;
  display: flex;
  height: 26px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  width: 26px;
  z-index: 3;
}

.ai-znacznik::before {
  content: "i";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

.ai-znacznik::after {
  background: #101827;
  border-radius: 4px;
  color: #fff;
  content: attr(data-tip);
  font-family: Epilogue, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  padding: 0.4rem 0.55rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  transition: opacity 140ms ease-out;
  white-space: nowrap;
}

.ai-znacznik:hover::after,
.ai-znacznik:focus-visible::after,
.ai-znacznik[data-open]::after {
  opacity: 1;
}

.ai-znacznik:focus-visible {
  outline: 3px solid #f4c542;
  outline-offset: 2px;
}

/* A situation tile with a 3D object instead of a line icon. */
.mm-situation__icon--obj {
  height: 50px;
  width: 58px;
}

.mm-situation__icon--obj img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* A step whose picture is an object: the object whole, on a pale plate. The "you" line says what
   the client does at that step, before what Mariusz does. */
.mm-sp-stage__media--obj {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 40%, #fff 0%, rgb(255 255 255 / 0%) 70%),
    #e9eef4;
}

.mm-sp-stage__media--obj img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 8% 10%;
}

.mm-sp-stage__you {
  color: #1d3f9e;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.35rem 0 0;
}

/* Next to a plate the text column is narrow; with very large text a long word breaks instead of
   pushing the page sideways. At normal sizes nothing changes. */
.mm-sp-stage:has(.mm-sp-stage__media--obj) .mm-sp-stage__text,
.mm-sp-stage:has(.mm-sp-stage__media--obj) .mm-sp-stage__you {
  overflow-wrap: anywhere;
}

.mm-sp-stage__you strong {
  color: #315bff;
  font-weight: 700;
}

/* A variant card whose cover is an object: pale plate, the building whole and centred. It fills
   the cover the way the still of a film does, so a cover stretched to the card keeps it whole. */
.mm-service__cover--obj {
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, rgb(255 255 255 / 0%) 68%),
    linear-gradient(180deg, #edf1f6 0%, #e2e8ef 100%);
}

.mm-service__obj {
  box-sizing: border-box;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  padding: 6% 8%;
  position: absolute;
  width: 100%;
}

/* An object among the photos of the navy firms band. */
.mm-city-firms__photo--obj {
  background:
    radial-gradient(circle at 50% 40%, #fff 0%, rgb(255 255 255 / 0%) 70%),
    #e9eef4;
}

.mm-city-firms__photo--obj img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 6% 10%;
}

/* Cases and tiles whose drawing is an object image, not a line icon. */
.mm-sp-who__art--obj img,
.mm-sp-tile__icon--obj img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.mm-sp-tile__icon--obj {
  height: 48px;
  width: 52px;
}

.mm-sp-who__art--obj {
  height: 64px;
  width: 72px;
}

@media (min-width: 1280px) {
  .mm-sp-who__list--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The price picker: a closed set of priced scopes from the "Ceny" screen, never a formula in the
   browser. The same house stands next to the choice and shows only the layers of the picked
   scope: every group of the drawing with data-w lists the scopes (1–3) it belongs to. Picking,
   the drawing and the result are CSS alone; without :has() every layer and result stays visible.
   The link under the result carries the picked scope into the enquiry form (service-page.js). */
.mm-calc {
  align-items: stretch;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  row-gap: 1.25rem;
}

.mm-calc__art {
  background:
    radial-gradient(circle at 50% 38%, #fff 0%, rgb(255 255 255 / 0%) 72%),
    #e6ecf3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(1rem, 2.4vw, 2rem) clamp(0.75rem, 2vw, 1.75rem) clamp(0.9rem, 1.6vw, 1.25rem);
}

.mm-calc__art svg {
  display: block;
  height: auto;
  width: 100%;
}

.mm-calc__caption {
  color: #4b5563;
  font-size: 0.86rem;
  line-height: 1.45;
  margin-top: 0.6rem;
  text-align: center;
}

.mm-calc__panel {
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 12px;
  container: mm-card / inline-size;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
}

/* Large text never pushes the result wider than the screen. */
.mm-calc__results,
.mm-calc__result {
  min-width: 0;
}

.mm-calc:has(.mm-plan__input[data-poziom="1"]:checked) [data-w]:not([data-w~="1"]),
.mm-calc:has(.mm-plan__input[data-poziom="2"]:checked) [data-w]:not([data-w~="2"]),
.mm-calc:has(.mm-plan__input[data-poziom="3"]:checked) [data-w]:not([data-w~="3"]),
.mm-calc:has(.mm-plan__input[data-poziom="1"]:checked) .mm-calc__result:not([data-poziom="1"]),
.mm-calc:has(.mm-plan__input[data-poziom="2"]:checked) .mm-calc__result:not([data-poziom="2"]),
.mm-calc:has(.mm-plan__input[data-poziom="3"]:checked) .mm-calc__result:not([data-poziom="3"]) {
  display: none;
}

.mm-calc__results {
  display: grid;
  gap: 0.75rem;
}

.mm-calc__result {
  background: #f6f8ff;
  border: 1px solid #c9d6ff;
  border-radius: 8px;
  padding: 0.95rem 1.05rem 1rem;
}

.mm-calc__sum {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin: 0 0 0.6rem;
}

.mm-calc__sum-label {
  color: #1d3f9e;
  flex-basis: 100%;
  font-family: Epilogue, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Amounts keep their groups together (price() joins them with no-break spaces), so only "od"
   or "do" may move to its own line when the text is very large. */
.mm-calc__sum-value {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.05;
}

.mm-calc__sum-note {
  color: #4b5563;
  font-size: 0.9rem;
}

.mm-calc__list {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-calc__list li {
  color: #1f2937;
  font-size: 0.93rem;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-left: 1.5rem;
  position: relative;
}

/* A small check drawn in CSS: the list says what the price includes. */
.mm-calc__list li::before {
  border-bottom: 2px solid #315bff;
  border-left: 2px solid #315bff;
  content: "";
  height: 0.38rem;
  left: 0.2rem;
  position: absolute;
  top: 0.42rem;
  transform: rotate(-45deg);
  width: 0.72rem;
}

.mm-calc__terms {
  margin: 0;
}

.mm-calc__actions {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.mm-calc__cta,
.mm-calc__call {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  gap: 0.55rem;
  justify-content: center;
  line-height: 1;
  min-height: 54px;
  padding: 0.75rem 1.2rem;
  text-decoration: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 140ms ease-out;
  white-space: nowrap;
}

.mm-calc__cta {
  background: #175dff;
  color: #fff;
  flex: 1 1 14rem;
  text-align: center;
  white-space: normal;
}

.mm-calc__cta svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  width: 20px;
}

.mm-calc__call {
  background: #fff;
  border: 2px solid #175dff;
  color: #175dff;
  flex: 1 1 11rem;
}

.mm-calc__call svg {
  fill: currentColor;
  height: 20px;
  width: 20px;
}

.mm-calc__cta:active,
.mm-calc__call:active {
  transform: scale(0.985);
}

.mm-calc__cta:focus-visible,
.mm-calc__call:focus-visible {
  outline: 3px solid #f4c542;
  outline-offset: 3px;
}

.mm-calc__next {
  color: #4b5563;
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .mm-calc__cta:hover {
    background: #0c4fe6;
  }

  .mm-calc__call:hover {
    background: #f3f6ff;
  }
}

@media (max-width: 1023px) {
  .mm-calc {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-calc__art {
    justify-self: center;
    width: min(100%, 640px);
  }
}

@media (max-width: 699px) {
  /* Steps with an object keep it as a small plate next to the text, like the icon steps. */
  .mm-sp-stages__list--four .mm-sp-stage:has(.mm-sp-stage__media--obj) {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .mm-sp-stages__list--four .mm-sp-stage__media--obj {
    aspect-ratio: 1;
  }

  .mm-sp-stage__media--obj img {
    padding: 8%;
  }

  .mm-sp-stages__list--four .mm-sp-stage__you {
    grid-column: 1 / -1;
  }

  /* Cases on phones keep the narrow drawing column of the line icons. */
  .mm-sp-who__art--obj {
    height: 44px;
    width: 44px;
  }

  .mm-calc__art {
    padding: 0.9rem 0.6rem 0.75rem;
  }

  .mm-calc__panel {
    padding: 1rem;
  }
}