/* Hallmark · shape: Manifesto (draw a544e6, set in Grid sentence case) · genre: editorial · theme: Grid (deal 1/3, seed local-plumber-energy-performance-2c4d·7acfafde·2026-11-03·r0) · redesign: full
 * hero: Ledge, the overprint sheet (the head at poster scale crossing onto the ultramarine field, the phone set large at its foot) · nav: masthead, hung left because Grid refuses a centred head · footer: letter close · imagery: none · signature: the EP estimator on the one red field, the value at poster scale
 * axes: light/grotesk-sans/cool · posture: full-palette · contrast: pass · fold: pass · job: hire · draw: a544e6 · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, a trade page has little to argue; the one claim is the audit and the install by the same hands, set as the statement */
/* Hallmark · dropped #cennik, #faq, cennik, faq · the prices were placeholders the owner has not set; the questions repeated the steps and broke the word budget */
/* Hallmark · dropped "Faktura VAT", "przyjeżdżam tego samego dnia", "dojazd jest wliczony", "oddzwaniam w ciągu kilku godzin", the EP 92 sample card · facts the owner never gave (46a) */
/* Hallmark · swapped draw hero Index for the overprint sheet · hero review: the list cut at 1280 and the field read empty; the index is now the first section */
/* Hallmark · swapped draw sections "one project opened as a case" and "an index of projects" for the EP estimator and the service index · the owner has no project record to show */
/* Hallmark · dismissed 25 · the statement is one sentence at display size, 22ch of 84px type is eight words a line */
/* Hallmark · dropped #est-type, #est-year, #est-heat, select · rebuilt as radio choices on the red field, same ids on their fieldsets and the same values */
/* Hallmark · dropped est-marker, est-req, grid, house-title, 2015, 2300100200300400, +48579517423 · the drawn house and the gradient scale went with the old system; the number is shown without the country code */
/* Hallmark · reworded "Naprawię instalację. Policzę, ile dom zużywa." to "Od rur po świadectwo energetyczne" · the hero review named the old pair generic */
/* Hallmark · reworded "Instalacje, które robi się raz, a porządnie." to "Instalacje i świadectwa od jednej osoby" · a head says what the visitor sees, the service index */
/* Hallmark · reworded "instalacje wod-kan" "ogrzewanie" "łazienki i biały montaż" "awarie i serwis" to rows of the service index · the cards became one index */
/* Hallmark · reworded "Sprzedajesz albo wynajmujesz? Potrzebujesz świadectwa." to "Świadectwo przy sprzedaży i najmie" · 58, the six-word budget for a section head */
/* Hallmark · reworded "Kiedy jest wymagane" "Zgłoszenie" "Rejestr i PDF" to "Telefon" "Rejestr" · the four cases are the rows themselves; step names cut to one word */
/* Hallmark · reworded "Gdzie jest Twój dom na skali EP?" to "Ile energii zużywa Twój dom?" · the estimator no longer draws a scale, it sets the value */
/* Hallmark · reworded "Zanim wydasz pieniądze na termomodernizację." "Audyt do programu Czyste Powietrze" to "Audyt przed termomodernizacją" "Audyt do Czystego Powietrza" · 58, the six-word budget; the audits became a table */
/* Hallmark · reworded "Audyt energetyczny budynku" "Dobór pompy ciepła" to rows of the audit table · the three audits read better as a table than as cards */
/* Hallmark · dismissed kept · 746 words against 1256: the price list and the questions are dropped on record, every other section is here at the 58 budget */
/* Hallmark · reworded "Ceny orientacyjne." "Najczęściej pytacie o to." to nothing · the price list and the questions were dropped, see #cennik and #faq above */
/* Hallmark · reworded "Zadzwoń albo opisz, co trzeba zrobić." to "Dzwoń od 7:00, także w soboty" · 58, the six-word budget for a section head *//* Hallmark · dropped /main.js · the same script, now linked as main.js so the page also renders from disk */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 partial (the field's upper half holds the overprint, not content)
 * finish-review: subagent · 6 findings · 6 resolved · gap: plumbing scope restored in the index notes, estimator links to the audit again */
/* Hallmark · answered F4 · the hero call and the enquiry form each need a filled control; they sit four screens apart */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 80px;
  --inner: min(100% - 2 * var(--gutter), var(--container) - 2 * var(--gutter));
  --field-x: calc(50% + var(--gap-columns) / 2);
  --poster: clamp(4.5rem, 10.2vw, 10rem);
  --control-h: 52px;
  --tint-on-mark: color-mix(in oklab, var(--color-ink) 16%, var(--color-mark));
  --track-on-mark: color-mix(in oklab, var(--color-ink) 28%, var(--color-mark));
}

/* ---------- grid ---------- */
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h); padding: 0 var(--space-lg);
  border: 0; border-radius: 0;
  background: var(--color-ink); color: var(--color-paper);
  font: 500 var(--text-md)/1 var(--font-body);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.link {
  color: inherit; font-weight: 500;
  text-decoration: underline var(--rule-hair); text-underline-offset: 0.32em;
  transition: color var(--dur-short) var(--ease-out);
}
.link:hover { color: var(--color-mark); }
.link:active { opacity: 0.8; }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); }
.masthead__bar { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-h); }
.wordmark {
  display: inline-grid; grid-template-columns: auto auto; column-gap: var(--space-sm);
  font: var(--display-weight) var(--text-lg)/0.92 var(--font-display); letter-spacing: var(--tracking-display);
  text-decoration: none; color: var(--color-ink);
}
.wordmark::before { content: ""; grid-row: span 2; aspect-ratio: 1; background: var(--color-mark); }
.wordmark__owner { font-weight: 400; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav__list a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__list a:hover { color: var(--color-mark); }
.nav__list a:focus-visible, .masthead__tel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav-toggle { display: none; }
.masthead__tel { font: var(--display-weight) var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color var(--dur-short) var(--ease-out); }
.masthead__tel:hover { color: var(--color-mark); }

/* ---------- hero (the overprint sheet) ---------- */
.hero { position: relative; display: flex; min-height: calc(100dvh - var(--nav-h)); padding-block: var(--space-2xl); }
.hero__field { position: absolute; inset: 0 0 0 var(--field-x); background: var(--color-field); color: var(--color-field-ink); }
.hero__grid { position: relative; width: 100%; row-gap: var(--space-xl); align-items: end; align-content: space-between; }
.hero__title-wrap { grid-column: 1 / -1; position: relative; }
.hero__title {
  margin: 0; max-width: none;
  font: var(--display-weight) var(--poster)/0.9 var(--font-display); letter-spacing: -0.045em; text-wrap: nowrap;
}
.overprint {
  position: absolute; inset: 0; color: var(--color-field-ink); pointer-events: none;
  clip-path: inset(0 0 0 calc(6 * (100% + var(--gap-columns)) / 12));
}
.hero__lede { grid-column: 1 / 6; display: grid; gap: var(--space-lg); }
.hero .lead { color: var(--color-ink-2); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }

.call {
  grid-column: 7 / 13; display: grid; gap: var(--space-sm); justify-items: start; padding-left: var(--space-xl);
  color: var(--color-field-ink); --color-focus: var(--color-field-ink);
}
.call__number {
  font: var(--display-weight) clamp(2.5rem, 6.2vw, 6rem)/0.95 var(--font-display); letter-spacing: var(--tracking-display);
  color: inherit; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.call__number:hover { text-decoration: underline var(--rule-hair); text-underline-offset: 0.12em; }
.call__number:active { opacity: 0.8; }
.call__number:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.call__area { font-size: var(--text-lead); }

/* ---------- service index ---------- */
.services-band { padding-block: var(--section-gap-s) var(--section-gap); }
.services-band .cols { row-gap: var(--space-2xl); }
.services-band__title { grid-column: 1 / 8; line-height: 1; }
.services { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.services > li { border-top: var(--rule-hair) solid var(--color-rule); }
.services > li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.services__row {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: baseline; gap: var(--gap-columns);
  padding-block: var(--space-lg); color: var(--color-ink); text-decoration: none;
}
.services__name { font: var(--display-weight) var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.025em; }
.services__note { font-size: var(--text-lead); color: var(--color-ink-2); }
a.services__row .services__name { transition: color var(--dur-short) var(--ease-out); }
a.services__row:hover .services__name { color: var(--color-mark); }
a.services__row:active { opacity: 0.8; }
a.services__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- statement ---------- */
.statement { padding-block: var(--section-gap-l) var(--section-gap); }
.statement__text {
  grid-column: 3 / 12; max-width: 22ch;
  font: 400 var(--text-display)/1.02 var(--font-display); letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.statement__by { grid-column: 3 / 12; margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-lead); display: flex; flex-wrap: wrap; gap: var(--space-md); }
.statement__by .link { color: var(--color-ink); }

/* ---------- certificates (rows) ---------- */
.cert { padding-block: var(--section-gap-s) var(--section-gap); }
.cert__head { grid-column: 1 / 5; display: grid; gap: var(--space-md); align-content: start; }
.cert h2 { line-height: 1; }
.cert .lead { color: var(--color-ink-2); }
.rows { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-lg); align-items: baseline;
  padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule);
}
.rows li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.4; }

/* ---------- process (steps on a change of paper) ---------- */
.process { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.process h2 { line-height: 1; }
.steps {
  list-style: none; margin: var(--space-2xl) 0 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns);
}
.steps li { counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-sm); align-content: start; }
.steps li::before {
  content: counter(step);
  font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--color-field);
}
.steps h3 { font-size: var(--text-2xl); line-height: 1; }
.steps p { grid-column: 1 / -1; }
.steps p { color: var(--color-ink-2); }

/* ---------- estimator on the red field ---------- */
.calc { background: var(--color-mark); color: var(--color-mark-ink); padding-block: var(--section-gap-s); --color-focus: var(--color-ink); }
.calc .cols { row-gap: var(--space-2xl); align-items: start; }
.calc .cols { grid-template-rows: auto 1fr; }
.calc__title { grid-column: 1 / 7; grid-row: 1; line-height: 1; }
.calc__controls { grid-column: 1 / 7; grid-row: 2; display: grid; gap: var(--space-xl); }
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg legend { padding: 0; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm) 0 0; margin-right: var(--space-sm);
  font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.02em;
  color: var(--color-mark-ink); cursor: pointer; white-space: nowrap;
  text-decoration: underline 2px transparent; text-underline-offset: 0.2em;
  transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out);
}
.seg label:hover { text-decoration-color: currentColor; }
.seg input:checked + label { color: var(--color-ink); text-decoration-color: currentColor; }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }

.calc__result { grid-column: 8 / 13; grid-row: 1 / 3; display: grid; gap: var(--space-md); justify-items: start; }
.calc__value { font: var(--display-weight) var(--poster)/0.9 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.calc__unit { font-size: var(--text-lead); font-weight: 500; }
.bars { margin: var(--space-lg) 0 0; display: grid; gap: var(--space-md); width: 100%; }
.bars__row { display: grid; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; }
.bars__track { display: block; height: 12px; background: var(--track-on-mark); overflow: hidden; }
.bars__fill { display: block; height: 100%; background: var(--color-mark-ink); transform-origin: left center; transform: scaleX(var(--v, 0.5)); transition: transform var(--dur-long) var(--ease-out); }
.calc__note { max-width: 40ch; }
.calc__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.calc .link { color: var(--color-mark-ink); }
.calc .link:hover { color: var(--color-mark-ink); text-decoration-thickness: 2px; }

/* ---------- audits (table) ---------- */
.audits { padding-block: var(--section-gap-l) var(--section-gap-s); }
.audits .cols { row-gap: var(--space-md); }
.audits__title { grid-column: 1 / 8; line-height: 1; }
.audits__lead { grid-column: 1 / 8; color: var(--color-ink-2); }
.audits .table { margin-top: var(--space-2xl); }
.table { grid-column: 1 / 13; width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; vertical-align: baseline; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.table thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); padding-block: var(--space-sm); white-space: nowrap; }
.table tbody th { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; width: 36%; }
.table td { font-size: var(--text-lead); color: var(--color-ink-2); }

/* ---------- contact (form) ---------- */
.contact { padding-block: var(--section-gap) var(--space-3xl); }
.contact .cols { row-gap: var(--space-2xl); }
.contact__info { grid-column: 1 / 6; display: grid; gap: var(--space-xl); align-content: start; }
.contact h2 { line-height: 1; }
.facts { margin: 0; display: grid; gap: var(--space-lg); }
.facts div { display: grid; gap: var(--space-2xs); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; font-size: var(--text-lead); }
.facts a { color: var(--color-ink); text-decoration-thickness: 1px; transition: color var(--dur-short) var(--ease-out); }
.facts a:hover { color: var(--color-mark); }
.facts a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.facts__tel { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; font-variant-numeric: tabular-nums; }

.form { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-content: start; }
.form .seg { grid-column: 1 / -1; }
.seg--paper legend { color: var(--color-muted); }
.seg--paper label { padding: 0 var(--space-md); margin-right: 0; font: 500 var(--text-md)/1 var(--font-body); letter-spacing: 0; text-decoration: none; background: var(--color-paper-2); color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.seg--paper label:hover { background: var(--color-paper-3); }
.seg--paper input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.field--full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; min-height: var(--control-h); padding: 0;
  border: 0; border-bottom: var(--rule-hair) solid var(--color-muted); border-radius: 0;
  background: transparent; color: var(--color-ink); font-size: var(--text-lg);
  outline: 2px solid transparent; outline-offset: 2px;
}
.field input { height: var(--control-h); }
.field textarea { resize: vertical; padding-block: var(--space-sm); font-size: var(--text-md); line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-bottom-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field textarea::placeholder { color: var(--color-muted); }
.form__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.form__help.is-error { color: var(--color-error); font-weight: 500; }

/* ---------- footer (letter close) ---------- */
.letter { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper-2); }
.letter .cols { row-gap: var(--space-xl); align-items: end; }
.letter__close { grid-column: 1 / 7; font: 400 var(--text-3xl)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.letter__legal { grid-column: 8 / 13; font-size: var(--text-sm); color: var(--color-muted); }

.mobile-call { display: none; }

/* ---------- under 60rem ---------- */
@media (max-width: 60rem) {
  .masthead__tel { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md);
    background: var(--color-paper-2); border: 0; border-radius: 0; color: var(--color-ink); font-weight: 500; cursor: pointer;
  }
  .nav-toggle:hover { background: var(--color-paper-3); }
  .nav-toggle:active { opacity: 0.8; }
  .nav-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .nav__list {
    display: none; position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-lg);
    background: var(--color-paper);
  }
  .nav__list.open { display: flex; }
  .nav__list a { display: block; padding-block: var(--space-sm); font-size: var(--text-lead); color: var(--color-ink); }

  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__field { display: none; }
  .hero__grid { grid-template-rows: none; row-gap: var(--space-xl); }
  .hero__title-wrap, .hero__lede, .services, .services-band__title, .call, .statement__text, .statement__by, .cert__head, .rows,
  .calc__title, .calc__controls, .calc__result, .audits__title, .audits__lead, .table, .contact__info, .form, .letter__close, .letter__legal { grid-column: 1 / -1; grid-row: auto; }
  .hero__title { font-size: clamp(3rem, 13vw, 6rem); text-wrap: balance; }
  .overprint { display: none; }
  .call {
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-xl) var(--gutter);
    background: var(--color-field);
  }
  .js .mobile-call:not(.is-shown) { transform: translateY(calc(100% + var(--space-xl))); }
  .statement__text { font-size: var(--text-display-s); }
  .rows { margin-top: var(--space-xl); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); margin-top: var(--space-xl); }
  .calc .cols { grid-template-rows: none; row-gap: var(--space-xl); }
  .calc__result {
    position: sticky; top: var(--nav-h); z-index: var(--z-raised);
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-md) var(--gutter); gap: var(--space-xs);
    background: var(--color-mark);
  }
  .calc__value { font-size: var(--text-display-s); }
  .calc__controls { order: 2; }
  .bars { margin-top: var(--space-xs); gap: var(--space-xs); }
  .calc__note, .calc__links { display: none; }
  .mobile-call {
    display: flex; position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
    z-index: var(--z-sticky); transition: transform var(--dur-short) var(--ease-out);
  }
  .letter { padding-bottom: var(--space-4xl); }
}

@media (max-width: 40rem) {
  .services__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tr { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .table th, .table td { display: block; padding: 0; border: 0; width: auto; }
  .table tbody th { width: auto; }
  .table td::before { content: attr(data-label); display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
  .services__row { padding-block: var(--space-md); }
  .services__note { font-size: var(--text-md); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .mobile-call, .link, .seg label, .seg--paper label, .bars__fill, .nav__list a, .masthead__tel, a.services__row .services__name, .facts a { transition: none; }
  .btn:active { transform: none; }
}