/*
 * Kolory i fonty pochodzą z theme.json (zmienne --wp--preset--*).
 * Palette: navy from the logo, sand backgrounds, brass accents on light grounds and gold on dark ones,
 * as on dabrowski.legal.
 */

:root {
	--indigo: var(--wp--preset--color--indigo);
	--indigo-light: var(--wp--preset--color--indigo-light);
	--navy-deep: var(--wp--preset--color--navy-deep);
	--navy: var(--wp--preset--color--navy);
	--gold: var(--wp--preset--color--gold);
	--graphite: var(--wp--preset--color--graphite);
	--brass: var(--wp--preset--color--brass);
	--paper: var(--wp--preset--color--paper);
	--sand: var(--wp--preset--color--sand);
	--ink: var(--wp--preset--color--ink);
	--muted: var(--wp--preset--color--muted);
	--line: var(--wp--preset--color--line);
	--white: var(--wp--preset--color--white);

	--container: 1200px;
	--gutter: clamp(1.25rem, 4vw, 2rem);
	--section: clamp(4rem, 9vw, 7rem);
	--radius: 4px;
	--header-height: 84px;

	/* Side padding that also clears a notch or rounded corners in landscape (viewport-fit=cover in header.php). */
	--gutter-left: max(var(--gutter), env(safe-area-inset-left));
	--gutter-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Phones, also in landscape: a lower sticky header leaves more of the small screen for content. */
@media (max-width: 600px), (max-height: 500px) {
	:root {
		--header-height: 64px;
	}
}

/* Podstawy */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgb(138 92 34 / 0.12);
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	text-underline-offset: 0.2em;
}

h1, h2, h3 {
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1, h2 {
	letter-spacing: -0.025em;
}

:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 3px;
}

::selection {
	background: rgb(138 92 34 / 0.18);
}

.hero :focus-visible,
.stats :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--gold);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--indigo);
	color: var(--white);
}

.skip-link:focus {
	top: 1rem;
}

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-left: var(--gutter-left);
	padding-right: var(--gutter-right);
}

.container--narrow {
	max-width: calc(760px + 2 * var(--gutter));
}

.muted {
	color: var(--muted);
}

.kicker {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brass);
}

.kicker--light {
	color: var(--gold);
}

/* Przyciski */

.button {
	display: inline-flex;
	font-family: inherit;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--navy-deep);
	border-radius: var(--radius);
	background: var(--navy-deep);
	color: var(--white);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.button:hover {
	background: var(--indigo);
	border-color: var(--indigo);
}

.button--small {
	padding: 0.65rem 1.1rem;
	font-size: 0.875rem;
}

/* White on dark grounds (hero, banners, contact strip), as on dabrowski.legal. */
.button--light {
	background: var(--white);
	border-color: var(--white);
	color: var(--navy-deep);
}

.button--light:hover {
	background: var(--sand);
	border-color: var(--sand);
}

.button--outline-light {
	background: transparent;
	border-color: rgb(255 255 255 / 0.4);
	color: var(--white);
}

.button--outline-light:hover {
	background: rgb(255 255 255 / 0.08);
	border-color: var(--white);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Phones: calls to action stack at full width, within easy reach of the thumb. */
@media (max-width: 520px) {
	.button-row > .button,
	.attorney__cta .button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Nagłówek */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--line);
	background: rgb(255 255 255 / 0.96);
	backdrop-filter: blur(8px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: var(--header-height);
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	color: var(--indigo);
	text-decoration: none;
	line-height: 1.2;
}

.brand .logo-mark {
	flex: none;
	width: 2.75rem;
	height: auto;
}

/*
 * Header lockup after the firm's horizontal logo: the mark, the traced "ŁUKASZ ZIĘBA" wordmark and the
 * tagline set between two rules, all in the navy of the contact band. The tagline is live text (it is
 * translated) and set larger than in the logo, where it would be too small to read at header size.
 */
.brand--logo {
	gap: 0.875rem;
	color: var(--navy);
}

.brand--logo .logo-mark {
	width: 3.125rem;
}

.brand__lockup {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 12rem;
}

.logo-wordmark {
	display: block;
	width: 100%;
	height: auto;
}

.brand__ruled {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.5625rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.brand__ruled::before,
.brand__ruled::after {
	content: "";
	flex: 1 1 0;
	min-width: 0.75rem;
	height: 1px;
	background: currentColor;
}

/* The same logo in white on the dark footer. */
.brand--light {
	color: var(--white);
}

.site-nav__inner {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

/* Mobile only: dims the page under the open menu (see the max-width: 960px block). */
.nav-scrim {
	display: none;
}

.site-nav__list,
.lang-switcher {
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	position: relative;
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--brass);
	transform: scaleX(0);
	transition: transform 0.2s;
}

.site-nav__list a:hover::after,
.site-nav__list a[aria-current]::after {
	transform: scaleX(1);
}

.lang-switcher {
	gap: 0.5rem;
	padding-left: 1.75rem;
	border-left: 1px solid var(--line);
}

.lang-switcher a {
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.lang-switcher a[aria-current] {
	color: var(--indigo);
}

/* A shared row with the social icons on mobile only; on desktop the wrapper steps aside and the switcher stays a direct item of the bar. */
.site-nav__meta {
	display: contents;
}

.site-nav__meta .social-links {
	display: none;
}

/* Mobile only: call link and menu toggle. The toggle's bars are inset 10px, so it is pulled out by that much to align them with the content edge. */

.site-header__actions {
	display: none;
	align-items: center;
	margin-right: -10px;
}

.header-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border-radius: var(--radius);
	color: var(--brass);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
}

.header-call:hover {
	background: var(--paper);
}

.header-call svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.nav-toggle {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: var(--indigo);
	transition: transform 0.2s, background-color 0.2s;
}

.nav-toggle__bar {
	top: 21px;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	left: 0;
}

.nav-toggle__bar::before {
	top: -7px;
}

.nav-toggle__bar::after {
	top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 960px) {
	.site-header__actions {
		display: flex;
	}

	/*
	 * The panel unfolds from under the header over the dimmed page, as on dabrowski.legal: its single
	 * grid row animates from 0fr to the height of the content. A panel taller than the screen (a phone
	 * in landscape) stops at the bottom edge and scrolls inside.
	 */
	.site-nav {
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		right: 0;
		display: grid;
		grid-template-rows: 0fr;
		max-height: calc(100vh - var(--header-height) - 1px);
		max-height: calc(100dvh - var(--header-height) - 1px);
		border-bottom: 1px solid var(--line);
		background: var(--white);
		box-shadow: 0 12px 32px -12px rgb(12 26 44 / 0.18);
		visibility: hidden;
		transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.3s;
	}

	.site-nav.is-open {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
	}

	/* Side padding only: vertical padding here would stop the row from collapsing to zero. */
	.site-nav__inner {
		display: block;
		min-height: 0;
		padding-inline: var(--gutter-left) var(--gutter-right);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 40;
		background: rgb(12 26 44 / 0.28);
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s, visibility 0s linear 0.3s;
	}

	.nav-open .nav-scrim {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.3s, visibility 0s;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.site-nav__list li {
		border-bottom: 1px solid var(--line);
	}

	/* Each item is a full-width touch row, separated by hairlines; the current one stands out by colour instead of an underline. */
	.site-nav__list a {
		display: block;
		padding-block: 1rem;
		color: var(--muted);
		font-size: 1.0625rem;
		font-weight: 400;
	}

	.site-nav__list a:hover,
	.site-nav__list a[aria-current] {
		color: var(--ink);
	}

	.site-nav__list a[aria-current] {
		font-weight: 500;
	}

	.site-nav__list a::after {
		display: none;
	}

	.site-nav__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block: 0.5rem;
	}

	.lang-switcher {
		gap: 0;
		margin: 0 0 0 -0.75rem;
		padding-left: 0;
		border-left: 0;
	}

	.lang-switcher a {
		display: grid;
		place-items: center;
		min-width: 44px;
		min-height: 44px;
		font-size: 0.9375rem;
	}

	/* The icons read like the language links beside them: same colour, no frame, same touch target, pulled out to align with the content edge. */
	.site-nav__meta .social-links {
		display: flex;
		gap: 0;
		margin: 0 -0.9375rem 0 auto;
	}

	.site-nav__meta .social-links a {
		width: 44px;
		height: 44px;
		border: 0;
		color: var(--muted);
	}

	.site-nav__meta .social-links a:hover {
		color: var(--ink);
	}

	.site-nav__inner > .button {
		display: flex;
		width: 100%;
		margin-bottom: max(1.25rem, env(safe-area-inset-bottom));
		padding-block: 0.95rem;
		font-size: 0.9375rem;
	}

	/* The page stays visible under the menu: keep the scrollbar's space reserved, so locking the scroll does not shift it. */
	html {
		scrollbar-gutter: stable;
	}

	body.nav-open {
		overflow: hidden;
	}
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
	.site-nav,
	.site-nav.is-open,
	.nav-scrim,
	.nav-open .nav-scrim {
		transition: none;
	}
}

/*
 * Consumer bankruptcy page, one column: the header lies transparent over the hero photo with the
 * logo in white and scrolls away with the page (the bar at the bottom, .lp-bar, keeps the contact
 * within reach). It takes its regular look only while the menu is open.
 */
@media (max-width: 960px) {
	.site-header--overlay {
		position: relative;
		transition: background-color 0.2s, border-color 0.2s;
	}

	.site-header--overlay .brand--logo {
		transition: color 0.2s;
	}

	.site-header--overlay .header-call {
		transition: color 0.2s, background-color 0.2s;
	}

	body:not(.nav-open) .site-header--overlay {
		border-bottom-color: transparent;
		background: transparent;
		backdrop-filter: none;
	}

	body:not(.nav-open) .site-header--overlay .brand--logo,
	body:not(.nav-open) .site-header--overlay .header-call {
		color: var(--white);
	}

	body:not(.nav-open) .site-header--overlay .header-call:hover {
		background: rgb(255 255 255 / 0.14);
	}

	body:not(.nav-open) .site-header--overlay .nav-toggle__bar,
	body:not(.nav-open) .site-header--overlay .nav-toggle__bar::before,
	body:not(.nav-open) .site-header--overlay .nav-toggle__bar::after {
		background: var(--white);
	}

	body:not(.nav-open) .site-header--overlay :focus-visible {
		outline-color: var(--gold);
	}
}

/* Narrow phones: the brand tightens and the call link keeps only its icon, so the header fits from 360px. */

@media (max-width: 480px) {
	.brand {
		gap: 0.5rem;
	}

	.brand .logo-mark {
		width: 2rem;
	}

	.site-header__inner {
		gap: 0.5rem;
	}

	.header-call {
		padding: 0;
	}

	.header-call__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Smallest phones (320-374px): the brand may shrink so the menu button stays on screen. */
@media (max-width: 374px) {
	.brand {
		min-width: 0;
	}
}

/*
 * Header logo: smaller where the full menu is tight (961-1180px, where the menu also closes up a little)
 * and on phones, so the header never scrolls sideways.
 */
@media (min-width: 961px) and (max-width: 1180px) {
	.site-header__inner {
		gap: 1.5rem;
	}

	.site-nav__inner,
	.site-nav__list {
		gap: 1.25rem;
	}

	.lang-switcher {
		padding-left: 1.25rem;
	}

	.brand--logo {
		gap: 0.75rem;
	}

	.brand--logo .logo-mark {
		width: 3rem;
	}

	.brand__ruled::before,
	.brand__ruled::after {
		min-width: 0.375rem;
	}
}

@media (max-width: 600px) {
	.brand--logo .logo-mark {
		width: 2.75rem;
	}
}

@media (max-width: 480px) {
	.brand--logo {
		gap: 0.5rem;
	}

	.brand--logo .logo-mark {
		width: 2.25rem;
	}

	.brand__lockup {
		width: 10.25rem;
	}

	.brand__ruled {
		gap: 0.25rem;
		font-size: 0.5625rem;
		letter-spacing: 0;
	}

	.brand__ruled::before,
	.brand__ruled::after {
		min-width: 0.25rem;
	}
}

/* Smallest phones (320px): the mark and the wordmark only; the tagline stays in the link's accessible name. */
@media (max-width: 359px) {
	.brand--logo .logo-mark {
		width: 2.125rem;
	}

	.brand__lockup {
		width: 8.75rem;
	}

	.brand__ruled {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* Hero strony głównej */

/*
 * The firm's logo in brushed metal on deep navy, lit by a soft shaft of light that falls
 * from the upper left (palette and light taken from dabrowski.legal, as the client asked). The logo is a CSS mask (assets/img/logo.svg) over a metal gradient, drawn
 * twice: a dim base that keeps the whole logo legible and a bright layer masked to where the
 * light lands. The bottom edge of the section stays plain deep navy, so it runs on into the stats band.
 */

@property --lit-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 36%;
}

@property --lit-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 30%;
}

.hero {
	--emblem-w: clamp(19rem, 34vw, 30rem);
	/* Centre of the logo: the right end of the container, half a logo in. */
	--emblem-x: calc(50% + min(50%, var(--container) / 2 + var(--gutter)) - var(--gutter-right) - var(--emblem-w) / 2);
	--pad-top: clamp(4.5rem, 10vw, 8rem);
	--pad-bottom: clamp(3.5rem, 6vw, 5.5rem);
	--metal: linear-gradient(118deg, #f7f9fc 0%, #c3cbd6 17%, #8792a3 33%, #e6eaf0 47%, #ffffff 52%, #a9b3c1 66%, #dce2e9 81%, #8d98a9 100%);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--navy-deep);
	color: var(--white);
}

/* Depth: a cool blue glow at the top right and a warm one at the bottom left, under the stats. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 90% at 88% 0, rgb(53 97 143 / 0.42), transparent 62%),
		radial-gradient(50% 70% at 0 100%, rgb(169 116 52 / 0.14), transparent 70%);
	pointer-events: none;
}

/*
 * The shaft of light (SVG in hero.php), placed on the whole hero as on dabrowski.legal: across the
 * logo at 41% of the height, and on narrow screens at 26% x 22%, so it falls from the top edge
 * however the title wraps. Behind the text and the stats, which have higher z-indexes.
 * The width sets the drawn size of the shaft. The height only sets the box that beam-in's percentages
 * refer to: at 190% of the hero the shaft visibly falls into place instead of fading in where it stands.
 */
.hero__beam {
	position: absolute;
	z-index: 1;
	left: var(--emblem-x);
	top: 41%;
	width: min(96%, 90rem);
	height: 190%;
	overflow: visible;
	translate: -50% -50%;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--emblem-w);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-block: var(--pad-top) var(--pad-bottom);
}

.hero__content {
	max-width: 44rem;
}

/* The title in Newsreader, as on dabrowski.legal: the one serif on the site. */
.hero__title {
	color: var(--white);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.hero__title em {
	font-style: italic;
	color: var(--gold);
}

.hero__lead {
	max-width: 36rem;
	margin: 0 0 2.5rem;
	font-size: 1.1875rem;
	color: rgb(255 255 255 / 0.8);
}

.hero__emblem {
	position: relative;
	display: grid;
	aspect-ratio: 2680 / 1604;
	filter: drop-shadow(0 0 1.75rem rgb(176 204 240 / 0.22));
}

/* Faint halo where the light hits, behind the logo. */
.hero__emblem::before {
	content: "";
	position: absolute;
	inset: -12%;
	background: radial-gradient(42% 46% at 36% 28%, rgb(226 236 250 / 0.08), transparent 70%);
}

.hero__emblem-base,
.hero__emblem-lit {
	grid-area: 1 / 1;
	background: var(--metal);
	mask: url("../img/logo.svg") center / 100% 100% no-repeat;
}

.hero__emblem-base {
	opacity: 0.42;
}

/* The logo, intersected with the sum of two light spots: the main one and a reflection along the bottom. */
.hero__emblem-lit {
	--lit-x: 36%;
	--lit-y: 30%;
	mask-image:
		url("../img/logo.svg"),
		radial-gradient(52% 70% at var(--lit-x) var(--lit-y), #000, rgb(0 0 0 / 0.62) 45%, transparent 80%),
		radial-gradient(70% 24% at var(--lit-x) 92%, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.4) 50%, transparent);
	mask-composite: intersect, add, add;
}

@media (max-width: 960px) {
	.hero__beam {
		left: 26%;
		top: 22%;
		width: min(150%, 56.25rem);
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__emblem {
		display: none;
	}
}

/*
 * Liczby: dolna część hero, jak hero-stats na dabrowski.legal. Cztery kolumny pod linią, rozdzielone
 * pionowymi liniami, liczby w Newsreaderze, podpisy wersalikami. Tło, poświaty i smuga światła należą do hero.
 */

.stats {
	--stats-line: 1px solid rgb(255 255 255 / 0.16);
	position: relative;
	z-index: 3;
	color: rgb(255 255 255 / 0.72);
}

.stats__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border-top: var(--stats-line);
}

.stats__item {
	padding: 2rem 1.5rem 3rem 0;
}

.stats__item + .stats__item {
	padding-left: 1.5rem;
	border-left: var(--stats-line);
}

.stats__value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--white);
}

.stats__number {
	white-space: nowrap;
}

.stats__plus,
.stats__stars {
	color: var(--gold);
}

.stats__stars {
	width: 5.5rem;
	height: auto;
}

.stats__label {
	max-width: 15rem;
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.stats__label a {
	color: inherit;
	text-decoration-color: rgb(255 255 255 / 0.35);
}

.stats__label a:hover {
	color: var(--white);
	text-decoration-color: var(--gold);
}

/* Two columns: the second row gets a line on top, the first column no line on the left. */
@media (max-width: 900px) {
	.stats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stats__item {
		padding: 1.5rem 1rem 1.5rem 0;
	}

	.stats__item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.stats__item:nth-child(n + 3) {
		border-top: var(--stats-line);
	}
}

/* Below 360px two columns cannot hold the longest label word ("restrukturyzacyjnym"). */
@media (max-width: 359px) {
	.stats__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.stats__item + .stats__item {
		padding-left: 0;
		border-left: 0;
		border-top: var(--stats-line);
	}
}

/* Sekcje */

.section {
	padding-block: var(--section);
}

.section--paper {
	background: var(--sand);
}

.section__title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Nagłówek sekcji: tytuł po lewej, dopowiedzenie lub link po prawej. */

.section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 3rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__header .section__title {
	margin: 0;
}

.section__aside {
	max-width: 26rem;
	margin: 0;
	color: var(--muted);
}

/* Stacked: the text sits under the title instead of beside it. */
.section__header--stacked {
	flex-direction: column;
	align-items: flex-start;
}

.section__header--stacked .section__aside {
	max-width: 34em;
}

.more-link {
	color: var(--brass);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgb(138 92 34 / 0.35);
	text-underline-offset: 0.3em;
}

.more-link:hover {
	text-decoration-color: currentColor;
}

.split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 6vw, 6rem);
	margin-bottom: 4rem;
}

.split--media {
	grid-template-columns: 5fr 7fr;
	align-items: center;
	margin-bottom: 0;
}

@media (max-width: 860px) {
	.split,
	.split--media {
		grid-template-columns: 1fr;
	}
}

/* Values: a short brass line marks each one. */

.values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem clamp(2rem, 5vw, 4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.value::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1.5rem;
	background: var(--brass);
}

.value__title {
	font-size: var(--wp--preset--font-size--large);
}

.value p {
	margin: 0;
	color: var(--muted);
}

@media (max-width: 860px) {
	.values {
		grid-template-columns: 1fr;
	}
}

/* Specjalizacje: lista jak spis treści, cały wiersz jest linkiem. */

.practice-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgb(27 53 81 / 0.14);
}

.practice-list li {
	border-bottom: 1px solid rgb(27 53 81 / 0.14);
}

.practice-list__link {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
	align-items: center;
	gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(1.5rem, 3vw, 2rem);
	color: inherit;
	text-decoration: none;
}

.practice-list__title {
	margin: 0;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	transition: color 0.2s;
}

.practice-list__lead {
	max-width: 34rem;
	margin: 0;
	color: var(--muted);
	text-wrap: pretty;
}

.practice-list__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgb(27 53 81 / 0.2);
	border-radius: 50%;
	color: var(--indigo);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.practice-list__icon svg {
	width: 1.25rem;
	height: 1.25rem;
	transition: transform 0.2s;
}

@media (hover: hover) {
	.practice-list__link:hover .practice-list__icon svg {
		transform: translateX(2px);
	}
}

.practice-list__link:hover .practice-list__title {
	color: var(--brass);
}

.practice-list__link:hover .practice-list__icon {
	background: var(--brass);
	border-color: var(--brass);
	color: var(--white);
}

@media (max-width: 760px) {
	.practice-list__link {
		grid-template-columns: 1fr auto;
	}

	.practice-list__lead {
		grid-row: 2;
	}

	.practice-list__icon {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 2.5rem;
		height: 2.5rem;
	}
}

/*
 * Kraków band: photo under an indigo overlay, placed right before the contact band.
 * The photo (grayscale baked into the file) overhangs the band by 30% of its height above and
 * below. While scrolling it is shifted within that room, so it moves slower than the page: with a
 * scroll-driven animation (bottom of this file) or, where unsupported, from assets/js/main.js.
 */

.city {
	position: relative;
	height: clamp(10rem, 17vw, 15rem);
	overflow: hidden;
	background: var(--navy);
}

.city__photo {
	position: absolute;
	top: -30%;
	left: 0;
	width: 100%;
	height: 160%;
	object-fit: cover;
	object-position: 50% 60%;
	will-change: transform;
}

/* The overlay deepens to solid indigo at the bottom, where the band flows into the contact band. */
.city::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(15 28 44 / 0.78) 35%, var(--navy));
}

/* Attorney */

.attorney__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--graphite);
	border-radius: var(--radius);
}

.attorney__cta {
	margin: 2rem 0 0;
}

.credentials {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

.credentials__membership {
	max-width: 22rem;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

.credentials__membership strong {
	font-weight: 600;
	color: var(--indigo);
	white-space: nowrap;
}

.credentials__logo {
	flex: none;
	width: 5.2rem;
	height: auto;
}

@media (max-width: 860px) {
	.attorney__photo {
		max-width: 24rem;
	}

	/* Stacked above the text, the portrait is cut to head and shoulders so it does not fill the screen. */
	.split--media .attorney__photo,
	.profile .attorney__photo {
		aspect-ratio: 3 / 2;
		object-position: 50% 20%;
	}
}

/*
 * Cooperation: the attorney's card stays beside the text about the office while it is read.
 * 4:7 rather than 5:7 so the sticky card fits a laptop viewport.
 */

.split--profile {
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	align-items: start;
	margin-bottom: 0;
}

.profile__name {
	margin: 1.5rem 0 0.25rem;
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--indigo);
}

.profile__role {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

.profile .credentials {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.profile .credentials__logo {
	width: 4.4rem;
}

.profile__heading {
	margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
	font-size: var(--wp--preset--font-size--large);
}

.profile__lead {
	max-width: 34em;
	margin: -0.5rem 0 1.5rem;
	color: var(--muted);
}

@media (min-width: 861px) and (min-height: 760px) {
	.profile {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
}

@media (max-width: 860px) {
	.split--profile {
		grid-template-columns: 1fr;
	}
}

/* Label and text pairs separated by thin lines, like the contact details. */

.facts {
	margin: 0;
	border-top: 1px solid var(--line);
}

.facts__row {
	display: grid;
	grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
	gap: 0.375rem 2rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--line);
}

.facts dt {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--indigo);
}

.facts dd {
	max-width: 34em;
	margin: 0;
	text-wrap: pretty;
}

@media (max-width: 520px) {
	.facts__row {
		grid-template-columns: 1fr;
	}
}

/* The firm's maxim, marked with the brass 2px piping, like quotes in posts. */

.pull-quote {
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
	border-left: 2px solid var(--brass);
}

.pull-quote p {
	max-width: 34em;
	margin: 0;
	font-size: clamp(1.1875rem, 1.6vw, 1.3125rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--indigo);
	text-wrap: balance;
}

/* Fee forms: ruled rows like the list of practice areas, title beside the description. */

.fee-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgb(27 53 81 / 0.14);
}

.fee-list__item {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid rgb(27 53 81 / 0.14);
}

.fee-list__title {
	margin: 0;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.fee-list__text p {
	max-width: 34em;
	margin: 0;
	text-wrap: pretty;
}

.fee-list__text .fee-list__note {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

.fee-terms {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

@media (max-width: 760px) {
	.fee-list__item {
		grid-template-columns: 1fr;
	}
}

/*
 * Blog. Every post is a cover from the firm's series of navy brochures: the ŁZ mark, a frame
 * like the one in the logo, a gold rule (its length set per post in inc/blog.php) and the
 * title. Hovering turns the navy lighter and stretches the rule.
 */

/* The header is the shared page-hero, as on the other pages. Not ".blog": WordPress puts that
   class on <body> of the posts page. */
.blog-listing {
	padding-block: var(--section);
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
}

.post-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.post-card--feature {
	grid-column: span 2;
}

.post-card--tall {
	grid-row: span 2;
}

.post-card--full {
	grid-column: 1 / -1;
}

.post-card__cover {
	--pad: clamp(1.5rem, 2.4vw, 2rem);

	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	padding: calc(var(--pad) + 2.5rem) var(--pad) var(--pad);
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--white);
	text-decoration: none;
	transition: background-color 0.2s;
}

.post-card--feature .post-card__cover {
	aspect-ratio: auto;
	min-height: 20rem;
}

/* Frame inset like the square frame of the ŁZ mark. */
.post-card__cover::before {
	content: "";
	position: absolute;
	inset: 0.625rem;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: 2px;
	pointer-events: none;
}

.post-card__cover:hover {
	background: var(--indigo);
}

.post-card__mark {
	position: absolute;
	top: var(--pad);
	right: var(--pad);
	display: flex;
	width: 1.75rem;
	color: rgb(255 255 255 / 0.4);
}

.post-card__mark .logo-mark {
	width: 100%;
	height: auto;
}

.cover-rule {
	display: block;
	width: var(--rule, 3rem);
	height: 2px;
	background: var(--gold);
	transform-origin: left;
	transition: scale 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.post-card__cover .cover-rule {
	position: absolute;
	top: calc(var(--pad) + 0.8125rem);
	left: var(--pad);
}

@media (hover: hover) {
	.post-card__cover:hover .cover-rule {
		scale: 1.6 1;
	}
}

.post-card__title {
	max-width: 22ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--white);
}

.post-card--feature .post-card__title {
	max-width: 20ch;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

/* The two-row feature carries the shelf: its title grows with the cover. */
.post-card--tall .post-card__title {
	max-width: 16ch;
	font-size: clamp(2rem, 3.6vw, 3.5rem);
	line-height: 1.08;
}

/* Featured image: grayscale under the navy overlay, so photos never break the series. */
.post-card__photo,
.article-cover__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

.has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(15 28 44 / 0.8);
	transition: background-color 0.2s;
}

.post-card__cover.has-photo:hover::after {
	background: rgb(27 53 81 / 0.8);
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
}

.post-meta > * + *::before {
	content: "·";
	margin-right: 0.5rem;
}

.post-meta--light {
	font-size: 0.9375rem;
	color: rgb(255 255 255 / 0.72);
}

.post-meta__author {
	font-weight: 600;
	color: var(--white);
}

@media (max-width: 600px) {
	.post-meta__author {
		flex-basis: 100%;
	}

	.post-meta > .post-meta__author + *::before {
		content: none;
	}
}

/* Two columns: only the first cover stays wide, the others are placed for three columns. */
@media (max-width: 960px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-card--feature {
		grid-column: 1 / -1;
		grid-row: auto;
	}

}

/* Two columns with the feature across the row: an even count leaves the last cover alone, so widen it. */
@media (min-width: 601px) and (max-width: 960px) {
	.post-grid > .post-card:last-child:nth-child(even):not(.post-card--feature) {
		grid-column: 1 / -1;
	}

	.post-grid > .post-card:last-child:nth-child(even):not(.post-card--feature) .post-card__cover {
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 600px) {
	.post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Flatter covers keep the stacked shelf dense on a phone. */
	.post-grid > .post-card:not(.post-card--feature) .post-card__cover {
		aspect-ratio: 3 / 2;
	}
}

.pagination {
	margin-top: 3rem;
}

.pagination .nav-links {
	display: flex;
	gap: 0.5rem;
}

.pagination .page-numbers {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--indigo);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--indigo);
	border-color: var(--indigo);
	color: var(--white);
}

/* Post: the cover opened up across the page, then the reading column with the contents beside it. */

.article-cover {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--navy);
	color: var(--white);
}

/* The same inset frame and ŁZ seal as the covers on the blog: the brochure, opened. */
.article-cover::before {
	content: "";
	position: absolute;
	inset: 0.75rem;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: 2px;
	pointer-events: none;
}

.article-cover__mark {
	position: absolute;
	top: clamp(2rem, 4vw, 3rem);
	right: var(--gutter-right);
	display: flex;
	width: 2.25rem;
	color: rgb(255 255 255 / 0.4);
}

.article-cover__mark .logo-mark {
	width: 100%;
	height: auto;
}

.article-cover :focus-visible {
	outline-color: var(--gold);
}

.article-cover__inner {
	position: relative;
	padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
	margin-bottom: clamp(3rem, 7vw, 5rem);
	font-size: 0.9375rem;
	color: rgb(255 255 255 / 0.4);
}

.breadcrumbs a {
	color: rgb(255 255 255 / 0.8);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--white);
	text-decoration: underline;
}

.article-cover .cover-rule {
	margin-bottom: 1.75rem;
}

.article-cover__title {
	max-width: 21ch;
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--white);
}

.article-body {
	display: grid;
	grid-template-columns: minmax(0, 720px);
	gap: 2.5rem clamp(3rem, 5vw, 4.5rem);
	padding-block: clamp(3rem, 6vw, 4.5rem) var(--section);
}

/*
 * The text keeps its full 720px column, aligned with the cover title, and the contents follow
 * at a set distance: clear of the text, but close enough to read as its margin.
 */
.article-body.has-toc {
	grid-template-columns: minmax(0, 720px) minmax(13rem, 16rem);
}

.toc {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: calc(var(--header-height) + 2rem);
	align-self: start;
	max-height: calc(100vh - var(--header-height) - 4rem);
	overflow-y: auto;
}

.toc__title {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--indigo);
}

.toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--line);
}

/* The section being read gets the brass piping (assets/js/main.js). */
.toc a {
	display: block;
	margin-left: -1px;
	padding: 0.4rem 0 0.4rem 1rem;
	border-left: 2px solid transparent;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.toc a:hover {
	color: var(--ink);
}

.toc a[aria-current="true"] {
	border-left-color: var(--brass);
	color: var(--indigo);
}

.article-author {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: clamp(3rem, 6vw, 4rem);
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

.article-author img {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--radius);
	background: var(--graphite);
}

.article-author p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

.article-author__name {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--indigo);
}

@media (max-width: 1080px) {
	.article-body.has-toc {
		grid-template-columns: minmax(0, 720px);
	}

	/* Above the text the contents keep their own vertical line, without a box around them. */
	.toc {
		grid-column: auto;
		position: static;
		max-height: none;
	}
}

/* Wezwanie do kontaktu */

/* Contact band in the colours of #kontakt on dabrowski.legal: dark navy, a cool glow at the top right
   and a warm brass one at the bottom left, gold labels. */
.cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--navy);
	color: rgb(255 255 255 / 0.7);
	/* Always the last band before the footer: same line as between the contact details (.cta__detail). */
	border-bottom: 1px solid rgb(255 255 255 / 0.16);
	/* Target of the "Kontakt" menu link: keep its top clear of the sticky header. */
	scroll-margin-top: var(--header-height);
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 80% at 92% 8%, rgb(53 97 143 / 0.45), transparent 62%),
		radial-gradient(45% 60% at 4% 96%, rgb(169 116 52 / 0.16), transparent 70%);
	pointer-events: none;
}

/* Under the city photo (home page) the cool glow sits lower, so the top edge meets the photo's fade without a seam. */
.city + .cta::before {
	background:
		radial-gradient(55% 70% at 92% 62%, rgb(53 97 143 / 0.45), transparent 62%),
		radial-gradient(45% 60% at 4% 96%, rgb(169 116 52 / 0.16), transparent 70%);
}

.cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: 3rem clamp(3rem, 8vw, 7rem);
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.cta__intro > p:not(.kicker) {
	max-width: 560px;
	margin: 0 0 2rem;
}

.cta__title {
	color: var(--white);
	font-size: var(--wp--preset--font-size--x-large);
}

/* Contact details: label and value pairs separated by thin lines. */
.cta__details {
	font-style: normal;
}

.cta__details dl {
	margin: 0;
}

.cta__detail {
	padding-block: 1.25rem;
	padding-left: 2.5rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.16);
}

.cta__detail:first-child {
	padding-top: 0;
}

.cta__detail:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.cta__detail dt {
	position: relative;
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gold);
}

/* In the gutter left of the label and value, because a dl group may only hold dt and dd. */
.cta__detail dt .icon {
	position: absolute;
	top: 0.125rem;
	left: -2.5rem;
}

.cta__detail dd {
	margin: 0;
	color: rgb(255 255 255 / 0.88);
	line-height: 1.6;
}

.cta__detail a {
	color: inherit;
	text-decoration: none;
}

.cta__detail a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold);
}

/* Social icons as one more row of the details: same spacing, line and text colour. */
.cta__details .social-links {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 0.16);
	color: rgb(255 255 255 / 0.88);
}

@media (max-width: 860px) {
	.cta__inner {
		grid-template-columns: 1fr;
	}
}

/* Podstrony */

/* Sand header with a short brass rule over the title, as the page headers on dabrowski.legal. */
.page-hero {
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
	background: var(--sand);
	border-bottom: 1px solid rgb(12 26 44 / 0.08);
}

.page-hero__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.page-hero__title::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1.25rem;
	background: var(--brass);
}

.page-hero__lead {
	max-width: 680px;
	margin: 0;
	font-size: 1.1875rem;
	color: var(--muted);
}

/*
 * Consumer bankruptcy landing page, in the site's own language: indigo bands, paper,
 * 1px rules, the 2px brass piping and 4px corners.
 */

.icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.button .icon {
	width: 1.125rem;
	height: 1.125rem;
}

.stars {
	flex: none;
	width: 5.5rem;
	height: auto;
	color: var(--brass);
}

/* The deep navy of the home page hero, so the dark bands of the landing page share one shade. */
.section--navy {
	background: var(--navy-deep);
	color: rgb(255 255 255 / 0.78);
}

.section--navy .section__title {
	color: var(--white);
}

.banner :focus-visible,
.section--navy :focus-visible {
	outline-color: var(--gold);
}

/*
 * Banner: the Kraków photo (grayscale in the file) under indigo, deepest behind the text. The
 * landing page builds its hero on it; other pages use the short version from page-banner.php.
 */

.banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--indigo);
	color: rgb(255 255 255 / 0.78);
}

.banner__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
}

.banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(27 53 81 / 0.96) 0%, rgb(27 53 81 / 0.9) 45%, rgb(27 53 81 / 0.66) 100%);
}

/*
 * Landing page hero: a person with raised arms over an open valley, in full colour. The deep navy
 * of the home page hero lies only behind the text and clears before the figure, so the right side
 * keeps the daylight. The home hero's warm glow sits in the lower left corner, as there.
 */
.lp-hero {
	background: var(--navy-deep);
}

.lp-hero .banner__photo {
	object-position: 75% 78%;
}

/* The stops follow the left edge of the text, so on wide screens the navy still ends past the copy. */
.lp-hero::before {
	--text-x: max(var(--gutter-left), 50% - var(--container) / 2);
	background:
		radial-gradient(50% 70% at 0 100%, rgb(169 116 52 / 0.14), transparent 70%),
		linear-gradient(
			90deg,
			rgb(12 26 44 / 0.94) 0%,
			rgb(12 26 44 / 0.88) calc(var(--text-x) + 24rem),
			rgb(12 26 44 / 0.64) calc(var(--text-x) + 38rem),
			rgb(12 26 44 / 0.2) calc(var(--text-x) + 48rem),
			rgb(12 26 44 / 0) calc(var(--text-x) + 56rem)
		);
}

/*
 * One column: the hero opens with the figure, centred by its own crop and held at the top of the
 * photo at every width. The legs dissolve into the deep navy, and the copy starts at the waist, so
 * the headline is on screen right away. --photo-height sets the size of the figure, --photo-band
 * the place where the copy begins. The hero slides up under the transparent header, and both grow
 * by the header's height (with its 1px border), so the figure and the copy keep their place on
 * screen and the crop's extra sky fills the space behind the logo. --hero-lift then raises the
 * figure and the copy together.
 */
@media (max-width: 960px) {
	.lp-hero {
		--header-overlap: calc(var(--header-height) + 1px);
		--hero-lift: 10px;
		--photo-height: calc(clamp(19rem, 100vw, 26rem) + var(--header-overlap));
		--photo-band: calc(min(clamp(12rem, 60vw, 17rem), 62vh) + var(--header-overlap) - var(--hero-lift));
		margin-top: calc(-1 * var(--header-overlap));
	}

	.lp-hero .banner__inner {
		padding-top: var(--photo-band);
	}

	.lp-hero .banner__photo {
		inset: calc(-1 * var(--hero-lift)) 0 auto;
		height: var(--photo-height);
		object-position: 50% 0;
	}

	/* The first layer deepens the sky behind the white logo, so its small tagline stays legible. */
	.lp-hero::before {
		background:
			linear-gradient(
				180deg,
				rgb(12 26 44 / 0.42) 0,
				rgb(12 26 44 / 0.34) var(--header-overlap),
				rgb(12 26 44 / 0) calc(var(--header-overlap) + 3.5rem)
			),
			linear-gradient(
				180deg,
				rgb(12 26 44 / 0) calc(var(--photo-band) - 5rem),
				rgb(12 26 44 / 0.45) calc(var(--photo-band) - 1.5rem),
				rgb(12 26 44 / 0.84) calc(var(--photo-band) + 0.5rem),
				var(--navy-deep) calc(var(--photo-band) + 3.5rem)
			);
	}
}

/*
 * Landing page, one column: the form and the phone stay within reach in a bar at the bottom of the
 * screen. It sits under the menu's dimmed page (z-index 40) and steps aside while the visitor types
 * in a text field, where it would cover the form above the on-screen keyboard. The footer and
 * scrolling to a focused element leave room for it.
 */
.lp-bar {
	display: none;
}

@media (max-width: 960px) {
	:root {
		--lp-bar-height: calc(4.375rem + env(safe-area-inset-bottom));
	}

	.lp-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 30;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.625rem;
		height: var(--lp-bar-height);
		padding: 0.625rem var(--gutter-right) calc(0.625rem + env(safe-area-inset-bottom)) var(--gutter-left);
		border-top: 2px solid var(--brass);
		background: var(--navy-deep);
	}

	.lp-bar .button {
		padding: 0 0.5rem;
		white-space: nowrap;
	}

	.lp-bar :focus-visible {
		outline-color: var(--gold);
	}

	.site-main:has(:is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus) .lp-bar {
		visibility: hidden;
	}

	.site-main:has(.lp-bar) + .site-footer {
		padding-bottom: var(--lp-bar-height);
	}

	html:has(.lp-bar) {
		scroll-padding-bottom: var(--lp-bar-height);
	}

	/* The header does not follow the page here, so the form needs no room for it when scrolled to. */
	.site-main:has(.lp-bar) .consult-form {
		scroll-margin-top: 1.5rem;
	}
}

.banner__inner {
	padding-block: clamp(3.5rem, 6.5vw, 5.5rem) clamp(2.5rem, 4vw, 3rem);
}

.banner__title {
	max-width: 20ch;
	margin-bottom: 1.25rem;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--white);
}

/* The landing page title follows the home hero: Newsreader with a gold italic accent. */
.lp-hero .banner__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.lp-hero .banner__title em {
	font-style: italic;
	color: var(--gold);
}

.lp-hero__title-name {
	display: block;
}

.lp-hero__lead {
	margin: 0 0 0.75rem;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--white);
}

.lp-hero__text {
	max-width: 36rem;
	margin: 0 0 2rem;
}

/* The short banner: just the title and the lead, on the deep navy of the footer. */

.page-banner {
	background: var(--navy-deep);
}

.page-banner::before {
	background: linear-gradient(90deg, rgb(12 26 44 / 0.96) 0%, rgb(12 26 44 / 0.9) 45%, rgb(12 26 44 / 0.66) 100%);
}

.page-banner .banner__inner {
	padding-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

.banner__lead {
	max-width: 40rem;
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.8);
	text-wrap: pretty;
}

.trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 0;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 1.5rem 0 0;
	list-style: none;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	font-size: 0.875rem;
	color: rgb(255 255 255 / 0.86);
}

.trust-bar li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding-inline: 1.25rem;
	border-left: 1px solid rgb(255 255 255 / 0.18);
}

.trust-bar li:first-child {
	padding-left: 0;
	border-left: 0;
}

.trust-bar .stars {
	width: 4.5rem;
	color: var(--gold);
}

.trust-bar a {
	color: inherit;
	text-decoration-color: rgb(255 255 255 / 0.35);
}

.trust-bar a:hover {
	color: var(--white);
	text-decoration-color: var(--gold);
}

/*
 * Phones, also in landscape: every subpage header (paper header, banner, landing page hero, blog)
 * gets one smaller title, a smaller lead and less air above it, so the content starts on the first
 * screen. The landing page hero sets its own top space for the photo. The home page hero keeps its size.
 */
@media (max-width: 520px), (max-height: 500px) {
	.page-hero,
	.banner__inner {
		padding-top: 2.5rem;
	}

	.page-hero__title,
	.banner__title {
		font-size: 2.125rem;
	}

	.page-hero__lead,
	.banner__lead,
	.lp-hero__lead {
		font-size: 1.125rem;
	}
}

@media (max-width: 520px) {
	.trust-bar {
		flex-direction: column;
	}

	.trust-bar li {
		padding-left: 0;
		border-left: 0;
	}
}

/*
 * Specialization text: each topic is a row like the practice list, the title beside its text.
 * The brass piping lies on the rule above the title.
 */

.topic {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 1.25rem clamp(2rem, 5vw, 4.5rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid rgb(27 53 81 / 0.14);
}

/* The first topic opens right under the banner, so its piping stands alone, as above values. */
.topic:first-child {
	padding-top: 1.5rem;
	border-top: 0;
}

.topic:last-child {
	padding-bottom: 0;
}

.topic::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 2.5rem;
	height: 2px;
	background: var(--brass);
}

.topic__title {
	margin: 0;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	text-wrap: balance;
}

/* A wider measure than running text elsewhere (about 75 characters), since the title sits beside it. */
.topic .prose :is(p, ul, ol) {
	max-width: 38em;
}

.prose .topic__list-intro:first-child {
	margin-top: 0;
}

.prose .topic__list-intro {
	margin-top: 2rem;
	font-weight: 600;
	color: var(--indigo);
}

/* A topic's list (services, advantages) ruled, each item marked with a short brass line. */
.topic__list {
	max-width: 38em;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.topic__list li {
	position: relative;
	padding: 0.875rem 0 0.875rem 1.75rem;
	border-bottom: 1px solid var(--line);
	line-height: 1.6;
	text-wrap: pretty;
}

.topic__list li::before {
	content: "";
	position: absolute;
	top: calc(0.875rem + 0.8em);
	left: 0;
	width: 0.875rem;
	height: 2px;
	background: var(--brass);
}

/* Each title stays beside its text while a long topic scrolls past. */
@media (min-width: 861px) {
	.topic__title {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
		align-self: start;
	}
}

@media (max-width: 860px) {
	.topic {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Four assurances: a ruled strip under the hero rather than a row of cards. */

.assurances {
	border-bottom: 1px solid var(--line);
}

.assurances__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.assurance {
	padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
	border-left: 1px solid var(--line);
}

.assurance:first-child {
	padding-left: 0;
	border-left: 0;
}

.assurance:last-child {
	padding-right: 0;
}

.assurance .icon {
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: 1.25rem;
	color: var(--brass);
}

.assurance__title {
	margin: 0 0 0.375rem;
	font-size: 1.1875rem;
	font-weight: 500;
	color: var(--indigo);
}

.assurance p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

@media (max-width: 960px) {
	.assurances__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.assurance:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.assurance:nth-child(even) {
		padding-right: 0;
	}

	.assurance:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}
}

@media (max-width: 520px) {
	.assurances__list {
		grid-template-columns: 1fr;
	}

	.assurance {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		padding: 1.5rem 0;
		border-left: 0;
	}

	.assurance .icon {
		grid-row: span 2;
		margin: 0.125rem 0 0;
	}

	.assurance:nth-child(n + 2) {
		border-top: 1px solid var(--line);
	}
}

/* Text beside the form: the free assessment, and the closing consultation beside the portrait. */

.lp-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: start;
	gap: 3rem clamp(2.5rem, 6vw, 6rem);
}

@media (min-width: 961px) and (min-height: 760px) {
	.lp-split__intro {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
}

.lp-split__text {
	max-width: 34em;
	margin: 0 0 2rem;
	color: var(--muted);
}

.call-steps {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgb(27 53 81 / 0.14);
}

.call-step {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 1.25rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid rgb(27 53 81 / 0.14);
}

/* Same square frame as the timeline markers, centred on the height of its row. */
.call-step__number {
	display: grid;
	grid-row: span 2;
	align-self: center;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--gold);
	border-radius: var(--radius);
	background: var(--white);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	line-height: 1;
	color: var(--brass);
}

.call-step__title {
	margin: 0 0 0.25rem;
	font-size: 1.1875rem;
	font-weight: 500;
	color: var(--indigo);
}

.call-step p {
	max-width: 34em;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

.privacy-note {
	display: flex;
	gap: 0.625rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--muted);
}

.privacy-note .icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--brass);
}

.lp-split--closing {
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
}

.lp-split--closing .consult-form {
	margin-top: 0.5rem;
}

.closing-profile .credentials {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.closing-profile .credentials__logo {
	width: 4.4rem;
}

.closing-profile__call {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

.closing-profile__call a {
	font-weight: 600;
	white-space: nowrap;
	color: var(--brass);
}

@media (min-width: 961px) and (min-height: 760px) {
	.closing-profile {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
}

@media (max-width: 960px) {
	.lp-split,
	.lp-split--closing {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-split > .consult-form,
	.lp-split--closing .consult-form {
		max-width: 40rem;
	}

	/*
	 * Stacked: the attorney's card comes between the heading and the form, so the visitor still
	 * sees who will call back before filling it in.
	 */
	.lp-split--closing {
		row-gap: 0;
	}

	.lp-split--closing > div {
		display: contents;
	}

	.closing-profile {
		display: grid;
		grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
		align-items: center;
		gap: 0 1.25rem;
		order: 1;
		max-width: 40rem;
		margin-bottom: 2rem;
	}

	.lp-split--closing .consult-form {
		order: 2;
		margin-top: 0;
	}

	.closing-profile .profile__name {
		margin-top: 0;
	}

	.closing-profile .credentials,
	.closing-profile__call {
		grid-column: 1 / -1;
	}

	.closing-profile .credentials {
		justify-content: space-between;
	}

	.closing-profile .credentials__logo {
		width: 3.6rem;
	}
}

/* Consultation form: a white panel with the contact fields and the consent checkbox. */

.consult-form {
	--error: #b3261e;

	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	/* Target of the hero button and the header link: keep its top clear of the sticky header. */
	scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.consult-form__title {
	margin: 0 0 1.75rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	color: var(--indigo);
}

.consult-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.consult-form__error {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1rem;
	border: 1px solid rgb(179 38 30 / 0.35);
	border-radius: var(--radius);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--error);
}

.choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 1.5rem 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--muted);
	cursor: pointer;
}

.choice a {
	color: var(--brass);
}

/* The native checkbox stays in place for keyboard and screen readers, drawn by the box beside it. */
.choice input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.choice__box {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.0625rem;
	border: 1px solid rgb(27 53 81 / 0.35);
	border-radius: 2px;
	background: var(--white);
	color: var(--white);
	transition: background-color 0.2s, border-color 0.2s;
}

.choice__box .icon {
	width: 0.875rem;
	height: 0.875rem;
	stroke-width: 3;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.choice input:checked + .choice__box {
	border-color: var(--brass);
	background: var(--brass);
}

.choice input:checked + .choice__box .icon {
	opacity: 1;
	transform: none;
}

.choice input:focus-visible + .choice__box {
	outline: 2px solid var(--brass);
	outline-offset: 2px;
}

.choice input[aria-invalid="true"] + .choice__box {
	border-color: var(--error);
}

.consult-form__fields {
	display: grid;
	gap: 1rem;
}

.field__label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
}

.field__required {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--muted);
}

.field__input {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgb(27 53 81 / 0.25);
	border-radius: var(--radius);
	background: var(--white);
	font: inherit;
	color: var(--ink);
	caret-color: var(--brass);
	transition: border-color 0.2s;
}

.field__input:hover {
	border-color: rgb(27 53 81 / 0.45);
}

.field__input:focus-visible {
	border-color: var(--brass);
	outline-offset: 0;
}

.field__input[aria-invalid="true"] {
	border-color: var(--error);
}

.consult-form__submit {
	width: 100%;
	padding-block: 1.05rem;
	font-size: 1rem;
}

.consult-form__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.875rem 0 0;
	font-size: 0.875rem;
	color: var(--muted);
}

.consult-form__note .icon {
	width: 1rem;
	height: 1rem;
	color: var(--brass);
	stroke-width: 2.25;
}

.consult-form__done-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--brass);
	border-radius: var(--radius);
	color: var(--brass);
}

.consult-form__done-icon .icon {
	stroke-width: 2;
}

.consult-form__done .consult-form__title {
	margin-bottom: 0.5rem;
}

.consult-form__done p {
	margin: 0;
	color: var(--muted);
}

/*
 * Course of the case: the heading stays beside the steps, and the brass piping between the square
 * markers (the frame of the ŁZ mark) draws down with scrolling (assets/js/main.js).
 */

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

.process__text {
	max-width: 30rem;
	margin: 0;
	color: var(--muted);
}

@media (min-width: 961px) and (min-height: 700px) {
	.process__header {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
}

.timeline {
	--marker: 2.75rem;

	margin: 0;
	padding: 0;
	list-style: none;
}

.timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--marker) minmax(0, 1fr);
	column-gap: 1.5rem;
	padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.timeline__step:last-child {
	padding-bottom: 0;
}

/* Track and piping run from under one marker to the top of the next one. */
.timeline__step:not(:last-child)::before,
.timeline__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: var(--marker);
	bottom: 0;
	left: calc(var(--marker) / 2 - 1px);
	width: 2px;
	background: var(--line);
}

.timeline__step:not(:last-child)::after {
	background: var(--gold);
	transform-origin: top;
}

.timeline__marker {
	display: grid;
	grid-row: span 2;
	place-items: center;
	width: var(--marker);
	height: var(--marker);
	border: 1px solid var(--gold);
	border-radius: var(--radius);
	background: var(--gold);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	color: var(--navy-deep);
	transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}

.timeline__title {
	margin: 0 0 0.5rem;
	padding-top: 0.5rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	color: var(--indigo);
}

.timeline__step p {
	max-width: 34em;
	margin: 0;
	color: var(--muted);
	text-wrap: pretty;
}

@media (max-width: 960px) {
	.process {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.timeline {
		--marker: 2.25rem;
	}

	.timeline__step {
		column-gap: 1rem;
	}

	.timeline__title {
		padding-top: 0.25rem;
		font-size: 1.25rem;
	}
}

/* Questions and answers: native disclosure frames under the heading, each opening on its own. */

/* Two white bands in a row: the line under the first keeps them apart. */
.section--ruled {
	border-bottom: 1px solid var(--line);
}

.faq__header {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.faq__header .section__title {
	margin: 0;
}

.faq {
	--faq-pad: clamp(1.25rem, 3vw, 1.75rem);

	display: grid;
	gap: 0.75rem;
}

.faq__item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* The padding lives on the question, not the frame, so the whole width of the frame opens the answer. */
.faq__question {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 0.875rem;
	column-gap: 1.5rem;
	padding: 1.25rem var(--faq-pad);
	border-radius: var(--radius);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--indigo);
	list-style: none;
	cursor: pointer;
	transition: color 0.2s;
}

.faq__question::-webkit-details-marker {
	display: none;
}

/* A plus drawn as two strokes of piping; the vertical one folds away when the row is open. */
.faq__question::after {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	margin-top: 0.36rem;
	background:
		linear-gradient(var(--brass), var(--brass)) center / 100% 2px no-repeat,
		linear-gradient(var(--brass), var(--brass)) center / 2px 100% no-repeat;
	transition: background-size 0.2s;
}

.faq__item[open] > .faq__question::after {
	background-size: 100% 2px, 2px 0;
}

@media (hover: hover) {
	.faq__question:hover {
		color: var(--brass);
	}
}

.faq__answer {
	padding: 0 var(--faq-pad) 1.5rem;
}

.faq__answer p {
	max-width: 38em;
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	text-wrap: pretty;
}

.faq__answer p + p {
	margin-top: 0.875rem;
}

.faq__answer a {
	color: var(--brass);
	text-decoration: underline;
}

@media (max-width: 520px) {
	.faq__question {
		column-gap: 1rem;
		font-size: 1.125rem;
	}
}

/* Section heading with the text or rating beside it. */

.heading-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 1.5rem clamp(2rem, 6vw, 6rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.heading-split .section__title {
	margin: 0;
}

.heading-split__text {
	max-width: 34em;
	margin: 0;
	color: var(--muted);
}

.heading-split .section__title + .heading-split__text {
	margin-top: 1rem;
}

.section--navy .heading-split__text {
	color: rgb(255 255 255 / 0.72);
}

.values--light .value::before {
	background: var(--gold);
}

.values--light .value__title {
	color: var(--white);
}

.values--light .value p {
	color: rgb(255 255 255 / 0.72);
}

@media (max-width: 960px) {
	.heading-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Reviews (home page and consumer bankruptcy page): the Google rating beside the heading, the reviews in white frames. */

.rating__score {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
}

.rating__value {
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: lining-nums;
	line-height: 1;
	color: var(--indigo);
}

.rating .stars {
	width: 7.5rem;
}

.rating__label {
	margin: 0.5rem 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

.review-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.review-grid > li {
	display: flex;
}

.review {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

.review .stars {
	width: 5.5rem;
	margin-bottom: 1.25rem;
}

.review blockquote {
	flex: 1;
	margin: 0 0 1.5rem;
}

.review blockquote p {
	max-width: 34em;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
}

.review figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.review__author {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--indigo);
}

.review .google-g {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

@media (max-width: 760px) {
	.review-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stopka */

/* Deep navy, the same ground as the footer on dabrowski.legal (#0c1a2c). */
.site-footer {
	background: var(--navy-deep);
	color: rgb(255 255 255 / 0.62);
	font-size: 0.875rem;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-footer a:hover {
	color: var(--white);
}

/* Sitemap columns: quiet uppercase labels over muted links that light up on hover. */
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 2rem;
	padding-block: clamp(3rem, 6vw, 4.5rem) 3rem;
}

.site-footer__about p:last-child {
	max-width: 34ch;
	line-height: 1.65;
}

.site-footer__heading {
	margin: 0;
	color: rgb(255 255 255 / 0.58);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.site-footer__list,
.social-links {
	display: grid;
	gap: 0.625rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.social-links {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.social-links a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.social-links a:hover {
	border-color: var(--gold);
	color: var(--white);
}

.social-links .icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* Bar membership and the award, both as the firm's credentials. */
.site-footer__badges {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-top: 2rem;
}

.site-footer__kirp {
	width: auto;
	height: 4.75rem;
	opacity: 0.85;
}

.site-footer .award {
	flex: none;
	width: 4.25rem;
	height: auto;
}

/* The divider is drawn inside the gutters so it spans the text column, not the container padding. */
.site-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem max(1.5rem, env(safe-area-inset-bottom));
	font-size: 0.8125rem;
}

.site-footer__bottom::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--gutter-left);
	right: var(--gutter-right);
	border-top: 1px solid rgb(255 255 255 / 0.1);
}

.site-footer__bottom p {
	margin: 0;
}

@media (max-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem 2rem;
	}
}

@media (max-width: 560px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.site-footer__list a {
		overflow-wrap: anywhere;
	}
}

/*
 * Touch screens: every link and control gets a touch area of at least 44px. Vertical padding on an
 * inline link widens the area it answers to without moving the line, so the layout stays as drawn;
 * lists of links (footer, contents, pagination) get real 44px rows instead, so areas never overlap.
 */

@media (pointer: coarse) {
	.brand {
		padding-block: 0.375rem;
		margin-block: -0.375rem;
	}

	.more-link,
	.breadcrumbs a,
	.stats__label a,
	.trust-bar a,
	.closing-profile__call a,
	.faq__answer a,
	.cta__detail a,
	.site-footer__bottom a {
		padding-block: 0.8rem;
	}

	.toc a {
		padding-block: 0.75rem;
	}

	.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	/* The 44px rows already add air under the label. */
	.site-footer__list {
		gap: 0;
		margin-top: 0.25rem;
	}

	.site-footer__list > li {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.site-footer__list a {
		display: flex;
		align-items: center;
		align-self: stretch;
	}

	.social-links a {
		width: 2.75rem;
		height: 2.75rem;
	}
}

/*
 * Animations: a one-time hero entrance on load, stats rising into view (counting lives in
 * assets/js/main.js), value lines drawing in, the Kraków band parallax, the piping of the steps on the
 * consumer bankruptcy page and smooth scrolling to anchors. With "reduce motion" everything is static.
 */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* An answer unfolds where the browser can animate to its natural height; elsewhere it just appears. */
	@supports (interpolate-size: allow-keywords) {
		.faq__item {
			interpolate-size: allow-keywords;
		}

		.faq__item::details-content {
			height: 0;
			overflow: clip;
			transition:
				height 0.2s cubic-bezier(0.2, 0.7, 0.2, 1),
				content-visibility 0.2s allow-discrete;
		}

		.faq__item[open]::details-content {
			height: auto;
		}
	}

	/* The rule on a post's cover draws in once, as the cover opens. */
	.article-cover .cover-rule {
		animation: rule-draw 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
	}

	/* The light comes on once, then the shaft sways slightly and the lit spot on the logo follows it. */
	.hero__beam {
		animation:
			beam-in 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both,
			beam-drift 13s ease-in-out 2.45s infinite;
	}

	.hero__emblem {
		animation: emblem-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
	}

	.hero__emblem-lit {
		animation: relight 13s ease-in-out 2.45s infinite;
	}

	.hero__content > * {
		animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.hero__content > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.hero__content > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.hero__content > :nth-child(4) {
		animation-delay: 0.24s;
	}

	.banner__photo {
		animation: hero-photo 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.lp-hero__main > *,
	.banner__inner > .trust-bar,
	.page-banner .banner__inner > * {
		animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.page-banner .banner__inner > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.lp-hero__main > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.lp-hero__main > :nth-child(3),
	.lp-hero__main > :nth-child(4) {
		animation-delay: 0.16s;
	}

	.lp-hero__main > :nth-child(5) {
		animation-delay: 0.24s;
	}

	.banner__inner > .trust-bar {
		animation-delay: 0.32s;
	}

	/* The piping on each topic's rule draws in from the left as the topic comes into view. */
	.js .topic::before {
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
	}

	.js .topic.is-visible::before {
		transform: none;
	}

	/* The piping follows the scroll position set by assets/js/main.js; markers fill once it reaches them. */
	.js .timeline__step:not(:last-child)::after {
		transform: scaleY(var(--fill, 0));
	}

	.js .timeline__step:not(.is-reached) .timeline__marker {
		border-color: rgb(27 53 81 / 0.2);
		background: var(--white);
		color: var(--indigo);
	}

	.js .stats__item {
		opacity: 0;
		transform: translateY(0.75rem);
		transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.js .stats.is-visible .stats__item {
		opacity: 1;
		transform: none;
	}

	.js .stats__item:nth-child(2) {
		transition-delay: 0.1s;
	}

	.js .stats__item:nth-child(3) {
		transition-delay: 0.2s;
	}

	.js .stats__item:nth-child(4) {
		transition-delay: 0.3s;
	}

	/*
	 * Value lines draw in from the left one after another, then stretch on hover. The reveal uses
	 * transform and the hover uses scale, so the stagger delay never slows down the hover.
	 */
	.js .value::before {
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.4s ease;
	}

	.js .values.is-visible .value::before {
		transform: none;
	}

	.js .value:nth-child(2)::before {
		transition-delay: 0.15s, 0s;
	}

	.js .value:nth-child(3)::before {
		transition-delay: 0.3s, 0s;
	}

	@media (hover: hover) {
		.value:hover::before {
			scale: 1.8 1;
		}
	}

	/*
	 * Runs on the compositor in sync with scrolling. The timeline is named on the band because the
	 * band clips overflow, which would make it the photo's own scroll container for view().
	 * Shift of +-18.75% of the photo height = +-30% of the band height (the overhang).
	 */
	@supports (animation-timeline: view()) {
		.city {
			view-timeline-name: --city;
		}

		.city__photo {
			animation: city-parallax linear both;
			animation-timeline: --city;
		}
	}
}

@keyframes city-parallax {
	from {
		transform: translate3d(0, -18.75%, 0);
	}

	to {
		transform: translate3d(0, 18.75%, 0);
	}
}

@keyframes hero-photo {
	from {
		opacity: 0;
		transform: scale(1.04);
	}
}

@keyframes beam-in {
	from {
		opacity: 0;
		translate: -59% -63%;
		scale: 0.82;
	}
}

/* Rotation and the lit spot move together, so the spot stays on the shaft's axis. */
@keyframes beam-drift {
	0%, 100% {
		rotate: 0deg;
		opacity: 1;
	}

	24% {
		rotate: 0.9deg;
		opacity: 0.93;
	}

	46% {
		rotate: -0.35deg;
		opacity: 1;
	}

	70% {
		rotate: 0.55deg;
		opacity: 0.96;
	}

	88% {
		rotate: -0.6deg;
		opacity: 0.91;
	}
}

@keyframes relight {
	0%, 100% {
		--lit-x: 36%;
		--lit-y: 30%;
	}

	24% {
		--lit-x: 39%;
		--lit-y: 33%;
	}

	46% {
		--lit-x: 34.5%;
		--lit-y: 28%;
	}

	70% {
		--lit-x: 38%;
		--lit-y: 32%;
	}

	88% {
		--lit-x: 33.5%;
		--lit-y: 28.5%;
	}
}

@keyframes emblem-in {
	from {
		opacity: 0;
		scale: 0.94;
	}
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

@keyframes rule-draw {
	from {
		transform: scaleX(0);
	}
}

/*
 * Cookie consent: a flat band over the bottom of the page, above the landing page's bottom bar
 * (z-index 30) and under the menu's dimmed page (z-index 40). Accept and reject look the same on
 * purpose: refusing has to be as easy as agreeing.
 */
.consent {
	position: fixed;
	inset: auto 0 0;
	z-index: 35;
	max-height: 100dvh;
	overflow-y: auto;
	padding-block: 1.25rem max(1.25rem, env(safe-area-inset-bottom));
	border-top: 2px solid var(--brass);
	background: var(--white);
	color: var(--ink);
	font-size: 0.875rem;
	line-height: 1.55;
}

.consent[hidden] {
	display: none;
}

.consent__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem 2.5rem;
	align-items: center;
}

.consent p {
	margin: 0;
}

.consent__title {
	margin-bottom: 0.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--navy-deep);
}

.consent__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	margin-top: 0.25rem;
}

.consent__settings {
	display: grid;
	gap: 0.75rem;
	grid-column: 1 / -1;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.consent__settings[hidden] {
	display: none;
}

.consent .choice {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.consent__option strong {
	display: block;
	font-weight: 600;
	color: var(--navy-deep);
}

.consent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
}

.consent__more {
	padding: 0.65rem 0.5rem;
	border: 0;
	background: none;
	color: var(--navy-deep);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.consent__actions [hidden] {
	display: none;
}

@media (max-width: 860px) {
	.consent__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.consent__actions .button {
		flex: 1 1 8rem;
	}

	.consent__more {
		flex: 1 1 100%;
	}
}

/* Footer: the legal links, and the button that reopens the consent banner, read as one group. */
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.site-footer__cookie-settings {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-footer__cookie-settings:hover {
	color: var(--white);
}

html:not(.js) .site-footer__cookie-settings {
	display: none;
}

@media (pointer: coarse) {
	.site-footer__cookie-settings {
		padding-block: 0.8rem;
	}
}