/* Ekspert na godziny: tokens, base, shared components (header, footer, buttons, plate, sheet, forms, callbar, cookie notice).
   Page sections live in home.css / service.css / legal.css. See DESIGN.md. */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--paper: oklch(0.972 0.009 95);
	--paper-2: oklch(0.940 0.014 95);
	--paper-3: oklch(0.905 0.018 95);
	--ink: oklch(0.235 0.022 152);
	--ink-2: oklch(0.420 0.020 152);
	--line: oklch(0.840 0.016 120);
	--loden: oklch(0.365 0.058 152);
	--loden-deep: oklch(0.285 0.046 152);
	--loden-ink: oklch(0.955 0.012 120);
	--loden-ink-2: oklch(0.820 0.030 140);
	--loden-line: oklch(0.480 0.050 150);
	--brass: oklch(0.815 0.135 85);
	--brass-deep: oklch(0.700 0.130 78);
	--brass-ink: oklch(0.250 0.040 70);
	--brass-text: oklch(0.500 0.105 72); /* brass for small text on paper: ≥4.5:1 */
	--alert: oklch(0.520 0.170 32);

	--font: "Archivo", "Arial Narrow", Arial, system-ui, sans-serif;
	--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 */
	--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);
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-stretch: 100%;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 var(--s-4); color: inherit; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-stretch: 125%; font-weight: 800; line-height: .98; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-stretch: 118%; font-weight: 760; line-height: 1.04; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-stretch: 108%; 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; }
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-variant-numeric: tabular-nums; font-stretch: 112%; 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: 100; 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 {
	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-stretch: 112%; font-variant-numeric: tabular-nums; letter-spacing: .01em;
	transition: background-color .2s var(--ease);
}
.en-call:any-link, .en-call:hover { color: var(--brass-ink); } /* (0,2,0): beats ".en-footer a" and similar */
.en-call:hover { background: var(--brass-deep); }
.en-call .en-ico { width: 1.15em; height: 1.15em; }
.en-btn {
	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; font-stretch: 108%; text-decoration: none; cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.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); }
.en-btn--solid:hover { background: var(--loden-deep); border-color: var(--loden-deep); }
.en-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* ---------- Header ---------- */
.en-header {
	position: sticky; top: 0; z-index: 50;
	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; }
.en-logo__mark svg { width: 40px; height: 40px; }
.en-logo__word { display: flex; flex-direction: column; line-height: .95; color: var(--ink); }
.en-logo__word b { font-stretch: 125%; font-weight: 850; font-size: 1.3rem; letter-spacing: -.01em; }
.en-logo__word span { font-stretch: 100%; font-weight: 500; font-size: .92rem; color: var(--ink-2); }
.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 { text-decoration: none; font-weight: 600; font-stretch: 106%; padding-block: .4em; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease); }
.en-nav__list a:hover, .en-nav__list a[aria-current], .en-nav__list a.is-current { 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; }
.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: 49;
		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 .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
		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-stretch: 118%; 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; }
}

/* ---------- Rate plate (signature component) ---------- */
.en-plate {
	position: relative;
	background: var(--loden); color: var(--loden-ink);
	border-radius: var(--r-2);
	padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
	/* four screws */
	background-image:
		radial-gradient(circle at 14px 14px, var(--brass-deep) 3px, transparent 3.5px),
		radial-gradient(circle at calc(100% - 14px) 14px, var(--brass-deep) 3px, transparent 3.5px),
		radial-gradient(circle at 14px calc(100% - 14px), var(--brass-deep) 3px, transparent 3.5px),
		radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--brass-deep) 3px, transparent 3.5px);
}
.en-plate::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--loden-line); border-radius: calc(var(--r-2) - 4px); pointer-events: none; }
.en-plate__title { font-size: .92rem; font-weight: 700; font-stretch: 125%; text-transform: uppercase; letter-spacing: .12em; color: var(--loden-ink-2); margin: 0 0 var(--s-4); }
.en-plate__row { display: flex; align-items: baseline; gap: var(--s-3); padding-block: .55rem; }
.en-plate__row + .en-plate__row { border-top: 1px solid var(--loden-line); }
.en-plate__label { color: var(--loden-ink-2); }
.en-plate__lead { flex: 1; border-bottom: 2px dotted var(--loden-line); transform: translateY(-.3em); min-width: 1rem; }
.en-plate__value { font-variant-numeric: tabular-nums; font-stretch: 112%; font-weight: 800; color: var(--brass); white-space: nowrap; }
.en-plate__value--big { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1; }
.en-plate__note { font-size: var(--fs-small); color: var(--loden-ink-2); margin: var(--s-4) 0 0; }

/* ---------- 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 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 { content: counter(sheet, decimal-leading-zero); font-variant-numeric: tabular-nums; font-weight: 700; font-stretch: 112%; 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; font-stretch: 106%; }
.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);
}
.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; }
.en-field [aria-invalid="true"] { border-color: var(--alert); border-width: 2px; }
.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 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; gap: var(--s-7); padding-bottom: var(--s-7); }
.en-footer__name { font-stretch: 125%; font-weight: 800; font-size: 1.5rem; margin-bottom: var(--s-3); }
.en-footer__brand p:not(.en-footer__name) { color: var(--loden-ink-2); }
.en-footer__h { font-size: 1.05rem; font-stretch: 112%; 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: 60;
		display: grid; grid-template-columns: 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; }
}

/* ---------- 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: 70; 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 oklch(0.235 0.022 152 / .4);
}
.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 oklch(0.235 0.022 152 / .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 .6s var(--ease), transform .6s 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; }
}