/* Hallmark · system: DESIGN.md (workshop job sheet + plain rates) · genre: editorial · theme: custom (client navy + gold, National Park + Atkinson Hyperlegible Next) · audited 2026-10-15 */
/* Ekspert na godziny: tokens, base, shared components (header, footer, buttons, rates, sheet, forms, callbar, cookie notice).
   Page sections live in home.css / service.css / legal.css. See DESIGN.md. */

@font-face {
	font-family: "National Park";
	src: url("../fonts/national-park.woff2") format("woff2");
	font-weight: 500 800;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/atkinson-next.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}
/* Atkinson's zero is slashed and has no plain alternate. Digits 0-9 come from National Park
   (3.5 KB subset, wght 200-800); declared last so it wins for U+0030-0039 within the family. */
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/national-park-digits.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0030-0039;
}

:root {
	/* Client brand (logo received 2026-10-15): NAVY + GOLD. The token names are historical:
	   every "loden" token now holds the client's navy, every "brass" token the logo gold.
	   Logo reference: navy #0c2039, gold #e8b94a (mid) / #c8962f (deep). Neutrals are tinted toward the navy hue. */
	--paper: oklch(0.975 0.004 250);
	--paper-2: oklch(0.947 0.008 250);
	--paper-3: oklch(0.912 0.012 250);
	--ink: oklch(0.240 0.035 256);
	--ink-2: oklch(0.440 0.028 256);
	--line: oklch(0.855 0.013 250);
	--loden: oklch(0.320 0.070 256); /* navy for large bands (client navy lifted a step) */
	--loden-deep: oklch(0.255 0.058 256); /* = client logo navy: footer, call bar, pressed */
	--loden-ink: oklch(0.965 0.008 250);
	--loden-ink-2: oklch(0.840 0.030 250);
	--loden-line: oklch(0.440 0.060 254);
	--brass: oklch(0.812 0.137 86); /* = logo gold, mid */
	--brass-deep: oklch(0.703 0.129 81); /* = logo gold, deep */
	--brass-ink: oklch(0.255 0.058 256); /* navy on gold, as in the logo */
	--brass-text: oklch(0.505 0.105 75); /* gold for small text on paper: ≥4.5:1 */
	--alert: oklch(0.520 0.170 32);
	/* Semantic aliases (new code may use these; existing rules keep the historical names). */
	--brand-navy: var(--loden-deep);
	--brand-gold: var(--brass);

	/* Derived tints: shadows, translucent fills and illustration colours (one place, never inline). */
	--shadow-ink-08: oklch(0.240 0.035 256 / .08);
	--shadow-ink-12: oklch(0.240 0.035 256 / .12);
	--shadow-ink-35: oklch(0.240 0.035 256 / .35);
	--shadow-ink-40: oklch(0.240 0.035 256 / .4);
	--shadow-ink-45: oklch(0.240 0.035 256 / .45);
	--shadow-deep-60: oklch(0.15 0.035 256 / .6);
	--shadow-deep-85: oklch(0.15 0.035 256 / .85);
	--key-shadow: oklch(0.240 0.035 256 / .3); /* hero key, blurred floor shadow */
	--brass-side: oklch(0.600 0.115 78); /* hero key, shaded side face of the gold slab */
	--grid-line: oklch(0.320 0.070 256 / .10); /* squared paper of the to-do note */
	--margin-rule: oklch(0.703 0.129 81 / .55); /* to-do note margin line */
	--tape: oklch(0.905 0.040 88 / .86); /* to-do note tape */
	--peg: oklch(0.810 0.014 250); /* pegboard holes */
	--sil-loden: oklch(0.320 0.070 256 / .13); /* tool-wall painted outlines, hydraulika */
	--sil-brass: oklch(0.703 0.129 81 / .22); /* tool-wall painted outlines, elektryka */

	/* Display = National Park (OFL, routed-sign letterforms: headings, prices, numbers, buttons).
	   Body = Atkinson Hyperlegible Next (OFL, built for low-vision readers). Its zero is slashed,
	   so every figure that matters (prices, times) is set in the display face. */
	--font-display: "National Park", "Atkinson Hyperlegible Next", system-ui, sans-serif;
	--font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; /* legal <code> only */
	--fs-body: 1.125rem;
	--fs-small: 1rem; /* older audience: nothing smaller than 16px; body is 18px */
	--fs-h1: clamp(2.5rem, 1.4rem + 4.6vw, 5.4rem);
	--fs-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);

	--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
	--s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
	--section: clamp(4rem, 2.5rem + 6vw, 8.5rem);
	--gutter: clamp(1rem, 4vw, 3rem);
	--wrap: min(1240px, 100% - 2 * var(--gutter));
	--measure: 68ch;
	--r-1: 4px;
	--r-2: 10px;
	--ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* one-shot section choreography */
	--ease-drip: cubic-bezier(.5, 0, .9, .5); /* falling water drop (accelerates) */
	--dur-press: .12s; /* press scale-down */
	--dur-fast: .15s; /* small state changes: tabs, stepper, choices, table rows */
	--dur-state: .2s; /* hover / current colour and border changes */
	--dur-open: .25s; /* drawer, accordion, arrow nudge */
	--dur-reveal: .6s; /* scroll reveal, hero key fade-in */
	--z-skip: 100;
	--z-cookies: 70;
	--z-callbar: 60;
	--z-header: 50;
	--z-drawer: 49;
	--z-sticky: 5; /* estimator mini total */
	--header-h: 76px;
	--callbar-h: 0px; /* set on mobile, where the fixed call bar exists */
	--cookies-h: 0px; /* set by main.js while the cookie notice is visible */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%; scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
	/* fixed bars at the bottom never hide focused content (WCAG 2.4.11) */
	scroll-padding-bottom: calc(var(--callbar-h) + var(--cookies-h) + 1rem);
}
/* Root horizontal safety net. clip, not hidden: no scroll container, so every position: sticky keeps working. */
html, body { overflow-x: clip; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
/* overflow-wrap: anywhere only breaks a word that cannot fit the line on its own (long words at 320px). */
h1, h2, h3, h4 { margin: 0 0 var(--s-4); color: inherit; text-wrap: balance; font-family: var(--font-display); overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: .98; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 760; line-height: 1.04; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; }
p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.en-surface-loden :focus-visible, .en-footer :focus-visible, .en-callbar :focus-visible { outline-color: var(--brass); }
strong, b { font-weight: 700; }
.en-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 800; }
.en-nowrap { white-space: nowrap; }
.en-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.en-wrap { width: var(--wrap); margin-inline: auto; }
.en-section { padding-block: var(--section); }
.en-lead { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }
.en-ico { width: 1.25em; height: 1.25em; flex: none; }
.en-skip { position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-skip); background: var(--brass); color: var(--brass-ink); padding: var(--s-3) var(--s-4); border-radius: var(--r-1); font-weight: 700; }
.en-skip:focus { top: var(--s-4); }

/* Loden surface helper: any section can switch to the committed color. */
.en-surface-loden { background: var(--loden); color: var(--loden-ink); }
.en-surface-loden .en-lead, .en-surface-loden p { color: var(--loden-ink-2); }
.en-surface-loden h1, .en-surface-loden h2, .en-surface-loden h3 { color: var(--loden-ink); }
.en-surface-paper2 { background: var(--paper-2); }

/* ---------- Buttons ---------- */
.en-call { font-family: var(--font-display);
	display: inline-flex; align-items: center; gap: .6em;
	min-height: 52px; padding: .7em 1.4em .7em 1.15em;
	background: var(--brass); color: var(--brass-ink);
	border-radius: 999px; text-decoration: none;
	font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em;
	transition: background-color var(--dur-state) var(--ease), transform var(--dur-press) var(--ease);
}
.en-call:any-link, .en-call:hover { color: var(--brass-ink); } /* (0,2,0): beats ".en-footer a" and similar */
@media (hover: hover) and (pointer: fine) { .en-call:hover { background: var(--brass-deep); } }
.en-call .en-ico { width: 1.15em; height: 1.15em; }
.en-btn { font-family: var(--font-display);
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 52px; padding: .7em 1.3em;
	border: 2px solid currentColor; border-radius: var(--r-1); background: transparent; color: inherit;
	font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
	transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), transform var(--dur-press) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.en-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
	.en-surface-loden .en-btn:hover { background: var(--loden-ink); color: var(--loden-deep); border-color: var(--loden-ink); }
}
.en-btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .en-btn--solid:hover { background: var(--loden-deep); border-color: var(--loden-deep); } }
/* Press feedback (touch has no hover): a short, small scale-down. */
.en-call:active, .en-btn:active:not(:disabled, [aria-disabled="true"]) { transform: scale(.97); }
/* Disabled: the native attribute (or aria-disabled on links) plus a not-allowed cursor, never colour alone. */
.en-btn:disabled, .en-btn[aria-disabled="true"] { cursor: not-allowed; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
.en-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .en-linkbtn:hover { text-decoration-thickness: 2px; } }

/* ---------- Header ---------- */
.en-header {
	position: sticky; top: 0; z-index: var(--z-header);
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.en-header__in { display: flex; align-items: center; gap: var(--s-6); min-height: var(--header-h); }
.en-logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--loden); flex: none; }
/* Lockup after the client's logo: emblem (assets/img/emblem-*) + "EKSPERT" in gold over "NA GODZINY" in navy,
   both lines set to the same width as in the logo. The tagline of the logo is not used. */
.en-logo__mark { display: block; flex: none; }
.en-logo__mark img { display: block; width: auto; height: 44px; }
.en-logo__word { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-display); text-transform: uppercase; line-height: .9; }
.en-logo__word b { font-weight: 800; font-size: 1.5rem; letter-spacing: .015em; color: var(--brass-deep); }
.en-logo__word span { font-weight: 700; font-size: 1.02rem; letter-spacing: .068em; margin-top: .14em; color: var(--loden-deep); }
.en-logo__img { max-height: 52px; width: auto; }
.en-nav { margin-left: auto; }
.en-nav__list { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.en-nav__list a { font-family: var(--font-display); text-decoration: none; font-weight: 600; padding-block: .4em; border-bottom: 2px solid transparent; transition: border-color var(--dur-state) var(--ease); }
.en-nav__list a[aria-current], .en-nav__list a.is-current { border-bottom-color: var(--brass-deep); }
@media (hover: hover) and (pointer: fine) { .en-nav__list a:hover { border-bottom-color: var(--brass-deep); } }
.en-nav__meta, .en-nav__call { display: none; }
.en-header__cta { display: flex; align-items: center; gap: var(--s-3); }
.en-burger { display: none; width: 52px; height: 52px; align-items: center; justify-content: center; background: none; border: 2px solid var(--line); border-radius: var(--r-1); color: var(--ink); cursor: pointer; transition: border-color var(--dur-state) var(--ease), transform var(--dur-press) var(--ease); }
@media (hover: hover) and (pointer: fine) { .en-burger:hover { border-color: var(--ink); } }
.en-burger:active { transform: scale(.97); }
.en-burger__close { display: none; }
.en-burger[aria-expanded="true"] .en-burger__open { display: none; }
.en-burger[aria-expanded="true"] .en-burger__close { display: block; }

@media (max-width: 1080px) {
	.en-nav__list { gap: var(--s-4); }
	.en-call--header span { font-size: .95rem; }
}
@media (max-width: 940px) {
	:root { --header-h: 64px; }
	.en-burger { display: inline-flex; margin-left: auto; }
	.en-header__cta { display: none; }
	/* Drawer: the header has no transform/filter, so position:fixed is relative to the viewport. */
	.en-nav {
		position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-drawer);
		background: var(--paper); padding: var(--s-5) var(--gutter) var(--s-7);
		display: flex; flex-direction: column; gap: var(--s-6);
		visibility: hidden; opacity: 0; transform: translateY(-8px);
		transition: opacity var(--dur-open) var(--ease), transform var(--dur-open) var(--ease), visibility 0s var(--dur-open);
		overflow-y: auto;
	}
	.en-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.en-nav__list { flex-direction: column; gap: 0; }
	.en-nav__list a { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: 1.5rem; font-weight: 760; }
	.en-nav__list a[aria-current], .en-nav__list a.is-current { border-bottom-color: var(--brass-deep); box-shadow: inset 0 -2px 0 var(--brass-deep); }
	.en-nav__call { display: block; }
	.en-nav__call .en-call { width: 100%; justify-content: center; }
	.en-nav__meta { display: flex; gap: .5em; align-items: flex-start; color: var(--ink-2); margin: 0; }
	.en-nav__meta .en-ico { margin-top: .2em; }
	body.en-nav-open { overflow: hidden; }
	body.en-nav-open .en-callbar, body.en-nav-open .en-cookies { display: none; }
}

/* ---------- Rates (template-parts/rates.php): prices as plain content ----------
   One lead statement (2026-10-21: "Wycena indywidualna" + one line how; no enlarged number), then a <dl>: term left,
   value right in tabular figures, same colour as the term, hairline rules between rows. "Standardowe prace … zł/h" is the
   one hourly rate on a page. No card, frame, leaders, caps labels or accent values (gate 59).
   Colours follow the surface: ink on paper, loden-ink on loden. Variants: --full (home #cennik), --hero (service heroes). */
.en-rates { --rates-ink: var(--ink); --rates-ink-2: var(--ink-2); --rates-line: var(--line); color: var(--rates-ink); min-width: 0; }
.en-surface-loden .en-rates { --rates-ink: var(--loden-ink); --rates-ink-2: var(--loden-ink-2); --rates-line: var(--loden-line); }
.en-rates .en-rates__lead { display: grid; gap: .5rem; margin: 0; color: var(--rates-ink); }
.en-rates__big {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.75rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance;
}
.en-rates__per { max-width: 30ch; font-size: var(--fs-body); font-weight: 500; line-height: 1.45; color: var(--rates-ink-2); }
.en-rates__body { min-width: 0; }
.en-rates__list { margin: var(--s-5) 0 0; }
.en-rates__row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: baseline;
	padding-block: .6rem; border-bottom: 1px solid var(--rates-line);
}
.en-rates__row:first-child { border-top: 1px solid var(--rates-line); }
.en-rates__row dt { line-height: 1.35; }
.en-rates__val { margin: 0; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.en-rates__note { grid-column: 1 / -1; margin: .3rem 0 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.5; color: var(--rates-ink-2); }

/* ---------- Cistern plate drawing (template-parts/cistern-plate.php, decorative) ----------
   Tool-wall line language: 2px ink strokes, paper bodies, gold big button, navy small button, tile joints in --line. */
.en-plate { display: block; height: auto; overflow: visible; }
.en-plate--icon { width: 4rem; }
.en-plate--scene { width: 100%; max-width: 26rem; }
.en-plate__wall { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.en-plate__joint { fill: none; stroke: var(--line); stroke-width: 1.5; }
.en-plate__hole { fill: var(--loden-deep); stroke: var(--ink); stroke-width: 2; }
.en-plate__body { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.en-plate__btn { fill: var(--brass); stroke: var(--ink); stroke-width: 2; }
.en-plate__btn2 { fill: var(--loden); stroke: var(--ink); stroke-width: 2; }
.en-plate__line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.en-plate__shade { fill: var(--shadow-ink-12); }

/* ---------- Job sheet ---------- */
.en-sheet {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	padding: var(--s-5) clamp(1.1rem, .8rem + 1vw, 1.8rem);
}
.en-sheet__list { list-style: none; margin: 0; padding: 0; counter-reset: sheet; }
.en-sheet__list > li {
	counter-increment: sheet;
	display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: baseline;
	padding-block: .7rem; border-bottom: 1px solid var(--line);
}
.en-sheet__list > li:last-child { border-bottom: 0; }
.en-sheet__list > li::before { font-family: var(--font-display); content: counter(sheet, decimal-leading-zero); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brass-text); }
.en-sheet__meta { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-small); }

/* ---------- Forms ---------- */
.en-field { display: grid; gap: .4rem; margin-bottom: var(--s-5); }
.en-field label, .en-field legend { font-weight: 600; }
.en-field .en-hint { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
.en-input, .en-field input[type="text"], .en-field input[type="tel"], .en-field input[type="email"], .en-field select, .en-field textarea {
	width: 100%; min-height: 52px; padding: .75rem .9rem;
	font: inherit; color: var(--ink); background: var(--paper);
	border: 1px solid var(--ink-2); border-radius: var(--r-1);
	transition: border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.en-field :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea):hover:not([aria-invalid="true"]) { border-color: var(--ink); }
}
.en-field textarea { min-height: 140px; resize: vertical; }
.en-field input:focus-visible, .en-field select:focus-visible, .en-field textarea:focus-visible { outline: 3px solid var(--loden); outline-offset: 1px; }
/* 2px red edge without a layout shift: the border stays 1px, an inset ring adds the second pixel. */
.en-field [aria-invalid="true"] { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
.en-error { display: flex; gap: .4em; align-items: center; color: var(--alert); font-size: var(--fs-small); font-weight: 600; margin: 0; }
.en-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .8rem; align-items: start; font-size: var(--fs-small); }
.en-check input { width: 28px; height: 28px; margin: 0; accent-color: var(--loden); cursor: pointer; }
.en-check label { cursor: pointer; padding-block: .1rem; }
.en-hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.en-footer { background: var(--loden-deep); color: var(--loden-ink); padding-top: var(--s-8); }
.en-footer a:not(.en-call) { color: var(--loden-ink); }
.en-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr; /* auto minimum on purpose: the e-mail link is unbreakable and sizes its column */ gap: var(--s-7); padding-bottom: var(--s-7); }
.en-footer__name { display: flex; align-items: center; gap: .8rem; margin-bottom: var(--s-4); }
.en-footer__name .en-logo__mark img { height: 64px; }
.en-footer__name .en-logo__word b { font-size: 1.85rem; color: var(--brass); }
.en-footer__name .en-logo__word span { font-size: 1.26rem; color: var(--loden-ink); }
.en-footer__brand p:not(.en-footer__name) { color: var(--loden-ink-2); }
.en-footer__h { font-family: var(--font-display); font-size: 1.05rem; font-weight: 750; letter-spacing: 0; color: var(--loden-ink); margin-bottom: var(--s-3); }
.en-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); }
.en-footer__list li { display: flex; gap: .6rem; align-items: flex-start; }
.en-footer__list .en-ico { color: var(--brass); margin-top: .2em; }
/* tap targets ≥44px: links and the cookie-settings button grow to 44px, icon rows align with the first line */
.en-footer__list a, .en-footer__legal a, .en-footer__legal .en-linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
.en-footer .en-linkbtn { color: var(--loden-ink); }
.en-footer__list li:has(> a) .en-ico { margin-top: calc((44px - 1.25em) / 2); }
.en-footer__list li > span { padding-block: .55rem; }
.en-footer__list li:has(> span) .en-ico { margin-top: calc(.55rem + .2em); }
.en-footer__legal-data { color: var(--loden-ink-2); font-size: var(--fs-small); }
.en-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--loden-line); font-size: var(--fs-small); color: var(--loden-ink-2); }
.en-footer__bottom p { margin: 0; }
.en-footer__bottom p { align-self: center; }
.en-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); list-style: none; margin: 0; padding: 0; }
@media (max-width: 940px) {
	.en-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
	.en-footer__brand { grid-column: 1 / -1; }
	.en-footer { padding-bottom: var(--callbar-h); }
}
@media (max-width: 560px) { .en-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Mobile call bar ---------- */
.en-callbar { display: none; }
@media (max-width: 940px) {
	:root { --callbar-h: 72px; }
	.en-callbar {
		position: fixed; inset: auto 0 0 0; z-index: var(--z-callbar);
		display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
		min-height: calc(var(--callbar-h) + env(safe-area-inset-bottom));
		padding: .5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom));
		background: var(--loden-deep); border-top: 1px solid var(--loden-line);
	}
	.en-callbar .en-call { justify-content: center; width: 100%; white-space: nowrap; }
	@media (max-width: 380px) { .en-callbar .en-call { font-size: 1rem; padding-inline: .9em; } }
	.en-callbar__form { display: inline-flex; align-items: center; min-height: 48px; color: var(--loden-ink); font-weight: 700; padding: 0 .4rem; }
	/* 320-360px: "Formularz" otherwise ends past the viewport edge. Same look, tighter spacing. */
	@media (max-width: 360px) { .en-callbar { gap: var(--s-2); } .en-callbar__form { padding-inline: 0; } }
}

/* ---------- Cookie notice ----------
   A slim bar, not a dialog: bottom right on desktop (clear of the hero buttons on the left),
   full width directly above the call bar on mobile. Its height is reserved via --cookies-h (main.js). */
.en-cookies {
	position: fixed; z-index: var(--z-cookies); right: var(--gutter); bottom: var(--s-4);
	width: min(40rem, 50vw - 2 * var(--gutter));
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: center;
	padding: .8rem .85rem .8rem 1.2rem;
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--ink-2); border-radius: var(--r-2);
	box-shadow: 0 14px 34px -18px var(--shadow-ink-40);
}
.en-cookies[hidden] { display: none; }
.en-cookies__text { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink); max-width: none; }
.en-cookies__text a { font-weight: 600; white-space: nowrap; }
.en-cookies__actions { display: flex; gap: var(--s-2); }
.en-cookies .en-btn { min-height: 44px; padding: .4em 1em; font-size: 1rem; white-space: nowrap; }
html.en-cookies-on .en-footer { padding-bottom: calc(var(--cookies-h) + var(--s-4)); }
@media (max-width: 940px) {
	.en-cookies {
		left: 0; right: 0; bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom)); width: auto;
		grid-template-columns: minmax(0, 1fr); gap: var(--s-2);
		padding: .75rem var(--gutter) .8rem;
		border: 0; border-top: 1px solid var(--ink-2); border-radius: 0;
		box-shadow: 0 -10px 24px -16px var(--shadow-ink-35);
	}
	.en-cookies .en-btn { flex: 1 1 0; padding-inline: .6em; }
	html.en-cookies-on .en-footer { padding-bottom: calc(var(--callbar-h) + var(--cookies-h)); }
}

/* ---------- Reveal motion (only with JS, only without reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
	.js [data-reveal].is-in { opacity: 1; transform: none; }
	.js [data-reveal-delay="1"] { transition-delay: .08s; }
	.js [data-reveal-delay="2"] { transition-delay: .16s; }
	.js [data-reveal-delay="3"] { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}