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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-block-size: 100vh;
	margin: 0;
	overflow-wrap: break-word;
}

img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	overflow: visible;
	clip: auto;
	white-space: normal;
	color: var(--wp--preset--color--light-cream);
	background: var(--wp--preset--color--espresso);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--dark-chocolate);
	outline-offset: 3px;
}

.site-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(20rem, 24vw, 22.5rem);
	min-block-size: 100vh;
	min-block-size: 100svh;
}

.site-shell > * {
	min-inline-size: 0;
	margin-block-start: 0;
}

/*
 * The floating hamburger and its off-canvas drawer (see inc/sidebar.php)
 * only exist below the ~70rem breakpoint where the full sidebar no
 * longer fits comfortably — see the @media (max-width: 69.9375rem)
 * block further down, which is the only place these three ever become
 * visible/interactive. Hidden here by default so nothing sits fixed
 * and invisible on desktop.
 */
.site-mobile-header__toggle,
.site-mobile-drawer,
.site-mobile-drawer-overlay {
	display: none;
}

.site-sidebar {
	position: sticky;
	z-index: 20;
	inset-block-start: 0;
	block-size: 100vh;
	block-size: 100svh;
	overflow-y: auto;
	color: var(--wp--preset--color--espresso);
	background: var(--wp--preset--color--light-cream);
	border-inline-start: 1px solid var(--wp--preset--color--warm-beige);
}

/*
 * Logged-in users get the WP admin bar fixed to the top of the viewport
 * (core adds `margin-top: var(--wp-admin--admin-bar--height)` to <html>
 * for this) — vh/svh units don't shrink to account for it, so without
 * this override the sidebar still claims a full 100svh starting below
 * that offset, overflowing past the bottom of the viewport by exactly
 * the admin bar's height. That's what the "sidebar minimally scrolls"
 * symptom was: overflow-y: auto quietly let you scroll that sliver.
 * Sticking at the admin bar's height instead of 0, and shrinking the
 * sidebar by the same amount, removes the overflow instead of masking
 * it with overflow: hidden.
 */
body.admin-bar .site-sidebar {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
	block-size: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	block-size: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

/*
 * Three explicit rows — top (logo), middle (menu, given the flexible
 * 1fr track so it centers in whatever space top/bottom don't use),
 * bottom (contact). Rows are placed by explicit grid-row on each zone
 * (see below) rather than relying on source order, so removing the
 * menu entirely when no sidebar_menu is assigned (see inc/sidebar.php)
 * still leaves the top/bottom zones exactly where they belong.
 */
.site-sidebar__inner {
	display: grid;
	grid-template-rows: auto 1fr auto;
	box-sizing: border-box;
	block-size: 100%;
	padding: clamp(1.5rem, 3.25vh, 3rem) clamp(2rem, 3vw, 2.75rem);
}

.site-sidebar__top {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: 100%;
}

.site-brand {
	display: flex;
	justify-content: center;
	inline-size: 100%;
}

.site-brand__logo {
	display: block;
	inline-size: 100%;
	max-inline-size: clamp(11.25rem, 14vw, 13.75rem);
	margin-inline: auto;
}

.site-brand__logo-image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
}

.site-sidebar__divider.wp-block-separator {
	flex: 0 0 auto;
	inline-size: 100%;
	margin: clamp(1.25rem, 2.6vh, 1.75rem) 0;
	border-color: var(--wp--preset--color--warm-beige);
	opacity: 1;
}

/* Sits in the grid's flexible middle row (see .site-sidebar__inner
   above) — align-self: center vertically centers this block within
   whatever space the top/bottom zones don't use, rather than letting
   it stretch to fill the whole row or stick to the row's top edge. */
.sidebar-navigation {
	grid-row: 2;
	align-self: center;
	inline-size: 100%;
}

.sidebar-nav-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-nav-list a {
	position: relative;
	display: inline-block;
	padding: 0.625rem 0.25rem;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.035em;
	text-align: center;
	text-decoration: none;
	transition: color 220ms ease, transform 220ms ease, font-weight 220ms ease;
}

/*
 * The active indicator itself — a thin centred line under the label,
 * always present in the DOM but collapsed to zero width/opacity until
 * .is-active is added (see inc/sidebar.php's is_singular()/is_home()
 * checks for subpages, or assets/js/sidebar-scroll-spy.js for the front
 * page's own five sections — never both on the same item). Grows from
 * the centre (transform-origin), not the left edge, because this list's
 * own labels are centre-aligned, not left-aligned.
 */
.sidebar-nav-list a::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 0.1875rem;
	inline-size: 1.375rem;
	block-size: 1px;
	background: var(--wp--preset--color--espresso);
	opacity: 0;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	transition: transform 250ms ease, opacity 250ms ease;
	pointer-events: none;
}

.sidebar-nav-list a:hover,
.sidebar-nav-list a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	transform: translateX(0.15rem);
}

/*
 * Subtle on purpose (per the brief): a touch darker, slightly bolder
 * text, nudged right, plus the line above — no background box, no
 * badge. Kept as its own rule (not folded into the :hover selector
 * above) so an active item's own transform/colour don't visibly jump
 * when the pointer happens to also be over it — see the two rules
 * beneath this one, which only adjust colour, not the shift, while
 * both are true at once.
 */
.sidebar-nav-list a.is-active {
	color: var(--wp--preset--color--dark-chocolate);
	font-weight: 500;
	transform: translateX(0.25rem);
}

.sidebar-nav-list a.is-active::after {
	opacity: 1;
	transform: translateX(-50%) scaleX(1);
}

.sidebar-nav-list a.is-active:hover,
.sidebar-nav-list a.is-active:focus-visible {
	color: var(--wp--preset--color--espresso);
	transform: translateX(0.25rem);
}

@media (prefers-reduced-motion: reduce) {
	.sidebar-nav-list a {
		transition: color 160ms ease;
	}

	.sidebar-nav-list a::after {
		transition: opacity 160ms ease;
	}

	.sidebar-nav-list a:hover,
	.sidebar-nav-list a:focus-visible,
	.sidebar-nav-list a.is-active,
	.sidebar-nav-list a.is-active:hover,
	.sidebar-nav-list a.is-active:focus-visible {
		transform: none;
	}
}

/* Bottom row of the grid (see .site-sidebar__inner above) — sits at
   the end of the sidebar automatically, no margin-auto trick needed. */
.site-sidebar__contact {
	grid-row: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: 100%;
	text-align: center;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--ui);
}

/* min-inline-size: 0 overrides the flex item default of auto (based on
   content's unbroken max-content width) — without it, a long email
   address could force this wider than the 14rem cap and overflow the
   sidebar horizontally, the same "grid/flex blowout" bug fixed on the
   footer's contact column. */
.sidebar-contact {
	min-inline-size: 0;
	inline-size: min(100%, 14rem);
	margin-inline: auto;
}

.sidebar-contact + .sidebar-contact {
	margin-block-start: 1.125rem;
}

.sidebar-contact__label,
.sidebar-contact__value {
	margin: 0;
	text-align: center;
}

.sidebar-contact__label {
	margin-block-end: 0.25rem;
	color: var(--wp--preset--color--medium-taupe);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sidebar-contact__value {
	overflow-wrap: anywhere;
	font-size: 0.9rem;
	line-height: 1.5;
}

.sidebar-contact__address {
	margin: 0;
	font-style: normal;
	text-align: center;
}

/* Desktop sidebar only: keep the multi-line address in the same quiet
   UI hierarchy as phone/e-mail without changing either of those rows. */
.site-sidebar .sidebar-contact__address {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
}

.sidebar-contact__address-line {
	display: block;
}

/* The complete street line may wrap naturally when necessary, but a
   final floor/unit note must remain an intact typographic phrase. */
.site-sidebar .sidebar-contact__address-detail,
.site-sidebar .sidebar-contact__address-line--locality {
	white-space: nowrap;
}

.sidebar-contact__value a {
	display: inline-block;
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease;
}

.sidebar-contact__value a:hover,
.sidebar-contact__value a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	transform: translateX(0.15rem);
}

.sidebar-contact__note {
	margin: 1rem 0 0;
	max-inline-size: 16rem;
	margin-inline: auto;
	color: var(--wp--preset--color--medium-taupe);
	font-size: 0.75rem;
	line-height: 1.5;
	font-style: italic;
	text-align: center;
}

/* Icon-only row (no visible label — see .sidebar-contact__social-link):
   three fixed hit-area icons always fit one row at either width this
   is used at (the desktop sidebar's own 14rem cap and the roomier
   mobile drawer), so unlike the old icon+text version this never needs
   to wrap. */
.sidebar-contact__socials {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

/* Fixed 2.25rem (36px) hit area, well past the icon's own ~20px, so the
   link stays comfortably tappable on mobile without a visible button
   background — icon centred inside via flex, not sized by font/text
   (there is none: aria-label carries the accessible name now that the
   visible label span is gone). */
.sidebar-contact__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration: none;
	transition: color 200ms ease, transform 200ms ease;
}

.sidebar-contact__social-link svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	flex-shrink: 0;
}

.sidebar-contact__social-link:hover,
.sidebar-contact__social-link:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	transform: translateY(-0.125rem);
}

.site-content-shell {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	min-block-size: 100vh;
	min-block-size: 100svh;
}

.site-main {
	flex: 1 0 auto;
	inline-size: 100%;
	padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
}

.site-main--front-page {
	margin-block-start: 0;
	padding: 0;
}

/*
 * Hero, Wartości and O kancelarii are prepended in front of the Post
 * Content block's own output (see the render_block_core/post-content
 * filters in inc/hero.php, inc/values.php, inc/about.php), so at the
 * final HTML level they land as extra direct children of this <main>,
 * alongside the entry-content wrapper that follows them (Praktyka,
 * Artykuły). WordPress's global styles give every non-first direct
 * child of an .is-layout-flow element a `margin-block-start` (the
 * blockGap default) — same mechanism, same fix as .home-page-content >
 * * below, just one level up now that these sections live outside it.
 * Left in place, that margin opens a transparent gap between sections,
 * through which the hero's fixed-position video (desktop, see
 * .home-hero__media) shows behind whichever gap happens to sit in the
 * viewport at the time.
 */
.site-main--front-page > * {
	margin-block: 0;
}

.home-page-content {
	inline-size: 100%;
	margin: 0;
}

.home-page-content > * {
	margin-block: 0;
}

.home-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-block-size: 100vh;
	min-block-size: 100svh;
	padding: clamp(2.5rem, 4vw, 4.5rem) clamp(2rem, 4vw, 4.5rem);
}

/*
 * Logged-in users see the WordPress admin bar fixed to the top of the
 * viewport, so a full 100svh hero would force an extra scroll equal to
 * its height. `--wp-admin--admin-bar--height` is WordPress core's own
 * custom property from wp-includes/css/admin-bar.css (32px on desktop,
 * 46px at its own 782px breakpoint) — reusing it keeps this in sync with
 * core instead of duplicating its breakpoint/values here.
 */
body.admin-bar .home-hero {
	min-block-size: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	min-block-size: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

/*
 * Hidden by default (desktop) — the desktop sidebar already carries
 * this same logo (see .site-brand__logo / kancelaria_opora_render_sidebar_logo(),
 * reused verbatim here, not duplicated). Shown only below the ~70rem
 * sidebar/drawer cutoff, see the @media block near .home-hero__content
 * further down.
 */
.home-hero__mobile-brand {
	display: none;
}

/*
 * Always position: absolute, at every viewport — no desktop-only
 * position: fixed override any more. That override (fixed + a negative
 * z-index bubbling to the root stacking context, so the video wrapper
 * would paint below every later section) gave the video a
 * background-attachment: fixed-style parallax on desktop, but matches
 * a documented, recurring class of WebKit compositing bugs: the video
 * keeps decoding/advancing (paused: false, currentTime climbing,
 * looping) while the compositor never repaints the frame on screen —
 * confirmed live in Safari macOS on this exact site (readyState: 4,
 * networkState: 1, error: null, yet no visible frame updates). See the
 * research report for this fix for the specific WebKit bug reports and
 * forum threads describing the identical fixed-ancestor symptom. Only
 * position: absolute (this rule, now unconditional — the exact value
 * mobile/tablet and prefers-reduced-motion visitors already had, where
 * this bug never reproduced) removes the trigger; the parallax pin is
 * the one visual trade-off, not a bug fix side effect.
 */
.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--wp--preset--color--warm-beige);
}

.home-hero__media::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(246, 241, 234, 0.95) 0%,
		rgba(246, 241, 234, 0.84) 26%,
		rgba(222, 208, 199, 0.4) 50%,
		rgba(222, 208, 199, 0.08) 74%,
		rgba(222, 208, 199, 0) 100%
	);
	content: "";
}

.home-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	inline-size: min(100%, 44rem);
	max-inline-size: 52%;
}

.home-hero__eyebrow {
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.home-hero__title {
	max-inline-size: none;
	margin: 0;
	font-size: clamp(3.5rem, 6.5vw, 7rem);
	font-weight: 500;
	line-height: 0.88;
	letter-spacing: -0.045em;
	overflow-wrap: normal;
	word-break: normal;
}

.home-hero__description {
	max-inline-size: 38ch;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
	line-height: 1.65;
}

.home-hero__actions {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

/*
 * Entrance animation for the hero's text content only (video sits in
 * the separate .home-hero__media sibling below and is untouched).
 * animation-fill-mode: both holds each element at the "from" keyframe
 * during its own delay, so nothing flashes at full opacity before its
 * turn — no separate initial-state rule needed.
 */
@keyframes home-hero-in {
	from {
		opacity: 0;
		filter: blur(2px);
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
}

.home-hero__eyebrow,
.home-hero__title,
.home-hero__description,
.home-hero__actions {
	animation: home-hero-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*
 * Same fade/rise/blur-in as the text below, on the same timing curve —
 * but its own keyframe, not home-hero-in: this element is already
 * centred via transform: translateX(-50%) (see the @media block
 * further down), and a shared keyframe's transform: translateY(...)
 * would replace that translateX entirely rather than combine with it
 * (an element only ever has one live transform value), knocking the
 * logo off-centre for the animation's duration. Delayed 0ms so it's
 * the first thing to appear, ahead of the eyebrow at 100ms.
 */
@keyframes home-hero-brand-in {
	from {
		opacity: 0;
		filter: blur(2px);
		transform: translateX(-50%) translateY(1.25rem);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: translateX(-50%) translateY(0);
	}
}

.home-hero__mobile-brand {
	animation: home-hero-brand-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0ms;
}

.home-hero__eyebrow {
	animation-delay: 100ms;
}

.home-hero__title {
	animation-delay: 180ms;
}

.home-hero__description {
	animation-delay: 280ms;
}

.home-hero__actions {
	animation-delay: 380ms;
}

.home-hero__button .wp-block-button__link {
	min-inline-size: 10.5rem;
	padding: 0.9rem 1.5rem;
	text-align: center;
	transition: background-color 180ms ease, color 180ms ease;
}

.home-hero__video {
	position: absolute;
	inset: 0;
	margin: 0;
	background: var(--wp--preset--color--warm-beige);
}

.home-hero__video video {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 1;
	/* Purely decorative background footage, not a control a visitor can
	   tap — this is what keeps a mobile browser from ever treating an
	   autoplay-blocked frame as an interactive, tappable video (which is
	   what invites its own native play affordance in the first place). */
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/*
 * Safari specifically will still paint its own play/panel chrome over a
 * <video> in some conditions even with pointer-events: none and no
 * controls attribute — these are the standard (WebKit-only, hence the
 * !important: their own UA styles already carry it, nothing lower-
 * specificity can win otherwise) pseudo-elements for switching that
 * chrome off outright. Inert everywhere else; harmless to ship
 * unconditionally.
 */
.home-hero__video video::-webkit-media-controls,
.home-hero__video video::-webkit-media-controls-start-playback-button,
.home-hero__video video::-webkit-media-controls-play-button,
.home-hero__video video::-webkit-media-controls-panel {
	display: none !important;
	-webkit-appearance: none;
}

/*
 * Hidden by default — same box as the <video> it sits next to
 * (position/size/object-fit all match exactly), only ever shown by
 * assets/js/hero-video.js adding "is-video-fallback" to the wrapper
 * below, or immediately for prefers-reduced-motion visitors (see that
 * media query further down this file). Same still frame as the video's
 * own poster= attribute (inc/hero.php), as a real <img> rather than
 * relying on that attribute alone — poster= only ever paints while the
 * <video> element itself is visible, and the whole point here is to
 * keep a frame on screen at the exact moment the video gets hidden.
 */
.home-hero__fallback {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/*
 * Chrome/Android's own fallback when it declines to honour autoplay is
 * a large centred play button drawn directly over the <video> — not
 * something any CSS can reach or restyle, since it isn't part of the
 * page. assets/js/hero-video.js is what actually avoids it: the moment
 * it detects the video can't/won't play (a rejected play() promise, an
 * error/stalled/abort event, or prefers-reduced-motion), it adds this
 * class to the wrapper — hiding the (now-paused, about to be offered
 * that native control) video entirely and revealing .home-hero__fallback
 * above in the exact same spot, instead of the flat wrapper background
 * underneath both of them. On Safari/WebKit, hero-video.js adds this
 * class unconditionally instead: a documented compositor bug there
 * (currentTime advancing, paused: false, yet nothing repaints) means a
 * "playing" video isn't reliably a visible one, so Safari never attempts
 * to reveal the live video at all — it always shows this static frame.
 */
.home-hero__video.is-video-fallback video {
	opacity: 0;
	visibility: hidden;
}

.home-hero__video.is-video-fallback .home-hero__fallback {
	opacity: 1;
	visibility: visible;
}

.home-values {
	padding: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem);
	background: var(--wp--preset--color--light-cream);
	border-block: 1px solid var(--wp--preset--color--warm-beige);
}

/* Same small-label treatment as .home-about__eyebrow / .home-services__eyebrow
   / .practice-section__eyebrow — this section has no visible heading of its
   own (only an SR-only h2 above), so this eyebrow doubles as its one visual
   label on every breakpoint, not just mobile. */
.home-values__eyebrow {
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.home-values__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
}

.home-values__item {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	padding-inline: clamp(1.5rem, 2.5vw, 2.5rem);
}

.home-values__item:first-child {
	padding-inline-start: 0;
}

.home-values__item:last-child {
	padding-inline-end: 0;
}

.home-values__item + .home-values__item {
	border-inline-start: 1px solid var(--wp--preset--color--warm-beige);
}

.home-values__icon {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: clamp(1.5rem, 2.5vw, 2.25rem);
	color: var(--wp--preset--color--medium-taupe);
}

.home-values__icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-values__icon img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.home-values__title {
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
	font-weight: 500;
	line-height: 1.08;
}

.home-values__description {
	margin: var(--wp--preset--spacing--md) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(0.875rem, 0.82rem + 0.16vw, 0.975rem);
	line-height: 1.65;
}

.home-values__link {
	margin: auto 0 0;
	padding-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-values__link a {
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

/* Mobile-slider-only elements — see the @media (max-width: 47.9375rem)
   block further down for their visible styling. */
.home-values__number,
.home-values__controls {
	display: none;
}

/*
 * Very subtle warm gradient built from three existing palette tokens
 * (Ivory → Light Cream → Warm Beige — no new one-off hex values), never
 * reaching the darker cappuccino/rose end the section used before: this
 * stays in the same light ivory/cream family the brief asks for, with
 * only a faint warmth at the bottom edge rather than a visible sweep.
 */
.home-about {
	padding: clamp(6.25rem, 8vw, 8.75rem) clamp(2rem, 4vw, 4.5rem);
	overflow: clip;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--ivory) 0%,
		var(--wp--preset--color--light-cream) 55%,
		var(--wp--preset--color--warm-beige) 100%
	);
}

.home-about > .home-about__columns {
	display: grid;
	grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
	align-items: center;
	gap: clamp(3.75rem, 6vw, 6.25rem);
	margin: 0;
}

.home-about__content {
	min-inline-size: 0;
}

.home-about__media {
	min-inline-size: 0;
}

.home-about__content-inner {
	max-inline-size: 34rem;
	padding-inline-start: clamp(1.5rem, 2.5vw, 2.5rem);
	border-inline-start: 1px solid var(--wp--preset--color--main-taupe);
}

.home-about__eyebrow {
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.home-about__title {
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 6vw, 6rem);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.035em;
}

.home-about__description {
	max-inline-size: 40ch;
	margin: clamp(2rem, 3.5vw, 3rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(0.975rem, 0.91rem + 0.18vw, 1.0625rem);
	line-height: 1.7;
}

.home-about__description p {
	margin: 0;
}

.home-about__description p + p {
	margin-block-start: 1em;
}

/* Same shape/behaviour as .practice-accordion__link ("W czym mogę Ci
   pomóc"'s own "Dowiedz się więcej →", further up this file) — a quiet
   uppercase arrow-link, not a filled button — just recoloured for this
   section's light Ivory/Cream background instead of that one's dark
   cover: Espresso instead of Warm Beige, Main Taupe instead of Light
   Cream on hover. A solid wp-element-button was tried here first and
   reverted per feedback — it read as too heavy next to that sibling
   CTA's own quieter style. */
.home-about__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: clamp(1.5rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease, transform 200ms ease;
}

.home-about__cta:hover,
.home-about__cta:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	transform: translateX(0.2rem);
}

/*
 * A cream "mat" (padding + Light Cream fill) plus a small radius and a
 * very soft Espresso-tinted shadow — a light frame, never a heavy one:
 * no visible border stroke, just enough lift to read as a deliberately
 * presented portrait rather than a flat cutout. aspect-ratio replaces
 * the old "let the natural ratio decide" approach so object-fit: cover
 * below has a real box to crop into — the brief's own "duży portret,
 * niewiele pustego tła" — instead of showing the photo's full,
 * near-square original frame (brick wall / window either side).
 *
 * max-inline-size dropped from the original 40.625rem (650px, an
 * ~812px-tall portrait at 4:5) down in stages, then back up — 28rem,
 * then 31rem (496px → 620px tall) — per feedback that with the
 * section's real (longer, two-paragraph) about copy in place, rather
 * than the single-paragraph fallback, the smaller sizes tried earlier
 * still read as too small next to the taller text column. 620px sits
 * close to a two-paragraph text column's own height at desktop/tablet
 * widths (down to the 46rem stacking point below) while reading as a
 * proper large portrait again, still short of the original 812px.
 * Driven entirely by max-inline-size + aspect-ratio + a block-size
 * that's never set directly (so it stays auto) — no fixed height tuned
 * to one viewport; align-items: center on .home-about__columns (not
 * stretch) still keeps it from being pulled to match the row's own
 * height.
 */
.home-about__image {
	margin: 0;
	margin-inline-start: auto;
	inline-size: 100%;
	max-inline-size: 33rem;
	aspect-ratio: 4 / 5;
	padding: 0.625rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--light-cream);
	box-shadow: 0 2rem 4rem -2rem rgba(30, 21, 22, 0.22);
}

.home-about__image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 0.375rem;
	object-fit: cover;
	background: transparent;
}

.home-services {
	padding: clamp(4rem, 6.5vw, 6.5rem) clamp(2rem, 4vw, 4.5rem);
	background: var(--wp--preset--color--light-cream);
}

.home-services--ivory,
.home-services--light-cream,
.home-services--warm-beige {
	background: var(--wp--preset--color--light-cream);
}

/*
 * No width cap here — eyebrow and title already constrain themselves
 * (title: max-inline-size: 18ch below), so leaving this wrapper free to
 * fill the section's full content width is what lets .home-services__description
 * actually reach its own, much wider min(62.5rem, 78%) cap instead of
 * being bottlenecked by a narrower parent.
 */
.home-services__intro {
	margin: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}

.home-services__eyebrow {
	margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.home-services__title {
	margin: 0;
	max-inline-size: 18ch;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.6rem + 1.8vw, 2.875rem);
	font-weight: 500;
	line-height: 1.05;
}

/*
 * A lead paragraph, not a stray caption — min(1000px, 78%) lets it use
 * most of the section's width on desktop (roughly 65-80% in practice,
 * since .home-services__intro's own content box is what 78% resolves
 * against) while the 1000px ceiling keeps line length reasonable on
 * very wide screens instead of stretching unconditionally to 100%.
 * Source Serif 4 to match the site's long-form reading font,
 * left-aligned with the heading above it.
 */
.home-services__description {
	max-inline-size: min(62.5rem, 78%);
	margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.375rem);
	line-height: 1.6;
	opacity: 0.9;
}

/*
 * A grid of unknown, editor-controlled length (any number of published
 * "service" posts — see inc/services.php), so borders can't be hardcoded
 * per item the way a fixed 4-card row could (see .home-values__item).
 * nth-child(3n+1)/(- n+3) instead identify "first in its row" / "in the
 * first row" for any item count, giving every cell a thin line above
 * and to the left except where that would sit against the section's
 * own edge — a plain grid of dividers, never a frame around anything.
 * Dividers reuse the same Warm Beige token as the Values grid, keeping
 * both light-cream sections visually consistent without adding a new
 * color or making the grid read as a literal table.
 * align-items: stretch (grid's own default, stated explicitly) is what
 * lets every item in a row match that row's tallest neighbour, which
 * .home-services__item then turns into equal-height columns via flex.
 */
.home-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

/*
 * align-items: stretch on .home-services__grid above is already what
 * equalises every item's height to its row's tallest neighbour — no
 * block-size: 100% needed (and it must NOT be added back here). A
 * flex-column item with an explicit percentage block-size inside an
 * auto-sized grid row creates a circular sizing dependency (item height
 * depends on the row, the auto row's height depends on the item's
 * intrinsic height): confirmed live that this made the GRID CONTAINER's
 * own computed height collapse to its first row only, while every row
 * after it still rendered (visually correct) but entirely outside that
 * box — which let .home-services__cta below (positioned right after
 * the grid's own too-short box) land visually on top of row 2. Plain
 * align-items: stretch has no such dependency: it stretches each item
 * only after the row's own auto height is already resolved from
 * content.
 */
.home-services__item {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	padding: clamp(3.25rem, 5vw, 4.5rem) clamp(2.5rem, 3.25vw, 3.25rem);
	border-inline-start: 1px solid var(--wp--preset--color--warm-beige);
	border-block-start: 1px solid var(--wp--preset--color--warm-beige);
}

.home-services__item:nth-child(3n + 1) {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.home-services__item:nth-child(3n) {
	padding-inline-end: 0;
}

.home-services__item:nth-child(-n + 3) {
	padding-block-start: 0;
	border-block-start: 0;
}

/*
 * Exactly 5 published services (row 1 full at 3, row 2 only 2 of the
 * grid's 3 implied columns) — items 4-5 otherwise keep the plain
 * border-block-start every row gets, which read as a broken/unfinished
 * table row rather than a deliberate divider, since there's no 6th
 * item to justify the implied third column.
 *
 * :nth-child(4):nth-last-child(2) and :nth-child(5):nth-last-child(1)
 * are compound, count-aware selectors: "the 4th child that is ALSO the
 * 2nd-to-last" is only ever true when the grid has exactly 5 children
 * total (4 + 2 - 1 = 5), and likewise "the 5th child that is also the
 * last" only matches a 5-item grid. No PHP-added class, no JS, and this
 * automatically stops applying on its own the moment a 6th service gets
 * published — nothing here needs updating if the count changes later.
 *
 * The line itself is dropped in favour of extra padding-block-start —
 * more breathing room between the rows instead of a ruled line that
 * only spans two of three columns. item 5 additionally gets the same
 * flush-right treatment (padding-inline-end: 0) item 3 already has as
 * row 1's own last column, so row 2 reads as a deliberately shorter
 * row, not a cut-off one. Scoped to min-width: 80.0625rem — one step
 * above this section's own 80rem 3-column breakpoint further down — so
 * it can never bleed into the 2-column tablet/medium-desktop grid,
 * where "item 4" and "item 5" occupy entirely different positions.
 */
@media (min-width: 80.0625rem) {
	.home-services__item:nth-child(4):nth-last-child(2),
	.home-services__item:nth-child(5):nth-last-child(1) {
		padding-block-start: clamp(4.5rem, 7vw, 6rem);
		border-block-start: 0;
	}

	.home-services__item:nth-child(5):nth-last-child(1) {
		padding-inline-end: 0;
	}
}

.home-services__number {
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/*
 * overflow-wrap: normal/word-break: normal/hyphens: none override
 * body's own overflow-wrap: break-word (assets/css/site.css, ~line 15)
 * — a sensible global safety net against unbreakable tokens like URLs
 * elsewhere on the site, but wrong for this elegant serif heading: at
 * ~1024-1280px, where this section's own 3-column grid + item padding
 * (further up this file) can leave a service title barely 180-220px of
 * usable width, that inherited rule was letting the browser split long
 * Polish words like "Sporządzanie"/"Reprezentacja" mid-letter to make
 * them fit — never actually attractive, and not what this scoped reset
 * changes anywhere else on the site. Scoped to this one selector only,
 * per the brief — .home-services__grid's own breakpoint (further down
 * this file) is the other half of the real fix, giving this column
 * enough room in the first place rather than relying on wrapping alone.
 */
.home-services__item-title {
	margin: 0;
	max-inline-size: 20ch;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
	font-weight: 500;
	line-height: 1.2;
}

/*
 * Full text now (see kancelaria_opora_get_service_home_text() in
 * inc/services.php) — no line-clamp, no ch-based width cap, so a long
 * service_home_text is never artificially cut off. Column width alone
 * bounds the measure.
 */
.home-services__item-excerpt {
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(0.9375rem, 0.89rem + 0.19vw, 1.0625rem);
	line-height: 1.6;
}

/* Mobile-slider-only nav — see the @media (max-width: 47.9375rem)
   block further down for its visible styling. */
.home-services__controls {
	display: none;
}

/*
 * One shared closing CTA below the whole grid — not a 7th card, so it
 * lives outside .home-services__grid as its own sibling (never one of
 * its cells) and gets a clearly larger gap than the row-to-row spacing
 * inside the grid. Reuses .single-practice__cta (inc/cta.php) verbatim
 * for the banner itself; the rules below only reset what that shared
 * component's OWN width-specific breakpoints (48rem-69.9375rem, see
 * assets/css/site.css further down) apply for its original, narrower
 * .single-practice__body context (a centred ~46rem column with
 * flex-wrap: nowrap and a nowrap button, since that column was already
 * guaranteed wide enough for one row) — here the box is full section
 * width instead, so forcing that same "never wrap" layout is exactly
 * what let the icon/copy/button row overlap itself at tablet widths:
 * this keeps the banner full-width AND wrapping-capable at every
 * breakpoint, matching .home-services__grid above it.
 */
.home-services__cta {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.home-services__cta .single-practice__cta {
	inline-size: 100%;
	max-inline-size: 100%;
	margin-inline: 0;
	flex-wrap: wrap;
}

.home-services__cta .single-practice__cta .wp-block-button__link {
	white-space: normal;
}

/*
 * Two labels, one link (inc/cta.php's button_text/button_text_short) —
 * never a duplicated <a>. The short one only exists in the DOM when a
 * caller actually passes button_text_short (only this section does),
 * so this default (long visible, short hidden) is safe everywhere else
 * the shared banner renders too.
 */
.home-services__cta .single-practice__cta .wp-block-button__link-text--short {
	display: none;
}

/*
 * True-phone-only fine-tuning, scoped to this one instance (practice/
 * article pages keep .single-practice__cta's own shared mobile rules,
 * still at their original 47.9375rem, untouched). Below 37.5rem
 * (600px — .home-services__grid's own slider threshold further down)
 * the shared component already stacks icon/title/text/button in one
 * left-aligned column (see the plain .single-practice__cta rule at its
 * own 47.9375rem breakpoint, which still covers this range too); the
 * actual overflow bug this originally fixed was the button itself:
 * left at its shared inline-size: auto, it sizes to its own unwrapped
 * text ("Sprawdź, jak wygląda współpraca →" is long) inside a flex
 * row, and a flex item's default min-width: auto refuses to shrink
 * below that intrinsic content width — so the button forced itself
 * wider than the card and overflowed the 320-430px viewport instead of
 * wrapping. Giving it an explicit 100% width (not auto) removes that
 * intrinsic-width floor entirely, so it wraps within the card like any
 * other block instead of pushing past it. Narrowed from 47.9375rem to
 * 37.5rem so the 600-767.9px tablet range instead falls back to the
 * shared component's own (already safe) auto-width button — this
 * section's 2-column tier now starts at 80rem (1280px, see further
 * down), so anything above 600px is tablet/medium-desktop, never phone.
 */
@media (max-width: 37.5rem) {
	.home-services__cta .single-practice__cta {
		padding: clamp(1.25rem, 5vw, 1.5rem);
	}

	.home-services__cta .single-practice__cta-icon {
		margin-block-end: 0.875rem;
	}

	.home-services__cta .single-practice__cta-copy {
		inline-size: 100%;
		max-inline-size: none;
	}

	.home-services__cta .single-practice__cta-title,
	.home-services__cta .single-practice__cta-text {
		inline-size: 100%;
		max-inline-size: none;
	}

	.home-services__cta .single-practice__cta-title {
		margin-block-end: 0.625rem;
	}

	.home-services__cta .single-practice__cta .wp-block-buttons {
		inline-size: 100%;
		margin-block-start: 1.25rem;
	}

	.home-services__cta .single-practice__cta .wp-block-button,
	.home-services__cta .single-practice__cta .wp-block-button__link {
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: 100%;
		text-align: center;
	}

	.home-services__cta .single-practice__cta .wp-block-button__link {
		padding-inline: 1rem;
		font-size: 0.8125rem;
		letter-spacing: 0.03em;
		white-space: normal;
		line-height: 1.35;
	}
}

/*
 * Phone-width refinement (320-425px covered by the brief, 430px used as
 * the round cutoff) on top of the boxed banner above, which already
 * covers the whole <=47.9375rem range (431-767px included) and stays
 * untouched there. Border, background and box padding are intentionally
 * NOT redeclared here — this keeps inheriting the base .single-practice__cta
 * border/background (unconditional rule further up) and the box padding
 * block-max above (already clamp(1.25rem, 5vw, 1.5rem), i.e. 20-24px,
 * matching the brief) — same boxed component as desktop, just the icon
 * and the button's own type scale get a small phone-only trim so the
 * button label has a real shot at fitting on one line.
 */
@media (max-width: 26.875rem) {
	.home-services__cta .single-practice__cta-icon {
		inline-size: 1.5rem;
		block-size: 1.5rem;
	}

	.home-services__cta .single-practice__cta .wp-block-button__link {
		padding-inline: 0.875rem;
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}
}

/*
 * Smallest phones only (320-340px) — one more notch below the 430px
 * refinement above, which stays exactly as-is for 341-430px. Even the
 * shortened "Zobacz..." label plus the 430px button type scale can
 * still read as tight at 320px, so this trims the box padding, icon,
 * title and button a little further and swaps in the shorter label
 * (see .wp-block-button__link-text--short above and its two spans in
 * inc/cta.php/inc/services.php) instead of the long one.
 */
@media (max-width: 21.25rem) {
	.home-services__cta .single-practice__cta {
		padding: 1.125rem;
	}

	.home-services__cta .single-practice__cta-icon {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	.home-services__cta .single-practice__cta-title {
		font-size: 1.25rem;
		line-height: 1.18;
	}

	.home-services__cta .single-practice__cta .wp-block-button,
	.home-services__cta .single-practice__cta .wp-block-button__link {
		box-sizing: border-box;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	.home-services__cta .single-practice__cta .wp-block-button__link {
		padding-inline: 0.625rem;
		font-size: 0.6875rem;
		letter-spacing: 0.01em;
	}

	.home-services__cta .single-practice__cta .wp-block-button__link-text--long {
		display: none;
	}

	.home-services__cta .single-practice__cta .wp-block-button__link-text--short {
		display: inline;
	}
}

/*
 * This section is now hand-rendered PHP (inc/practice-section.php) that
 * reuses Core's own Cover-block class names and "fixed background"
 * technique rather than an actual registered core/cover block instance
 * (see that file's own comment for why). Because there is no longer a
 * real core/cover block anywhere on this page, WordPress never detects
 * it as "used" and stops loading wp-includes/blocks/cover/style.css —
 * so the handful of rules this markup actually depends on (positioning
 * the background/overlay layers and the base fixed-background
 * behaviour) are reproduced here instead of being left to core.
 */
.practice-section.wp-block-cover {
	position: relative;
	display: flex;
	overflow: hidden;
	overflow: clip;
	align-items: flex-start;
	block-size: auto;
	min-block-size: 46rem;
	padding: clamp(4.5rem, 8vw, 8rem) clamp(2rem, 4vw, 4.5rem);
	color: var(--wp--preset--color--ivory);
	background-color: var(--wp--preset--color--espresso);
}

.practice-section .wp-block-cover__image-background,
.practice-section .wp-block-cover__background {
	position: absolute;
	inset: 0;
}

.practice-section .wp-block-cover__image-background {
	background-position: 50%;
}

.practice-section .wp-block-cover__image-background.has-parallax {
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

/*
 * background-attachment: fixed sizes background-size: cover against the
 * *viewport* (its positioning area per spec), so the image never
 * reacts to .practice-section growing when the accordion opens — that
 * only becomes a problem everywhere this theme falls back to
 * background-attachment: scroll (iOS below, the <60rem breakpoint, and
 * prefers-reduced-motion further down), where cover is instead sized
 * against this element's own box. Since that box is inset: 0 against
 * a .practice-section whose block-size is auto (grows with the
 * accordion), the image was rescaling/zooming every time a panel
 * opened. Pinning this layer's own height below — instead of letting
 * it stretch to inset: 0's bottom edge — keeps its "cover" box
 * constant regardless of accordion height; .practice-section's own
 * background-color (espresso, above) shows through under the dim
 * overlay for any extra height the accordion adds beyond it.
 */

/* iOS Safari's fixed-background handling is unreliable at any viewport
   width, not just the theme's own <60rem mobile breakpoint below — this
   is the same feature-detection fallback Core's Cover block itself uses. */
@supports (-webkit-touch-callout: inherit) {
	.practice-section .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll;
		inset: 0 0 auto 0;
		block-size: 100vh;
		block-size: 100svh;
	}
}

.practice-section .wp-block-cover__background.has-background-dim-60 {
	opacity: 0.6;
}

.practice-section .wp-block-cover__background.has-background-dim-80 {
	opacity: 0.8;
}

.practice-section .wp-block-cover__background.has-background-dim-90 {
	opacity: 0.9;
}

/*
 * Without an explicit position, this element is a plain static block
 * and would paint *underneath* its position:absolute siblings above
 * (the background image and dim overlay) regardless of DOM order —
 * hiding the section's text and accordion behind them. Making it
 * position:relative puts it in the same paint step as those siblings,
 * where DOM order (it comes last) correctly puts it on top. It also
 * needs an explicit full width: .practice-section is a flex container,
 * its two absolutely-positioned siblings are taken out of flex layout
 * entirely, leaving this the only actual flex item — without a width
 * it would shrink-to-fit its content instead of filling the section.
 */
.practice-section .wp-block-cover__inner-container {
	position: relative;
	inline-size: 100%;
}

.practice-section .wp-block-cover__inner-container,
.practice-section__inner,
.practice-section__intro,
.practice-section__list {
	min-inline-size: 0;
}

.practice-section__inner {
	inline-size: 100%;
	margin: 0;
}

.practice-section__columns {
	display: grid;
	grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
	align-items: start;
	gap: clamp(3rem, 7vw, 7rem);
	margin: 0;
}

.practice-section__intro {
	position: sticky;
	inset-block-start: clamp(2rem, 8vh, 6rem);
}

.practice-section__eyebrow {
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--warm-beige);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.practice-section__title {
	max-inline-size: 9ch;
	margin: 0;
	color: var(--wp--preset--color--light-cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.25rem, 5.5vw, 5.75rem);
	font-weight: 500;
	line-height: 0.94;
	letter-spacing: -0.04em;
}

.practice-section__description {
	max-inline-size: 34ch;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	color: var(--wp--preset--color--warm-beige);
	font-size: clamp(0.975rem, 0.91rem + 0.18vw, 1.0625rem);
	line-height: 1.7;
}

.practice-accordion {
	border-block-start: 1px solid var(--wp--preset--color--medium-taupe);
}

.practice-accordion__item {
	border-block-end: 1px solid var(--wp--preset--color--medium-taupe);
}

.practice-accordion__heading {
	margin: 0;
}

.practice-accordion__trigger {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 2.75rem;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	inline-size: 100%;
	min-block-size: 5.5rem;
	padding: clamp(1.25rem, 2vw, 1.75rem) 0;
	color: var(--wp--preset--color--light-cream);
	text-align: start;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.practice-accordion__number {
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.practice-accordion__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.5rem);
	font-weight: 500;
	line-height: 1.05;
}

.practice-accordion__symbol {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	justify-self: end;
	color: var(--wp--preset--color--warm-beige);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
}

.practice-accordion__symbol-minus,
.practice-accordion__trigger[aria-expanded="true"] .practice-accordion__symbol-plus {
	display: none;
}

.practice-accordion__trigger[aria-expanded="true"] .practice-accordion__symbol-minus {
	display: inline;
}

.practice-accordion__trigger:hover .practice-accordion__title {
	color: var(--wp--preset--color--warm-beige);
}

.practice-accordion__trigger:focus-visible {
	outline-color: var(--wp--preset--color--light-cream);
	outline-offset: 0.35rem;
}

.practice-accordion__panel[hidden] {
	display: none;
}

.practice-accordion__panel:not([hidden]) {
	animation: practice-panel-in 180ms ease-out;
}

.practice-accordion__panel-inner {
	max-inline-size: 58ch;
	padding: 0 3.75rem clamp(1.75rem, 3vw, 2.5rem);
	color: var(--wp--preset--color--warm-beige);
	font-size: clamp(0.9375rem, 0.9rem + 0.14vw, 1.025rem);
	line-height: 1.7;
}

.practice-accordion__panel-inner > :first-child {
	margin-block-start: 0;
}

.practice-accordion__panel-inner > :last-child {
	margin-block-end: 0;
}

.practice-accordion__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: 1rem;
	color: var(--wp--preset--color--warm-beige);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease, transform 200ms ease;
}

.practice-accordion__link:hover,
.practice-accordion__link:focus-visible {
	color: var(--wp--preset--color--light-cream);
	transform: translateX(0.2rem);
}

@keyframes practice-panel-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.practice-section__more {
	inline-size: 100%;
	max-inline-size: 42.5rem;
	margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
}

.practice-section__more-title {
	margin: 0;
	color: var(--wp--preset--color--light-cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 500;
	line-height: 1.15;
}

.practice-section__more-text {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--warm-beige);
	font-size: clamp(0.9rem, 0.86rem + 0.14vw, 0.975rem);
	line-height: 1.7;
}

.practice-section__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: 1rem;
	color: var(--wp--preset--color--warm-beige);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease, transform 200ms ease;
}

.practice-section__more-link:hover,
.practice-section__more-link:focus-visible {
	color: var(--wp--preset--color--light-cream);
	transform: translateX(0.2rem);
}

.practice-accordion-editor {
	margin: 0;
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
}

.home-articles {
	padding: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem);
	background: var(--wp--preset--color--light-cream);
	border-block-end: 1px solid var(--wp--preset--color--warm-beige);
}

.home-articles__intro {
	max-inline-size: 34rem;
	margin-inline: auto;
	text-align: center;
}

.home-articles__title {
	/* No more eyebrow leading into this heading (see inc/articles.php) —
	   a small top margin keeps it from sitting flush against the
	   section's own padding, so the heading still reads with a touch of
	   its own breathing room rather than looking clipped to the edge. */
	margin: clamp(0.5rem, 1.5vw, 1rem) 0 0;
	color: var(--wp--preset--color--espresso);
}

.home-articles__description {
	margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(0.975rem, 0.91rem + 0.18vw, 1.0625rem);
	line-height: 1.7;
}

.home-articles__query {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

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

/*
 * The grid's real items are these <li> elements (one per article, from
 * post_class() in inc/articles.php) — the .home-articles__item div
 * inside each one is not a sibling of the others, so spacing/separator
 * rules belong on the <li> itself, not that inner div.
 */
.home-articles__grid > li {
	min-inline-size: 0;
	padding-inline: clamp(2rem, 4vw, 3.5rem);
}

.home-articles__grid > li:first-child {
	padding-inline-start: 0;
}

.home-articles__grid > li:last-child {
	padding-inline-end: 0;
}

.home-articles__grid > li + li {
	border-inline-start: 1px solid var(--wp--preset--color--main-taupe);
}

/*
 * flex-column + min-block-size:100% lets this card fill the full height
 * CSS Grid already gives its <li> (grid rows stretch to the tallest
 * item by default), so home-articles__item-link's margin-block-start:
 * auto below can push the "Czytaj więcej" link down to a shared
 * baseline across all 3 columns — no fixed heights, no per-item
 * overrides, it just falls out of the natural layout.
 */
.home-articles__item {
	display: flex;
	flex-direction: column;
	min-block-size: 100%;
}

.home-articles__item-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
	font-weight: 500;
	line-height: 1.15;
}

.home-articles__item-title a {
	position: relative;
	display: inline-block;
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
	transition: color 250ms ease;
}

.home-articles__item-title a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -0.05em;
	inline-size: 0;
	block-size: 1px;
	background-color: currentColor;
	transition: inline-size 250ms ease;
}

.home-articles__item-title a:hover,
.home-articles__item-title a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
}

.home-articles__item-title a:hover::after,
.home-articles__item-title a:focus-visible::after {
	inline-size: 100%;
}

.home-articles__item-excerpt {
	max-inline-size: 30ch;
	margin: clamp(0.875rem, 1.5vw, 1.125rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(0.875rem, 0.82rem + 0.16vw, 0.975rem);
	line-height: 1.65;
}

.home-articles__item-link {
	margin: auto 0 0;
	padding-block-start: clamp(1rem, 2vw, 1.5rem);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-articles__item-link a {
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.home-articles__item-link a:hover {
	color: var(--wp--preset--color--espresso);
}

.home-articles__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-block-start: clamp(3rem, 6vw, 5rem);
}

/*
 * Wider than a single post (clamp caps at 71.875rem = 1150px) since
 * this is a 2-column grid of editorial entries, not a reading column —
 * .article-archive__header/__separator/__list all share this cap,
 * overriding the 760px default every "constrained" layout group gets
 * from theme.json (same technique already proven on
 * .single-article__content elsewhere in this file).
 *
 * Groups the H1, intro and the search toggle into one grid instead of
 * three flat, independently-positioned siblings: H1 alone spans row 1;
 * intro and the search wrap share row 2, intro on the left, the search
 * toggle pinned to the right — vertically centred against the lead
 * (align-items: center), not baseline-matched to it. Centring an icon
 * next to a line of text is a forgiving alignment an <input>'s own text
 * baseline never was.
 */
.article-archive__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: clamp(1.25rem, 2.5vw, 1.75rem);
	max-inline-size: clamp(62.5rem, 80vw, 71.875rem);
}

.article-archive__header > .article-archive__title {
	grid-column: 1;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 2.2rem + 2.4vw, 4.25rem);
	font-weight: 500;
	line-height: 1.05;
}

/* H1 stays visually identical to plain text — the link only adds a
   subtle opacity shift on hover/focus, no underline, no movement. The
   sitewide :where(...):focus-visible outline (top of this file) still
   applies here untouched, giving keyboard users a clear, on-brand focus
   ring without this rule needing to invent a second one. */
.article-archive__title-link {
	color: inherit;
	text-decoration: none;
	transition: opacity 200ms ease;
}

.article-archive__title-link:hover,
.article-archive__title-link:focus-visible {
	opacity: 0.75;
}

.article-archive__header > .article-archive__intro {
	grid-column: 1;
	max-inline-size: clamp(40.625rem, 52vw, 50rem);
	margin: 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	line-height: 1.6;
	opacity: 0.9;
}

.article-archive__header > .article-archive__search-wrap {
	grid-column: 1;
}

@media (min-width: 48rem) {
	.article-archive__header {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: center;
	}

	.article-archive__header > .article-archive__title {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.article-archive__header > .article-archive__intro {
		grid-column: 1;
		grid-row: 2;
	}

	.article-archive__header > .article-archive__search-wrap {
		grid-column: 2;
		grid-row: 2;
	}
}

/* Always visible — no collapse/expand, no JS. inline-size: auto so the
   wrap is exactly as wide as its content (input + icon), pinned to the
   header row's right edge. */
.article-archive__search-wrap {
	display: flex;
	justify-content: flex-end;
	margin-inline-start: auto;
	inline-size: auto;
}

@media (max-width: 47.9375rem) {
	.article-archive__search-wrap {
		margin-inline-start: 0;
		inline-size: 100%;
	}
}

.article-archive__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	inline-size: 100%;
}

/* Underline only — no box, no background, no border-radius. Deliberately
   plain UI text, smaller than the lead: font-size/line-height/weight
   are all set directly here, not shared with .article-archive__intro. */
.article-archive__search-input {
	display: block;
	box-sizing: border-box;
	inline-size: 20rem;
	max-inline-size: 100%;
	padding: 0.5rem 0;
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--main-taupe);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 400;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 200ms ease;
}

@media (max-width: 47.9375rem) {
	.article-archive__search-input {
		inline-size: 100%;
	}
}

/*
 * Deliberately not the sitewide :where(...):focus-visible outline (see
 * the top of this file) — replaced with a darkening underline instead,
 * per this component's own brief. Still a real, visible focus signal
 * (colour change on an otherwise-bare line), so this isn't focus
 * removed without a substitute, just a different one for this input.
 */
.article-archive__search-input:focus-visible {
	outline: none;
	border-block-end-color: var(--wp--preset--color--espresso);
}

/* Reset Safari/Chrome's native decoration on type="search" — the bare
   icon is the only visual affordance this input should have. */
.article-archive__search-input::-webkit-search-decoration,
.article-archive__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.article-archive__search-input::placeholder {
	color: var(--wp--preset--color--main-taupe);
	font-size: 1rem;
}

.article-archive__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--main-taupe);
	cursor: pointer;
	transition: color 200ms ease;
}

.article-archive__search-submit svg {
	inline-size: 1.3125rem;
	block-size: 1.3125rem;
}

.article-archive__search-submit:hover,
.article-archive__search-submit:focus-visible {
	color: var(--wp--preset--color--espresso);
}

/*
 * Mobile only — desktop's flex row (.article-archive__search above) is
 * untouched. A real grid here (rather than relying on flex-shrink the
 * way the base rule does) is what the brief specifically asked for: the
 * input's own column is explicitly the flexible one, the icon's is
 * exactly its own content size, with no room for either to creep wider
 * than intended on a narrow screen. Font-size/line-height/padding are
 * all trimmed down from the desktop values so the whole component reads
 * as compact and light instead of a tall, heavy bar.
 */
@media (max-width: 47.9375rem) {
	.article-archive__header {
		row-gap: 1.25rem;
	}

	.article-archive__search-wrap {
		max-inline-size: none;
	}

	.article-archive__search {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0.625rem;
	}

	.article-archive__search-input {
		padding: 0.5rem 0 0.5625rem;
		font-size: 0.9375rem;
		line-height: 1.35;
	}

	.article-archive__search-input::placeholder {
		font-size: 0.9375rem;
	}

	.article-archive__search-submit {
		inline-size: 2rem;
		block-size: 2rem;
	}

	.article-archive__search-submit svg {
		inline-size: 1.1875rem;
		block-size: 1.1875rem;
	}

	.article-archive__separator {
		margin-block-start: 1.75rem;
	}
}

.article-archive__separator {
	max-inline-size: clamp(62.5rem, 80vw, 71.875rem);
	/* Top value only: clear whitespace under the header row (kept at
	   ~32–48px per an earlier round of feedback on this component;
	   trimmed to ~28px on mobile below). Bottom value (separator →
	   article grid) is unrelated. */
	margin: clamp(2rem, 3vw, 3rem) 0 clamp(3.125rem, 6vw, 4.375rem);
	border-color: var(--wp--preset--color--warm-beige);
	opacity: 1;
}

.article-archive__list {
	max-inline-size: clamp(62.5rem, 80vw, 71.875rem);
	margin-block-start: 0;
}

/*
 * WordPress's own generated global-styles CSS applies
 * `.is-layout-constrained > :where(...) { margin-left: auto !important;
 * margin-right: auto !important; }` to every non-.align* direct child
 * of the constrained <main> (confirmed in the page's own inline
 * <style>). .article-archive__header (the H1/intro/search grid),
 * .article-archive__separator and .article-archive__list are the three
 * actual direct children of that <main> and all share the same
 * max-inline-size above, so in principle they're one shared content
 * column — but core was still auto-centering each one independently
 * within the (wider) main instead of letting them sit flush at its left
 * edge, which is what made .article-archive__list drift right of the
 * header even though both measure the same width. There's no
 * specificity-only way to beat a core !important rule, so all three are
 * pinned to the shared left edge here — the one deliberate exception to
 * this file's no-!important rule. (H1/intro/search themselves no longer
 * need this: nested inside .article-archive__header now, none of them
 * is a direct child of <main> any more, so core's selector doesn't even
 * match them.)
 */
.article-archive__header,
.article-archive__separator,
.article-archive__list {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * core/post-template renders a <ul> with one <li> per post — the grid
 * lives on that <ul>, dividers on the <li> (nth-child(odd)/(even)
 * for the vertical rule between columns, (-n+2) for "first row, no
 * top rule" — the same divider idiom .home-values__item and
 * .home-services__item already use elsewhere in this file). Each <li>
 * is display: flex purely so its one child, .article-archive__item,
 * can stretch to fill it — grid's own align-items: stretch (default)
 * only stretches the <li> itself, not the item inside it.
 */
.article-archive__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-archive__items > li {
	display: flex;
	padding: clamp(2rem, 3vw, 2.75rem) clamp(1.75rem, 2.5vw, 2.5rem);
	border-inline-start: 1px solid rgba(197, 171, 159, 0.35);
	border-block-start: 1px solid rgba(197, 171, 159, 0.35);
}

.article-archive__items > li:nth-child(odd) {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.article-archive__items > li:nth-child(even) {
	padding-inline-end: 0;
}

.article-archive__items > li:nth-child(-n + 2) {
	padding-block-start: 0;
	border-block-start: 0;
}

/* display: flex + margin-block-start: auto on .article-archive__item-link
   below lines every "Czytaj więcej" up along the bottom of its row —
   same technique as .home-services__item elsewhere in this file. */
.article-archive__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-inline-size: 0;
}

.article-archive__date {
	margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.article-archive__item-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	font-weight: 500;
	line-height: 1.1;
}

.article-archive__item-title a {
	color: var(--wp--preset--color--espresso);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.article-archive__item-title a:hover,
.article-archive__item-title a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	text-decoration-color: currentColor;
}

.article-archive__item-excerpt {
	margin: clamp(0.75rem, 1.5vw, 1.125rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.article-archive__item-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	margin: clamp(0.75rem, 1.5vw, 1.125rem) 0 0;
}

.article-archive__item-tags a {
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 200ms ease;
}

.article-archive__item-tags a:hover,
.article-archive__item-tags a:focus-visible {
	color: var(--wp--preset--color--espresso);
}

.article-archive__item-link {
	display: inline-block;
	margin-block-start: auto;
	padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease, transform 200ms ease;
}

.article-archive__item-link:hover,
.article-archive__item-link:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	transform: translateX(0.1875rem);
}

.article-archive__empty {
	color: var(--wp--preset--color--dark-chocolate);
}

.article-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.375rem 1.25rem;
	margin-block: clamp(3.75rem, 7vw, 5.625rem) clamp(4.375rem, 8vw, 6.25rem);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--ui);
}

.article-archive__pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

/* Page numbers: no pills/backgrounds, just a thin underline for the current page. */
.article-archive__pagination a.page-numbers,
.article-archive__pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.375rem;
	min-block-size: 2.375rem;
	padding: 0.25rem 0.375rem;
	border-block-end: 1px solid transparent;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 200ms ease, border-color 200ms ease;
}

.article-archive__pagination a.page-numbers:hover,
.article-archive__pagination a.page-numbers:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	border-block-end-color: var(--wp--preset--color--main-taupe);
}

.article-archive__pagination .page-numbers.current {
	border-block-end-color: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--espresso);
	font-weight: 600;
}

.article-archive__pagination .page-numbers.dots {
	border-block-end-color: transparent;
	color: var(--wp--preset--color--stone-gray);
}

.article-archive__pagination .wp-block-query-pagination-previous,
.article-archive__pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease, transform 200ms ease;
}

.article-archive__pagination .wp-block-query-pagination-previous:hover,
.article-archive__pagination .wp-block-query-pagination-previous:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	transform: translateX(-0.1875rem);
}

.article-archive__pagination .wp-block-query-pagination-next:hover,
.article-archive__pagination .wp-block-query-pagination-next:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	transform: translateX(0.1875rem);
}

.article-archive__pagination a:focus-visible {
	outline: 1px solid var(--wp--preset--color--espresso);
	outline-offset: 2px;
}

/*
 * "Wyjustuj" Block Style for core/paragraph
 * (kancelaria_opora_register_justified_paragraph_style(), inc/editor.php)
 * — opt-in per paragraph via the block's own Styles panel, never a
 * default. Unscoped to any one container on purpose: is-style-justified
 * is a plain Gutenberg block-style class, so wherever a paragraph
 * carries it (articles today, any other WYSIWYG field tomorrow) it
 * should justify, not just inside .single-article__content.
 */
.is-style-justified {
	text-align: justify;
	text-justify: inter-word;
}

/*
 * Editorial, not blog-SaaS: a comfortable ~720-780px reading column
 * (clamp caps at 47.5rem = 760px, theme.json's own contentSize) rather
 * than letting body copy stretch full-width. <main> here is
 * is-layout-constrained, so WordPress's own global-styles CSS forces
 * `margin-left: auto !important; margin-right: auto !important;` on
 * every direct, non-.align* child of it — title, meta, lead and
 * content all are. That's invisible on lead/content, whose own
 * max-inline-size already resolves to the same value core would have
 * used anyway — but the title used to cap at 22ch (a deliberately
 * narrower measure for the big display heading) and the meta group had
 * no cap of its own at all, defaulting to core's own fixed 47.5rem
 * instead of this same clamp. Three different resolved widths inside
 * the same centred column meant three different auto-margin offsets,
 * i.e. three different left edges — which is what read as the title
 * (and, at some widths, the date) drifting out of the paragraphs' own
 * axis. Giving title and meta the exact same max-inline-size as
 * lead/content makes all four resolve to one identical width, so the
 * shared (if non-zero) auto-margin offset lands them on one shared
 * left edge — without fighting core's !important with one of our own.
 */
.single-article__title {
	margin: 0;
	max-inline-size: clamp(45rem, 58vw, 47.5rem);
	font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
	line-height: 1.02;
}

.single-article__meta {
	align-items: center;
	max-inline-size: clamp(45rem, 58vw, 47.5rem);
	gap: var(--wp--preset--spacing--sm);
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Author block (kancelaria_opora_render_article_author_block(),
   inc/articles.php) — round portrait, name, professional title, under
   the date and above the separator. Same max-inline-size as
   title/meta/lead so it never reads wider than the rest of the header
   (and never triggers the same axis-drift the comment above
   .single-article__title explains). Prints nothing at all when there's
   no name configured, so this whole block simply doesn't exist then —
   no empty avatar circle with nothing next to it. */
.single-article__author {
	display: flex;
	align-items: center;
	gap: clamp(1.125rem, 2vw, 1.375rem);
	max-inline-size: clamp(45rem, 58vw, 47.5rem);
	margin-block-start: clamp(1.25rem, 2vw, 1.5rem);
}

/* ~56-64px on mobile (this size, unscoped), ~72-84px from 48rem up (the
   media query below) — object-fit: cover crops whatever aspect the
   source photo actually has into the circle; object-position biases
   slightly above dead-centre, since a tight circular crop more often
   needs a little headroom trimmed from the chin than the forehead. */
.single-article__author-photo {
	display: block;
	flex-shrink: 0;
	inline-size: 3.75rem;
	block-size: 3.75rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
	border: 1px solid rgba(197, 171, 159, 0.4);
}

@media (min-width: 48rem) {
	.single-article__author-photo {
		inline-size: 4.75rem;
		block-size: 4.75rem;
	}
}

.single-article__author-info {
	min-inline-size: 0;
}

.single-article__author-name {
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.25;
}

/* Same small-caps eyebrow language as .home-about__eyebrow/
   .single-practice__label elsewhere on the site — Medium Taupe, UI
   font, 0.14em letter-spacing — under its own name rather than reusing
   one of those classes directly. */
.single-article__author-role {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.single-article__lead {
	max-inline-size: clamp(45rem, 58vw, 47.5rem);
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
	font-weight: 400;
	line-height: 1.6;
}

.single-article__separator {
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
	border-color: var(--wp--preset--color--warm-beige);
	opacity: 1;
}

/* Scoped to just the one separator that follows the author block (not
   the base rule above, which the "Przeczytaj także" and back-link
   separators elsewhere on this page also use) — author row → separator
   24-28px, separator → lead 40-48px, replacing that rule's own
   symmetric margin-block for this one instance. When the author block
   doesn't render at all (no name configured), this selector simply
   never matches and the separator quietly falls back to the base
   rule's original spacing, exactly as before this change. */
.single-article__author + .single-article__separator {
	margin-block-start: clamp(1.5rem, 2vw, 1.75rem);
	margin-block-end: clamp(2.5rem, 4vw, 3rem);
}

.single-article__content {
	max-inline-size: clamp(45rem, 58vw, 47.5rem);
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	line-height: 1.75;
}

.single-article__content > * + * {
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}

/*
 * core/post-content renders with layout:constrained, so — same as
 * .article-archive__header/.separator/.list above — WordPress's own
 * global-styles CSS forces `margin-left: auto !important; margin-right:
 * auto !important;` on every direct, non-.align* child of
 * .single-article__content. Paragraphs are full-width so that auto
 * margin is invisible on them, but h2/h3 used to carry their own
 * narrower max-inline-size (26ch/28ch) for an editorial measure — which
 * is exactly what made the now-narrower box get centred by that forced
 * auto margin instead of sitting flush on the paragraphs' own left
 * edge. Dropping the ch cap (so h2/h3 share the paragraphs' full
 * measure, as asked) and pinning the margins the same !important way
 * as the archive header fixes it the same way, for the same reason.
 */
.single-article__content h2 {
	max-inline-size: none;
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	margin-left: 0 !important;
	margin-right: 0 !important;
	color: var(--wp--preset--color--espresso);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
	line-height: 1.1;
	text-align: left;
}

.single-article__content h3 {
	max-inline-size: none;
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	margin-left: 0 !important;
	margin-right: 0 !important;
	color: var(--wp--preset--color--espresso);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	line-height: 1.15;
	text-align: left;
}

.single-article__content ul,
.single-article__content ol {
	margin: 0;
	padding-inline-start: 1.375em;
	line-height: 1.75;
}

.single-article__content li + li {
	margin-block-start: 0.5em;
}

.single-article__content ul {
	list-style: none;
	padding-inline-start: 1.25em;
}

.single-article__content ul li {
	position: relative;
}

.single-article__content ul li::before {
	content: "—";
	position: absolute;
	inset-inline-start: -1.25em;
	color: var(--wp--preset--color--main-taupe);
}

.single-article__content ol li::marker {
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
}

.single-article__content a {
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-line: underline;
	text-decoration-color: rgba(74, 52, 45, 0.35);
	text-underline-offset: 0.15em;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.single-article__content a:hover,
.single-article__content a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	text-decoration-color: currentColor;
}

.single-article__content blockquote {
	margin: 0;
	padding-inline-start: clamp(1.25rem, 3vw, 1.75rem);
	border-inline-start: 2px solid var(--wp--preset--color--main-taupe);
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-style: italic;
	line-height: 1.5;
}

.single-article__content blockquote p {
	margin: 0;
}

.single-article__content blockquote cite {
	display: block;
	margin-block-start: 0.75em;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.single-article__content img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 0;
}

.single-article__content figcaption {
	margin-block-start: 0.75em;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.single-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	max-inline-size: clamp(45rem, 58vw, 47.5rem);
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.single-article__tags a {
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 200ms ease;
}

.single-article__tags a:hover,
.single-article__tags a:focus-visible {
	color: var(--wp--preset--color--espresso);
}

.single-article__related {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.single-article__related-label {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

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

.single-article__related-item {
	padding-inline-start: clamp(1.5rem, 2.5vw, 2rem);
	border-inline-start: 1px solid rgba(197, 171, 159, 0.35);
}

.single-article__related-item:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.single-article__related-date {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.single-article__related-title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.single-article__related-title a {
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
	transition: color 200ms ease;
}

.single-article__related-title a:hover,
.single-article__related-title a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
}

/*
 * Closing internal-linking block (kancelaria_opora_render_article_closing_cta(),
 * inc/articles.php) — the practice-area link only now (its own former
 * "Potrzebujesz pomocy..." line was dropped once the full CTA banner
 * below took over that job, see .single-practice__cta further down).
 * Same small uppercase-label-plus-link language as .single-article__back
 * just below, reused rather than inventing a new visual treatment for
 * "one more utility link at the end of an article".
 */
.single-article__closing {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
}

.single-article__closing-link {
	margin: 0;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.single-article__closing-link a {
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: color 200ms ease;
}

.single-article__closing-link a:hover,
.single-article__closing-link a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
}

.single-article__back {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.single-article__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: color 200ms ease;
}

.single-article__back a:hover,
.single-article__back a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
}

.single-article__back a span {
	display: inline-block;
	transition: transform 200ms ease;
}

.single-article__back a:hover span,
.single-article__back a:focus-visible span {
	transform: translateX(-0.1875rem);
}

/* Desktop 3 columns, mobile 1 — no separate tablet tier requested for
   this particular grid, so it collapses straight to a single column. */
@media (max-width: 46rem) {
	.single-article__related-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 5vw, 2.25rem);
	}

	.single-article__related-item {
		padding-inline-start: 0;
		padding-block-start: clamp(1.75rem, 5vw, 2.25rem);
		border-inline-start: 0;
		border-block-start: 1px solid rgba(197, 171, 159, 0.35);
	}

	.single-article__related-item:first-child {
		padding-block-start: 0;
		border-block-start: 0;
	}
}

/*
 * Single service uses the same layered-canvas idea as single practice,
 * but keeps its own media, spacing and CTA icon. The native Post Content
 * block is wrapped by inc/services.php; the file template remains a
 * simple shell and therefore cannot produce a second title or separator.
 */
@media (min-width: 48rem) {
	.site-main.single-service {
		padding-block-start: 0;
		padding-inline-end: 0;
	}

	/* The content stays in normal flow. Previously the whole text layer
	   was translated upward inside an overflow:hidden canvas, so a long
	   title/lead could push the eyebrow beyond the hero's top edge. */
	.single-service__hero {
		padding-block: clamp(2rem, 4vw, 3rem);
	}
}

.single-service__hero {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: clamp(28rem, 24vw, 31rem);
	overflow: hidden;
	background: var(--wp--preset--color--ivory);
	border: 0;
	box-shadow: none;
}

.single-service__hero-media {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 0;
	inline-size: 62%;
	border: 0;
	box-shadow: none;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.08) 10%,
		rgba(0, 0, 0, 0.5) 30%,
		rgba(0, 0, 0, 0.88) 48%,
		#000 62%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.08) 10%,
		rgba(0, 0, 0, 0.5) 30%,
		rgba(0, 0, 0, 0.88) 48%,
		#000 62%
	);
}

.single-service__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--ivory) 0%,
		var(--wp--preset--color--ivory) 31%,
		rgba(246, 241, 234, 0.96) 41%,
		rgba(246, 241, 234, 0.75) 54%,
		rgba(246, 241, 234, 0.34) 68%,
		rgba(246, 241, 234, 0) 84%
	);
	pointer-events: none;
}

.single-service__hero-image {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
	outline: 0;
	box-shadow: none;
}

.single-service__hero-text {
	position: relative;
	z-index: 2;
	max-inline-size: 34rem;
}

.single-service__label {
	position: relative;
	margin: 0 0 1rem;
	padding-block-end: 0.75rem;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.single-service__label::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 2.75rem;
	block-size: 1px;
	background: var(--wp--preset--color--main-taupe);
}

.single-service__title {
	margin: 0;
	overflow-wrap: break-word;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 2.95rem + 2.2vw, 5rem);
	font-weight: 500;
	line-height: 0.98;
}

.single-service__lead {
	max-inline-size: 34rem;
	margin: 2rem 0 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.3125rem, 1.15rem + 0.3vw, 1.5rem);
	font-weight: 400;
	line-height: 1.5;
}

.single-service__body {
	margin-block-start: clamp(3rem, 5vw, 4.5rem);
	padding-block-end: var(--wp--preset--spacing--2-xl);
}

.single-service__content {
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.125rem, 1.1rem + 0.15vw, 1.1875rem);
	line-height: 1.7;
}

.single-service__content > p:first-child::first-letter {
	float: inline-start;
	margin-inline-end: 0.625rem;
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.625rem;
	font-weight: 500;
	line-height: 0.82;
}

.single-service__content > * + * {
	margin-block-start: clamp(1.5rem, 2vw, 1.875rem);
}

.single-service__content h2 {
	max-inline-size: 26ch;
	margin-block-start: clamp(3rem, 5vw, 3.75rem);
	color: var(--wp--preset--color--espresso);
	font-size: clamp(2.125rem, 1.9rem + 1.2vw, 2.5rem);
	line-height: 1.1;
}

.single-service__content h3 {
	max-inline-size: 28ch;
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	color: var(--wp--preset--color--espresso);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
	line-height: 1.15;
}

.single-service__content ul,
.single-service__content ol {
	padding-inline-start: 1.375em;
	line-height: 1.7;
}

.single-service__content li + li {
	margin-block-start: 0.5em;
}

.single-service__content a {
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-color: rgba(74, 52, 45, 0.35);
	text-underline-offset: 0.15em;
}

.single-service__content a:hover,
.single-service__content a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	text-decoration-color: currentColor;
}

.single-service__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2rem);
	box-sizing: border-box;
	margin-block-start: clamp(4.5rem, 7vw, 6rem);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 1px solid rgba(197, 171, 159, 0.42);
	background: rgba(222, 208, 199, 0.32);
}

.single-service__cta-icon {
	flex-shrink: 0;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: var(--wp--preset--color--espresso);
}

.single-service__cta-copy {
	flex: 1 1 17rem;
	min-inline-size: 0;
}

.single-service__cta-title {
	margin: 0 0 0.375rem;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
}

.single-service__cta-text {
	margin: 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 1rem;
	line-height: 1.6;
}

.single-service__cta .wp-block-buttons {
	flex-shrink: 0;
	min-inline-size: 0;
	margin: 0;
}

@media (min-width: 70rem) {
	.single-service__wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, clamp(56.25rem, 40rem + 22vw, 60rem)) minmax(0, 1.35fr);
	}

	.single-service__hero {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, clamp(56.25rem, 40rem + 22vw, 60rem)) minmax(0, 1.35fr);
	}

	.single-service__hero-text,
	.single-service__body {
		grid-column: 2;
	}

	.single-service__hero-text {
		align-self: center;
	}
}

@media (min-width: 48rem) and (max-width: 69.9375rem) {
	.single-service__hero-media {
		inline-size: 70%;
	}

	.single-service__hero-overlay {
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--ivory) 0%,
			var(--wp--preset--color--ivory) 38%,
			rgba(246, 241, 234, 0.97) 49%,
			rgba(246, 241, 234, 0.84) 63%,
			rgba(246, 241, 234, 0.46) 79%,
			rgba(246, 241, 234, 0.08) 94%,
			rgba(246, 241, 234, 0) 100%
		);
	}

	.single-service__body {
		padding-inline-end: var(--wp--preset--spacing--lg);
	}

	.single-service__cta {
		flex-wrap: nowrap;
		padding: clamp(1.5rem, 3vw, 2rem);
		column-gap: clamp(1.25rem, 2.5vw, 1.75rem);
	}

	.single-service__cta .wp-block-button,
	.single-service__cta .wp-block-button__link {
		min-inline-size: 0;
	}

	.single-service__cta .wp-block-button__link {
		inline-size: auto;
		padding-inline: 1.25rem;
		white-space: nowrap;
	}
}

@media (max-width: 47.9375rem) {
	.site-main.single-service {
		padding: 0;
	}

	.single-service__hero {
		align-items: center;
		min-block-size: 100vh;
		min-block-size: 100svh;
	}

	.single-service__hero-media {
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.single-service__hero-image {
		object-position: 64% center;
	}

	.single-service__hero-overlay {
		background:
			linear-gradient(
				180deg,
				rgba(246, 241, 234, 0.18) 0%,
				rgba(246, 241, 234, 0.24) 52%,
				rgba(246, 241, 234, 0.52) 100%
			),
			linear-gradient(
				90deg,
				rgba(246, 241, 234, 0.94) 0%,
				rgba(246, 241, 234, 0.86) 54%,
				rgba(246, 241, 234, 0.5) 100%
			);
	}

	.single-service__hero-text {
		inline-size: 100%;
		max-inline-size: 36rem;
		padding: clamp(5rem, 12svh, 7rem) clamp(1.25rem, 6vw, 1.5rem);
		transform: none;
	}

	.single-service__title {
		font-size: clamp(3rem, 11vw, 4.25rem);
		line-height: 0.98;
	}

	.single-service__lead {
		font-size: clamp(1.25rem, 5.5vw, 1.5rem);
	}

	body.admin-bar .single-service__hero {
		min-block-size: calc(100vh - var(--wp-admin--admin-bar--height, 46px));
		min-block-size: calc(100svh - var(--wp-admin--admin-bar--height, 46px));
	}

	.single-service__body {
		margin-block-start: clamp(2.75rem, 10vw, 4rem);
		padding-inline: var(--wp--preset--spacing--lg);
		padding-block-end: var(--wp--preset--spacing--2-xl);
	}

	.single-service__content > p:first-child::first-letter {
		font-size: 3rem;
	}

	.single-service__cta {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0;
		margin-block-start: clamp(3.5rem, 14vw, 4.5rem);
		padding: clamp(1.5rem, 6vw, 1.875rem);
	}

	.single-service__cta-icon {
		margin-block-end: clamp(1rem, 4vw, 1.25rem);
	}

	.single-service__cta-copy {
		flex: 0 1 auto;
		inline-size: 100%;
	}

	.single-service__cta .wp-block-buttons {
		margin-block-start: clamp(1.25rem, 6vw, 1.75rem);
	}

	.single-service__cta .wp-block-button,
	.single-service__cta .wp-block-button__link {
		inline-size: auto;
		text-align: start;
	}
}

.single-service__related {
	inline-size: 100%;
	max-inline-size: none;
	margin-block-start: clamp(3rem, 5vw, 4rem);
	text-align: left;
}

/* On sidebar desktop the editorial body is wider than this list needs
   to be. Centre the list as one 820px block while keeping its heading,
   numbers, titles and arrows left-aligned within that shared wrapper.
   Tablet/mobile deliberately retain the full available content width. */
@media (min-width: 70rem) {
	.single-service__related {
		max-inline-size: 51.25rem;
		margin-inline: auto;
	}
}

.single-service__related > .single-service__separator {
	margin-block: 0 clamp(1.25rem, 2.5vw, 2rem);
	border-color: var(--wp--preset--color--warm-beige);
	opacity: 0.55;
}

.single-service__related-title {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.single-service__related-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-service__related-list li {
	margin: 0;
	border-block-end: 1px solid rgba(197, 171, 159, 0.38);
}

.single-service__related-link {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(1rem, 2.5vw, 1.75rem);
	inline-size: 100%;
	padding: clamp(1.375rem, 2.5vw, 1.75rem) 0.25rem;
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
	transition: background-color 220ms ease;
}

.single-service__related-number {
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
}

.single-service__related-name {
	min-inline-size: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
	font-weight: 500;
	line-height: 1.15;
	transition: color 220ms ease, transform 220ms ease;
}

.single-service__related-arrow {
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1.25rem;
	line-height: 1;
	transition: color 220ms ease, transform 220ms ease;
}

a.single-service__related-link:hover,
a.single-service__related-link:focus-visible {
	background: rgba(222, 208, 199, 0.22);
}

a.single-service__related-link:hover .single-service__related-name,
a.single-service__related-link:focus-visible .single-service__related-name {
	color: var(--wp--preset--color--main-taupe);
	transform: translateX(0.375rem);
}

a.single-service__related-link:hover .single-service__related-arrow,
a.single-service__related-link:focus-visible .single-service__related-arrow {
	color: var(--wp--preset--color--dark-chocolate);
	transform: translateX(0.25rem);
}

a.single-service__related-link:focus-visible {
	outline: 1px solid var(--wp--preset--color--main-taupe);
	outline-offset: 3px;
}

@media (max-width: 47.9375rem) {
	.single-service__related-link {
		grid-template-columns: 2.25rem minmax(0, 1fr) auto;
		column-gap: 0.75rem;
		padding-block: clamp(1.125rem, 5vw, 1.375rem);
	}

	.single-service__related-number {
		font-size: 0.6875rem;
	}

	.single-service__related-name {
		font-size: clamp(1.25rem, 5.5vw, 1.4375rem);
	}

	.single-service__related-arrow {
		font-size: 1.125rem;
	}
}

/*
 * Single practice area (templates/single-practice_area.html) — an
 * editorial service-page treatment, not a blog post.
 *
 * .single-practice (see .site-main.single-practice below) zeroes
 * .site-main's own top/right padding for this template only, so the
 * hero can sit genuinely flush against the content area's top and
 * right edges. Two earlier passes tried to reach the same result with
 * negative margins on .single-practice__wrapper/__hero that merely
 * *negated* that padding after the fact — visually similar in most
 * quick checks, but confirmed (DevTools computed values, real browser,
 * admin bar on) to leave a stray 112px gap in at least one real-world
 * case that no amount of margin math fixed, because the actual source
 * — the padding itself — was still there underneath. Removing the
 * padding at its source instead of compensating for it removes that
 * whole class of mismatch. .single-practice__body (~850-960px,
 * depending on viewport — see the grid further down) is the one
 * reading-width tier below the hero, shared by the paragraph text, the
 * CTA bar and the back link alike; none of it is touched by the
 * padding change above, so it keeps its normal whitespace. See
 * inc/practice-single.php, which builds the hero and prints/closes
 * .single-practice__wrapper/__body around the native post_content.
 */
/* .site-main is shared by every template (single-service, articles,
   archives, …), so its own padding rule stays untouched — this
   compound selector (0,2,0 specificity, safely above .site-main's own
   0,1,0 regardless of source order) only fires on the practice
   template, where <main> already carries both classes (see
   templates/single-practice_area.html). block-start/inline-end only:
   padding-inline-start (left, the shared axis every other element on
   this page still aligns to) and padding-block-end (bottom, ordinary
   trailing whitespace) are deliberately left alone.

   Gated to the same 48rem breakpoint that switches the hero from its
   mobile canvas to the flush tablet/desktop canvas. */
@media (min-width: 48rem) {
	.site-main.single-practice {
		padding-block-start: 0;
		padding-inline-end: 0;
	}
}

.single-practice__hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ivory);
	border: 0;
	box-shadow: none;
}

/*
 * One canvas, three independent layers: absolute media, an overlay
 * spanning the whole hero, and normal-flow text. The overlay is not
 * tied to the media element's left edge, so there is no composited
 * column boundary that can turn into a one-pixel seam.
 */
.single-practice__hero--with-image {
	min-block-size: clamp(26.25rem, 22vw, 28.75rem);
	display: flex;
	align-items: center;
	gap: 0;
}

.single-practice__hero-media {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 0;
	inline-size: 64%;
	border: 0;
	box-shadow: none;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.08) 10%,
		rgba(0, 0, 0, 0.45) 28%,
		rgba(0, 0, 0, 0.85) 45%,
		#000 60%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.08) 10%,
		rgba(0, 0, 0, 0.45) 28%,
		rgba(0, 0, 0, 0.85) 45%,
		#000 60%
	);
}

/* This layer spans the complete canvas. Its opaque Ivory region starts
   well before the image, then releases the image gradually across a
   broad range; no stop coincides with the media element's own edge. */
.single-practice__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--ivory) 0%,
		var(--wp--preset--color--ivory) 30%,
		rgba(246, 241, 234, 0.96) 40%,
		rgba(246, 241, 234, 0.74) 52%,
		rgba(246, 241, 234, 0.34) 65%,
		rgba(246, 241, 234, 0) 80%
	);
	pointer-events: none;
}

.single-practice__hero-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
	outline: 0;
	box-shadow: none;
}

/* transform (not padding/margin) is what nudges desktop/tablet text up
   from dead centre. Mobile resets it because its text deliberately
   settles into the lower part of the same layered canvas. */
.single-practice__hero--with-image .single-practice__hero-text {
	transform: translateY(-1.375rem);
}

.single-practice__hero-text {
	position: relative;
	z-index: 2;
	max-inline-size: 40rem;
}

/* No image set: no min-height band at all — a plain text block, still
   an intentional width measure (not the full ~1100px wrapper — a
   heading/lead stretched that wide would read as unfinished, not
   deliberately simpler), never an empty placeholder band. */
.single-practice__hero--no-image .single-practice__hero-text {
	max-inline-size: 44rem;
}

/* Tablet keeps the same canvas instead of stacking. More of the image
   sits under the hero, while a broader opaque-to-transparent wash
   protects the text measure throughout the sidebar-free tablet tier. */
@media (max-width: 69.9375rem) and (min-width: 48rem) {
	.single-practice__hero-media {
		inline-size: 72%;
	}

	.single-practice__hero-overlay {
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--ivory) 0%,
			var(--wp--preset--color--ivory) 38%,
			rgba(246, 241, 234, 0.97) 48%,
			rgba(246, 241, 234, 0.84) 62%,
			rgba(246, 241, 234, 0.46) 78%,
			rgba(246, 241, 234, 0.1) 92%,
			rgba(246, 241, 234, 0) 100%
		);
	}

	/* .site-main.single-practice zeroes padding-inline-end (see above) so
	   the hero can reach the true right edge, but that leaves .single-practice__body
	   — an ordinary 100%-wide block, not part of the hero's own layered
	   canvas — with no right-hand gutter at all in this tier (no desktop
	   grid yet to supply one; see the "no max-inline-size of its own"
	   comment further down). padding-inline-end supplies that gutter
	   directly. padding-inline-start cancels out .site-main's own
	   already-present left padding (var(--wp--preset--spacing--lg), the
	   only inset the left edge had before) and replaces it with the same
	   clamp, so both edges read as one consistent gutter instead of
	   stacking two different values into an uneven margin. Never negative
	   — the clamp's floor (2rem) is always >= --spacing--lg's ceiling
	   (2rem) across this tier, so this never removes padding, only adds
	   it. The hero itself is untouched: it is __body's sibling, not its
	   descendant, so this gutter has no effect on it. */
	.single-practice__wrapper > .single-practice__body {
		margin-block-start: clamp(2.25rem, 5vw, 3.5rem);
		padding-inline-start: calc(clamp(2rem, 5vw, 4rem) - var(--wp--preset--spacing--lg));
		padding-inline-end: clamp(2rem, 5vw, 4rem);
		padding-block-end: 5.5rem;
	}

	/* Same ~88px body-to-CTA rhythm this tablet tier always had — now a
	   plain margin on the CTA itself instead of a removed line's own
	   margin-block. */
	.single-practice__final-cta {
		margin-block-start: 5.5rem;
	}

	.single-practice__body > .single-practice__back {
		margin-block-start: 2rem;
	}
}

/* Mobile remains one layered canvas: the image fills the hero instead
   of becoming a separate block, while the text is vertically centred
   over a restrained Ivory veil. svh keeps the first screen stable as
   mobile browser chrome expands/collapses; vh is the fallback. */
@media (max-width: 47.9375rem) {
	/* Remove shared main padding at its source so media can genuinely
	   reach both viewport edges. Padding returns on body and hero text,
	   the two layers that actually need readable insets. */
	.site-main.single-practice {
		padding: 0;
	}

	.single-practice__hero--with-image {
		min-block-size: 100vh;
		min-block-size: 100svh;
		block-size: 100vh;
		block-size: 100svh;
		align-items: center;
	}

	.single-practice__hero--with-image .single-practice__hero-text {
		transform: none;
		inline-size: 100%;
		padding: clamp(5rem, 12svh, 7rem) clamp(1.25rem, 6vw, 1.5rem);
	}

	.single-practice__hero-media {
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.single-practice__hero-image {
		max-inline-size: none;
		object-fit: cover;
		object-position: center center;
	}

	.single-practice__hero-overlay {
		background:
			linear-gradient(
				180deg,
				rgba(246, 241, 234, 0.12) 0%,
				rgba(246, 241, 234, 0.18) 50%,
				rgba(246, 241, 234, 0.42) 100%
			),
			linear-gradient(
				90deg,
				rgba(246, 241, 234, 0.88) 0%,
				rgba(246, 241, 234, 0.78) 52%,
				rgba(246, 241, 234, 0.42) 100%
			);
	}

	.single-practice__hero-text {
		max-inline-size: 36rem;
	}

	.single-practice__hero--no-image {
		padding: var(--wp--preset--spacing--2-xl) clamp(1.25rem, 5.5vw, 1.75rem) 0;
	}

	.single-practice__wrapper > .single-practice__body {
		margin-block-start: clamp(2.25rem, 8vw, 3rem);
		padding-inline: var(--wp--preset--spacing--lg);
		padding-block-end: var(--wp--preset--spacing--2-xl);
	}

	.single-practice__hero .single-practice__title {
		font-size: clamp(3rem, 11.5vw, 4.5rem);
		line-height: 0.97;
	}

	body.admin-bar .single-practice__hero--with-image {
		min-block-size: calc(100vh - var(--wp-admin--admin-bar--height, 46px));
		min-block-size: calc(100svh - var(--wp-admin--admin-bar--height, 46px));
		block-size: calc(100vh - var(--wp-admin--admin-bar--height, 46px));
		block-size: calc(100svh - var(--wp-admin--admin-bar--height, 46px));
	}
}

.single-practice__label {
	position: relative;
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	padding-block-end: clamp(0.75rem, 1.5vw, 1rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The "subtelna krótka linia pod spodem" — a short rule, not a
   full-width border, so it reads as a small mark under the eyebrow
   rather than a second separator. */
.single-practice__label::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 2.5rem;
	block-size: 1px;
	background: var(--wp--preset--color--main-taupe);
}

.single-practice__title {
	margin: 0;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 2.25rem + 2.5vw, 5.25rem);
	font-weight: 500;
	line-height: 0.97;
}

.single-practice__lead {
	max-inline-size: 36.25rem;
	margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 400;
	line-height: 1.5;
}

/* Very small phones: keep long Polish practice names unbroken and
   entirely inside the media-clipping hero canvas. The hero itself must
   retain overflow:hidden for its absolute image layer, so the fix is to
   give the text its full shrinkable width and a smaller local H1 scale. */
@media (max-width: 23.75rem) {
	.single-practice__wrapper,
	.single-practice__hero,
	.single-practice__hero-text {
		min-inline-size: 0;
	}

	.single-practice__hero--with-image .single-practice__hero-text {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		padding-inline: 1rem;
	}

	.single-practice__hero .single-practice__title {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		overflow: visible;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
		font-size: clamp(2.25rem, 11vw, 2.75rem);
		line-height: 0.95;
	}
}

/* .single-practice__body is a grid ITEM of .single-practice__wrapper
   on desktop (see the @media (min-width: 70rem) block below), not a
   margin-inline: auto-centred box — plain auto-centring made this
   whole block (body text, CTA, back link — all unstyled-width children
   of this one element, see .single-practice__content/__cta/__back
   below) read as its own independent, dead-centre column, disconnected
   from the hero above it; sharing one grid with the hero instead is
   what keeps the two feeling like a single design. margin-block-start
   is now the ONLY thing separating the hero from whatever follows — the
   ruled line that used to share this job with it was removed per
   feedback. Bumped from the line-era clamp(1rem, 1.5vw, 1.25rem) so a
   practice_area with only native post_content (whose own first
   paragraph carries no top margin of its own) still gets a deliberate
   gap here, not just a couple of pixels; a page that instead starts
   with one of the ACF sections below (.single-practice__section's own,
   larger margin-block-start) simply collapses past this value, per
   normal parent/first-child margin collapsing — never smaller than
   this, sometimes larger. */
/* min-inline-size: 0 overrides the grid item default of auto, which
   would otherwise let this track's min-content size (rare, but possible
   with an unbroken long token in body copy) resist shrinking below its
   own content width — the same defensive reset already used everywhere
   else a track/flex item on this site holds arbitrary text (e.g.
   .site-footer__columns > *). */
.single-practice__body {
	min-inline-size: 0;
	margin-block-start: clamp(2rem, 3vw, 2.75rem);
}

/* Below 70rem (tablet and mobile) there is no desktop grid — body
   simply reads at .site-main's own full available width, per "1024:
   normal content padding, bez sztucznego zawężania" and "mobile: bez
   desktopowego grid-column". Above it, .single-practice__wrapper
   becomes a 3-track grid: .single-practice__hero spans grid-column:
   1 / -1 and repeats those same tracks internally, putting hero text
   and body in the identical capped middle track. The two flanking
   tracks are deliberately UNEQUAL (1fr /
   1.6fr, not 1fr / 1fr): equal flexible tracks would centre body
   exactly, which is the "wygląda jak wąska kolumna dokładnie na
   środku strony" look this is specifically avoiding — the smaller
   left track keeps body's own left edge closer to the hero text's
   above it, an inset rather than a dead centre. The middle track's own
   width is a clamp tuned to read ~875px around 1280px and ~940px
   around 1440px+ (920-960px), capped at 960px so it never grows
   unbounded on very wide monitors.

   THE RIGHT (3rd) TRACK'S OWN FLOOR — minmax(0, 1.6fr) on
   .single-practice__wrapper only, NOT on .single-practice__hero's
   identical-looking copy below, which stays untouched on purpose (its
   flush-right full-bleed image is the whole point of that track having
   no floor there) — used to start at 0. CSS Grid maximizes non-flexible
   tracks (the middle one, a definite clamp() length) before it ever
   gives flexible (fr) tracks like this one any space at all, so in the
   ~1120-1350px band — sidebar present (.site-shell, ~320-360px) but not
   yet wide enough for the middle track to reach its own ~850-960px
   ceiling with room to spare — the middle track simply absorbed
   whatever was left and this track, and the right-hand gutter it was
   supposed to provide, collapsed to ~0-15px: .single-practice__body's
   text ran up almost to the sidebar. clamp(2rem, 3vw, 3rem) — 32-48px —
   gives it a real minimum, reserved before the middle track even
   starts maximizing, so body is a little narrower through that band in
   exchange for a guaranteed gutter; wide desktop (1440px+, where this
   track already claimed 50px+ on its own) is effectively unaffected. */
@media (min-width: 70rem) {
	.single-practice__wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, clamp(53.125rem, 22.1875rem + 40.625vw, 60rem)) minmax(clamp(2rem, 3vw, 3rem), 1.6fr);
	}

	.single-practice__hero {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, clamp(53.125rem, 22.1875rem + 40.625vw, 60rem)) minmax(0, 1.6fr);
	}

	.single-practice__hero-text {
		grid-column: 2;
		align-self: center;
	}

	.single-practice__body {
		grid-column: 2;
	}
}

/* No max-inline-size of its own any more — .single-practice__body above
   now sets the one shared width every child here (this, .single-practice__cta,
   .single-practice__back) reads at, so all three line up exactly, per
   the brief this was built from. */
.single-practice__content {
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.125rem, 1.1rem + 0.15vw, 1.1875rem);
	line-height: 1.7;
}

/* Classic float drop cap — universally supported, unlike the newer CSS
   `initial-letter` property. p:first-child (not just "p") is what makes
   kancelaria_opora_prepend_practice_hero()'s "skip the empty content
   wrapper" behaviour (inc/practice-single.php) double as "skip the drop
   cap too": with no paragraph there, this simply never matches. Purely
   a ::first-letter presentational hook — the underlying text/markup is
   untouched. line-height tighter than the letter's own font-size (0.8)
   is what keeps it sitting close against the first line instead of
   dropping the paragraph's own opening line further down to make room
   for it. */
.single-practice__content > p:first-child::first-letter {
	float: inline-start;
	margin-inline-end: 0.625rem;
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.875rem;
	font-weight: 500;
	line-height: 0.8;
}

@media (max-width: 47.9375rem) {
	.single-practice__content > p:first-child::first-letter {
		font-size: 3rem;
	}
}

.single-practice__content > * + * {
	margin-block-start: clamp(1.5rem, 2vw, 1.875rem);
}

.single-practice__content h2 {
	max-inline-size: 26ch;
	margin-block-start: clamp(3.125rem, 5vw, 3.75rem);
	color: var(--wp--preset--color--espresso);
	font-size: clamp(2.125rem, 1.9rem + 1.2vw, 2.5rem);
	line-height: 1.1;
}

.single-practice__content h3 {
	max-inline-size: 28ch;
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	color: var(--wp--preset--color--espresso);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
	line-height: 1.15;
}

.single-practice__content ul,
.single-practice__content ol {
	margin: 0;
	padding-inline-start: 1.375em;
	line-height: 1.7;
}

.single-practice__content li + li {
	margin-block-start: 0.5em;
}

.single-practice__content ul {
	list-style: none;
	padding-inline-start: 1.25em;
}

.single-practice__content ul li {
	position: relative;
}

.single-practice__content ul li::before {
	content: "—";
	position: absolute;
	inset-inline-start: -1.25em;
	color: var(--wp--preset--color--main-taupe);
}

.single-practice__content ol li::marker {
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
}

.single-practice__content a {
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-line: underline;
	text-decoration-color: rgba(74, 52, 45, 0.35);
	text-underline-offset: 0.15em;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.single-practice__content a:hover,
.single-practice__content a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	text-decoration-color: currentColor;
}

.single-practice__content blockquote {
	margin: 0;
	padding-inline-start: clamp(1.25rem, 3vw, 1.75rem);
	border-inline-start: 2px solid var(--wp--preset--color--main-taupe);
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-style: italic;
	line-height: 1.5;
}

.single-practice__content blockquote p {
	margin: 0;
}

.single-practice__content blockquote cite {
	display: block;
	margin-block-start: 0.75em;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * A wide horizontal bar (icon | copy | button), not a card: flat edges,
 * no shadow, a thin Taupe border and a faint Warm Beige wash (both
 * built from the same brand colours at low alpha, rather than a solid
 * fill, to stay "bardzo jasny" against the page's own Ivory) are the
 * only things marking it off — never a bold coloured panel. No width
 * of its own — it reads at exactly .single-practice__body's own
 * measure (the grid-column track further up this file), the same as
 * .single-practice__content and .single-practice__back, so all three
 * line up on one shared axis.
 */
.single-practice__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2rem);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 1px solid rgba(197, 171, 159, 0.4);
	background: rgba(222, 208, 199, 0.35);
}

.single-practice__cta-icon {
	flex-shrink: 0;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: var(--wp--preset--color--espresso);
}

.single-practice__cta-copy {
	flex: 1 1 16rem;
}

.single-practice__cta-title {
	margin: 0 0 0.375rem;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
}

.single-practice__cta-text {
	margin: 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 1rem;
	line-height: 1.6;
}

.single-practice__cta .wp-block-buttons {
	flex-shrink: 0;
	margin: 0;
}

@media (min-width: 48rem) and (max-width: 69.9375rem) {
	.single-practice__cta {
		box-sizing: border-box;
		flex-wrap: nowrap;
		inline-size: 88%;
		max-inline-size: 46rem;
		margin-inline: auto;
		padding-block: clamp(1.25rem, 2.5vw, 1.625rem);
		padding-inline: clamp(1.5rem, 3vw, 2rem);
		column-gap: clamp(1.25rem, 2.5vw, 1.75rem);
		row-gap: 0;
	}

	.single-practice__cta-copy,
	.single-practice__cta .wp-block-buttons,
	.single-practice__cta .wp-block-button {
		min-inline-size: 0;
	}

	.single-practice__cta .wp-block-button__link {
		inline-size: auto;
		padding-inline: 1.25rem;
		white-space: nowrap;
	}
}

@media (max-width: 47.9375rem) {
	.single-practice__cta {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		min-block-size: 0;
		block-size: auto;
		padding: clamp(1.5rem, 6vw, 1.875rem);
	}

	.single-practice__cta-icon {
		margin-block-end: clamp(1rem, 4vw, 1.25rem);
	}

	.single-practice__cta-copy {
		flex: 0 1 auto;
		inline-size: 100%;
	}

	.single-practice__cta-title {
		margin-block-end: clamp(0.5rem, 2.5vw, 0.75rem);
	}

	.single-practice__cta .wp-block-buttons {
		inline-size: auto;
		margin-block-start: clamp(1.25rem, 6vw, 1.75rem);
	}

	.single-practice__cta .wp-block-button,
	.single-practice__cta .wp-block-button__link {
		inline-size: auto;
		text-align: start;
	}

	.single-practice__back {
		margin-block-start: clamp(1.5rem, 7vw, 2rem);
	}
}

@media (max-width: 22rem) {
	.single-practice__cta .wp-block-buttons,
	.single-practice__cta .wp-block-button,
	.single-practice__cta .wp-block-button__link {
		inline-size: 100%;
		text-align: center;
	}
}

/*
 * Same .single-practice__cta banner, reused verbatim on a single
 * article (kancelaria_opora_render_contact_cta_banner(), inc/cta.php)
 * — every visual property above (icon, border, background, typography,
 * button, hover, stacking at each breakpoint) is untouched. The one
 * thing that can't carry over as-is is width: on the practice template
 * this component reads at .single-practice__body's own grid-column
 * measure (a wrapper single-article doesn't have); left alone here it
 * would instead fall back to <main>'s plain is-layout-constrained
 * default on desktop and the tablet rule's own self-centred 88%/46rem
 * above, neither of which matches
 * .single-article__title/__meta/__lead/__content's shared
 * clamp(45rem, 58vw, 47.5rem) axis (see the comment on
 * .single-article__title) at every width. Matching that same clamp
 * here — and, on tablet, cancelling the 88%/46rem self-centring so the
 * clamp actually applies — is what keeps this banner on the article's
 * one shared left edge instead of a few pixels off it.
 */
.single-article .single-practice__cta {
	max-inline-size: clamp(45rem, 58vw, 47.5rem);
}

@media (min-width: 48rem) and (max-width: 69.9375rem) {
	.single-article .single-practice__cta {
		inline-size: auto;
	}
}

/*
 * "Zobacz też" internal link to the article matching this practice
 * area by slug (kancelaria_opora_append_practice_extras(),
 * inc/practice-single.php) — same small label-plus-link language as
 * .single-practice__back just below.
 */
.single-practice__related-article {
	margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.single-practice__related-article a {
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: color 200ms ease;
}

.single-practice__related-article a:hover,
.single-practice__related-article a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
}

.single-practice__back {
	margin-block-start: clamp(1.75rem, 2.5vw, 2.25rem);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.single-practice__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--wp--preset--color--dark-chocolate);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: color 200ms ease;
}

.single-practice__back a:hover,
.single-practice__back a:focus-visible {
	color: var(--wp--preset--color--main-taupe);
}

.single-practice__back a span {
	display: inline-block;
	transition: transform 200ms ease;
}

.single-practice__back a:hover span,
.single-practice__back a:focus-visible span {
	transform: translateX(-0.1875rem);
}

/*
 * Practice single — landing-page sections
 * (kancelaria_opora_render_practice_page_sections(), inc/practice-single.php).
 * Every section is a plain child of .single-practice__body, reading at
 * its own ~900px measure with no width of its own; .single-practice__section
 * alone controls the vertical rhythm between them, so no individual
 * section needs its own top margin. Never a heavy card/box-shadow
 * anywhere below — the defence callout is the one deliberately
 * highlighted exception, and even that stays a flat wash + rule, the
 * same treatment .single-practice__cta already uses.
 */
.single-practice__section {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.single-practice__section-title {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.875rem, 1.6rem + 1vw, 2.5rem);
	font-weight: 500;
	line-height: 1.1;
}

.single-practice__section-content {
	margin-block-start: clamp(1.25rem, 2vw, 1.5rem);
}

/* ---------- "W jakich sporach mogę pomóc?" — scope grid ---------- */

.single-practice__scope-intro {
	max-inline-size: 52ch;
	margin: 0 0 clamp(2rem, 3.5vw, 2.75rem);
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
	line-height: 1.7;
}

/* .single-practice__scope-list/-item is what inc/practice-single.php
   actually renders (kancelaria_opora_render_practice_scope_section()) —
   a plain single-column stack, one item per row, at every viewport;
   there never was a 2-column grid or a mobile slider here. (An earlier
   spacing pass edited a same-looking but differently-named
   .single-practice-scope__grid/__item/__controls block instead — a
   leftover from some earlier version of this section that no longer
   matches this markup at all, so that pass had zero visible effect.
   Removed below rather than left as confusing dead code.)

   flex + gap is the "one systemic mechanism, not per-nth-child margins"
   the brief asked for: clamp(2rem, 6vw, 4rem) lands at its 32px floor
   through the 320-430px mobile checkpoints, ~46-49px through the
   768-820px tablet ones, and its 64px ceiling from 1024px up —
   matching the requested 32-40 / 40-52 / 48-64px tiers without three
   separate breakpoints. */
.single-practice__scope-list {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 6vw, 4rem);
}

/* Optional subtle separator (brief §4): a short, light Taupe rule
   marking where a new "zakres pomocy" starts — never full-width, never
   a heavy line. Skipped on the first item since the section title
   above it already marks that boundary; :not(:first-child) is one
   rule, not a margin hand-tuned per nth-child. */
.single-practice__scope-item:not(:first-child)::before {
	content: "";
	display: block;
	inline-size: 2.5rem;
	block-size: 1px;
	margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
	background: rgba(197, 171, 159, 0.35);
}

/* margin-bottom was a flat 0.75rem (12px, same at every viewport) — the
   number reading as glued to the title right under it. Now
   clamp(0.75rem, 1.5vw, 1rem): unchanged floor on narrow tablet/mobile
   widths, growing to 1rem (16px) on desktop so the number reads as its
   own small accent rather than a label stuck to the heading. */
.single-practice__scope-number {
	margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.single-practice__scope-item-title {
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	font-weight: 500;
	line-height: 1.2;
}

/* margin-block-start was a flat 0.75rem (12px) — grown to
   clamp(0.875rem, 2vw, 1.25rem) (14-20px) so the title has a touch more
   room before the body copy starts, without the "przesadzone" gap the
   brief specifically warned against. line-height was already 1.65,
   inside the 1.6-1.7 band this kind of body copy wants; nudged the
   last notch to 1.7 for a little extra air on the longer descriptions
   this section can have. */
.single-practice__scope-item-description {
	margin-block-start: clamp(0.875rem, 2vw, 1.25rem);
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 1rem;
	line-height: 1.7;
}

.single-practice__scope-item-description p {
	margin: 0;
}

/* Paragraph-to-paragraph gap was a flat 1em (16px). Multi-paragraph
   descriptions are rare here (kancelaria_opora_format_practice_paragraphs()
   only ever wpautop()'s onto a single plain-text ACF field — no lists
   can appear in it, so the brief's "jeśli są listy" doesn't apply to
   this field), but when it does happen the tighter 16px read cramped
   next to the section's other, now-larger gaps. clamp(1.125rem, 2vw,
   1.5rem) — 18-24px — keeps it in the same growing-with-viewport
   rhythm as the rest of this section. */
.single-practice__scope-item-description p + p {
	margin-block-start: clamp(1.125rem, 2vw, 1.5rem);
}

/* ---------- Pretrial / defence — quiet vs. highlighted sections ---------- */

/*
 * Same "subtle vertical rule, no box" language .home-about__content-inner
 * already uses on the homepage — reused here for BOTH sections, pretrial
 * and defence alike, one shared design language rather than two.
 *
 * .single-practice__defence was redesigned after feedback that its old
 * treatment (full padding-box, a visible Warm Beige fill, a 2px rule)
 * read as "a big heavy card" that broke the page's own editorial
 * rhythm — a hard-edged box is exactly what the rest of this page
 * avoids everywhere else. It is now visually identical to the quiet
 * pretrial section above it: same thin rule, same lack of a background
 * or padding-box, so nothing on this page reads as a "przypadkowy card
 * style". No eyebrow ("WAŻNE") was added — that would be hardcoded copy
 * outside the ACF fields this page is built from, which the brief this
 * page was built from explicitly rules out; the brief redesigning this
 * section explicitly offered "bez eyebrow" as the alternative.
 */
.single-practice__quiet-section,
.single-practice__defence {
	padding-inline-start: clamp(1.5rem, 3vw, 2rem);
	border-inline-start: 1px solid var(--wp--preset--color--main-taupe);
}

/*
 * The defence section reused .single-practice__content for its WYSIWYG
 * body (same typography as the native post content and the other
 * sections that also use that class) — but that class's own drop-cap
 * rule (.single-practice__content > p:first-child::first-letter,
 * further up this file) then applied here too, and a large decorative
 * capital sitting right against this section's own left rule read as
 * artificial rather than editorial. Neutralised here, and only here:
 * the intro and pretrial sections keep their drop cap exactly as
 * before — nothing about that ask, no reason to change it there.
 */
.single-practice__defence .single-practice__content > p:first-child::first-letter {
	float: none;
	margin-inline-end: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* ---------- "Jak wygląda prowadzenie sporu?" — process steps ---------- */

.single-practice__process-list {
	display: flex;
	flex-direction: column;
}

.single-practice__process-step {
	display: flex;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: clamp(2rem, 3.5vw, 2.75rem);
	border-block-start: 1px solid var(--wp--preset--color--warm-beige);
}

.single-practice__process-step:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.single-practice__process-number {
	flex-shrink: 0;
	inline-size: 3rem;
	margin: 0;
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
}

.single-practice__process-step-body {
	min-inline-size: 0;
}

.single-practice__process-step-title {
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	font-weight: 500;
	line-height: 1.2;
}

.single-practice__process-step-content {
	margin-block-start: 0.75rem;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 1rem;
	line-height: 1.65;
}

.single-practice__process-step-content p {
	margin: 0;
}

.single-practice__process-step-content p + p {
	margin-block-start: 1em;
}

/*
 * "Jak przygotować się do konsultacji?" — no max-inline-size of its own
 * on any child here any more (55ch/42rem before): those caps were
 * narrower than .single-practice__body's own ~875-960px measure, which
 * is exactly what read as "an accidentally narrowed block" next to the
 * other sections on this page that DON'T cap their own width (e.g.
 * .single-practice__content, .single-practice__scope-intro). This
 * section now reads at that same shared measure instead, same as
 * everything around it — never centred as its own narrow column.
 */
.single-practice__consultation-intro {
	margin: 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
	line-height: 1.7;
}

/* Subtle dash, not a default disc bullet — "eleganckie kreski/checki,
   bez klasycznych dużych bullets" per the brief. */
.single-practice__consultation-list {
	display: grid;
	gap: 0.875rem;
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.single-practice__consultation-list li {
	position: relative;
	padding-inline-start: 1.75rem;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.single-practice__consultation-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: 0.875rem;
	block-size: 1px;
	background: var(--wp--preset--color--main-taupe);
}

.single-practice__consultation-footer {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.6;
}

/* ---------- FAQ — reuses .practice-accordion (inc/practice-accordion.php)
   verbatim for markup/JS, only its own typography/grid overridden here.
   No number column (the FAQ markup never prints .practice-accordion__number),
   so grid-template-columns drops to two tracks instead of the homepage
   accordion's three. Thin horizontal lines only, min-block-size: auto and
   a smaller title read as "poziome linie, bez ciężkich card backgrounds"
   rather than the bigger, heavier homepage treatment. ---------- */

.single-practice__faq-accordion.practice-accordion {
	border-block-start: 1px solid var(--wp--preset--color--warm-beige);
}

.single-practice__faq-accordion .practice-accordion__item {
	border-block-end: 1px solid var(--wp--preset--color--warm-beige);
}

.single-practice__faq-accordion .practice-accordion__trigger {
	grid-template-columns: minmax(0, 1fr) 2.25rem;
	gap: var(--wp--preset--spacing--sm);
	min-block-size: auto;
	padding: clamp(1.25rem, 2.5vw, 1.5rem) 0;
	color: var(--wp--preset--color--espresso);
}

/*
 * .practice-accordion__title/__symbol/__panel-inner's own base colours
 * (assets/css/site.css, ~line 1497-1557) are Light Cream/Warm Beige —
 * correct for the homepage accordion's dark cover background, close to
 * invisible against this page's plain Ivory one (worst on mobile, where
 * .practice-accordion__title's font-size also drops, per the earlier
 * brief). Explicit Espresso/Dark Chocolate/Main Taupe here, never pure
 * black, matching every other text colour already used on this page.
 */
.single-practice__faq-accordion .practice-accordion__title {
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.3;
}

.single-practice__faq-accordion .practice-accordion__trigger:hover .practice-accordion__title,
.single-practice__faq-accordion .practice-accordion__trigger:focus-visible .practice-accordion__title,
.single-practice__faq-accordion .practice-accordion__trigger[aria-expanded="true"] .practice-accordion__title {
	color: var(--wp--preset--color--main-taupe);
}

.single-practice__faq-accordion .practice-accordion__symbol {
	inline-size: 2rem;
	block-size: 2rem;
	font-size: 1.25rem;
	color: var(--wp--preset--color--main-taupe);
}

.single-practice__faq-accordion .practice-accordion__trigger[aria-expanded="true"] .practice-accordion__symbol {
	color: var(--wp--preset--color--espresso);
}

.single-practice__faq-accordion .practice-accordion__panel-inner {
	max-inline-size: none;
	padding: 0 3rem clamp(1.5rem, 2.5vw, 2rem) 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: 1rem;
}

.single-practice__faq-accordion .practice-accordion__panel-inner p {
	margin: 0;
}

.single-practice__faq-accordion .practice-accordion__panel-inner p + p {
	margin-block-start: 1em;
}

/* ---------- Final CTA — reuses .single-practice__cta (inc/cta.php's
   kancelaria_opora_render_contact_cta_banner()) verbatim, just scaled up
   a little for "trochę bardziej rozbudowany" per the brief. No new CTA
   component. ---------- */

/* Replaces the removed content→CTA separator's own margin-block
   (previously clamp(0.875rem, 1.5vw, 1.25rem) above and below it, ~28-40px
   total) with an equivalent plain margin on the CTA itself — same
   "tight" gap the line used to keep here, just without a ruled line
   producing it. The @media (max-width: 69.9375rem) and (min-width: 48rem)
   block further up overrides this to the tablet tier's own larger,
   already-established ~88px rhythm. */
.single-practice__final-cta {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

.single-practice__final-cta .single-practice__cta {
	padding: clamp(2.25rem, 4vw, 3.25rem);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.single-practice__final-cta .single-practice__cta-icon {
	inline-size: 2.75rem;
	block-size: 2.75rem;
}

.single-practice__final-cta .single-practice__cta-title {
	font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
}

.single-practice__final-cta .single-practice__cta-text {
	font-size: 1.0625rem;
}

/*
 * .single-practice__scope-list stays the same single-column flex stack
 * on mobile as at every other viewport (see the base rule further up) —
 * no slider, nothing to override here. (A dead .single-practice-scope__grid/
 * __item/__controls/__indicator/__arrow slider block used to sit here,
 * built for an initSlider('single-practice-scope', ...) call that
 * assets/js/home-sliders.js never actually makes — removed together
 * with the matching base-rule cleanup above.)
 */
@media (max-width: 47.9375rem) {
	.single-practice__process-step {
		flex-direction: column;
		gap: 0.75rem;
	}

	.single-practice__quiet-section,
	.single-practice__defence {
		padding-inline: clamp(1.25rem, 5vw, 1.5rem);
	}

	.single-practice__faq-accordion .practice-accordion__panel-inner {
		padding-inline-end: 2.25rem;
	}
}

.service-archive__title {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.service-archive__list {
	margin-block-start: 0;
}

.service-archive__items {
	display: flex;
	flex-direction: column;
}

.service-archive__item {
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.service-archive__item:first-child {
	padding-block-start: 0;
}

.service-archive__item + .service-archive__item {
	border-block-start: 1px solid var(--wp--preset--color--warm-beige);
}

.service-archive__item-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
}

.service-archive__item-title a {
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
}

.service-archive__item-title a:hover {
	text-decoration: underline;
}

.service-archive__item-excerpt {
	margin: var(--wp--preset--spacing--xs) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(0.975rem, 0.91rem + 0.18vw, 1.0625rem);
	line-height: 1.7;
}

.service-archive__empty {
	color: var(--wp--preset--color--dark-chocolate);
}

/*
 * max-block-size: 100svh used to sit here as a "soft cap" for a
 * roughly-one-screen-tall section (AGENTS.md's own brief for Kontakt) —
 * but max-height is not a soft cap: with no overflow property set,
 * content taller than the limit doesn't grow the box past it, it paints
 * past the box's own bottom edge while the box itself still only
 * reserves max-height's worth of space in the document flow. The
 * Footer, next in that flow, starts exactly there regardless — so on
 * any viewport where the real content (the text column, or the map's
 * own floor below) needed more than 100svh, the Footer began before the
 * section's actual visible bottom, overlapping it. That's what this bug
 * report actually was: not Safari/Chrome disagreeing about 100vh's
 * value (they do, slightly, but that was never the real fault line
 * here), just this rule capping height regardless of content on any
 * width where the min-width: 48rem / max-width: 90rem band below didn't
 * happen to override it back out — which a MacBook wider than 1440px
 * logical pixels never fell into.
 *
 * min-block-size here is the section's actual height mechanism now: a
 * floor, not a ceiling, so content can never be capped short — and a
 * fixed rem value rather than a viewport unit, since a target relative
 * to content's own real height doesn't need one (the map's own
 * min-block-size below is the other half of "looks substantial with
 * typical content").
 */
.home-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
	align-items: stretch;
	min-block-size: 42rem;
}

/*
 * minmax(0, …) on the grid tracks above already lets the *columns*
 * shrink, but a grid item's own default min-inline-size is auto (its
 * content's min-content size), not 0 — without this, .home-contact__info's
 * text or .home-contact__map-column's map could still refuse to shrink
 * past their own natural width and force the column (and the section)
 * wider than its track, independent of which breakpoint band is active.
 */
.home-contact__info,
.home-contact__map-column {
	min-inline-size: 0;
}

.home-contact__info {
	padding: clamp(2rem, 5vh, 3.5rem) clamp(2rem, 4vw, 4rem);
	background: var(--wp--preset--color--ivory);
}

.home-contact__eyebrow {
	margin: 0 0 clamp(0.75rem, 1.5vh, 1.25rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.home-contact__title {
	max-inline-size: 18ch;
	margin: 0;
	font-size: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
	overflow-wrap: normal;
	word-break: normal;
}

.home-contact__intro {
	max-inline-size: 42ch;
	margin: clamp(0.75rem, 1.5vh, 1.25rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1rem);
	line-height: 1.6;
}

.home-contact__details {
	display: flex;
	flex-direction: column;
	gap: clamp(0.65rem, 1.4vh, 1rem);
	margin-block-start: clamp(1.25rem, 2.5vh, 2rem);
	padding-block-start: clamp(1.25rem, 2.5vh, 2rem);
	border-block-start: 1px solid var(--wp--preset--color--warm-beige);
}

.home-contact__detail-label {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-contact__detail-value {
	margin: 0;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	color: var(--wp--preset--color--espresso);
	font-size: clamp(0.9rem, 0.87rem + 0.1vw, 0.975rem);
	line-height: 1.5;
}

.home-contact__detail-value--strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	font-weight: 500;
}

/*
 * NIP/REGON/Numer konta as one visual cluster — same label/value rows
 * as Adres/Telefon/E-mail (kancelaria_opora_render_contact_detail(),
 * inc/contact.php), just with a tighter internal gap than
 * .home-contact__details' own rhythm between the *groups* (Adres,
 * Telefon, E-mail, this cluster). tabular-nums keeps the account
 * number's digit groups visually even; overflow-wrap/word-break
 * already on .home-contact__detail-value (its formatted spaces are the
 * only break points that matters here) is inherited as-is, so a long
 * account number only ever wraps between digit groups, never mid-group.
 */
.home-contact__detail-group {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	gap: 0.375rem;
}

.home-contact__detail-group .home-contact__detail-value {
	font-variant-numeric: tabular-nums;
}

.home-contact__detail-value a {
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
}

.home-contact__detail-value a:hover {
	color: var(--wp--preset--color--medium-taupe);
	text-decoration: underline;
}

.home-contact__note {
	max-inline-size: 42ch;
	margin: clamp(1rem, 2vh, 1.5rem) 0 0;
	color: var(--wp--preset--color--medium-taupe);
	font-size: 0.8125rem;
	line-height: 1.5;
	font-style: italic;
}

.home-contact__actions {
	margin-block-start: clamp(1rem, 2vh, 1.5rem);
}

/*
 * Floor only — align-items: stretch on .home-contact above (a grid, not
 * this column itself) is what actually makes this match the text
 * column's real height whenever that's taller; this just guarantees a
 * usable map even when the text column is short (e.g. optional fields
 * left empty). 28.125rem (450px) rather than the previous 20rem
 * (320px), which read as cramped for a map on its own.
 */
.home-contact__map-column {
	position: relative;
	min-block-size: 28.125rem;
	border-inline-start: 1px solid var(--wp--preset--color--main-taupe);
}

.home-contact__map,
.home-contact__map-placeholder {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.home-contact__map-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 4vw, 3rem);
	background: var(--wp--preset--color--warm-beige);
	text-align: center;
}

.home-contact__map-placeholder-note {
	max-inline-size: 32ch;
	margin: 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/*
 * Desaturating and warming the tile layer only — never .home-contact__map
 * itself — is what keeps the marker, popup, zoom controls and
 * attribution drawn in the panes above it completely unaffected. Values
 * are tuned toward Ivory/Warm Beige/Main Taupe rather than a generic
 * "muted map" preset: grayscale+sepia pulls the default OSM greens/blues
 * toward the brand's warm neutrals, saturate/contrast/brightness keep
 * street labels and thin roads from flattening into illegibility once
 * that color shift is applied.
 */
.home-contact__map .leaflet-tile-pane {
	filter: grayscale(0.4) sepia(0.14) saturate(0.72) contrast(0.93) brightness(1.03);
}

/* AGENTS.md avoids rounded corners and drop shadows sitewide — replace
   Leaflet's defaults with the same thin-border language used elsewhere. */
.home-contact__map .leaflet-bar,
.home-contact__map .leaflet-popup-content-wrapper,
.home-contact__map .leaflet-tooltip {
	border-radius: 0;
	box-shadow: none;
	border: 1px solid var(--wp--preset--color--warm-beige);
}

.home-contact__map .leaflet-popup-content-wrapper {
	background: var(--wp--preset--color--light-cream);
}

.home-contact__map .leaflet-popup-tip {
	background: var(--wp--preset--color--light-cream);
	box-shadow: none;
}

.home-contact__map .leaflet-popup-close-button {
	color: var(--wp--preset--color--espresso);
}

.contact-map-popup strong {
	display: block;
	margin-block-end: 0.25rem;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	font-weight: 600;
}

.contact-map-popup p {
	margin: 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Leaflet's own zoom +/- buttons — same thin-border, no-shadow language
   as the rest of the map chrome, instead of the library's white/gray
   defaults. */
.home-contact__map .leaflet-bar a {
	background: var(--wp--preset--color--light-cream);
	color: var(--wp--preset--color--espresso);
	border-bottom-color: var(--wp--preset--color--warm-beige);
}

.home-contact__map .leaflet-bar a:hover,
.home-contact__map .leaflet-bar a:focus-visible {
	background: var(--wp--preset--color--warm-beige);
	color: var(--wp--preset--color--dark-chocolate);
}

/* Attribution stays fully intact (required by the OpenStreetMap
   license) — only its colors and size are brought in line with the
   brand palette. */
.home-contact__map .leaflet-control-attribution {
	background: var(--wp--preset--color--light-cream);
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
}

.home-contact__map .leaflet-control-attribution a {
	color: var(--wp--preset--color--espresso);
}

/* Custom marker (see assets/js/contact-map.js) replacing Leaflet's
   default blue pin — a plain CSS dot, no icon library, no image
   requests. The light ring keeps it legible against the tile filter
   above, whatever tone the tiles happen to be at that spot. */
.contact-map-marker {
	display: block;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	border-radius: 50%;
	background: var(--wp--preset--color--dark-chocolate);
	border: 3px solid var(--wp--preset--color--light-cream);
	box-sizing: border-box;
}

.site-footer {
	margin-block-start: 0;
	color: var(--wp--preset--color--light-cream);
	background: var(--wp--preset--color--dark-chocolate);
}

.site-footer__inner {
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2rem);
}

/* Column order matches source order: logo, menu, obszary praktyki,
   kontakt. This grid lives inside .site-content-shell, which only gets
   the viewport minus the ~320-360px sidebar (see .site-shell) — but
   that sidebar itself only exists above 69.9375rem (see the
   max-width: 69.9375rem block further down); below that .site-shell
   goes full-width. 69.9375rem is therefore the tightest real case for
   this grid (desktop footer starts at max-width: 64rem, i.e. above
   1024px), not 1024px itself.
   Floors are near-equal (1fr/1fr/1fr/1.1fr) on purpose: the previous
   0.8fr/0.9fr/1.25fr/1.25fr split let praktyka/kontakt grow much
   faster than logo/menu as the viewport widened, so the three
   column-gaps stopped reading as equal even though column-gap itself
   was a single value. Chamber's own floor (9.375rem) is sized to fit
   .site-footer__chamber-logo-image's own minimum rendered width
   (8.125rem, from its max-inline-size clamp) so the logo can't
   overflow into the menu column. */
.site-footer__columns {
	display: grid;
	grid-template-columns:
		minmax(9.375rem, 1fr)
		minmax(6.25rem, 1fr)
		minmax(7.5rem, 1fr)
		minmax(8.75rem, 1.1fr);
	align-items: start;
	row-gap: clamp(2rem, 4vw, 3rem);
	column-gap: clamp(3rem, 4vw, 4.5rem);
}

/* Grid items default to min-width: auto, which lets an unbreakable
   token (the email address) force its track wider than the minmax()
   above intends. Zeroing it here is what actually lets overflow-wrap
   on .site-footer__contact-line take effect instead of blowing out
   the grid. */
.site-footer__columns > * {
	min-inline-size: 0;
}

/* The global :focus-visible outline (see the top of this file) is
   Dark Chocolate — invisible against this footer's own Dark Chocolate
   background, so every footer link gets a light outline instead. */
.site-footer :where(a):focus-visible {
	outline-color: var(--wp--preset--color--light-cream);
}

.site-footer__column-title {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * font-size lives here now, not just on the <a> inside — confirmed via
 * real DevTools computed values that this was the actual remaining
 * cause of MENU's taller rows even after the line-height fix below:
 * .site-footer__practice-list always set its own font-size (0.9rem)
 * directly on the <ul>, so its <li> inherited that same 0.9rem — but
 * .site-footer__nav-list only ever set font-size on the <a> inside,
 * never on the <ul>/<li> themselves, so MENU's <li> was inheriting
 * body's own font-size instead (18px at common desktop widths).
 * Same line-height: 1.4 multiplier on both (see the <li> rule below),
 * applied to two different base font-sizes, is exactly what produced
 * two different pixel row heights (25.2px vs 20.16px) despite an
 * identical flex `gap`. One shared font-size here removes the
 * asymmetry at the root instead of patching it further down.
 */
.site-footer__nav-list,
.site-footer__practice-list {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	list-style: none;
}

.site-footer__nav-list a {
	display: inline-block;
	color: var(--wp--preset--color--light-cream);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease;
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible {
	color: var(--wp--preset--color--warm-beige);
	transform: translateX(0.2rem);
}

.site-footer__nav-list li,
.site-footer__practice-list li {
	line-height: 1.4;
}

.site-footer__practice-list a {
	display: inline-block;
	color: var(--wp--preset--color--light-cream);
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease;
}

.site-footer__practice-list a:hover,
.site-footer__practice-list a:focus-visible {
	color: var(--wp--preset--color--warm-beige);
	transform: translateX(0.2rem);
}

.site-footer__empty {
	margin: 0;
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.85rem;
	font-style: italic;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.site-footer__contact-line {
	/* min-inline-size: 0 overrides the flex item default of auto.
	   overflow-wrap: anywhere (not break-word) is what actually matters
	   here — break-word only changes where text visually wraps, it does
	   NOT reduce the min-content size grid/flex use for track sizing, so
	   an email address would still force this column wider regardless.
	   anywhere reduces that min-content contribution too. */
	min-inline-size: 0;
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--light-cream);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9rem;
	line-height: 1.5;
}

.site-footer__contact-line--strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
}

.site-footer__contact-line--link {
	font-size: 0.95rem;
	font-weight: 500;
}

.site-footer__contact-line a {
	display: inline-block;
	color: var(--wp--preset--color--light-cream);
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease;
}

.site-footer__contact-line a:hover,
.site-footer__contact-line a:focus-visible {
	color: var(--wp--preset--color--warm-beige);
	transform: translateX(0.2rem);
}

/* Phone/e-mail rows only (kancelaria_opora_render_footer_contact_column(),
   inc/footer.php) — icon + text in one line, both sharing this
   exact same structure so they align identically. Extra specificity
   (two classes) over .site-footer__contact-line a above is what lets
   inline-flex actually win over that rule's own inline-block; colour/
   hover/transform are already inherited from it as-is, nothing repeated
   here. center (not flex-start) is what actually optically centres a
   small icon against a text line — flex-start lines up the icon's own
   (shorter) box with the *top* of the text's line-box, which still has
   room below the glyphs for leading, so the text reads as sitting
   slightly low next to it; matching centres on both instead. The icon
   has no colour of its own — stroke="currentColor" (see
   kancelaria_opora_render_footer_contact_icon()) follows the link's own
   text colour on both states automatically. */
.site-footer__contact .site-footer__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-inline-size: 100%;
}

/*
 * Fixed-size box around every icon (not just a bare, variably-shaped
 * <svg> as a flex item) — this is what actually guarantees every row's
 * text starts on the same vertical axis regardless of which icon's own
 * glyph happens to be narrower/wider inside its viewBox, and gives each
 * icon a single, shared centring context (inline-flex, both axes) —
 * display: block on the svg itself inside it is what rules out any
 * inline-element baseline gap under the glyph. Same fixed size both
 * icons already rendered at before this box existed; nothing about
 * their own dimensions changed, only how they're centred.
 */
.site-footer__contact-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	inline-size: 0.9375rem;
	block-size: 0.9375rem;
}

.site-footer__contact-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* align-items/text-align: flex-start/left — logo and socials start
   flush at the column's own inline-start edge, same as every other
   footer column's content, so the column-gap above reads as the same
   rhythm on both sides of this column instead of being narrowed by an
   independently centred block. (Below max-width: 64rem the whole
   footer becomes a single centred stack — see that column--chamber
   override further down — where centring is the right call again.) */
.site-footer__column--chamber {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 1.75rem;
}

.site-footer__chamber-logo {
	display: inline-flex;
	align-self: flex-start;
}

.site-footer__chamber-logo-image {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: clamp(8.125rem, 9vw, 10.625rem);
	object-fit: contain;
}

.site-footer__note {
	align-self: flex-start;
	margin: 0;
	max-inline-size: 26ch;
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	line-height: 1.6;
	text-align: left;
}

/* inline-size matches .site-footer__chamber-logo-image's own
   max-inline-size (same clamp) rather than filling the grid track, so
   align-items: center below centres each link against the logo's own
   width — not the track's width, which grows with the viewport and
   would otherwise re-introduce the drift align-items: flex-start on
   .site-footer__column--chamber was added to prevent. The block's own
   left edge still starts flush at the column's inline-start, same as
   every other column, since its parent keeps align-items: flex-start. */
.site-footer__socials {
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: clamp(8.125rem, 9vw, 10.625rem);
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* inline-size: fit-content keeps the clickable box tight around the
   icon+label so align-items: center on .site-footer__socials above
   can centre it; margin-inline is 0 (not auto) since centring is
   handled by the parent now — a flex item's own auto margin on the
   cross axis would otherwise override that align-items value. */
.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	inline-size: fit-content;
	margin-inline: 0;
	color: var(--wp--preset--color--light-cream);
	opacity: 0.85;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

/* Sized in em against this link's own font-size, so it stays in step
   with the visible label next to it (unlike the sidebar/drawer's
   icon-only .sidebar-contact__social-link svg, sized in fixed rem
   since there's no label to match there). */
.site-footer__social-link svg {
	inline-size: 1.05em;
	block-size: 1.05em;
	flex-shrink: 0;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	color: var(--wp--preset--color--main-taupe);
	opacity: 1;
	transform: translateX(0.25rem);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding-block-start: clamp(1.25rem, 2.5vw, 1.5rem);
	border-block-start: 1px solid rgba(197, 171, 159, 0.18);
}

.site-footer__copyright,
.site-footer__credits {
	margin: 0;
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	line-height: 1.5;
	opacity: 0.85;
}

/*
 * Mobile + tablet: a purpose-built centred composition, never a
 * compressed form of the four-column desktop grid. Source order is
 * already logo/socials, menu, practice, contact, bottom bar, so flex
 * can preserve both reading and keyboard order without reordering.
 */
@media (max-width: 64rem) {
	.site-footer .site-footer__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: clamp(3.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem);
	}

	.site-footer__columns {
		display: flex;
		flex-direction: column;
		align-items: center;
		inline-size: 100%;
		gap: 0;
	}

	.site-footer__columns > * {
		inline-size: 100%;
		max-inline-size: 32rem;
		margin-inline: auto;
		text-align: center;
	}

	/* Three short rules divide the four content zones without turning
	   the footer into a table. Their spacing is the section rhythm. */
	.site-footer__columns > * + * {
		position: relative;
		margin-block-start: clamp(1.25rem, 2.5vw, 1.5rem);
		padding-block-start: clamp(1.25rem, 2.5vw, 1.5rem);
		border-block-start: 0;
	}

	.site-footer__columns > * + *::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 50%;
		inline-size: min(100%, 17.5rem);
		block-size: 1px;
		background: rgba(197, 171, 159, 0.18);
		transform: translateX(-50%);
	}

	.site-footer__column--chamber {
		align-items: center;
		text-align: center;
		gap: clamp(1.25rem, 3vw, 1.75rem);
	}

	.site-footer__chamber-logo {
		align-self: center;
		margin-inline: auto;
	}

	.site-footer__chamber-logo-image {
		inline-size: clamp(9.375rem, 17vw, 11.25rem);
		max-inline-size: 100%;
		margin-inline: auto;
	}

	.site-footer__note {
		order: 3;
		align-self: center;
		max-inline-size: 30ch;
		margin-inline: auto;
		text-align: center;
	}

	.site-footer__socials {
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		inline-size: 100%;
		justify-content: center;
		gap: clamp(1.375rem, 3vw, 1.75rem);
	}

	.site-footer__social-link,
	.site-footer__social-link:hover,
	.site-footer__social-link:focus-visible {
		gap: 0;
		transform: none;
	}

	.site-footer__social-link svg {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	/* Icon-only visually; the link's aria-label or text remains in the
	   accessibility tree for screen-reader users. */
	.site-footer__social-label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.site-footer__column-title {
		margin-block-end: 1.25rem;
		text-align: center;
	}

	.site-footer__nav-list,
	.site-footer__practice-list {
		align-items: center;
		gap: 0.75rem;
		text-align: center;
	}

	.site-footer__nav-list a,
	.site-footer__practice-list {
		font-size: 1rem;
		line-height: 1.6;
	}

	.site-footer__nav-list a:hover,
	.site-footer__nav-list a:focus-visible,
	.site-footer__practice-list a:hover,
	.site-footer__practice-list a:focus-visible {
		transform: none;
	}

	.site-footer__contact {
		align-items: center;
		gap: 0.625rem;
		text-align: center;
	}

	.site-footer__contact-line,
	.site-footer__contact-line a {
		max-inline-size: 100%;
		text-align: center;
		word-break: normal;
	}

	.site-footer__contact-line a:hover,
	.site-footer__contact-line a:focus-visible {
		transform: none;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: center;
		inline-size: 100%;
		max-inline-size: 32rem;
		margin-block-start: clamp(3rem, 6vw, 4rem);
		margin-inline: auto;
		padding-block-start: 1.5rem;
		text-align: center;
		gap: 0.5rem;
	}

	.site-footer__copyright,
	.site-footer__credits {
		font-size: 0.75rem;
		text-align: center;
	}
}

@media (max-width: 48rem) {
	.site-footer__chamber-logo-image {
		inline-size: clamp(8.125rem, 36vw, 10rem);
	}
}

@media (max-width: 75rem) {
	.practice-section.wp-block-cover {
		min-block-size: auto;
	}

	.practice-section__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--2-xl);
	}

	.practice-section__intro {
		position: static;
	}

	.practice-section__title,
	.practice-section__description {
		max-inline-size: 14ch;
	}

	.practice-section__description {
		max-inline-size: 42ch;
	}

	.practice-section__more {
		max-inline-size: 100%;
	}
}

@media (min-width: 70.0625rem) and (max-height: 48rem) {
	.site-sidebar__inner {
		padding-block: 1rem;
	}

	.site-brand__logo {
		max-inline-size: clamp(8.75rem, 11vw, 10.625rem);
	}

	.site-sidebar__divider.wp-block-separator {
		margin-block: 0.75rem;
	}

	.sidebar-nav-list a {
		padding-block: 0.4rem;
	}

	.sidebar-contact + .sidebar-contact {
		margin-block-start: 0.75rem;
	}
}

/*
 * Below ~70rem (1120px) the full sidebar (~320-360px, see .site-shell
 * above) starts crowding the content column too much on real tablet/
 * small-laptop viewports — this is the single breakpoint that switches
 * the desktop sidebar off and the compact header + off-canvas drawer
 * on. Chosen by checking where the sidebar's fixed width stops leaving
 * comfortable room for readable line lengths in .site-main, not by any
 * named device.
 */
@media (max-width: 69.9375rem) {
	.site-shell {
		display: block;
	}

	.site-sidebar {
		display: none;
	}

	.site-main {
		padding-block: var(--wp--preset--spacing--2-xl);
		padding-inline: var(--wp--preset--spacing--lg);
	}

	.site-main--front-page {
		padding: 0;
	}

	/*
	 * Three thin bars only — no background, no border, no box of any
	 * kind, so it never reads as a filled button sitting on top of the
	 * hero. Fixed to the corner so it stays exactly in place regardless
	 * of scroll position or page length; its own body.admin-bar offset
	 * below already keeps it clear of #wpadminbar, so z-index only has
	 * to beat the drawer (100010) and its overlay (100005) — high
	 * enough to also clear WordPress core's own admin bar (z-index:
	 * 99999) since the drawer is now allowed to cover it (see the
	 * comment on .site-mobile-drawer) — so the toggle stays visible and
	 * usable as the close control once the drawer is open, rather than
	 * being covered by it. The 44px hit area is invisible — only the
	 * bars inside it are drawn — via .site-mobile-header__toggle-bar
	 * below.
	 */
	.site-mobile-header__toggle {
		position: fixed;
		z-index: 100020;
		inset-block-start: 1.25rem;
		inset-inline-end: 1.25rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.3125rem;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	/* WP's admin bar is fixed at the very top of the viewport for
	   logged-in users — without this the floating button would sit
	   partly underneath its black bar instead of clear below it. */
	body.admin-bar .site-mobile-header__toggle {
		inset-block-start: calc(1.25rem + var(--wp-admin--admin-bar--height, 32px));
	}

	/*
	 * Hamburger -> X: the top/bottom bars rotate 45deg/-45deg into an
	 * "X" and both translate to the middle bar's position so the cross
	 * is centred rather than offset; the middle bar just fades out.
	 * transform-origin: center keeps the rotation anchored on each
	 * bar's own centre. prefers-reduced-motion is already covered by
	 * the project-wide transition-duration: 0.01ms !important rule.
	 */
	.site-mobile-header__toggle-bar {
		display: block;
		inline-size: 1.375rem;
		block-size: 2px;
		background: var(--wp--preset--color--espresso);
		transform-origin: center;
		transition: transform 250ms ease, opacity 250ms ease;
	}

	.site-mobile-header__toggle.is-open .site-mobile-header__toggle-bar:nth-child(1) {
		transform: translateY(0.4375rem) rotate(45deg);
	}

	.site-mobile-header__toggle.is-open .site-mobile-header__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.site-mobile-header__toggle.is-open .site-mobile-header__toggle-bar:nth-child(3) {
		transform: translateY(-0.4375rem) rotate(-45deg);
	}

	.site-mobile-drawer,
	.site-mobile-drawer-overlay {
		display: block;
	}

	/*
	 * Deliberately no body.admin-bar offset here (or on the overlay
	 * below) — unlike the sidebar/toggle, which sit alongside page
	 * content and do need to clear the admin bar, the drawer and its
	 * overlay are a full-screen takeover while open. They cover the
	 * admin bar rather than starting below it, so there's never a gap
	 * at the top — which needs z-index: 100010 (and the overlay's
	 * 100005), comfortably above #wpadminbar's own 99999, or the
	 * (lower, pre-existing) 60/55 this used to be would leave the still
	 * fixed, still on top, admin bar visibly poking through above the
	 * drawer instead of actually being covered by it. The toggle keeps
	 * its own admin-bar offset (see .site-mobile-header__toggle) since
	 * it's visible before/after the drawer opens, not just during, and
	 * its z-index now has to clear this higher drawer/overlay too.
	 */
	.site-mobile-drawer {
		position: fixed;
		z-index: 100010;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: clamp(26.25rem, 45vw, 30rem);
		block-size: 100vh;
		block-size: 100svh;
		block-size: 100dvh;
		background: var(--wp--preset--color--light-cream);
		border-inline-start: 1px solid var(--wp--preset--color--main-taupe);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 300ms ease-out, visibility 0s linear 300ms;
	}

	.site-mobile-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 300ms ease-out, visibility 0s linear 0s;
	}

	.site-mobile-drawer__inner {
		display: grid;
		grid-template-rows: auto 1fr auto;
		box-sizing: border-box;
		block-size: 100%;
		padding: clamp(1.5rem, 3.25vh, 2.5rem) clamp(1.75rem, 5vw, 2.5rem);
		overflow-y: auto;
	}

	/* Centred top/middle/bottom composition matching the desktop
	   sidebar's own .site-sidebar__top (logo, then divider, both
	   centred) — see the shared .site-sidebar__divider override below
	   for why the separator no longer runs edge-to-edge like it does
	   as a plain wp:separator elsewhere. */
	.site-mobile-drawer__top {
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		inline-size: 100%;
	}

	.site-mobile-drawer__brand {
		display: flex;
		justify-content: center;
		inline-size: 100%;
	}

	/* ~180-220px on tablet/desktop-width drawers; a @media (max-width:
	   46rem) override just below narrows this to ~160-190px, matching
	   the drawer's own width tiers (see .site-mobile-drawer above).
	   margin-inline: auto (rather than the desktop rule's own, which
	   this descendant selector would otherwise outrank) is what
	   actually centres it once .site-mobile-drawer__brand's max-width
	   below the logo's own cap leaves room to. */
	.site-mobile-drawer__brand .site-brand__logo {
		max-inline-size: clamp(11.25rem, 30vw, 13.75rem);
		margin-inline: auto;
	}

	/* Wider gap under the logo than a plain wp:separator would default
	   to, and narrower-than-full-bleed like the desktop sidebar's own
	   divider — see the shared rule below. */
	.site-mobile-drawer__top .site-sidebar__divider.wp-block-separator {
		margin-block-start: clamp(2rem, 4.5vh, 2.75rem);
	}

	/* Both the drawer's own dividers (under the logo, and the one
	   kancelaria_opora_render_sidebar_contact() already prints before
	   the contact block — same .site-sidebar__divider class, reused
	   rather than duplicated) get this treatment: centred, not
	   edge-to-edge, so they read as a deliberate rule rather than a
	   leftover full-width wp:separator default. */
	.site-mobile-drawer .site-sidebar__divider.wp-block-separator {
		inline-size: 78%;
		margin-inline: auto;
	}

	.drawer-navigation {
		grid-row: 2;
		align-self: center;
		inline-size: 100%;
	}

	.drawer-nav-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.375rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.drawer-nav-list a {
		display: inline-block;
		padding-block: 0.25rem;
		color: var(--wp--preset--color--espresso);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 1.25rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		text-align: center;
		text-decoration: none;
		transition: color 160ms ease, transform 160ms ease;
	}

	.drawer-nav-list a:hover,
	.drawer-nav-list a:focus-visible {
		color: var(--wp--preset--color--main-taupe);
		transform: translateX(0.2rem);
	}

	.drawer-nav-list .current-menu-item > a,
	.drawer-nav-list a[aria-current="page"] {
		color: var(--wp--preset--color--dark-chocolate);
		font-weight: 500;
	}

	/* The contact block is reused verbatim from the desktop sidebar
	   (kancelaria_opora_render_sidebar_contact() — same markup, same
	   .site-sidebar__contact/.sidebar-contact classes, already centred
	   there); its grid-row: 3 already matches this drawer's own
	   auto 1fr auto rows, so only its width needs a drawer-specific
	   override — the desktop sidebar's own 14rem cap reads as cramped
	   in this roomier panel. */
	.site-mobile-drawer .sidebar-contact {
		inline-size: min(100%, 18rem);
	}

	.site-mobile-drawer .sidebar-contact__value {
		font-size: 1rem;
	}

	.site-mobile-drawer-overlay {
		position: fixed;
		z-index: 100005;
		inset: 0;
		background: rgba(30, 21, 22, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 300ms ease-out, visibility 0s linear 300ms;
	}

	.site-mobile-drawer-overlay.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity 300ms ease-out, visibility 0s linear 0s;
	}

	/* Scroll lock (assets/js/mobile-drawer.js) sets padding-right on
	   body to compensate for the vanished scrollbar — html needs the
	   matching overflow:hidden for the lock to actually work. */
	body.has-open-drawer {
		overflow: hidden;
	}
}

@media (max-width: 46rem) {
	.site-mobile-drawer {
		inline-size: min(88vw, 26.25rem);
	}

	.site-mobile-drawer__brand .site-brand__logo {
		max-inline-size: clamp(10rem, 40vw, 11.875rem);
	}
}

@media (max-width: 60rem) {
	/*
	 * Below 60rem, .home-hero__content spans nearly the full width
	 * (see the max-inline-size override further down) instead of just
	 * the left half like on desktop, so the desktop's left-to-right
	 * fade doesn't apply — a flat tint is the right mechanism here.
	 * 0.88 (near-opaque) was hiding the video almost entirely; lowered
	 * to keep a legibility assist without erasing the footage. This is
	 * a pragmatic fix, not a design decision — worth a design review.
	 */
	.home-hero__media::after {
		background: rgba(246, 241, 234, 0.35);
	}

	.home-hero__content {
		inline-size: 100%;
		max-inline-size: 34rem;
		padding-block: var(--wp--preset--spacing--xl);
	}

	.home-hero__title {
		font-size: clamp(3.75rem, 12vw, 6.5rem);
	}

	@keyframes home-hero-in {
		from {
			opacity: 0;
			filter: blur(2px);
			transform: translateY(0.875rem);
		}

		to {
			opacity: 1;
			filter: blur(0);
			transform: translateY(0);
		}
	}

	.practice-section.has-parallax {
		background-attachment: scroll;
	}

	.practice-section .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll;
		inset: 0 0 auto 0;
		block-size: 100vh;
		block-size: 100svh;
	}

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

	.home-articles__grid > li {
		padding-inline: 0;
		padding-block: var(--wp--preset--spacing--xl);
		border-inline-start: 0;
	}

	.home-articles__grid > li:first-child {
		padding-block-start: 0;
	}

	.home-articles__grid > li:last-child {
		padding-block-end: 0;
	}

	/*
	 * border-inline-start: 0 is repeated here (not just on the plain
	 * `> li` rule above) because the desktop rule this overrides is
	 * itself `.home-articles__grid > li + li` — two type selectors, so
	 * a plain `> li` override can never win on specificity alone
	 * regardless of source order. Matching the same li + li selector is
	 * what actually removes the vertical divider on mobile, instead of
	 * just adding a horizontal one on top of it.
	 */
	.home-articles__grid > li + li {
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--warm-beige);
	}

	.home-articles__item-excerpt {
		max-inline-size: none;
	}

	.article-archive__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xs);
	}
}

/*
 * .home-contact used to stack here too (inside the shared
 * @media (max-width: 60rem) block above), which is exactly what broke
 * at ~1024px: that left the 2-column grid (align-items: stretch,
 * .home-contact__map's position: absolute; inset: 0 sizing it to
 * .home-contact__map-column's own height, itself stretched to match
 * .home-contact__info) active all the way from 960px up to the
 * desktop's full width. Once .home-contact__info's 0.4fr column got
 * narrow enough to wrap onto more lines, the taller info column
 * stretched the map's height right along with it — a cramped map next
 * to a too-tall text column, not a genuine 2-column layout breaking
 * down. Splitting the old single cutoff into a true-mobile band here
 * (unchanged from before, just renumbered to this theme's usual
 * 47.9375rem mobile line) and a dedicated tablet/narrow-desktop band
 * below removes that stretch dependency across the whole troublesome
 * 768–1099px range, leaving 1100px+ as the first width where the
 * original 2-column grid (untouched, in the base .home-contact rule)
 * applies again.
 */
@media (max-width: 47.9375rem) {
	/* Single column now, so the base rule's own min-block-size (sized
	   for the 2-column desktop/tablet split) isn't relevant here —
	   height comes entirely from stacked content plus the map's own
	   fixed band below, never from a target on the section itself. */
	.home-contact {
		display: block;
		min-block-size: auto;
	}

	.home-contact__info {
		padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 2.5rem);
	}

	.home-contact__map-column {
		min-block-size: 0;
		block-size: 56vh;
		block-size: 56svh;
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--main-taupe);
	}
}

/*
 * Tablet / narrow-desktop / laptop: stays a genuine 2-column row like
 * desktop (stacking it, as an earlier pass at this did, left too much
 * empty space under a short info column) but with its own narrower
 * proportions, rather than the desktop 0.4fr/0.6fr split stretched down
 * to this width — every detail row (including phone and email) is
 * full-width at this width (an earlier pass paired phone/email side by
 * side to save vertical space, but a long e-mail address has no natural
 * break point and overflowed its half-width column, so each detail now
 * gets its own row). No height override here any more: the base rule's
 * own min-block-size (a floor, not the vh-based max-height ceiling this
 * used to counteract — see that rule's own comment) already applies
 * cleanly across every width, this band included, so there's nothing
 * left for it to override.
 *
 * The upper bound used to be 68.6875rem (1100px), reasoned as "short of
 * the sidebar/drawer cutoff (69.9375rem — see .site-mobile-header__toggle),
 * so the desktop split only resumes once there's genuinely enough width
 * for it" — but that reasoning compared this band's own width against
 * the *viewport*, not against .home-contact's actual available width.
 * Below 69.9375rem the sidebar is hidden (mobile drawer instead), so
 * throughout the old band's own 48rem–68.6875rem range, viewport width
 * WAS content width. Above 69.9375rem the ~20–22.5rem sidebar (.site-shell,
 * top of this file) comes back and eats straight into that budget — so
 * a 1440px-wide MacBook, well past the old cutoff, was actually left
 * with only ~1094px of real content width for .home-contact, narrower
 * than what this band was already built to handle at its own native
 * range. 90rem (1440px) is the viewport width at which content width
 * (viewport minus the sidebar's own ~22.5rem max) first reaches roughly
 * that same ~1100px this band already handles well — the desktop
 * proportions only resume genuinely past it, not just past the sidebar
 * reappearing.
 */
@media (min-width: 48rem) and (max-width: 90rem) {
	.home-contact {
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
	}

	.home-contact__info {
		padding: clamp(2rem, 4vh, 2.75rem) clamp(1.75rem, 3vw, 2.5rem);
	}

	.home-contact__title {
		font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.0625rem);
	}

	.home-contact__intro {
		max-inline-size: 28rem;
		margin-block-start: clamp(0.5rem, 1vh, 0.875rem);
	}

	.home-contact__details {
		flex-flow: row wrap;
		column-gap: 1.25rem;
		gap: clamp(0.5rem, 1vh, 0.75rem);
		margin-block-start: clamp(1rem, 2vh, 1.5rem);
		padding-block-start: clamp(1rem, 2vh, 1.5rem);
	}

	.home-contact__detail,
	.home-contact__detail-group {
		flex: 1 1 100%;
		min-inline-size: 0;
	}

	.home-contact__note {
		margin-block-start: clamp(0.75rem, 1.5vh, 1rem);
	}

	.home-contact__actions {
		margin-block-start: clamp(0.75rem, 1.5vh, 1rem);
	}

	.home-contact__map-column {
		min-block-size: 37.5rem;
	}
}

/*
 * Chamber logo inside the hero, mobile/tablet only — same ~70rem
 * cutoff as the mobile header/drawer (see .site-mobile-header__toggle),
 * so "logo visible without opening the menu" and "hamburger visible"
 * are the same breakpoint by construction, not two numbers that could
 * drift apart. Absolute + left: 50% / translateX(-50%) rather than a
 * flex child of .home-hero, since that flex row already centres
 * .home-hero__content vertically — adding a second visible flex item
 * would sit beside it, not above it. z-index: 10 only needs to clear
 * this hero's own layers (media/content top out at 0/1); the toggle in
 * the opposite corner is z-index: 100020 and never overlaps this
 * horizontally-centred logo at any of the widths this was checked at.
 * Logo size and .home-hero__content's clearance padding are set
 * per-range below (mobile vs the @media (min-width: 48rem) tablet
 * band further down) since the two now need visibly different values,
 * not one shared number.
 */
@media (max-width: 69.9375rem) {
	/*
	 * The size lives on this wrapper (inline-size), not just on the
	 * .site-brand__logo link inside it — that link is inline-size:100%
	 * (from the shared base rule the desktop sidebar also uses), so
	 * without an explicit width here .home-hero__mobile-brand itself
	 * shrink-to-fits and the percentage-width child can't reliably
	 * reach the max-inline-size set below, rendering visibly smaller
	 * than intended. The link's own max-inline-size is reset to none
	 * here too — its shared base rule (also used by the desktop
	 * sidebar's own, differently-sized logo) would otherwise still cap
	 * this narrower than the wrapper it's now sized to fill.
	 */
	.home-hero__mobile-brand {
		display: block;
		position: absolute;
		z-index: 10;
		inset-block-start: 7rem;
		inset-inline-start: 50%;
		transform: translateX(-50%);
	}

	.home-hero__mobile-brand .site-brand__logo {
		display: block;
		max-inline-size: none;
		margin-inline: auto;
	}
}

/*
 * Mobile: below the tablet band's 48rem floor. Logo is a lead element
 * here, not a small accessory — 232-272px, sized via vw so it's
 * comfortably clear of the 44px hamburger hit area.
 * .home-hero__content's padding-block-start pushes the whole text
 * block down as one unit (not per-element margins) for a deliberate
 * gap under the logo. A shorter, denser variant of all of this for low
 * -height phones (e.g. iPhone SE) lives further down, in @media
 * (max-width: 47.9375rem) and (max-height: 43.75rem) — it only
 * overrides what needs to shrink to fit the first viewport there,
 * everything else here still applies underneath it.
 */
@media (max-width: 47.9375rem) {
	.home-hero__mobile-brand {
		inline-size: clamp(14.5rem, 58vw, 17rem);
	}

	.home-hero__content {
		padding-block-start: 23rem;
	}
}

/*
 * Deliberate tablet treatment for the hero, not an accidental byproduct
 * of the phone bucket's vw-scaling (max-width: 60rem, below) or the old
 * narrow min-width: 60.0625rem/max-width: 75rem band this replaces —
 * that band only touched .home-hero__title and, at 1024px, actually
 * rendered SMALLER (~61px) than both the phone bucket just below it
 * (~92px) and this project's own desktop scale just above it — the
 * "hero too small on tablet" bug. Spans 48rem (768px, the narrowest
 * width this task tests) through 69.9375rem, the existing desktop
 * sidebar/drawer cutoff (see the @media (max-width: 69.9375rem) block
 * further down) — every width in between still shows the mobile
 * drawer, never the desktop sidebar, so it reads as one coherent
 * "tablet" zone. Widening .home-hero__content (from the desktop-only
 * 52%) gives the larger type room to stay in 2-3 lines without
 * crowding; it's still flex-start/left-aligned, so this doesn't
 * recentre the composition, only lets it use more of the row.
 */
@media (min-width: 48rem) and (max-width: 69.9375rem) {
	/* Tablet gets a substantially larger logo than mobile (304-384px
	   vs 232-272px) — one of the hero's main elements here, not a
	   small accessory. */
	.home-hero__mobile-brand {
		inline-size: clamp(19rem, 34vw, 24rem);
	}

	.home-hero__content {
		max-inline-size: 64%;
		padding-block-start: 26rem;
	}

	.home-hero__eyebrow {
		margin-block-end: 1.75rem;
		font-size: 0.875rem;
	}

	.home-hero__title {
		font-size: clamp(6rem, 8vw, 7rem);
	}

	.home-hero__description {
		margin-block-start: 2.25rem;
		font-size: 1.125rem;
	}

	.home-hero__actions {
		margin-block-start: 2.25rem;
	}

	.home-hero__button .wp-block-button__link {
		padding: 1.05rem 1.75rem;
		font-size: 1rem;
	}
}

@media (max-width: 70rem) {
	.home-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-values__item,
	.home-values__item:first-child,
	.home-values__item:last-child {
		padding: clamp(2rem, 4vw, 3rem);
	}

	.home-values__item:nth-child(odd) {
		padding-inline-start: 0;
	}

	.home-values__item:nth-child(even) {
		padding-inline-end: 0;
		border-inline-start: 1px solid var(--wp--preset--color--warm-beige);
	}

	.home-values__item:nth-child(-n + 2) {
		padding-block-start: 0;
	}

	.home-values__item:nth-child(n + 3) {
		padding-block-end: 0;
		border-block-start: 1px solid var(--wp--preset--color--warm-beige);
	}

	.home-values__item:nth-child(3) {
		border-inline-start: 0;
	}
}

/*
 * Świadczone usługi's own tablet/medium-desktop grid, deliberately on
 * its own breakpoint rather than sharing .home-values' 70rem one above:
 * the brief calls for a clean two-tier split for this section
 * specifically — 3-column grid above this breakpoint, 2-column grid
 * from there down to 37.5rem (600px, see the phone-slider block
 * further down), where it hands off to the horizontal slider.
 *
 * Widened from 64rem (1024px) to 80rem (1280px) per feedback that
 * long single-word titles ("Sporządzanie", "Reprezentacja",
 * "instytucjami") were getting cramped well above the old threshold:
 * this section's own content column sits inside the sidebar layout
 * (.site-shell, ~320-360px taken by the sidebar above 69.9375rem) plus
 * this section's own horizontal padding and each item's own
 * padding-inline — at ~1100-1280px the resulting 3rd column measured
 * only ~180-220px wide, narrower than a single 13-character word at
 * this heading's own font-size even before word-wrapping is
 * considered. 2-column keeps every title comfortably inside a real
 * word's width through that whole range; 1366px+ (roomier again once
 * the middle column isn't fighting two siblings for the same
 * constrained space) stays 3-column, unchanged.
 *
 * One clean pair of thresholds (80rem here, 37.5rem below) keeps every
 * width unambiguously grid or slider, never both fighting for it —
 * same reasoning as the original 64rem/37.5rem pairing this replaces.
 */
@media (max-width: 80rem) {
	.home-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-services__item,
	.home-services__item:nth-child(3n + 1) {
		padding-inline: clamp(1.5rem, 4vw, 2.5rem);
		border-inline-start: 1px solid var(--wp--preset--color--warm-beige);
	}

	.home-services__item:nth-child(2n + 1) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.home-services__item:nth-child(2n),
	.home-services__item:nth-child(3n) {
		padding-inline-end: 0;
	}

	.home-services__item,
	.home-services__item:nth-child(-n + 3) {
		padding-block-start: clamp(1.75rem, 4vw, 2.5rem);
		border-block-start: 1px solid var(--wp--preset--color--warm-beige);
	}

	.home-services__item:nth-child(-n + 2) {
		padding-block-start: 0;
		border-block-start: 0;
	}
}

@media (max-width: 42rem) {
	.home-values {
		padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--lg);
	}

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

	.home-values__item,
	.home-values__item:first-child,
	.home-values__item:last-child,
	.home-values__item:nth-child(odd),
	.home-values__item:nth-child(even),
	.home-values__item:nth-child(n + 3) {
		padding: var(--wp--preset--spacing--xl) 0;
		border-inline-start: 0;
		border-block-start: 0;
	}

	.home-values__item:first-child {
		padding-block-start: 0;
	}

	.home-values__item:last-child {
		padding-block-end: 0;
	}

	.home-values__item + .home-values__item {
		border-block-start: 1px solid var(--wp--preset--color--warm-beige);
	}

	.home-values__icon {
		margin-block-end: var(--wp--preset--spacing--lg);
	}

	.practice-section.wp-block-cover {
		padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--lg);
	}

	.practice-section__title {
		font-size: clamp(3rem, 13vw, 4.5rem);
	}

	.practice-accordion__trigger {
		grid-template-columns: 2rem minmax(0, 1fr) 2.5rem;
		gap: var(--wp--preset--spacing--sm);
		min-block-size: 4.75rem;
	}

	.practice-accordion__title {
		font-size: clamp(1.5rem, 7vw, 2rem);
	}

	.practice-accordion__panel-inner {
		padding-inline: 2.75rem 0;
	}
}

/*
 * Phone-only full-bleed slider for Wartości — placed after both the
 * @media (max-width: 70rem) 2-column and @media (max-width: 42rem)
 * 1-column blocks above so it wins the cascade on every
 * .home-values__item property they also set (same specificity, later
 * in source order); nothing here touches .home-services (which has its
 * own, separate 64rem/37.5rem breakpoints — see further down) or
 * .practice-accordion, which the 42rem block above also contains. Pure CSS
 * scroll-snap for the swipe/snap mechanics — assets/js/home-values-
 * slider.js only drives the prev/next buttons (via scrollIntoView, no
 * hand-rolled scroll math) and keeps the "01 / 04" readout plus arrow
 * disabled-state in sync, via the same IntersectionObserver this
 * already used for the readout alone. .home-values__grid is the same
 * element as the desktop grid, not a new wrapper: display: flex here
 * is what turns it into the scroll container, .home-values__item's
 * own display/position aren't touched by that switch since flex/grid
 * items lay out independently of which the parent is.
 */
@media (max-width: 47.9375rem) {
	/*
	 * The section is a flex column: grid (flex: 1) fills whatever
	 * height min-block-size below guarantees, .home-values__controls
	 * (arrows + "01 / 04") sits under it at its own natural size —
	 * this keeps the nav a stable part of the section's own flow
	 * instead of an overlay that could cover the last bit of content.
	 */
	.home-values {
		display: flex;
		flex-direction: column;
		min-block-size: 52vh; /* fallback for browsers without svh */
		min-block-size: 56svh;
		/* Compressed from the shared clamp(3.5rem, 6vw, 6rem) base value
		   to make room for .home-values__eyebrow above the slider
		   without growing the section's overall height. */
		padding-block-start: 1.75rem;
		padding-inline: 0;
	}

	/* The section itself is edge-to-edge here (padding-inline: 0 above,
	   for the full-bleed slides) — this restores the same inline
	   padding each slide already has, so the label lines up with the
	   slide content it sits above instead of sitting flush left. */
	.home-values__eyebrow {
		padding-inline: var(--wp--preset--spacing--lg);
	}

	.home-values__grid {
		display: flex;
		flex: 1;
		align-items: stretch;
		gap: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		/* Hide the scrollbar visually only — overflow-x: auto above
		   keeps the element genuinely scrollable (mouse wheel, drag,
		   keyboard once focused via tabindex="0" in the markup, and
		   touch swipe), this just removes the browser's own bar chrome. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.home-values__grid::-webkit-scrollbar {
		display: none;
	}

	.home-values__item,
	.home-values__item:first-child,
	.home-values__item:last-child,
	.home-values__item:nth-child(odd),
	.home-values__item:nth-child(even),
	.home-values__item:nth-child(n + 3) {
		flex: 0 0 100%;
		inline-size: 100%;
		scroll-snap-align: start;
		justify-content: center;
		/* Bottom padding deliberately larger than top: justify-content:
		   center below centers the icon/title/description block within
		   this padded content box, and a taller bottom edge pulls that
		   midpoint above the slide's true vertical center — an
		   editorial "slightly above center" instead of a dead-centered
		   modal, without extra markup or margin: auto tricks. */
		padding-block: 1.5rem 3rem;
		padding-inline: var(--wp--preset--spacing--lg);
		border: 0;
		background: transparent;
	}

	/*
	 * No explicit block-size here on purpose: a flex item's own
	 * non-auto cross-size (e.g. block-size: 100%) opts it OUT of
	 * align-items: stretch per spec, and that 100% then fails to
	 * resolve cleanly against .home-values__grid's flex-grown (not
	 * intrinsic) height anyway — collapsing the slide back down to
	 * its content height instead of the intended full-slider height.
	 * Leaving block-size: auto lets .home-values__grid's
	 * align-items: stretch (above) size every slide to match its own
	 * height natively, exactly as tall as the track.
	 */
	.home-values__number {
		display: block;
		margin: 0 0 1rem;
		color: var(--wp--preset--color--medium-taupe);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.1em;
	}

	.home-values__icon {
		margin-block-end: 1.5rem;
	}

	.home-values__controls {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		padding-block: 1.25rem 1.75rem;
		padding-inline: var(--wp--preset--spacing--lg);
	}

	.home-values__indicator {
		margin: 0;
		color: var(--wp--preset--color--medium-taupe);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.home-values__indicator-current {
		color: var(--wp--preset--color--espresso);
	}

	/* Visually just a stroke/chevron on a large-enough hit area — no
	   square button background, per the "minimalistyczne, bez ciężkich
	   buttonów" direction. */
	.home-values__arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--espresso);
		cursor: pointer;
	}

	.home-values__arrow svg {
		display: block;
		inline-size: 1.125rem;
		block-size: 1.125rem;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
	}

	/* Disabled at the first/last slide instead of looping — dimmed
	   rather than hidden, so the layout never shifts. */
	.home-values__arrow:disabled {
		color: var(--wp--preset--color--main-taupe);
		opacity: 0.45;
		cursor: default;
	}
}

/*
 * Phone-only full-bleed slider for Świadczone usługi — same shape as
 * the Wartości slider just above (full-bleed 100%-width slides, zero
 * gap, prev/next + "01 / NN" nav, shared assets/js/home-sliders.js),
 * adapted for this section's own content: the eyebrow/heading/intro
 * stays in normal flow above the slider (not a slide itself), the
 * shared "Chcesz wiedzieć..." CTA is its own block after the slider
 * and its nav (never one of the slides — see .home-services__cta
 * further down), and the slide count is however many "service" posts
 * are actually published rather than a fixed four.
 *
 * 37.5rem (600px), not this section's old 47.9375rem (768px): below
 * 1024px this section already switches to its own 2-column grid (see
 * @media (max-width: 64rem) above, and .home-services__grid's plain,
 * unconditional 3-column rule further up for above that) — 37.5rem is
 * where that 2-column grid itself gets too narrow to stay legible and
 * this section hands off to the horizontal slider instead. Deliberately
 * its OWN threshold rather than reusing the shared 47.9375rem "mobile"
 * cutoff every other section on this page still uses (sidebar/mobile
 * header included) — sharing 47.9375rem with the old 42rem (1-column
 * grid, now removed for this section) and 70rem (2-column grid, now
 * 64rem) breakpoints was exactly what put real tablet widths
 * (600-768px) into a wrong, overlapping mix of "1-column grid" and
 * "phone slider" rules fighting each other, which is what let the CTA
 * and cards overlap. One clean pair of thresholds for this section
 * (64rem, 37.5rem) removes that ambiguity: every width is unambiguously
 * grid or slider, never both.
 */
@media (max-width: 37.5rem) {
	.home-services {
		display: flex;
		flex-direction: column;
		/* Compressed from the shared clamp(4rem, 6.5vw, 6.5rem) base
		   value — the intro keeps its own padding-inline below, this
		   just trims the section's top offset so the slider isn't
		   pushed unnecessarily far down. */
		padding-block-start: 1.75rem;
		padding-inline: 0;
	}

	/* The section itself is edge-to-edge here (padding-inline: 0
	   above, for the full-bleed slides) — this restores normal side
	   margins for the intro, which stays in the document flow above
	   the slider rather than becoming a slide itself (see point 1: it
	   is never pulled into .home-services__grid). */
	.home-services__intro {
		margin: 0 0 clamp(1.75rem, 6vw, 2.25rem);
		padding-inline: var(--wp--preset--spacing--lg);
	}

	/* The desktop min(62.5rem, 78%) cap exists to keep a comfortable
	   reading measure on a WIDE intro column — on a mobile-width intro
	   that same 78% instead squeezes this down to a much narrower
	   column than the section itself allows, wrapping it into far more
	   lines than necessary and directly fighting point 3 ("sekcja nie
	   może robić się przesadnie wysoka"). Full width here just means
	   "as wide as .home-services__intro already is". */
	.home-services__description {
		max-inline-size: none;
	}

	/*
	 * Height is content-driven now, not a fixed viewport fraction: a
	 * flex row with align-items: stretch always sizes itself to its
	 * TALLEST child's intrinsic height (regardless of which slide is
	 * actually scrolled into view), so any fixed or auto value here
	 * either wastes space under short slides or clips long ones — no
	 * single CSS number is right for every slide. assets/js/home-
	 * sliders.js (initSlider('home-services', { autoHeight: true }))
	 * instead measures the ACTIVE slide's own scrollHeight and sets it
	 * as this element's inline height on load, on every slide change,
	 * and on resize — so the track always matches just the one visible
	 * slide, short or long, never the tallest neighbour. Without JS
	 * this simply falls back to plain flex auto-sizing (tallest-child
	 * height) — still content-driven, just not per-slide.
	 */
	.home-services__grid {
		display: flex;
		flex: 0 0 auto;
		align-items: stretch;
		gap: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		/* Hide the scrollbar visually only — overflow-x: auto above
		   keeps the element genuinely scrollable (mouse wheel, drag,
		   keyboard once focused via tabindex="0" in the markup, and
		   touch swipe), this just removes the browser's own bar chrome. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.home-services__grid::-webkit-scrollbar {
		display: none;
	}

	.home-services__item,
	.home-services__item:nth-child(3n + 1),
	.home-services__item:nth-child(3n),
	.home-services__item:nth-child(2n + 1),
	.home-services__item:nth-child(2n),
	.home-services__item:nth-child(-n + 2),
	.home-services__item:nth-child(-n + 3),
	.home-services__item:first-child {
		display: flex;
		flex-direction: column;
		flex: 0 0 100%;
		inline-size: 100%;
		block-size: auto;
		overflow-y: auto;
		scroll-snap-align: start;
		padding-inline: var(--wp--preset--spacing--lg);
		padding-block: 1.75rem 2.5rem;
		border: 0;
	}

	/*
	 * block-size: auto (above) plus align-items: stretch is exactly
	 * what makes every OTHER, currently off-screen slide match the
	 * active one's JS-set track height rather than keep its own —
	 * harmless since they're not visible, and it means a slide taller
	 * than the active one is stretch-clipped only for the brief moment
	 * between a swipe starting and initSlider's IntersectionObserver
	 * firing setActive() (and applyHeight() with it) for the new slide.
	 * overflow-y: auto (above) is the safety net for exactly that
	 * moment — never a permanent per-slide scrollbar in normal use,
	 * since height then always matches that slide's own content.
	 */

	.home-services__controls {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		padding-block: var(--wp--preset--spacing--lg) 1.75rem;
		padding-inline: var(--wp--preset--spacing--lg);
	}

	/*
	 * Same "section is edge-to-edge, this child restores its own inset"
	 * pattern as .home-services__intro/__item/__controls above — not a
	 * negative margin. The section itself already has padding-inline: 0
	 * here (see .home-services at the top of this block), so this is
	 * the ONLY inset the CTA needs; .single-practice__cta's own padding
	 * (set further up this file) then adds the inner text/button
	 * breathing room on top of it.
	 */
	.home-services__cta {
		padding-inline: var(--wp--preset--spacing--lg);
	}

	.home-services__indicator {
		margin: 0;
		color: var(--wp--preset--color--medium-taupe);
		font-family: var(--wp--preset--font-family--ui);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.home-services__indicator-current {
		color: var(--wp--preset--color--espresso);
	}

	/* Visually just a stroke/chevron on a large-enough hit area — no
	   square button background, matching .home-values__arrow. */
	.home-services__arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--espresso);
		cursor: pointer;
	}

	.home-services__arrow svg {
		display: block;
		inline-size: 1.125rem;
		block-size: 1.125rem;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
	}

	/* Disabled at the first/last slide instead of looping — dimmed
	   rather than hidden, so the layout never shifts. */
	.home-services__arrow:disabled {
		color: var(--wp--preset--color--main-taupe);
		opacity: 0.45;
		cursor: default;
	}
}

/*
 * Collapses to a single column here rather than at a narrower "tablet"
 * breakpoint — two columns of editorial entries need more breathing
 * room per column than e.g. .home-services__grid's shorter cards do,
 * so this stays comfortable down to real tablet widths and only
 * stacks once a second column would feel cramped.
 */
@media (max-width: 55rem) {
	.article-archive__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-archive__items > li,
	.article-archive__items > li:nth-child(odd),
	.article-archive__items > li:nth-child(even) {
		padding-inline: 0;
		border-inline-start: 0;
	}

	.article-archive__items > li,
	.article-archive__items > li:nth-child(-n + 2) {
		padding-block: clamp(2rem, 5vw, 2.5rem);
		border-block-start: 1px solid rgba(197, 171, 159, 0.35);
	}

	.article-archive__items > li:first-child {
		padding-block-start: 0;
		border-block-start: 0;
	}
}

@media (max-width: 46rem) {
	.home-about {
		padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--lg);
	}

	/*
	 * Single column: eyebrow/H2/text stay first (unchanged DOM order),
	 * portrait stacks below. gap is tightened to the brief's own
	 * 32-40px for this one row-to-row gap specifically — the
	 * --spacing--2-xl token everything else here still uses would read
	 * as too loose between text and portrait once stacked.
	 */
	.home-about > .home-about__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 8vw, 2.5rem);
	}

	.home-about__content-inner {
		max-inline-size: 40rem;
	}

	.home-about__title {
		font-size: clamp(3.25rem, 13vw, 5rem);
	}

	.home-about__media {
		inline-size: 100%;
	}

	/* Full width on mobile, not the old 92%/26rem cap — aspect-ratio
	   (set unconditionally above) keeps it a portrait crop instead of
	   growing tall and empty. */
	.home-about__image {
		inline-size: 100%;
		max-inline-size: none;
	}
}

@media (max-width: 30rem) {
	.article-archive__item-link {
		padding-block: 0.5rem;
		margin-inline-start: -0.375rem;
	}

	.site-mobile-header__toggle {
		inset-block-start: 1rem;
		inset-inline-end: 1rem;
	}

	body.admin-bar .site-mobile-header__toggle {
		inset-block-start: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
	}

	.site-main,
	.site-footer__inner {
		padding-inline: var(--wp--preset--spacing--md);
	}

	.site-main--front-page {
		padding: 0;
	}

	.home-hero {
		padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
	}

	/*
	 * padding-block-end only (not the padding-block shorthand) — this
	 * used to reset padding-block-start too, silently overriding the
	 * larger mobile/tablet logo-clearance value set above (same
	 * specificity, later in source order, so it always won below
	 * 30rem) — the actual reason the hero content wasn't visibly
	 * moving down at 390/430px despite that value being increased.
	 */
	.home-hero__content {
		padding-block-end: var(--wp--preset--spacing--lg);
	}

	.home-hero__eyebrow {
		margin-block-end: var(--wp--preset--spacing--md);
	}

	.home-hero__title {
		font-size: clamp(3.25rem, 17vw, 5rem);
	}

	.home-hero__description,
	.home-hero__actions {
		margin-block-start: var(--wp--preset--spacing--lg);
	}

	.home-about {
		padding-inline: var(--wp--preset--spacing--md);
	}

	.home-about__content-inner {
		padding-inline-start: var(--wp--preset--spacing--lg);
	}

	.practice-section.wp-block-cover {
		padding-inline: var(--wp--preset--spacing--md);
	}

}

/*
 * Low-height phones (iPhone SE 375x667, and 360x740-class devices) —
 * gated on height, not just width, so this never touches the standard
 * phones (390x844, 430x932) this was checked against, which are both
 * taller than the 47.5rem/760px threshold and fall through to the
 * normal mobile rules untouched. 760px (not the previous 700px) is
 * what actually catches 740px-tall viewports — a 740px-tall phone
 * used to fall through to the full-size mobile rules above (tuned for
 * 844px+ screens), which is exactly why CTA was clipping there: this
 * bucket's own compact spacing never applied to it. Placed after the
 * @media (max-width: 30rem) block above (rather than up with the rest
 * of the mobile hero rules) so it wins the cascade on the properties
 * they share — same specificity, later in source order. Logo is
 * bigger and sits lower than the standard-phone rules above it, and
 * the content block is pushed down to match — deliberately tighter
 * internal spacing (eyebrow/H1/description/CTA gaps, not the type
 * sizes themselves) is what keeps that combination fitting in one
 * 667px-tall first viewport instead of shrinking the logo/text to
 * make room.
 */
@media (max-width: 47.9375rem) and (max-height: 47.5rem) {
	.home-hero {
		padding-block: var(--wp--preset--spacing--md);
	}

	.home-hero__mobile-brand {
		inset-block-start: 2.5rem;
		inline-size: clamp(9.5rem, 40vw, 10.625rem);
	}

	.home-hero__content {
		padding-block-start: 17rem;
		padding-block-end: var(--wp--preset--spacing--md);
	}

	.home-hero__eyebrow {
		margin-block-end: 0.625rem;
	}

	.home-hero__title {
		font-size: clamp(2.75rem, 13vw, 3.5rem);
	}

	.home-hero__description,
	.home-hero__actions {
		margin-block-start: 0.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.practice-section.has-parallax {
		background-attachment: scroll;
	}

	.practice-section .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll;
		inset: 0 0 auto 0;
		block-size: 100vh;
		block-size: 100svh;
	}

	.practice-accordion__panel:not([hidden]) {
		animation: none;
	}

	.home-hero__mobile-brand,
	.home-hero__eyebrow,
	.home-hero__title,
	.home-hero__description,
	.home-hero__actions {
		animation: none;
		opacity: 1;
		filter: none;
		transform: none;
	}

	/*
	 * CSS-only guarantee that reduced-motion visitors never see the video
	 * even for the brief moment before assets/js/hero-video.js finishes
	 * evaluating matchMedia() itself: the still frame shows instead,
	 * same as the JS-driven "is-video-fallback" class elsewhere in this
	 * file, not just the plain wrapper background.
	 */
	.home-hero__video video {
		opacity: 0;
		visibility: hidden;
	}

	.home-hero__fallback {
		opacity: 1;
		visibility: visible;
	}
}

/* ==========================================================================
   404 (templates/404.html, inc/error-404.php)
   ========================================================================== */

/*
 * Vertically centres the hero within .site-main's own default padding
 * (unlike the "O mnie" page's sections, this one doesn't need its own
 * full-bleed bands — a single centred block is enough) — capped, not
 * 100dvh, so a short viewport never gets stretched into an artificially
 * tall empty page.
 */
.error-404 {
	display: flex;
	align-items: center;
	min-block-size: min(60vh, 42rem);
	padding-block: clamp(2rem, 5vw, 3rem);
}

.error-404__hero {
	position: relative;
	overflow: clip;
	max-inline-size: 38rem;
}

/* Large decorative "404" watermark — pure CSS generated content, so it
   never duplicates into the accessibility tree or gets tabbed to; the
   visible eyebrow below already announces "404" as real text. Painted
   before (i.e. behind) the rest of .error-404__hero's children, so no
   z-index is needed to keep it from covering the actual copy. */
.error-404__hero::before {
	content: "404";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -0.06em;
	transform: translateY(-50%);
	color: var(--wp--preset--color--warm-beige);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(9rem, 6rem + 16vw, 20rem);
	font-weight: 500;
	line-height: 1;
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

.error-404__eyebrow {
	position: relative;
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.error-404__title {
	position: relative;
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 2.3rem + 2.2vw, 4rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.error-404__text {
	position: relative;
	max-inline-size: 32rem;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.7;
}

.error-404__actions {
	position: relative;
	margin: clamp(2rem, 3.5vw, 2.5rem) 0 0;
}

.error-404__secondary {
	position: relative;
	margin: clamp(1rem, 2vw, 1.25rem) 0 0;
}

.error-404__secondary a {
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	text-decoration-color: rgba(74, 52, 45, 0.35);
	text-underline-offset: 0.2em;
}

.error-404__secondary a:hover,
.error-404__secondary a:focus-visible {
	color: var(--wp--preset--color--espresso);
	text-decoration-color: currentColor;
}

.error-404__links {
	position: relative;
	margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
	padding-block-start: clamp(1.75rem, 3vw, 2.25rem);
	border-block-start: 1px solid var(--wp--preset--color--warm-beige);
}

.error-404__links-label {
	margin: 0 0 0.875rem;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.error-404__links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.error-404__links-list a {
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	text-decoration-color: rgba(74, 52, 45, 0.3);
	text-underline-offset: 0.2em;
}

.error-404__links-list a:hover,
.error-404__links-list a:focus-visible {
	color: var(--wp--preset--color--espresso);
	text-decoration-color: currentColor;
}

@media (max-width: 47.9375rem) {
	.error-404 {
		min-block-size: auto;
		padding-block: clamp(2.5rem, 8vw, 3.5rem);
	}

	.error-404__hero::before {
		content: none;
	}

	.error-404__links-list {
		flex-direction: column;
		gap: 0.75rem;
	}
}

/* ==========================================================================
   Globalny preloader (inc/preloader.php, assets/js/preloader.js)
   ========================================================================== */

/*
 * position: fixed + inset: 0 alone already fills the exact viewport on
 * every browser, mobile Safari/Chrome's own dynamic toolbars included —
 * the explicit min-block-size/block-size lines are the brief's own
 * belt-and-braces request on top of that, plain 100vh first so
 * anything that doesn't understand svh/dvh still gets a full-height
 * value, each following line only taking effect where its unit is
 * actually supported. z-index is one order of magnitude above
 * #wpadminbar's own 99999 (WordPress core), and this is never offset
 * for body.admin-bar the way e.g. .site-mobile-header__toggle is
 * elsewhere in this file — it covers the admin bar rather than
 * starting below it, per the brief.
 */
.site-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 100vh;
	min-block-size: 100svh;
	block-size: 100vh;
	block-size: 100dvh;
	background: var(--wp--preset--color--medium-taupe);
	opacity: 1;
	transition: opacity 450ms ease;
}

.site-preloader[hidden] {
	display: none;
}

.site-preloader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.site-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
 * The theme's own existing logo asset (see
 * kancelaria_opora_get_preloader_logo_id(), inc/preloader.php) — a
 * solid black-on-transparent PNG, confirmed pixel-for-pixel before
 * relying on this filter: brightness(0) flattens it to solid black
 * first (in case of any anti-aliased grey edge pixels), invert(1) then
 * flips that black to solid white while leaving full transparency
 * exactly as it was — exact for a flat single-colour mark like this
 * one, not the "weak" approximation the brief cautions against for
 * filters in general.
 */
.site-preloader__logo {
	display: block;
	inline-size: min(320px, 70vw);
	block-size: auto;
	filter: brightness(0) invert(1);
	opacity: 0;
	transform: scale(0.96);
	animation: site-preloader-logo-in 550ms ease-out forwards;
}

@keyframes site-preloader-logo-in {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.site-preloader__spinner {
	display: block;
	margin-block-start: 1.75rem;
	inline-size: 2rem;
	block-size: 2rem;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	border-top-color: rgba(255, 255, 255, 0.75);
	animation: site-preloader-spin 0.9s linear infinite;
}

@keyframes site-preloader-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Locked only while the preloader is actually up — removed the moment
   assets/js/preloader.js adds "is-hidden" (see its own toggling of this
   same class on <html>), so normal scrolling comes back immediately,
   not after the fade-out transition finishes. */
html.has-preloader,
html.has-preloader body {
	overflow: hidden;
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
	.site-preloader__logo {
		inline-size: min(260px, 60vw);
	}
}

@media (max-width: 47.9375rem) {
	.site-preloader__logo {
		inline-size: min(220px, 60vw);
	}

	.site-preloader__spinner {
		margin-block-start: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-preloader__logo {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.site-preloader__spinner {
		animation: none;
	}
}

/* ==========================================================================
   /wspolpraca/ — "Współpraca z Kancelarią" (inc/cooperation.php)

   Every rule below is scoped to this one page (.cooperation-page on
   .site-main, and the .cooperation-*/.cooperation__* classes
   inc/cooperation.php renders) and touches nothing shared: the FAQ reuses
   .practice-accordion's own markup/JS (inc/practice-accordion.php,
   assets/js/practice-accordion.js) exactly as .single-practice__faq-accordion
   does, just with its own lighter/tighter override block instead of
   restyling that shared component in place; the final CTA reuses
   .single-practice__cta/.single-practice__final-cta (inc/cta.php) verbatim,
   unmodified, no new CTA styles at all.
   ========================================================================== */

/* Slightly less block-level padding than the site-wide .site-main default
   (assets/css/site.css, ~line 424) — this page's own hero already carries
   its own rhythm, and the brief for this rebuild explicitly asks for a
   compact page with "no large empty spaces", not the generous ~48-112px
   band every other page opens with. Selector combines both classes
   (.site-main.cooperation-page) purely so the override reads as
   unambiguously scoped to this one page at a glance — same specificity as
   .cooperation-page alone would have. */
.site-main.cooperation-page {
	padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

.cooperation__wrapper {
	inline-size: 100%;
	max-inline-size: 90rem;
	margin-inline: auto;
}

/* ---------- Hero (kancelaria_opora_render_cooperation_hero()) ---------- */

.cooperation-hero {
	margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

.cooperation-hero__columns {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(clamp(12.5rem, 22vw, 20rem), 0.95fr);
	align-items: center;
	gap: clamp(2.5rem, 4vw, 4rem);
}

.cooperation-hero--no-image .cooperation-hero__columns {
	grid-template-columns: minmax(0, 1fr);
}

.cooperation-hero--no-image .cooperation-hero__content {
	max-inline-size: 42rem;
}

.cooperation-hero__content,
.cooperation-hero__media {
	min-inline-size: 0;
}

/* Same eyebrow language as .single-practice__label (assets/css/site.css,
   ~line 3513) — small caps, Medium Taupe, a short underline mark — reused
   under its own page-scoped name rather than applying that shared class
   here directly, since practice_area's hero has its own unrelated layout
   context this page never touches. */
.cooperation-hero__eyebrow {
	position: relative;
	margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
	padding-block-end: clamp(0.75rem, 1.5vw, 1rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cooperation-hero__eyebrow::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 2.5rem;
	block-size: 1px;
	background: var(--wp--preset--color--main-taupe);
}

.cooperation-hero__title {
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.65rem + 1.6vw, 3rem);
	font-weight: 500;
	line-height: 1.08;
}

.cooperation-hero__lead {
	max-inline-size: 34rem;
	margin: clamp(1.25rem, 2vw, 1.5rem) 0 0;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.65;
}

/* Portrait mount: a 4:5 frame, a thin Main Taupe rule on the photo itself,
   and a Warm Beige panel offset up-and-right behind it (the ::before) —
   "cienka, lekko przesunięta ramka" as two thin layers, never a heavy
   box-shadow. */
.cooperation-hero__image {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
}

.cooperation-hero__image::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: -0.75rem;
	inset-inline-end: -0.75rem;
	inline-size: 100%;
	block-size: 100%;
	background: var(--wp--preset--color--warm-beige);
	border-radius: 0.5rem;
}

.cooperation-hero__image-el {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 1px solid var(--wp--preset--color--main-taupe);
	border-radius: 0.5rem;
	object-fit: cover;
	object-position: center;
	background: var(--wp--preset--color--light-cream);
}

@media (max-width: 61.1875rem) {
	.cooperation-hero__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 6vw, 2.5rem);
	}

	.cooperation-hero__media {
		max-inline-size: 26rem;
	}
}

@media (max-width: 47.9375rem) {
	/* "zdjęcie width: 100%" — removes the tablet-tier cap
	   (.cooperation-hero__media, the max-width: 61.1875rem block above)
	   so the photo reads full-width on true mobile, not just narrower
	   than its own viewport by coincidence. */
	.cooperation-hero__media {
		max-inline-size: none;
	}
}

/* ---------- Shared small-caps section label (steps + FAQ) ---------- */

.cooperation-section-label {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- Proces współpracy + FAQ two-column block
   (kancelaria_opora_render_cooperation_process_faq_section()) ---------- */

/* ~58/42 (1.38fr / 1fr) — align-items: start is the entire mechanism
   behind "obie kolumny zaczynają się na tej samej wysokości": both
   .cooperation-steps and .cooperation-faq are plain grid items with no
   top offset of their own, so their first children (both
   .cooperation-section-label) land on the same row-start line without
   any fixed heights or manual alignment. */
.cooperation-process-faq {
	display: grid;
	grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.75rem, 3vw, 2.25rem);
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 63.9375rem) {
	.cooperation-process-faq {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2.5rem, 6vw, 3.5rem);
	}
}

/* ---------- Proces współpracy — timeline
   (kancelaria_opora_render_cooperation_steps_section()) ---------- */

/* A very light Ivory wash and a soft radius — never a bordered/shadowed
   card — is the only "background" this gets, per "bardzo subtelne jasne
   tło, nie ciężkie karty". */
.cooperation-steps__panel {
	padding: clamp(0.375rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
	background: rgba(246, 241, 234, 0.5);
	border-radius: 0.75rem;
}

.cooperation-steps__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The connecting timeline rule — a decorative accent behind the row
   icons, not a layout mechanism, same category as .single-practice__label's
   own ::after underline mark further up this file. Icons paint over it
   via their own z-index: 1, see .cooperation-steps__icon below. */
.cooperation-steps__list::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 0.375rem;
	inset-inline-start: 1rem;
	inline-size: 1px;
	background: var(--wp--preset--color--warm-beige);
}

.cooperation-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 1rem;
	row-gap: 0.375rem;
	align-items: start;
	padding-block: clamp(1rem, 2vw, 1.375rem);
	border-block-end: 1px solid var(--wp--preset--color--warm-beige);
	transition: background-color 200ms ease;
}

.cooperation-steps__item:last-child {
	border-block-end: 0;
}

.cooperation-steps__item:hover {
	background: rgba(222, 208, 199, 0.22);
}

.cooperation-steps__number {
	grid-column: 1;
	grid-row: 1;
	display: block;
	color: var(--wp--preset--color--main-taupe);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
}

.cooperation-steps__icon {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--warm-beige);
	color: var(--wp--preset--color--main-taupe);
}

.cooperation-steps__icon svg {
	inline-size: 1rem;
	block-size: 1rem;
}

.cooperation-steps__body {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-inline-size: 0;
}

.cooperation-steps__title {
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem);
	font-weight: 500;
	line-height: 1.3;
}

.cooperation-steps__desc {
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 0.875rem;
	line-height: 1.55;
}

/* Etap 3's cooperation_step_3_list, one item per line — same short-dash
   marker language as .single-practice__consultation-list further up
   this file (a drawn line via ::before, never the browser's default
   disc bullet), just scaled down to this row's own smaller 0.875rem
   type. margin-block-start is on top of .cooperation-steps__body's own
   0.25rem flex gap — a small, not dramatic, step up from the intro
   line above it, per the brief's own "niewielki margin-top". */
.cooperation-steps__list-items {
	display: grid;
	gap: 0.5rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

.cooperation-steps__list-items li {
	position: relative;
	padding-inline-start: 1.125rem;
	color: var(--wp--preset--color--dark-chocolate);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cooperation-steps__list-items li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.6em;
	inline-size: 0.625rem;
	block-size: 1px;
	background: var(--wp--preset--color--main-taupe);
}

/* Etap 3's cooperation_step_3_footer (closing note) — same quiet,
   italic, Medium Taupe treatment as .single-practice__consultation-footer,
   scaled down to match. margin-block-start (again on top of the body's
   own 0.25rem gap) is what actually separates it from the list above —
   the brief's "margin-bottom przed notatką" phrased the other way
   round, same visual result. */
.cooperation-steps__note {
	margin-block-start: 0.5rem;
	color: var(--wp--preset--color--medium-taupe);
	font-family: var(--wp--preset--font-family--reading);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.5;
}

@media (max-width: 47.9375rem) {
	.cooperation-steps__item {
		grid-template-columns: 1.75rem minmax(0, 1fr);
	}
}

/* ---------- FAQ — dark "card" variant, reusing .practice-accordion's own
   markup/JS verbatim (kancelaria_opora_render_cooperation_faq_section()).
   Was a light/Ivory hairline-divided list (matching
   .single-practice__faq-accordion); per feedback that read too close to
   "Proces współpracy" on its left and needed to stand out more, each
   .practice-accordion__item is now its own dark, rounded card instead —
   Espresso closed, Dark Chocolate (one step lighter/warmer) once open,
   both real palette tokens already used everywhere else on this page
   rather than new one-off colours. Light Cream/Warm Beige text (the same
   pair the homepage's own dark accordion — .practice-accordion's base
   rules further up this file — already uses on a dark background) keep
   this in the same design language instead of inventing a second dark
   FAQ treatment. No second FAQ system, only a second override block for
   the one shared component. ---------- */

/* :has() unifies the open/closed background on the single .item element
   (trigger + panel together) rather than colouring trigger and panel
   separately and risking a seam between them — "aktywne pytanie +
   odpowiedź jak jedna spójna karta". margin-block-end (not the old
   shared border-block-end hairline) is what actually separates one card
   from the next now. */
.cooperation-faq-accordion .practice-accordion__item {
	margin-block-end: clamp(0.75rem, 1.5vw, 1rem);
	padding-inline: clamp(1.25rem, 2.5vw, 1.5rem);
	background: var(--wp--preset--color--espresso);
	border: 1px solid rgba(197, 171, 159, 0.22);
	border-radius: 0.75rem;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.cooperation-faq-accordion .practice-accordion__item:last-child {
	margin-block-end: 0;
}

.cooperation-faq-accordion .practice-accordion__item:has(.practice-accordion__trigger[aria-expanded="true"]) {
	background: var(--wp--preset--color--dark-chocolate);
	border-color: rgba(222, 208, 199, 0.3);
}

.cooperation-faq-accordion .practice-accordion__trigger {
	grid-template-columns: minmax(0, 1fr) 1.75rem;
	gap: var(--wp--preset--spacing--sm);
	min-block-size: auto;
	padding: clamp(1rem, 2vw, 1.25rem) 0;
	color: var(--wp--preset--color--light-cream);
}

/* Base .practice-accordion__trigger:focus-visible (assets/css/site.css,
   ~line 1575) already sets a Light Cream outline for exactly this
   dark-background case — correct again now that these cards are dark,
   so no override needed here any more (the light-bg-only override this
   section briefly had is gone). */

.cooperation-faq-accordion .practice-accordion__title {
	color: var(--wp--preset--color--light-cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem);
	font-weight: 500;
	line-height: 1.3;
}

.cooperation-faq-accordion .practice-accordion__trigger:hover .practice-accordion__title,
.cooperation-faq-accordion .practice-accordion__trigger:focus-visible .practice-accordion__title,
.cooperation-faq-accordion .practice-accordion__trigger[aria-expanded="true"] .practice-accordion__title {
	color: var(--wp--preset--color--warm-beige);
}

.cooperation-faq-accordion .practice-accordion__symbol {
	inline-size: 1.75rem;
	block-size: 1.75rem;
	font-size: 1.125rem;
	color: var(--wp--preset--color--light-cream);
}

.cooperation-faq-accordion .practice-accordion__trigger:hover .practice-accordion__symbol,
.cooperation-faq-accordion .practice-accordion__trigger[aria-expanded="true"] .practice-accordion__symbol {
	color: var(--wp--preset--color--warm-beige);
}

/* Horizontal padding now lives on .practice-accordion__item above (one
   shared gutter for trigger + panel, so both edges line up on the
   card), so panel-inner only needs its own bottom padding — the card's
   closing edge — plus the answer's own colour/size: Warm Beige, a
   deliberately calmer weight than the question's Light Cream, same
   "pytanie mocny kontrast, odpowiedź lżejsza" pairing the homepage's own
   dark accordion already uses. */
.cooperation-faq-accordion .practice-accordion__panel-inner {
	max-inline-size: none;
	padding: 0 0 clamp(1rem, 2vw, 1.375rem);
	color: var(--wp--preset--color--warm-beige);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.cooperation-faq-accordion .practice-accordion__panel-inner p {
	margin: 0;
}

.cooperation-faq-accordion .practice-accordion__panel-inner p + p {
	margin-block-start: 1em;
}

/* ==========================================================================
   Large-desktop pass (≥120rem / 1920px)
   ==========================================================================

   Every clamp() elsewhere in this file has its own fixed upper bound,
   chosen with ~1440-1920px screens in mind — past that width they simply
   stop growing. This block gives the sidebar, hero and every homepage
   section a second, more assertive ceiling for 2200-2560px-class screens:
   content max-widths, type scale, spacing AND image sizes all step up
   together (not a token +1-2px bump), so the section grows into the
   extra space instead of floating in it. The sidebar deliberately grows
   much more slowly than the content column (see "Sidebar" below), so
   the main content stays the visually dominant element throughout.

   Self-contained on purpose: every rule below only fires above 120rem, and
   only overrides properties already set elsewhere in this file (never new
   layout/structure) — deleting this block wholesale reverts the site to
   its pre-existing 1440-1920px appearance with no other cleanup needed.
   Standard desktop (<120rem) behaviour above this block is untouched.
*/
@media (min-width: 120rem) {

	/* ---- Global body copy ------------------------------------------- */

	body {
		font-size: clamp(1.125rem, 0.75rem + 0.3125vw, 1.25rem);
	}

	/* Shared "eyebrow" small-caps label, reused verbatim across every
	   homepage section (Wartości, O kancelarii, Zakres wsparcia, Obszary
	   praktyki) — one rule keeps them all in step. */
	.home-values__eyebrow,
	.home-about__eyebrow,
	.home-services__eyebrow,
	.practice-section__eyebrow,
	.cooperation-hero__eyebrow,
	.cooperation-section-label {
		font-size: clamp(0.8125rem, 0.55rem + 0.21875vw, 0.9rem);
	}

	/* ---- Sidebar --------------------------------------------------------
	   Deliberately conservative: 360px → 400px (+11%) here, against a
	   main content column that grows roughly three times as fast (see
	   every section below) — the sidebar's own SHARE of the total
	   viewport width actually shrinks with screen size (18.75% at 1920px
	   → 15.6% at 2560px), keeping content the dominant element instead
	   of letting the sidebar keep pace with it. */

	.site-shell {
		grid-template-columns: minmax(0, 1fr) clamp(22.5rem, 15rem + 6.25vw, 25rem);
	}

	.site-sidebar__inner {
		padding-inline: clamp(2.75rem, 0.125rem + 2.1875vw, 3.625rem);
	}

	.site-brand__logo {
		max-inline-size: clamp(13.75rem, 2.5rem + 9.375vw, 17.5rem);
	}

	.sidebar-nav-list a {
		font-size: clamp(1.0625rem, 0.5rem + 0.46875vw, 1.25rem);
	}

	.sidebar-contact {
		inline-size: min(100%, 17rem);
	}

	.sidebar-contact__label {
		font-size: clamp(0.6875rem, 0.40625rem + 0.234375vw, 0.78125rem);
	}

	.sidebar-contact__value {
		font-size: clamp(0.9rem, 0.4125rem + 0.40625vw, 1.0625rem);
	}

	.site-sidebar .sidebar-contact__address {
		font-size: clamp(0.875rem, 0.3125rem + 0.46875vw, 1.0625rem);
	}

	.sidebar-contact__note {
		font-size: clamp(0.75rem, 0.46875rem + 0.234375vw, 0.84375rem);
	}

	.sidebar-contact__social-link {
		inline-size: clamp(2.25rem, 0.75rem + 1.25vw, 2.75rem);
		block-size: clamp(2.25rem, 0.75rem + 1.25vw, 2.75rem);
	}

	.sidebar-contact__social-link svg {
		inline-size: clamp(1.25rem, 0.5rem + 0.625vw, 1.5rem);
		block-size: clamp(1.25rem, 0.5rem + 0.625vw, 1.5rem);
	}

	/* ---- Hero ----------------------------------------------------------
	   min-block-size stays 100svh — the hero already fills the viewport,
	   which is naturally taller in real pixels at 2560px-class screens;
	   the video mechanism (inc/hero.php, hero-video.js) is untouched. */

	.home-hero {
		padding: clamp(4.5rem, -0.75rem + 4.375vw, 6.25rem);
	}

	.home-hero__content {
		inline-size: min(100%, 56rem);
	}

	.home-hero__eyebrow {
		margin-block-end: clamp(1.75rem, 0.25rem + 1.25vw, 2.5rem);
		font-size: clamp(0.875rem, 0.3125rem + 0.46875vw, 1.0625rem);
	}

	.home-hero__title {
		font-size: clamp(7rem, 1rem + 5vw, 9rem);
	}

	.home-hero__description {
		max-inline-size: 46ch;
		margin-block-start: clamp(2.5rem, 0.25rem + 1.875vw, 3.25rem);
		font-size: clamp(1.1875rem, 0.4375rem + 0.625vw, 1.4375rem);
	}

	.home-hero__actions {
		margin-block-start: clamp(2.5rem, 0.25rem + 1.875vw, 3.25rem);
	}

	.home-hero__button .wp-block-button__link {
		padding: 1.25rem 2rem;
		font-size: 1.125rem;
	}

	/* ---- Moje wartości -------------------------------------------------- */

	.home-values {
		padding-block: clamp(6rem, 5vw, 8rem);
	}

	.home-values__item {
		padding-inline: clamp(2.5rem, -0.5rem + 2.5vw, 3.5rem);
	}

	.home-values__icon {
		inline-size: 3.625rem;
		block-size: 3.625rem;
	}

	.home-values__title {
		font-size: clamp(1.875rem, 0.375rem + 1.25vw, 2.375rem);
	}

	.home-values__description {
		font-size: clamp(0.975rem, 0.525rem + 0.375vw, 1.125rem);
	}

	.home-values__link,
	.home-articles__item-link {
		font-size: 0.875rem;
	}

	/* ---- Kilka słów o mnie -----------------------------------------------
	   The most-requested fix in this pass: content-inner and the portrait
	   both grow enough to actually fill their grid columns (0.45fr/0.55fr,
	   unchanged) at 2560px, instead of staying pinned to their 1920px
	   pixel caps while the gap between them silently absorbs the extra
	   width. Portrait: 592px → 740px (+25%), inside the requested +20-30%
	   range. */

	.home-about {
		padding-block: clamp(8.75rem, 0.5rem + 6.875vw, 11.5rem);
	}

	.home-about > .home-about__columns {
		gap: clamp(6.25rem, -1.25rem + 6.25vw, 8.75rem);
	}

	.home-about__content-inner {
		max-inline-size: 50rem;
	}

	.home-about__title {
		font-size: clamp(6rem, 1.5rem + 3.75vw, 7.5rem);
	}

	.home-about__description {
		max-inline-size: 48ch;
		font-size: clamp(1.0625rem, 0.5rem + 0.46875vw, 1.25rem);
	}

	.home-about__cta {
		font-size: 0.9375rem;
	}

	.practice-accordion__link,
	.practice-section__more-link {
		font-size: 0.875rem;
	}

	/*
	 * The base rule right-aligns the portrait inside its grid column
	 * (margin-inline-start: auto, further up this file) — harmless at
	 * 1920px, where the column and the image's own max-width are close
	 * in size, but at 2560px the 0.55fr column (~1030px) is far wider
	 * than even this larger portrait cap, so that auto margin pushes the
	 * photo away from the text column instead of toward it: the real
	 * column gap (below) plus this margin combine into one oversized
	 * blank band between text and photo — exactly the "empty section"
	 * look this pass is meant to remove. Flushing the image to the start
	 * of its column keeps it right up against the gap; any left-over
	 * column width lands at the section's own outer edge instead, where
	 * trailing white space around a portrait reads as normal, not as a
	 * gap between two pieces of content.
	 */
	.home-about__image {
		margin-inline-start: 0;
		max-inline-size: 46.25rem;
	}

	/* ---- Zakres wsparcia -------------------------------------------------
	   Column count/grid untouched — internal padding and type scale grow
	   substantially so the grid reads as a full section, not a table. */

	.home-services {
		padding-block: clamp(6.5rem, -1rem + 6.25vw, 9rem);
	}

	.home-services__item {
		padding-block: clamp(4.5rem, 3.75vw, 6rem);
		padding-inline: clamp(3.25rem, 0.25rem + 2.5vw, 4.25rem);
	}

	.home-services__number {
		font-size: 1rem;
	}

	.home-services__item-title {
		font-size: clamp(2.125rem, 0.625rem + 1.25vw, 2.625rem);
	}

	.home-services__item-excerpt {
		font-size: clamp(1.0625rem, 0.5rem + 0.46875vw, 1.25rem);
	}

	/* ---- Obszary praktyki --------------------------------------------
	   One of the most important sections per the brief — heading, the
	   accordion list and its active panel all get a clearly bigger step
	   than the rest of the pass. Background cover/crop
	   (.wp-block-cover__image-background) is untouched. */

	.practice-section.wp-block-cover {
		min-block-size: 54rem;
		padding-block: clamp(8rem, -0.25rem + 6.875vw, 10.75rem);
	}

	.practice-section__columns {
		gap: clamp(7rem, -0.5rem + 6.25vw, 9.5rem);
	}

	.practice-section__title {
		font-size: clamp(5.75rem, 1.25rem + 3.75vw, 7.25rem);
	}

	.practice-section__description {
		font-size: clamp(1.0625rem, 0.5rem + 0.46875vw, 1.25rem);
	}

	.practice-accordion__trigger {
		min-block-size: 7rem;
	}

	.practice-accordion__number {
		font-size: 1rem;
	}

	.practice-accordion__title {
		font-size: clamp(2.5rem, 0.625rem + 1.5625vw, 3.125rem);
	}

	.practice-accordion__panel-inner {
		max-inline-size: 70ch;
		font-size: clamp(1.025rem, 0.35rem + 0.5625vw, 1.25rem);
	}

	.practice-section__more-title {
		font-size: clamp(2rem, 0.5rem + 1.25vw, 2.5rem);
	}

	.practice-section__more-text {
		font-size: clamp(0.975rem, 0.525rem + 0.375vw, 1.125rem);
	}

	/* ---- CTA "Chcesz wiedzieć, jak wygląda współpraca..." ----------------
	   Scoped to its homepage instance only (.home-services__cta, right
	   before Obszary praktyki) — the same shared .single-practice__cta
	   component on single practice/article pages is untouched. Was not
	   part of the first large-desktop pass; now sized as a real banner
	   instead of a thin bar. */

	.home-services__cta .single-practice__cta {
		gap: clamp(2rem, -1rem + 2.5vw, 3rem);
		padding: clamp(2.5rem, -2rem + 3.75vw, 4rem);
	}

	.home-services__cta .single-practice__cta-icon {
		inline-size: 3rem;
		block-size: 3rem;
	}

	.home-services__cta .single-practice__cta-title {
		font-size: clamp(1.75rem, 0.25rem + 1.25vw, 2.25rem);
	}

	.home-services__cta .single-practice__cta-text {
		font-size: clamp(1rem, 0.4375rem + 0.46875vw, 1.1875rem);
	}

	.home-services__cta .single-practice__cta .wp-block-button__link {
		padding: 1.1rem 2rem;
		font-size: 1rem;
	}

	/* ---- Najnowsze artykuły -------------------------------------------- */

	/*
	 * Unlike the listing/single-article columns below, this section's own
	 * grid (.home-articles__grid) already has no max-inline-size of its
	 * own — measured at 2560px, it already fills the section's full
	 * ~2016px content box (93% of the ~2160px main column), so there is
	 * no hidden cap to widen here. padding-inline is trimmed slightly
	 * instead (72px → 56px per side) to reclaim a little more of that
	 * box for the grid itself, and each card's own inline padding is
	 * trimmed too (see .home-articles__grid > li below) so its title/
	 * excerpt get more of the card's own (already generous) width rather
	 * than losing it to padding.
	 */
	.home-articles {
		padding-block: clamp(6rem, 5vw, 8rem);
		padding-inline: clamp(3.5rem, 7.5rem - 2.5vw, 4.5rem);
	}

	.home-articles__intro {
		max-inline-size: 40rem;
	}

	/* No local font-size of its own elsewhere in this file — inherits the
	   global H2 (--wp--preset--font-size--heading-2) element style, which
	   is a WordPress core "fluid" clamp() that plateaus at 3rem well
	   before this breakpoint. Explicit override, scoped to this heading
	   only — the shared custom property (used by other H2s sitewide) is
	   left alone. */
	.home-articles__title {
		font-size: clamp(3rem, 0.75rem + 1.875vw, 3.75rem);
	}

	.home-articles__description {
		max-inline-size: 40rem;
		font-size: clamp(1.0625rem, 0.5rem + 0.46875vw, 1.25rem);
	}

	.home-articles__query {
		margin-block-start: clamp(4.5rem, 3.75vw, 6rem);
	}

	.home-articles__grid > li {
		padding-inline: clamp(3.5rem, 2rem + 1.25vw, 4rem);
	}

	.home-articles__item-title {
		font-size: clamp(1.875rem, 0.375rem + 1.25vw, 2.375rem);
	}

	.home-articles__item-excerpt {
		max-inline-size: 36ch;
		font-size: clamp(0.975rem, 0.525rem + 0.375vw, 1.125rem);
	}

	/* ---- Listing artykułów (templates/archive.html) ---------------------
	   .article-archive__header/__separator/__list share one max-inline-size
	   by design (see the comment on .article-archive__header further up
	   this file, about keeping every row on one shared left edge) — that
	   invariant is kept here too: all three get the same new cap. */

	.site-main.article-archive {
		padding-block: clamp(7rem, 3.25rem + 3.125vw, 8.25rem);
		padding-inline: clamp(5rem, 2rem + 2.5vw, 6rem);
	}

	/*
	 * The real fix for "listing wygląda na mały blok wrzucony na ogromne
	 * płótno": the previous pass only widened this to 84rem (1344px),
	 * which left ~624px of unused width as a dead band on the right at
	 * 2560px (measured: site-main.article-archive's own content box is
	 * ~1968px there). This clamp grows the shared header/list column
	 * from that same 84rem at 1920px (unchanged — verified against the
	 * ~1400px actually available there, so this still can't overflow at
	 * the low end of this breakpoint) up to 116rem (1856px) at 2560px,
	 * leaving a deliberate ~110px margin rather than touching the
	 * sidebar edge.
	 */
	.article-archive__header,
	.article-archive__separator,
	.article-archive__list {
		max-inline-size: clamp(84rem, -12rem + 80vw, 116rem);
	}

	.article-archive__header > .article-archive__title {
		font-size: clamp(4.25rem, 1.25rem + 2.5vw, 5.25rem);
	}

	.article-archive__header > .article-archive__intro {
		max-inline-size: 64rem;
		font-size: clamp(1.3125rem, 0.75rem + 0.46875vw, 1.5rem);
	}

	.article-archive__search-input {
		inline-size: 24rem;
		font-size: 1.125rem;
	}

	.article-archive__search-submit {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}

	.article-archive__items > li {
		padding-block: clamp(2.75rem, 0.5rem + 1.875vw, 3.5rem);
		padding-inline: clamp(2.5rem, 0.25rem + 1.875vw, 3.25rem);
	}

	.article-archive__date,
	.article-archive__item-tags a {
		font-size: 0.875rem;
	}

	.article-archive__item-title {
		font-size: clamp(2.25rem, 1.125rem + 0.9375vw, 2.625rem);
	}

	.article-archive__item-excerpt {
		font-size: clamp(0.9375rem, 0.1875rem + 0.625vw, 1.1875rem);
	}

	.article-archive__item-link {
		font-size: 0.8125rem;
	}

	/* ---- Single article (templates/single.html) --------------------------
	   Every one of these is a direct child of <main class="single-article">
	   (title/meta/author/separator directly; lead/content/tags/the CTA
	   banner/related/closing are all injected at the post-content block's
	   position by kancelaria_opora_wrap_single_article_content(), inc/
	   articles.php, which makes them direct-child siblings too, not
	   descendants of .single-article__content) — WordPress's own global
	   styles centre each one independently (margin-inline: auto !important
	   on every non-.align* child of an is-layout-constrained container),
	   so this page's whole column is CENTRED, not flush-left. That means
	   two different children CAN safely use two different widths and
	   still read as one coherent, centre-aligned column — each group just
	   needs every member of ITSELF to share one width, which is what
	   the two rules below do (this is also why, unlike the archive
	   listing/cooperation page, none of this needs a margin-left:0
	   !important override: core's own centring already does the right
	   thing here).
	 *
	 * WIDE group — title, meta, author, both separators, tags, the CTA
	 * banner, "Przeczytaj także" and the back-link: short display/UI text,
	 * never long-form prose, so a wider column costs nothing in
	 * readability. (.single-article__separator and .single-article
	 * .single-practice__cta/__related/__closing/__back were missing from
	 * the first pass entirely — confirmed via computed layout that this
	 * left them at theme.json's plain 47.5rem wideSize default, ~100px
	 * off the title/content's own left edge. Fixed by including them
	 * here.)
	 *
	 * A previous version of this pass kept the reading column (lead +
	 * content) on its own, narrower cap than the rest — 64rem (1024px)
	 * at 2560px — reasoning it as a "comfortable measure" ceiling.
	 * Feedback on the live page was unambiguous: with the reading column
	 * so much narrower than the wide group above it, the actual body
	 * text — the part of the page that's actually visible for most of
	 * its scroll length — still read as a narrow strip in a mostly-empty
	 * page. One shared width for the whole column, all the way to 76rem
	 * (1216px), directly matches "chcę żeby tekst artykułu zajmował
	 * wyraźnie więcej szerokości" instead of quietly re-capping it.
	 */
	.single-article__title,
	.single-article__meta,
	.single-article__author,
	.single-article__separator,
	.single-article__tags,
	.single-article .single-practice__cta,
	.single-article__related,
	.single-article__closing,
	.single-article__back,
	.single-article__lead,
	.single-article__content {
		max-inline-size: clamp(54rem, -12rem + 55vw, 76rem);
	}

	/*
	 * .single-article__content itself renders with WordPress's
	 * layout:constrained (see templates/single.html) — which means core's
	 * OWN global styles re-cap and re-centre EVERY one of ITS direct
	 * children (each paragraph, list, blockquote…) a second time,
	 * independent of the box above: every non-aligned direct child of an
	 * is-layout-constrained container gets max-width: 760px (theme.json's
	 * contentSize) plus margin-left/right: auto !important. At the old
	 * ~864px content width that only produced a small, easy-to-miss
	 * inset; widened to 1216px it read as the paragraphs themselves being
	 * stuck in a narrow strip inside their own (already wide) box — the
	 * exact "coraz gorzej" screenshot this fixes. h2/h3 already had their
	 * own escape from this (max-inline-size: none + the same !important
	 * pair, further up this file); this generalises it to every child,
	 * the same way .article-archive__header/.separator/.list do for a
	 * sibling case of the identical WordPress mechanism.
	 */
	.single-article__content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
		max-inline-size: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.single-article__title {
		font-size: clamp(4.25rem, 1.25rem + 2.5vw, 5.25rem);
	}

	.single-article__meta {
		font-size: 0.875rem;
	}

	.single-article__author {
		gap: 1.5rem;
	}

	.single-article__author-photo {
		inline-size: 5.5rem;
		block-size: 5.5rem;
	}

	.single-article__author-name {
		font-size: clamp(1.5rem, 0.9375rem + 0.46875vw, 1.6875rem);
	}

	.single-article__lead {
		font-size: clamp(1.375rem, 0.8125rem + 0.46875vw, 1.5625rem);
	}

	.single-article__separator {
		margin-block: clamp(3.5rem, 1.25rem + 1.875vw, 4.25rem);
	}

	.single-article__content {
		font-size: clamp(1.25rem, 0.6875rem + 0.46875vw, 1.4375rem);
	}

	.single-article__content > * + * {
		margin-block-start: clamp(1.75rem, 0.625rem + 0.9375vw, 2.125rem);
	}

	.single-article__content h2 {
		font-size: clamp(2.375rem, 1.0625rem + 1.09375vw, 2.8125rem);
	}

	.single-article__content h3 {
		font-size: clamp(1.75rem, 0.8125rem + 0.78125vw, 2.0625rem);
	}

	.single-article__related-grid {
		gap: clamp(2.5rem, 0.25rem + 1.875vw, 3.25rem);
	}

	.single-article__related-title {
		font-size: 1.375rem;
	}

	/* ---- Pojedynczy obszar praktyki (templates/single-practice_area.html)
	   ------------------------------------------------------------------
	   Unlike single-article, width here is already centralised in ONE
	   place: .single-practice__wrapper's own 3-track grid (≥70rem), whose
	   MIDDLE track is the one shared measure .single-practice__content,
	   __cta, __scope-*, __consultation-*, the FAQ accordion and __back
	   all read at (none of them carry a max-inline-size of their own —
	   see the comments on .single-practice__body/__content further up
	   this file). That track's own clamp() was deliberately capped at
	   60rem (960px) "so it never grows unbounded on very wide monitors"
	   — exactly the ceiling this pass is asked to lift. Raising it here
	   (and in .single-practice__hero, which repeats the same column
	   template so the hero and body stay on one shared axis) is the one
	   change that widens the entire page at once; every component below
	   it just needs its own type scale stepped up to match. */

	.single-practice__wrapper {
		grid-template-columns: minmax(0, 1fr) minmax(0, clamp(60rem, 36rem + 20vw, 68rem)) minmax(clamp(2rem, 3vw, 3rem), 1.6fr);
	}

	.single-practice__hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, clamp(60rem, 36rem + 20vw, 68rem)) minmax(0, 1.6fr);
	}

	.single-practice__hero-text {
		max-inline-size: clamp(40rem, 25rem + 12.5vw, 45rem);
	}

	.single-practice__hero--no-image .single-practice__hero-text {
		max-inline-size: clamp(44rem, 26rem + 15vw, 50rem);
	}

	.single-practice__title {
		font-size: clamp(5.25rem, 3rem + 1.875vw, 6rem);
	}

	.single-practice__lead {
		max-inline-size: 42rem;
		font-size: clamp(1.75rem, 1.1875rem + 0.46875vw, 1.9375rem);
	}

	.single-practice__content {
		font-size: clamp(1.1875rem, 1rem + 0.15625vw, 1.25rem);
	}

	.single-practice__content h2 {
		font-size: clamp(2.5rem, 1.375rem + 0.9375vw, 2.875rem);
	}

	.single-practice__content h3 {
		font-size: clamp(1.875rem, 1.125rem + 0.625vw, 2.125rem);
	}

	.single-practice__section-title {
		font-size: clamp(2.5rem, 1.5625rem + 0.78125vw, 2.8125rem);
	}

	.single-practice__scope-intro,
	.single-practice__consultation-intro {
		font-size: clamp(1.1875rem, 1rem + 0.15625vw, 1.25rem);
	}

	.single-practice__scope-number {
		font-size: 0.875rem;
	}

	.single-practice__scope-item-title {
		font-size: clamp(1.625rem, 1.0625rem + 0.46875vw, 1.8125rem);
	}

	.single-practice__scope-item-description,
	.single-practice__consultation-list li {
		font-size: 1.125rem;
	}

	.single-practice__cta {
		gap: clamp(2rem, 0.5rem + 1.25vw, 2.5rem);
		padding: clamp(2.5rem, 1rem + 1.25vw, 3rem);
	}

	.single-practice__cta-icon {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}

	.single-practice__cta-title {
		font-size: clamp(1.75rem, 1rem + 0.625vw, 2rem);
	}

	.single-practice__cta-text {
		font-size: 1.125rem;
	}

	.single-practice__faq-accordion .practice-accordion__trigger {
		padding-block: clamp(1.5rem, 0.75rem + 0.625vw, 1.75rem);
	}

	.single-practice__faq-accordion .practice-accordion__symbol {
		inline-size: 2.25rem;
		block-size: 2.25rem;
		font-size: 1.375rem;
	}

	.single-practice__faq-accordion .practice-accordion__title {
		font-size: clamp(1.3125rem, 0.75rem + 0.46875vw, 1.5rem);
	}

	.single-practice__faq-accordion .practice-accordion__panel-inner {
		font-size: 1.0625rem;
	}

	/* ---- Strona „Współpraca" (inc/cooperation.php) -----------------------
	   Already close to right per the brief — this only widens the shared
	   page wrapper (which the hero image's own width already follows,
	   since it has no fixed max-width of its own) and steps up the type
	   scale/padding already used by every block on the page. */

	.site-main.cooperation-page {
		padding-block: clamp(3rem, 1.5rem + 1.25vw, 3.5rem) clamp(4rem, 1.75rem + 1.875vw, 4.75rem);
	}

	.cooperation__wrapper {
		max-inline-size: 104rem;
	}

	.cooperation-hero__title {
		font-size: clamp(3rem, 0.75rem + 1.875vw, 3.75rem);
	}

	.cooperation-hero__lead {
		max-inline-size: 38rem;
		font-size: clamp(1.1875rem, 0.625rem + 0.46875vw, 1.375rem);
	}

	.cooperation-process-faq {
		gap: clamp(2.25rem, 0.375rem + 1.5625vw, 2.875rem);
	}

	.cooperation-steps__item {
		padding-block: clamp(1.375rem, 0.25rem + 0.9375vw, 1.75rem);
	}

	.cooperation-steps__icon {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}

	.cooperation-steps__icon svg {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	.cooperation-steps__number {
		font-size: 0.78125rem;
	}

	.cooperation-steps__title,
	.cooperation-faq-accordion .practice-accordion__title {
		font-size: clamp(1.125rem, 0.5625rem + 0.46875vw, 1.3125rem);
	}

	.cooperation-steps__desc,
	.cooperation-steps__list-items li,
	.cooperation-faq-accordion .practice-accordion__panel-inner {
		font-size: 1.0625rem;
	}

	.cooperation-steps__note {
		font-size: 0.9rem;
	}

	.cooperation-faq-accordion .practice-accordion__item {
		margin-block-end: clamp(1rem, 0.25rem + 0.625vw, 1.25rem);
		padding-inline: clamp(1.5rem, 1.25vw, 2rem);
	}

	.cooperation-faq-accordion .practice-accordion__trigger {
		padding-block: clamp(1.25rem, 0.125rem + 0.9375vw, 1.625rem);
	}
}