/* Ekspert na godziny: front page sections. Tokens and shared components (.en-plate, .en-sheet, .en-call, .en-btn) live in main.css.
   Mobile first; desktop layout from 941px (same breakpoint as the header).
   Small text on home never goes below 16px (40+ audience): --fs-note. */

.en-hero, .en-paths, .en-services, .en-pricing, .en-about, .en-area, .en-reviews, .en-contact { --fs-note: 1rem; }

/* ---------- Hero ---------- */
.en-hero { padding-block: clamp(1.5rem, .75rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow-x: clip; }
.en-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.en-hero__h { max-width: 12.5ch; margin-bottom: var(--s-4); }
.en-hero__mark {
	text-decoration-line: underline; text-decoration-color: var(--brass);
	text-decoration-thickness: .16em; text-underline-offset: .06em; text-decoration-skip-ink: none;
}
.en-hero__sub { max-width: 36ch; margin-bottom: var(--s-4); }
/* One-line rate summary, mobile only: the price is on the first screen even though the plate sits under the photo. */
.en-hero__rate {
	display: grid; gap: .1rem; margin: 0 0 var(--s-5); padding-block: .5rem;
	border-block: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.45; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.en-hero__rate-l { white-space: nowrap; }
.en-hero__rate i { font-style: normal; padding-inline: .5em; color: var(--brass-text); font-weight: 800; }
.en-hero__rate b { font-weight: 800; font-stretch: 112%; }
.en-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; margin-bottom: var(--s-5); }
.en-call--xl { min-height: 60px; font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); padding-inline: 1.2em 1.5em; }
.en-hero__alt { min-height: 60px; }
.en-hero__urgent { display: flex; gap: .55rem; align-items: flex-start; color: var(--ink-2); font-size: var(--fs-note); margin: 0; max-width: 46ch; }
.en-hero__urgent .en-ico { flex: none; color: var(--loden); margin-top: .15em; }
.en-hero__media { display: grid; min-width: 0; }
.en-hero__photo { position: relative; margin: 0; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-3); isolation: isolate; }
/* Hue-only wash in warm brass: pulls the blue tool handles toward olive while the hands and sweater keep their tone. */
.en-hero__photo::after { content: ""; position: absolute; inset: 0; background: oklch(0.62 0.09 70); mix-blend-mode: color; opacity: .38; pointer-events: none; }
/* Warm grade: the source photo has a blue pegboard and the palette has no blue. Also cropped toward the hands. */
.en-hero__photo img {
	width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%;
	filter: saturate(.7) sepia(.12) hue-rotate(-8deg) contrast(1.03);
}
.en-hero__plate { position: relative; margin: -3.25rem var(--s-3) 0; box-shadow: 0 28px 50px -30px oklch(0.235 0.022 152 / .6); }
.en-hero__plate .en-plate__title { display: flex; justify-content: space-between; gap: var(--s-4); }
.en-hero__plate .en-plate__title span { color: var(--brass); }
.en-hero__plate .en-plate__row { padding-block: .5rem; }
.en-hero__plate .en-plate__value small { font-size: .9em; font-weight: 600; color: var(--loden-ink-2); }
.en-hero__plate .en-plate__note { font-size: var(--fs-note); line-height: 1.5; }

@media (min-width: 941px) {
	.en-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
	.en-hero__rate { display: none; }
	.en-hero__photo { aspect-ratio: 5 / 4; }
	.en-hero__plate { margin: -7rem 0 0 -4.5rem; }
}

/* ---------- Two paths (on loden) ---------- */
.en-paths { padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.en-paths__grid { display: grid; gap: var(--s-7); align-items: start; }
.en-path__h { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); }
.en-path--urgent { background: var(--loden-deep); border-radius: var(--r-2); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
/* Step style for sequences (same as the service pages): plain digit in a 2px ring, no fill. */
.en-steps { list-style: none; counter-reset: step; padding: 0; margin: var(--s-5) 0 var(--s-6); display: grid; gap: var(--s-4); }
.en-steps li { counter-increment: step; display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s-3); align-items: start; color: var(--loden-ink-2); }
.en-steps li::before {
	content: counter(step); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-top: -.2rem;
	border: 2px solid var(--loden-ink); border-radius: 50%; color: var(--loden-ink);
	font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; line-height: 1;
}
.en-steps b { color: var(--loden-ink); }
.en-path__foot { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-note); margin: var(--s-5) 0 0; }
.en-path__foot .en-ico { flex: none; color: var(--brass); margin-top: .15em; }
.en-path--list > p { font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); }
/* The example list is a job sheet, not a checklist: numbered 01, 02 like every list on the page, no fake checkboxes. */
.en-notepad {
	background: var(--paper); color: var(--ink); max-width: 36rem;
	border-radius: 3px; padding: var(--s-4) clamp(1rem, .8rem + 1vw, 1.75rem);
	margin: var(--s-5) 0 var(--s-6);
	box-shadow: 6px 6px 0 var(--loden-deep);
}
.en-notepad p { color: var(--ink); }
.en-notepad__title { font-weight: 700; font-stretch: 112%; margin: 0; padding-bottom: var(--s-2); border-bottom: 2px solid var(--brass-deep); }
.en-notepad .en-sheet__list > li { padding-block: .55rem; grid-template-columns: 2.2rem 1fr auto; }
.en-notepad .en-sheet__list > li:last-child { border-bottom: 1px solid var(--line); }
.en-notepad .en-sheet__meta, .en-svc .en-sheet__meta { font-size: var(--fs-note); }
.en-notepad__sum { display: flex; justify-content: space-between; gap: var(--s-4); margin: var(--s-3) 0 0; font-weight: 700; }
.en-path__go { background: var(--loden-ink); color: var(--loden-deep); border-color: var(--loden-ink); }
.en-path__go:hover { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }

@media (min-width: 941px) {
	.en-paths__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
	.en-path--list { padding-top: var(--s-7); }
}

/* ---------- Services ---------- */
.en-services__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); }
.en-services__head h2 { margin: 0 0 var(--s-4); }
.en-services__head .en-lead { margin: 0; }
.en-services__photo { margin: 0; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-3); }
.en-services__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); }
.en-services__sheets { display: grid; gap: var(--s-5); }
.en-svc { min-width: 0; display: flex; flex-direction: column; }
.en-svc__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); border-bottom: 2px solid var(--ink); padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
.en-svc__top h3 { margin: 0; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); font-stretch: 118%; }
.en-svc__rate { margin: 0; font-variant-numeric: tabular-nums; font-weight: 800; font-stretch: 112%; white-space: nowrap; }
.en-svc__lead { color: var(--ink-2); margin-bottom: var(--s-2); }
.en-svc .en-sheet__list { margin-bottom: auto; }
.en-svc__more { margin: var(--s-3) 0 0; font-weight: 700; }
.en-svc__more a { display: inline-flex; align-items: center; gap: .45em; min-height: 48px; }

@media (min-width: 760px) {
	.en-services__sheets { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 941px) {
	.en-services__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--s-7); margin-bottom: var(--s-7); }
	.en-services__photo { aspect-ratio: 16 / 10; }
	.en-services__sheets { gap: var(--s-6); }
}

/* ---------- Pricing rules (on loden) ---------- */
.en-pricing__head { display: grid; gap: var(--s-5); }
.en-rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
/* Job-sheet numbering, brass on loden: the same "01" as the lists, not a display numeral. */
.en-rules li {
	counter-increment: rule; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: var(--s-3);
	padding-block: var(--s-4); border-top: 1px solid var(--loden-line);
}
.en-rules li::before { content: counter(rule, decimal-leading-zero); grid-row: span 2; padding-top: .15em; font-weight: 700; font-stretch: 112%; color: var(--brass); font-variant-numeric: tabular-nums; }
.en-rules h3 { margin-bottom: var(--s-2); }
.en-rules p { margin: 0; }
@media (min-width: 941px) {
	.en-pricing__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
	.en-rules li { padding-block: var(--s-5); }
	.en-rules li:first-child { border-top: 0; padding-top: 0; }
}

/* Estimator UI: see estimator.css (handle "en-estimator"). */
.en-pricing .en-est { margin-top: var(--s-7); }
.en-pricing__intro { margin-top: var(--s-4); }
@media (min-width: 941px) { .en-pricing .en-est { margin-top: var(--s-8); } }

/* ---------- About ---------- */
.en-about__grid { display: grid; gap: var(--s-6); }
.en-about__photo { margin: 0; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-3); }
.en-about__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); }
.en-facts { margin: var(--s-5) 0 var(--s-6); border-top: 2px solid var(--ink); }
.en-facts__row { display: grid; gap: .1rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.en-facts dt { color: var(--ink-2); font-size: var(--fs-note); font-weight: 600; }
.en-facts dd { margin: 0; font-weight: 700; font-stretch: 106%; }
.en-facts dd.is-todo { font-weight: 500; color: var(--ink-2); }
.en-about__h3 { margin-bottom: var(--s-4); }
.en-included { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.en-included li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--s-3); align-items: start; }
.en-included .en-ico { color: var(--loden); margin-top: .2em; }
@media (min-width: 600px) {
	.en-facts__row { grid-template-columns: 10rem 1fr; gap: var(--s-4); align-items: baseline; }
	.en-facts dt { font-size: inherit; }
}
@media (min-width: 941px) {
	.en-about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
	.en-about__photo { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- Area map ---------- */
.en-area { background: var(--paper-2); }
.en-area__head { max-width: 48rem; margin-bottom: var(--s-6); }
.en-area__grid { display: grid; gap: var(--s-6); align-items: start; }
.en-map { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); padding: clamp(.5rem, .25rem + 1vw, 1.25rem); overflow: hidden; }
.en-map__svg { display: block; width: 100%; height: auto; overflow: hidden; font-family: var(--font); }
.en-map__ring { fill: none; stroke: var(--brass-deep); stroke-width: .35; stroke-dasharray: 1.1 1.1; }
.en-map__ringlabel { font-size: 2.6px; font-weight: 800; fill: var(--brass-text); paint-order: stroke; stroke: var(--paper); stroke-width: 1.2px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.en-map__city { fill: var(--loden); stroke: var(--loden-deep); stroke-width: .4; stroke-linejoin: round; }
.en-map__river { fill: none; stroke: var(--loden-line); stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
.en-map__rivername { font-size: 2.5px; font-weight: 600; fill: var(--ink-2); letter-spacing: .08px; }
.en-map__cityname { font-size: 3.6px; font-weight: 800; font-stretch: 118%; fill: var(--loden-ink); }
.en-map__town circle { fill: var(--ink); stroke: var(--paper); stroke-width: .6; }
.en-map__town text { font-size: 2.9px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 1.1px; stroke-linejoin: round; }
.en-map__town .en-map__min { font-size: 2.5px; font-weight: 600; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.en-map__cap { font-size: var(--fs-note); color: var(--ink-2); margin: var(--s-3) var(--s-2) var(--s-1); }
.en-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.en-table th, .en-table td { padding: .65rem .75rem .65rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.en-table th:last-child, .en-table td:last-child { padding-right: 0; }
.en-table thead th { font-size: var(--fs-note); line-height: 1.3; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.en-table thead th:not(:first-child), .en-table td { text-align: right; }
.en-table td { white-space: nowrap; }
.en-table tbody th { font-weight: 600; }
.en-table td:last-child { font-weight: 800; font-stretch: 112%; }
.en-table__city th, .en-table__city td { border-bottom-width: 2px; border-bottom-color: var(--ink-2); }
.en-area__note { display: flex; gap: .6rem; align-items: flex-start; margin: var(--s-5) 0 0; }
.en-area__note .en-ico { flex: none; color: var(--loden); margin-top: .2em; }
/* Phones: SVG text would render under 14px, so the map keeps only rings, dots and the city name; the table carries the data
   and the SVG <desc> still lists every town with its time. */
@media (max-width: 559px) {
	.en-map__labels { display: none; }
	.en-map__cityname { font-size: 4.6px; }
	.en-map { padding: .25rem; }
}
@media (min-width: 941px) {
	.en-area__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
}

/* ---------- Reviews ---------- */
.en-reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-7); }
.en-reviews__head h2, .en-reviews__head p { margin: 0; }
.en-reviews__all { display: inline-flex; gap: .4em; align-items: center; font-weight: 700; min-height: 48px; }
.en-reviews__gate { border: 1px dashed var(--ink-2); border-radius: var(--r-2); padding: var(--s-6); max-width: 46rem; }
.en-reviews__small { font-size: var(--fs-note); color: var(--ink-2); margin: var(--s-4) 0 0; }
.en-admin-note { display: inline-block; font-size: var(--fs-note); background: var(--paper-3); padding: .4rem .75rem; border-radius: var(--r-1); }
/* No widget yet: an honest pointer to the Google profile, compact so it does not pretend to be a testimonial wall. */
.en-reviews--plain { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); border-top: 1px solid var(--line); }
.en-reviews__plain { display: grid; gap: var(--s-4); }
.en-reviews__plain h2 { margin: 0; }
.en-reviews__body { max-width: 40rem; }
.en-reviews__body > p { margin: 0 0 var(--s-4); }
.en-reviews__body > p:last-child { margin-bottom: 0; }
.en-reviews__ask { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); }
.en-reviews__ask .en-ico { flex: none; color: var(--loden); margin-top: .2em; }
@media (min-width: 941px) {
	.en-reviews__plain { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: baseline; }
}

/* ---------- Contact ---------- */
.en-contact { background: var(--paper-2); }
.en-contact__grid { display: grid; gap: var(--s-7); }
.en-contact__info { min-width: 0; }
.en-contact__list { margin: var(--s-6) 0 0; border-top: 2px solid var(--ink); }
.en-contact__list > div { display: grid; gap: .15rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.en-contact__list dt { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-note); color: var(--ink-2); font-weight: 600; }
.en-contact__list dt .en-ico { color: var(--loden); }
.en-contact__list dd { margin: 0; overflow-wrap: anywhere; }
.en-contact__form { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.en-contact__fallback p:last-child { margin-bottom: 0; }
@media (min-width: 941px) {
	.en-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
}

/* ---------- Phone length budget ----------
   Each of these repeats content shown elsewhere: the hero and about photos carry the imagery, the estimator in #cennik
   shows every task, and the table carries the area data. Hidden only on narrow screens. */
@media (max-width: 759px) {
	.en-services, .en-about, .en-area, .en-pricing, .en-contact { --section: 3.25rem; }
	.en-services__photo, .en-svc__lead { display: none; }
	.en-services__head { margin-bottom: var(--s-5); }
	.en-notepad { display: none; }
	.en-path--list > p { margin-bottom: var(--s-5); }
}
@media (max-width: 599px) {
	.en-about__photo { display: none; }
}
@media (max-width: 559px) {
	.en-map { max-width: 17rem; margin-inline: auto; }
	.en-map__cap { text-align: center; }
}