/* =========================================================
   Zgłoszenie Solofit

   Sections for the Zgłoszenie and Kontakt pages, in the
   home page's language.

   .sfz  the report form, dark. It opens the Zgłoszenie page
         under the fixed header; data-sf-flush tells the
         header not to pad the body, so the section clears the
         bar itself and the dark runs right up to the top.
   .sfn  the Kontakt page opening, dark, the same way: title
         and three shortcuts to the right place.
   .sfc  contact, cream: e-mail, address, access, business
         details and a map. Shared by both pages.

   All carry the home page's background system: the same
   shadow on the top and bottom edge, so joins disappear, a
   soft pool of light, and one hairline glyph in Chakra Petch
   geometry that may leave the screen sideways but never
   through the top or bottom.

   Spacing that scales with the screen uses --sf-screen from
   snippet 10385, the screen height in pixels fixed while the
   page is open. Never svh: on a phone it follows the browser's
   bars, and here the keyboard comes and goes as well.
   ========================================================= */

.sfz,
.sfc,
.sfn {
	--sfz-ink: #0d0d0d;
	--sfz-paper: #f2f0eb;
	--sfz-accent: #f2b705;
	--sfz-bad: #ff8a75;
	--sfz-head: "Chakra Petch";
	--sfz-body: "Barlow";
	--sfz-ease: cubic-bezier(.2, .8, .2, 1);
	--sfz-screen: var(--sf-screen, 820px);

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	font-family: var(--sfz-body), sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.sfz *,
.sfz *::before,
.sfz *::after,
.sfc *,
.sfc *::before,
.sfc *::after,
.sfn *,
.sfn *::before,
.sfn *::after {
	box-sizing: border-box;
}

/* Several of these elements set their own display, which would
   otherwise beat the hidden attribute. */
.sfz [hidden],
.sfc [hidden],
.sfn [hidden] {
	display: none !important;
}

.sfz ::selection,
.sfn ::selection {
	background: rgba(242, 183, 5, .28);
	color: var(--sfz-paper);
}

.sfc ::selection {
	background: rgba(242, 183, 5, .5);
	color: var(--sfz-ink);
}

/* ---------- background layers ---------- */

.sfz::before,
.sfz::after,
.sfc::before,
.sfc::after,
.sfn::before,
.sfn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.sfz,
.sfn {
	background: var(--sfz-ink);
	color: var(--sfz-paper);
	box-shadow:
		inset 0 170px 150px -140px rgba(0, 0, 0, .55),
		inset 0 -170px 150px -140px rgba(0, 0, 0, .55);
}

.sfz::before,
.sfn::before {
	background: radial-gradient(ellipse 95% 620px at 50% 420px, rgba(242, 240, 235, .055), rgba(242, 240, 235, 0) 70%);
	background: radial-gradient(ellipse min(1200px, 95vw) 620px at 50% 420px, rgba(242, 240, 235, .055), rgba(242, 240, 235, 0) 70%);
}

/* A warning sign: something is wrong. */
.sfz::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 280'%3E%3Cpath fill='none' stroke='rgba(242,183,5,.22)' stroke-width='1' vector-effect='non-scaling-stroke' d='M136 14H164L292 238V252L278 266H22L8 252V238Z M136 96H164L172 104V170L164 178H136L128 170V104Z M136 198H164L172 206V226L164 234H136L128 226V206Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: clamp(11rem, 44vw, 15rem) auto;
	background-position: right -3.5rem top calc(var(--sfh-h, 74px) + 1.25rem);
}

/* A speech bubble with three dots: someone is typing. */
.sfn::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 260'%3E%3Cpath fill='none' stroke='rgba(242,183,5,.22)' stroke-width='1' vector-effect='non-scaling-stroke' d='M34 14H266L290 38V168L266 192H132L78 246V192H34L10 168V38Z M86 90H106L112 96V112L106 118H86L80 112V96Z M140 90H160L166 96V112L160 118H140L134 112V96Z M194 90H214L220 96V112L214 118H194L188 112V96Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: clamp(11rem, 44vw, 15rem) auto;
	background-position: right -3.5rem top calc(var(--sfh-h, 74px) + 1.25rem);
}

.sfc {
	background: var(--sfz-paper);
	color: var(--sfz-ink);
	box-shadow:
		inset 0 170px 150px -140px rgba(60, 50, 30, .07),
		inset 0 -170px 150px -140px rgba(60, 50, 30, .07);
}

.sfc::before {
	background: radial-gradient(ellipse 95% 620px at 50% 420px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
	background: radial-gradient(ellipse min(1200px, 95vw) 620px at 50% 420px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
}

/* An envelope: write to us. */
.sfc::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 240'%3E%3Cpath fill='none' stroke='rgba(13,13,13,.1)' stroke-width='1' vector-effect='non-scaling-stroke' d='M32 20H288L310 42V198L288 220H32L10 198V42Z M26 44L160 138L294 44 M12 200L122 112 M308 200L198 112'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: clamp(11rem, 42vw, 15rem) auto;
	background-position: right -3.5rem top 2.5rem;
}

/* =========================================================
   REPORT FORM
   ========================================================= */

.sfz__inner {
	position: relative;
	display: grid;
	gap: 2.75rem;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: calc(var(--sfh-h, 74px) + 2.25rem) 1.15rem 4.5rem;
}

/* ---------- intro ---------- */

.sfz__intro {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	min-width: 0;
}

.sfz__head {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.sfz__eyebrow,
.sfc__eyebrow,
.sfn__eyebrow {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-family: var(--sfz-body), sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #8a8a85;
}

.sfz__dot,
.sfc__dot,
.sfn__dot {
	flex: none;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--sfz-accent);
}

.sfz__title {
	margin: 0;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: clamp(2.3rem, 10vw, 3rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sfz-paper);
	text-wrap: balance;
}

.sfz__title em {
	font-style: italic;
	color: var(--sfz-accent);
}

.sfz__lead {
	max-width: 34rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(242, 240, 235, .76);
	text-wrap: pretty;
}

.sfz__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfz__tags li {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .45rem .8rem;
	border: 1px solid rgba(242, 240, 235, .14);
	border-radius: 3px;
	font-size: .86rem;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(242, 240, 235, .82);
}

/* An octagonal dot, the Chakra Petch full stop. */
.sfz__tags li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--sfz-accent);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.sfz__next {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.sfz__next-t {
	margin: 0;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #8a8a85;
}

.sfz__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(242, 240, 235, .1);
}

.sfz__step {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: .75rem;
	margin: 0;
	padding: .95rem 0;
	border-bottom: 1px solid rgba(242, 240, 235, .1);
}

.sfz__step-n {
	padding-top: .2rem;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: .86rem;
	letter-spacing: .04em;
	color: var(--sfz-accent);
}

.sfz__step-b {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.sfz__step-b strong {
	font-family: var(--sfz-head), sans-serif;
	font-weight: 600;
	font-size: 1.06rem;
	line-height: 1.3;
	color: var(--sfz-paper);
}

.sfz__step-b span {
	font-size: .93rem;
	line-height: 1.5;
	color: rgba(242, 240, 235, .62);
}

.sfz__urgent {
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
	margin: 0;
	padding: .95rem 1.05rem;
	border: 1px solid rgba(242, 183, 5, .3);
	border-radius: 3px;
	background: rgba(242, 183, 5, .06);
	font-size: .93rem;
	line-height: 1.5;
	color: rgba(242, 240, 235, .8);
}

.sfz__urgent .sfz-i {
	width: 1.35rem;
	height: 1.35rem;
	color: var(--sfz-accent);
}

.sfz__urgent strong {
	font-weight: 600;
	color: var(--sfz-paper);
}

/* Pinned on every state: the theme turns links navy on hover and tap. */
.sfz .sfz__urgent a,
.sfz .sfz__urgent a:hover,
.sfz .sfz__urgent a:focus,
.sfz .sfz__urgent a:active,
.sfz .sfz__urgent a:visited {
	font-weight: 700;
	color: var(--sfz-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- panel ---------- */

.sfz__panel {
	position: relative;
	min-width: 0;
	padding: 1.5rem 1.15rem 1.6rem;
	border: 1px solid rgba(242, 240, 235, .09);
	border-radius: 3px;
	background: #121212;
	box-shadow:
		0 40px 80px -44px rgba(0, 0, 0, .9),
		0 8px 24px -18px rgba(0, 0, 0, .7);
}

/* The short chamfered bar the home page uses to mark what is live. */
.sfz__panel::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 1.15rem;
	width: 44px;
	height: 3px;
	background: var(--sfz-accent);
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
}

.sfz__form {
	display: grid;
	gap: 1.35rem;
	margin: 0;
}

.sfz__form-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .35rem 1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid rgba(242, 240, 235, .08);
}

.sfz__form-t {
	margin: 0;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--sfz-paper);
}

.sfz__form-note {
	margin: 0;
	font-size: .82rem;
	color: rgba(242, 240, 235, .5);
}

.sfz__status {
	margin: 0;
	padding: .85rem 1rem;
	border-left: 2px solid var(--sfz-bad);
	background: rgba(255, 138, 117, .08);
	font-size: .93rem;
	line-height: 1.5;
	color: #ffc9bf;
	outline: none;
}

.sfz__row {
	display: grid;
	gap: 1.35rem;
}

.sfz__field {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

.sfz__label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.sfz__label {
	font-family: var(--sfz-body), sans-serif;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: rgba(242, 240, 235, .72);
}

.sfz__opt {
	margin-left: .35rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: none;
	color: rgba(242, 240, 235, .42);
}

.sfz__count {
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: rgba(242, 240, 235, .42);
}

.sfz__count.is-near {
	color: var(--sfz-accent);
}

/* Scoped with extra weight: the theme styles every input type, including
   their focus state. */
.sfz .sfz__input {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: .8rem .95rem;
	border: 1px solid rgba(242, 240, 235, .16);
	border-radius: 3px;
	background: rgba(242, 240, 235, .035);
	box-shadow: none;
	color: var(--sfz-paper);
	font-family: var(--sfz-body), sans-serif;
	font-size: 1rem;
	line-height: 1.4;
	text-align: left;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	color-scheme: dark;
}

.sfz .sfz__input::placeholder {
	color: rgba(242, 240, 235, .32);
	opacity: 1;
}

.sfz .sfz__input::-webkit-date-and-time-value {
	text-align: left;
}

.sfz .sfz__input:hover {
	border-color: rgba(242, 240, 235, .3);
}

.sfz .sfz__input:focus {
	border-color: var(--sfz-accent);
	background: rgba(242, 183, 5, .04);
	box-shadow: 0 0 0 3px rgba(242, 183, 5, .16);
}

.sfz .sfz__input--area {
	min-height: 9.5rem;
	resize: vertical;
}

.sfz .is-invalid .sfz__input,
.sfz .is-invalid .sfz__input:hover {
	border-color: var(--sfz-bad);
}

.sfz .is-invalid .sfz__input:focus {
	box-shadow: 0 0 0 3px rgba(255, 138, 117, .2);
}

.sfz__err {
	margin: 0;
	font-size: .86rem;
	line-height: 1.4;
	color: var(--sfz-bad);
}

.sfz__hint {
	margin: 0;
	font-size: .82rem;
	line-height: 1.45;
	color: rgba(242, 240, 235, .48);
}

/* ---------- files ---------- */

.sfz__drop {
	position: relative;
}

.sfz .sfz__drop-lbl {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 8.75rem;
	margin: 0;
	padding: 1.4rem 1rem;
	border: 1px dashed rgba(242, 240, 235, .26);
	border-radius: 3px;
	background:
		repeating-linear-gradient(-45deg, rgba(242, 240, 235, .022) 0 10px, rgba(242, 240, 235, 0) 10px 20px);
	text-align: center;
	color: rgba(242, 240, 235, .72);
	cursor: pointer;
}

.sfz__drop-ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: .2rem;
	border: 1px solid rgba(242, 183, 5, .38);
	border-radius: 3px;
	background: rgba(242, 183, 5, .08);
	color: var(--sfz-accent);
}

.sfz__drop-ico .sfz-i {
	width: 22px;
	height: 22px;
}

.sfz__drop-t {
	font-family: var(--sfz-head), sans-serif;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--sfz-paper);
}

.sfz__drop-s {
	font-size: .86rem;
	line-height: 1.4;
	color: rgba(242, 240, 235, .52);
}

.sfz__drop-s--fine {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.sfz__drop-s--fine {
		display: inline;
	}

	.sfz__drop-s--touch {
		display: none;
	}
}

.sfz__drop:hover .sfz__drop-lbl,
.sfz__drop.is-over .sfz__drop-lbl {
	border-color: var(--sfz-accent);
	background-color: rgba(242, 183, 5, .05);
}

.sfz__drop.is-over .sfz__drop-lbl {
	border-style: solid;
}

.sfz__drop:focus-within .sfz__drop-lbl {
	border-color: var(--sfz-accent);
	box-shadow: 0 0 0 3px rgba(242, 183, 5, .16);
}

.sfz .is-invalid .sfz__drop-lbl {
	border-color: var(--sfz-bad);
}

/* Without the script, the browser's own file input is the control. */
.sfz .sfz__file {
	display: block;
	width: 100%;
	margin: .6rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(242, 240, 235, .7);
	font-size: .9rem;
}

/* With it, the drop zone is, and the input only holds focus. */
.sfz--js .sfz__file {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.sfz__files {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfz__files:empty {
	display: none;
}

.sfz__fi {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: .8rem;
	margin: 0;
	padding: .5rem;
	border: 1px solid rgba(242, 240, 235, .1);
	border-radius: 3px;
	background: rgba(242, 240, 235, .03);
}

.sfz__fi-thumb {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 2px;
	background: #1c1c1c;
	color: var(--sfz-accent);
}

.sfz__fi-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sfz__fi-thumb svg {
	width: 22px;
	height: 22px;
}

.sfz__fi-meta {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.sfz__fi-name {
	overflow: hidden;
	font-size: .92rem;
	color: var(--sfz-paper);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sfz__fi-size {
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	color: rgba(242, 240, 235, .5);
}

.sfz .sfz__fi-x,
.sfz .sfz__fi-x:hover,
.sfz .sfz__fi-x:focus,
.sfz .sfz__fi-x:active {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(242, 240, 235, .14);
	border-radius: 3px;
	background: transparent;
	box-shadow: none;
	color: rgba(242, 240, 235, .7);
	cursor: pointer;
}

.sfz .sfz__fi-x:hover,
.sfz .sfz__fi-x:focus-visible {
	border-color: rgba(242, 183, 5, .55);
	background: rgba(242, 183, 5, .1);
	color: var(--sfz-accent);
}

.sfz .sfz__fi-x:focus-visible {
	outline: 2px solid var(--sfz-accent);
	outline-offset: 2px;
}

.sfz__fi-x svg {
	width: 18px;
	height: 18px;
}

/* ---------- consent ---------- */

.sfz .sfz__consent {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: .85rem;
	row-gap: .5rem;
	align-items: start;
}

.sfz .sfz__check {
	display: block;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid rgba(242, 240, 235, .32);
	border-radius: 3px;
	background: rgba(242, 240, 235, .035) center / 14px 14px no-repeat;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sfz .sfz__check:hover {
	border-color: rgba(242, 240, 235, .5);
}

.sfz .sfz__check:checked {
	border-color: var(--sfz-accent);
	background-color: var(--sfz-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%230d0d0d' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E");
}

.sfz .sfz__check:focus-visible {
	outline: 2px solid var(--sfz-accent);
	outline-offset: 3px;
}

.sfz .is-invalid .sfz__check {
	border-color: var(--sfz-bad);
}

.sfz__check-lbl {
	margin: 0;
	font-size: .93rem;
	line-height: 1.5;
	color: rgba(242, 240, 235, .8);
	cursor: pointer;
}

.sfz__consent .sfz__err {
	grid-column: 2;
}

.sfz .sfz__check-lbl a,
.sfz .sfz__check-lbl a:hover,
.sfz .sfz__check-lbl a:focus,
.sfz .sfz__check-lbl a:active,
.sfz .sfz__check-lbl a:visited,
.sfz .sfz__legal a,
.sfz .sfz__legal a:hover,
.sfz .sfz__legal a:focus,
.sfz .sfz__legal a:active,
.sfz .sfz__legal a:visited {
	color: var(--sfz-paper);
	text-decoration: underline;
	text-decoration-color: rgba(242, 183, 5, .75);
	text-underline-offset: 3px;
}

/* ---------- honeypot ---------- */

.sfz .sfz__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- send ---------- */

.sfz__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .8rem;
	padding-top: .35rem;
}

/* Three classes so this beats .btn-primary.btn-primary. */
.sfz .sfz__submit.sfz__submit {
	width: 100%;
	gap: .7rem;
}

.sfz__submit .sfz-i {
	width: 18px;
	height: 18px;
}

.sfz .sfz__submit.sfz__submit:disabled {
	cursor: progress;
	opacity: .9;
	transform: none;
}

.sfz__progress {
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(242, 240, 235, .1);
}

.sfz__progress i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sfz-accent);
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
	transition: transform .2s linear;
}

.sfz__legal {
	margin: 0;
	font-size: .8rem;
	line-height: 1.55;
	color: rgba(242, 240, 235, .46);
}

/* ---------- sent ---------- */

.sfz__done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: .5rem 0 .25rem;
	outline: none;
}

.sfz__done-ico {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	background: var(--sfz-accent);
	color: var(--sfz-ink);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.sfz__done-ico .sfz-i {
	width: 30px;
	height: 30px;
	stroke-width: 2.4;
}

.sfz__done-t {
	margin: 0;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 6vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--sfz-paper);
	text-wrap: balance;
}

.sfz__done-p {
	max-width: 30rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(242, 240, 235, .76);
}

.sfz__done-p strong {
	font-family: var(--sfz-head), sans-serif;
	color: var(--sfz-accent);
}

.sfz .sfz__again,
.sfz .sfz__again:hover,
.sfz .sfz__again:focus,
.sfz .sfz__again:active,
.sfz .sfz__again:visited {
	color: var(--sfz-accent);
	text-decoration: none;
}

.sfz .sfz__again {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	margin-top: .25rem;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sfz__again::after {
	content: "";
	position: absolute;
	left: 0;
	right: 1.6rem;
	bottom: .6rem;
	height: 1px;
	background: currentColor;
	opacity: .45;
}

.sfz__again .sfz-i {
	width: 1rem;
	height: 1rem;
}

.sfz .sfz__again:focus-visible {
	outline: 2px solid var(--sfz-accent);
	outline-offset: 4px;
	border-radius: 3px;
}

/* ---------- sizes ---------- */

/* Phones and tablets: the form comes straight after the heading and the
   112 note, and "Co dalej" follows it, so nobody scrolls a screen of
   introduction to reach the fields. The intro wrapper steps aside so its
   parts can be placed around the form. Desktop keeps the intro as one
   column beside the form. */
@media (max-width: 1024.98px) {
	.sfz__inner {
		gap: 1.75rem;
	}

	.sfz__intro {
		display: contents;
	}

	.sfz__head {
		order: 1;
	}

	.sfz__tags {
		order: 2;
	}

	.sfz__urgent {
		order: 3;
	}

	.sfz__panel {
		order: 4;
		margin-top: .5rem;
	}

	.sfz__next {
		order: 5;
		margin-top: 1rem;
	}
}

@media (min-width: 640px) {
	.sfz__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.sfz__panel {
		padding: 2rem 2rem 2.1rem;
	}

	.sfz__panel::before {
		left: 2rem;
	}

	.sfz__foot {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.sfz .sfz__submit.sfz__submit {
		width: auto;
	}

	.sfz__progress {
		flex: 1 1 8rem;
	}
}

@media (min-width: 768px) {
	.sfz__inner,
	.sfc__inner,
	.sfn__inner {
		padding-inline: 2rem;
	}
}

@media (min-width: 1025px) {
	.sfz::after {
		/* Bottom left, under the steps. */
		background-size: clamp(300px, 26vw, 420px) auto;
		background-position: left -5rem bottom 3rem;
	}

	.sfz__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: clamp(3rem, 6vw, 6.5rem);
		align-items: start;
		padding: calc(var(--sfh-h, 100px) + clamp(2.5rem, calc(var(--sfz-screen) * .06), 4.5rem)) 3rem clamp(4.5rem, calc(var(--sfz-screen) * .1), 7rem);
	}

	.sfz__intro {
		gap: 2rem;
		padding-top: .5rem;
	}

	.sfz__title {
		font-size: clamp(3rem, 4.4vw, 4.25rem);
	}

	.sfz__lead {
		font-size: 1.08rem;
	}

	.sfz__panel {
		padding: clamp(2rem, 3vw, 2.75rem);
	}

	.sfz__panel::before {
		left: clamp(2rem, 3vw, 2.75rem);
	}
}

/* =========================================================
   KONTAKT PAGE OPENING
   Title on the left, three shortcuts on the right: a general
   question goes to e-mail, a fault to the report form, a
   booking to the calendar.
   ========================================================= */

.sfn__inner {
	position: relative;
	display: grid;
	gap: 2.5rem;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: calc(var(--sfh-h, 74px) + 2.25rem) 1.15rem 4rem;
}

.sfn__head {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	min-width: 0;
}

.sfn__title {
	margin: 0;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: clamp(2.4rem, 11vw, 3.2rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sfz-paper);
	text-wrap: balance;
}

.sfn__title em {
	font-style: italic;
	color: var(--sfz-accent);
}

.sfn__lead {
	max-width: 34rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(242, 240, 235, .76);
	text-wrap: pretty;
}

.sfn__routes {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-width: 0;
}

.sfn__routes-t {
	margin: 0;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #8a8a85;
}

.sfn__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(242, 240, 235, .1);
}

.sfn__list li {
	margin: 0;
}

/* Pinned on every state: the theme turns links navy on hover and tap. */
.sfn .sfn__route,
.sfn .sfn__route:hover,
.sfn .sfn__route:focus,
.sfn .sfn__route:active,
.sfn .sfn__route:visited {
	color: var(--sfz-paper);
	text-decoration: none;
}

.sfn .sfn__route {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem .5rem 1.2rem 0;
	border-bottom: 1px solid rgba(242, 240, 235, .1);
}

/* The home page's accent bar, drawn in over the row you are on. */
.sfn__route::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--sfz-accent);
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
	transform: scaleX(0);
	transform-origin: left center;
}

.sfn__route-ico {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(242, 240, 235, .14);
	border-radius: 3px;
	background: rgba(242, 240, 235, .04);
	color: var(--sfz-accent);
}

.sfn__route-ico .sfz-i {
	width: 22px;
	height: 22px;
}

.sfn__route-b {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.sfn__route-t {
	font-family: var(--sfz-head), sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--sfz-paper);
}

.sfn__route-d {
	font-size: .92rem;
	line-height: 1.45;
	color: rgba(242, 240, 235, .6);
	overflow-wrap: anywhere;
}

.sfn__route-go {
	color: rgba(242, 240, 235, .35);
}

.sfn__route-go .sfz-i {
	display: block;
	width: 20px;
	height: 20px;
}

.sfn .sfn__route:hover .sfn__route-ico,
.sfn .sfn__route:focus-visible .sfn__route-ico {
	border-color: rgba(242, 183, 5, .55);
	background: rgba(242, 183, 5, .12);
}

.sfn .sfn__route:hover .sfn__route-go,
.sfn .sfn__route:focus-visible .sfn__route-go {
	color: var(--sfz-accent);
}

.sfn .sfn__route:hover::before,
.sfn .sfn__route:focus-visible::before {
	transform: scaleX(1);
}

.sfn .sfn__route:focus-visible {
	outline: 2px solid var(--sfz-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (min-width: 1025px) {
	.sfn::after {
		/* Bottom left, under the title. */
		background-size: clamp(300px, 26vw, 420px) auto;
		background-position: left -5rem bottom 2.5rem;
	}

	.sfn__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: clamp(3rem, 6vw, 6.5rem);
		align-items: end;
		padding: calc(var(--sfh-h, 100px) + clamp(3rem, calc(var(--sfz-screen) * .09), 6.5rem)) 3rem clamp(4.5rem, calc(var(--sfz-screen) * .11), 7.5rem);
	}

	.sfn__title {
		font-size: clamp(3.4rem, 5.4vw, 5.25rem);
	}

	.sfn__lead {
		font-size: 1.1rem;
	}

	.sfn__route-t {
		font-size: 1.25rem;
	}
}

/* =========================================================
   CONTACT
   ========================================================= */

.sfc__inner {
	position: relative;
	display: grid;
	gap: 2.5rem;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
	padding: 4.5rem 1.15rem;
}

.sfc__head {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	max-width: 40rem;
}

.sfc__eyebrow {
	color: rgba(13, 13, 13, .55);
}

.sfc__title {
	margin: 0;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: clamp(2.1rem, 8.8vw, 2.8rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sfz-ink);
	text-wrap: balance;
}

/* The yellow marker the cream sections use for their accent word. */
.sfc__title em {
	padding: 0 .06em;
	font-style: italic;
	color: var(--sfz-ink);
	background-image: linear-gradient(rgba(0, 0, 0, 0) 62%, rgba(242, 183, 5, .85) 62%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sfc__lead {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(13, 13, 13, .66);
}

.sfc__grid {
	display: grid;
	gap: 2.5rem;
}

.sfc__info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.sfc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(13, 13, 13, .12);
}

.sfc__row {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(13, 13, 13, .12);
}

.sfc__ico {
	padding-top: .1rem;
	color: var(--sfz-ink);
}

.sfc__ico .sfz-i {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.sfc__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	min-width: 0;
}

.sfc__label {
	margin: 0;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}

.sfc__value {
	margin: 0;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.35;
	color: var(--sfz-ink);
}

.sfc .sfc__mail,
.sfc .sfc__mail:hover,
.sfc .sfc__mail:focus,
.sfc .sfc__mail:active,
.sfc .sfc__mail:visited,
.sfc .sfc__tel,
.sfc .sfc__tel:hover,
.sfc .sfc__tel:focus,
.sfc .sfc__tel:active,
.sfc .sfc__tel:visited {
	color: var(--sfz-ink);
	text-decoration: none;
}

.sfc .sfc__mail {
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: clamp(1.3rem, 5.6vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
	background-image: linear-gradient(rgba(242, 183, 5, .85), rgba(242, 183, 5, .85));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% .28em;
}

.sfc .sfc__mail:hover {
	background-size: 100% .5em;
}

.sfc .sfc__mail:focus-visible,
.sfc .sfc__tel:focus-visible {
	outline: 2px solid var(--sfz-ink);
	outline-offset: 3px;
}

.sfc__dl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: .4rem 1.25rem;
	margin: .25rem 0 0;
}

.sfc__dl dt {
	margin: 0;
	padding-top: .18rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .5);
}

.sfc__dl dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
	color: var(--sfz-ink);
	overflow-wrap: anywhere;
}

.sfc__todo {
	display: inline-block;
	padding: .15rem .5rem;
	border: 1px dashed rgba(13, 13, 13, .3);
	border-radius: 3px;
	font-family: var(--sfz-body), sans-serif;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: rgba(13, 13, 13, .5);
}

.sfc__admin {
	margin: 0;
	font-size: .82rem;
	line-height: 1.5;
	color: rgba(13, 13, 13, .55);
}

.sfc .sfc__admin a,
.sfc .sfc__admin a:hover,
.sfc .sfc__admin a:focus,
.sfc .sfc__admin a:active,
.sfc .sfc__empty-s a,
.sfc .sfc__empty-s a:hover,
.sfc .sfc__empty-s a:focus,
.sfc .sfc__empty-s a:active {
	color: var(--sfz-ink);
	text-decoration: underline;
	text-decoration-color: rgba(242, 183, 5, .9);
	text-underline-offset: 3px;
}

/* ---------- map ---------- */

.sfc__map {
	position: relative;
	min-height: 21rem;
	min-width: 0;
}

.sfc__map::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -1px;
	left: 1.25rem;
	width: 44px;
	height: 3px;
	background: var(--sfz-accent);
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%);
}

.sfc__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 3px;
	background: #e4e1d8;
	box-shadow:
		0 40px 80px -46px rgba(17, 17, 17, .55),
		0 8px 24px -18px rgba(17, 17, 17, .3),
		0 0 0 1px rgba(17, 17, 17, .08);
}

/* In greyscale the map sits with the page; it takes its colour back while
   someone is using it. */
.sfc__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(1.04);
}

.sfc__map:hover .sfc__frame iframe,
.sfc__map:focus-within .sfc__frame iframe {
	filter: grayscale(.1);
}

.sfc__frame--empty {
	display: grid;
	place-items: center;
	padding: 2rem;
	background:
		repeating-linear-gradient(-45deg, rgba(13, 13, 13, .045) 0 12px, rgba(13, 13, 13, 0) 12px 24px),
		#e9e6de;
	text-align: center;
}

.sfc__frame--empty p {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

.sfc__frame--empty .sfz-i {
	width: 2rem;
	height: 2rem;
	color: rgba(13, 13, 13, .45);
}

.sfc__empty-t {
	font-family: var(--sfz-head), sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: rgba(13, 13, 13, .6);
}

.sfc__empty-s {
	font-size: .85rem;
	color: rgba(13, 13, 13, .55);
}

/* A dark tag that hangs over the edge of the map. */
.sfc__tag {
	position: absolute;
	z-index: 1;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
	padding: 1rem 1.15rem 1.05rem;
	border-radius: 3px;
	background: var(--sfz-ink);
	box-shadow: 0 26px 48px -22px rgba(0, 0, 0, .7);
	color: var(--sfz-paper);
}

.sfc__tag-name {
	margin: 0;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--sfz-paper);
}

.sfc__tag-addr {
	margin: 0;
	font-size: .93rem;
	line-height: 1.45;
	color: rgba(242, 240, 235, .72);
}

.sfc .sfc__route,
.sfc .sfc__route:hover,
.sfc .sfc__route:focus,
.sfc .sfc__route:active,
.sfc .sfc__route:visited {
	color: var(--sfz-accent);
	text-decoration: none;
}

.sfc .sfc__route {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px;
	margin-top: .15rem;
	font-family: var(--sfz-head), sans-serif;
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sfc__route .sfz-i {
	width: 1rem;
	height: 1rem;
}

.sfc .sfc__route:focus-visible {
	outline: 2px solid var(--sfz-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (min-width: 640px) {
	.sfc__tag {
		right: auto;
		max-width: 22rem;
	}
}

@media (min-width: 1025px) {
	.sfc::after {
		/* Top right, beside the heading and above the map. */
		background-size: clamp(240px, 20vw, 340px) auto;
		background-position: right 6vw top 3.5rem;
	}

	.sfc__inner {
		gap: clamp(2.5rem, calc(var(--sfz-screen) * .05), 3.5rem);
		padding: clamp(5rem, calc(var(--sfz-screen) * .11), 7.5rem) 3rem;
	}

	.sfc__title {
		font-size: clamp(2.8rem, 4.2vw, 4rem);
	}

	.sfc__lead {
		font-size: 1.08rem;
	}

	.sfc__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2.5rem, 5vw, 5rem);
		align-items: stretch;
	}

	.sfc__map {
		min-height: 32rem;
	}

	/* Hangs out over the gap towards the details, so the map reads as a layer. */
	.sfc__tag {
		left: -2rem;
		bottom: 2rem;
	}
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
	.sfz .sfz__input,
	.sfz .sfz__check {
		transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
	}

	.sfz .sfz__drop-lbl {
		transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
	}

	.sfz .sfz__fi-x {
		transition: border-color .18s ease, background-color .18s ease, color .18s ease;
	}

	.sfz__again .sfz-i,
	.sfc__route .sfz-i,
	.sfn__route-go .sfz-i {
		transition: transform .2s ease;
	}

	.sfz .sfz__again:hover .sfz-i,
	.sfn .sfn__route:hover .sfn__route-go .sfz-i {
		transform: translateX(3px);
	}

	.sfc .sfc__route:hover .sfz-i {
		transform: translate(2px, -2px);
	}

	.sfn__route::before {
		transition: transform .28s var(--sfz-ease);
	}

	.sfn__route-ico,
	.sfn__route-go {
		transition: border-color .2s ease, background-color .2s ease, color .2s ease;
	}

	.sfc .sfc__mail {
		transition: background-size .2s ease;
	}

	.sfc__frame iframe {
		transition: filter .4s ease;
	}

	.sfz__fi {
		animation: sfz-in .24s var(--sfz-ease);
	}

	.sfz__done:not([hidden]) {
		animation: sfz-in .36s var(--sfz-ease);
	}

	@keyframes sfz-in {
		from {
			opacity: 0;
			transform: translateY(6px);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfz__progress i {
		transition: none;
	}
}

/* ---------- print and forced colours ---------- */

@media print {
	.sfz::before,
	.sfz::after,
	.sfc::before,
	.sfc::after,
	.sfn::before,
	.sfn::after,
	.sfc__map {
		display: none;
	}
}

@media (forced-colors: active) {
	.sfz .sfz__check:checked {
		forced-color-adjust: none;
		background-color: Highlight;
		border-color: Highlight;
	}

	.sfz__progress i,
	.sfz__panel::before,
	.sfc__map::before,
	.sfn__route::before {
		forced-color-adjust: none;
		background: Highlight;
	}
}

/* ---------- anti-bot check ----------
   Cloudflare Turnstile draws its own box, on the dark panel in its dark
   theme; in "Invisible" mode there is nothing to see. reCAPTCHA v3 has no
   box at all: its corner badge goes, the form names it in words instead. */

.sfz__captcha {
	min-height: 0;
	max-width: 100%;
}

.sfz__captcha iframe {
	max-width: 100%;
}

.grecaptcha-badge {
	visibility: hidden;
}