/*
Theme Name: Hentosz BV2
Theme URI: https://hentosznieruchomosci.pl/
Author: LOCAL _@top-end
Author URI: https://github.com/Miebar/leadmagnet-HN
Description: Child theme dla Twenty Twenty-Five (TT5) — strona Dominika Hentosz-Barglik. BV2 rev10 + BEM full rewrite 2026-05-06.
Template: twentytwentyfive
Version: 2.6.3
Text Domain: hentosz-bv2
*/

/* ============================================================
 * 1. TOKENS (CSS Custom Properties) — per IMPLEMENTATION-NOTES sekcja 8
 * ============================================================ */
:root {
	/* Colors */
	--navy: #33546A;
	--navy-dark: #24394A;
	--burgund: #7A2830;
	--burgund-dark: #5C1E24;
	--dusty-pink: #C08A85;
	--dusty-pink-light: #E7CFCB;
	--dusty-pink-dark: #A66E68;
	--terracotta: #D57F2A;
	--terracotta-light: #E8B989;
	--terracotta-dark: #A85920;
	--amber: #D57F2A;
	--beige: #EDE4D3;
	--beige-light: #F5EDE0;
	--text: #2A2420;
	--text-light: #5C7689;
	--white: #FFFFFF;
	--border-new: #5C7689;
	--whatsapp: #25D366;
	--whatsapp-dark: #128C7E;

	/* Typography (Iter 6 2026-05-09: + Lora italic accent dla mid-size italic, hero subtitle zostaje Playfair) */
	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Outfit', system-ui, -apple-system, sans-serif;
	--font-italic-accent: 'Lora', Georgia, 'Times New Roman', serif;

	/* Type scale (rev10.1 — Mieszko 2026-05-07: podbicie 1-3px na najmniejszych dla seniors/słaby wzrok) */
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1.0625rem;
	--fs-md: 1.1875rem;
	--fs-lg: 1.3125rem;
	--fs-xl: 1.5rem;
	--fs-2xl: 2rem;
	--fs-3xl: 2.5rem;
	--fs-4xl: 3rem;
	--fs-5xl: clamp(2.5rem, 5vw, 4rem);

	/* Spacing scale */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;

	/* Borders & radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	/* Bio 3-layer terracotta frame — signature pattern (Iter 16.3 audyt P1/3 2026-05-11).
	   Outer 47 → middle 43 → inner 37 z paddingami 4/6px daje cienką navy "ramę"
	   wokół terracotta body. Photo box używa --radius-bio-frame (inner) dla unity. */
	--radius-bio-outer: 47px;
	--radius-bio-middle: 43px;
	--radius-bio-frame: 37px;

	/* Layout */
	--container-max: 1200px;
	--container-padding: clamp(1rem, 4vw, 2rem);

	/* Transitions */
	--transition-base: 0.2s ease;
	--transition-slow: 0.4s ease;
}

/* ============================================================
 * 2. RESET / BASE
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--text);
	/* P0/1 fix Mieszko 2026-05-07: body beige zamiast white — eliminuje białe pasy między sekcjami */
	background: var(--beige);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* P0/1 fix: TT5 wp-site-blocks layout — usuń gap między sekcjami */
.wp-site-blocks { background: var(--beige); }
.wp-site-blocks > main { padding: 0; gap: 0; }
.wp-site-blocks .wp-block-spacer { display: none; }

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--burgund); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	/* P1/4 fix Mieszko 2026-05-07: oddech intra-sekcja — h2 z sp-4 → sp-12 */
	margin: 0 0 var(--sp-12);
	color: var(--navy);
}
h3, h4, h5, h6 { margin-bottom: var(--sp-4); }

ul, ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-4); }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

p { margin: 0 0 var(--sp-4); }
em { font-style: italic; }
strong { font-weight: 700; }

blockquote { margin: 0; }
cite { font-style: normal; }

*:focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.skip-to-content {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: var(--sp-3) var(--sp-6);
	background: var(--burgund);
	color: var(--beige);
	font-family: var(--font-body);
	font-weight: 600;
	border-radius: 0 0 var(--radius-md) 0;
}
.skip-to-content:focus { left: 0; }

#main { display: block; }

/* ============================================================
 * 3. LAYOUT PRIMITIVES
 * ============================================================ */
section { padding: var(--sp-16) 0; }
@media (min-width: 768px) { section { padding: var(--sp-20) 0; } }
@media (min-width: 1024px) { section { padding: var(--sp-24) 0; } }

/* ============================================================
 * 4. BUTTONS
 * ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-3) var(--sp-8);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.4;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-base);
	text-decoration: none;
	white-space: nowrap;
}

.btn--primary { background: var(--navy); color: var(--beige); border-color: var(--navy); }
.btn--primary:hover { background: var(--burgund); border-color: var(--burgund); color: var(--white); }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: var(--beige); }

/* ============================================================
 * 5. HERO — bg beige + h1 navy + CTA primary navy/beige
 * ============================================================ */
/* Iter 15.7: hero mobile minimal gap (Mieszko 2026-05-12) — H1 musi sie miescic w 1. viewport. */
.hero { background: var(--beige); overflow: hidden; padding-top: 0; padding-bottom: var(--sp-12); }
@media (min-width: 768px) { .hero { padding-top: 14px; padding-bottom: var(--sp-16); } }
@media (min-width: 1024px) { .hero { padding-top: 22px; padding-bottom: var(--sp-20); } }
.hero__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-items: start;
}
@media (min-width: 768px) {
	.hero__inner { gap: var(--sp-4); }
}
@media (min-width: 1024px) {
	.hero__inner { gap: var(--sp-12); }
}
@media (min-width: 1024px) {
	.hero__inner { grid-template-columns: 1.3fr 1fr; gap: var(--sp-16); }
}
/* Iter 15.5: revert do oryginalnego mobile order — Mieszko 2026-05-12:
   "menu -> zdjecie -> posredniczka -> nazwisko" (mobile photo first).
   Desktop zachowuje content lewo / photo prawo (grid 1.3fr 1fr). */
.hero__content { order: 2; }
.hero__photo-wrap { order: 1; }
@media (min-width: 1024px) {
	.hero__content { order: 1; margin-top: 45px; }
	.hero__photo-wrap { order: 2; }
}
.hero__microcopy {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-light);
	margin-bottom: var(--sp-6);
	font-weight: 500;
}
.hero__title {
	font-family: var(--font-heading);
	font-size: var(--fs-5xl);
	line-height: 1.05;
	color: var(--navy);
	margin-bottom: var(--sp-6);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.hero__title-surname { white-space: nowrap; }
.hero__title-line2 {
	display: block;
	font-size: 0.7em;
	font-style: italic;
	font-weight: 500;
	margin-top: var(--sp-3);
	letter-spacing: 0;
}
/* Iter 18.1 mobile fix — Mieszko 2026-05-11 20:25: H1 mniejsze (HENTOSZ-BARGLIK musi się mieścić w viewport), line2 SPORO większe, subtitle align LEFT (override center) */
@media (max-width: 767px) {
	.hero__content { text-align: center; }
	.hero__title { font-size: clamp(2rem, 9vw, 3rem); }
	.hero__title-line2 { font-size: clamp(2rem, 8.5vw, 2.5rem); margin-top: var(--sp-4); line-height: 1.15; }
	.hero__subtitle { text-align: left; margin-left: auto; margin-right: auto; }
	.hero__cta { flex-wrap: nowrap; gap: var(--sp-3); justify-content: center; }
	.hero__cta .btn { padding: var(--sp-3) var(--sp-4); font-size: 0.9rem; flex: 0 1 auto; }
}
/* Safety net — zapobiega horizontal scroll gdyby coś overflow */
.hero { overflow-x: hidden; }
.hero__emphasis--amber { border-bottom: 3px solid var(--amber); padding-bottom: 2px; }
.hero__subtitle {
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: 1.6;
	color: var(--navy);
	max-width: 540px;
	margin-bottom: var(--sp-8);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-8); justify-content: center; }
/* Iter 6 (2026-05-09): Hero pills wyciągnięte do osobnego wiersza POD hero__inner — analogiczny pattern do bio__credentials/__pill */
.hero__credentials {
	list-style: none;
	padding: 0;
	margin: var(--sp-12) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
}
.hero__pill {
	display: inline-block;
	border: 1px solid rgba(51, 84, 106, 0.35);
	color: var(--navy);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-family: var(--font-body);
	font-weight: 500;
	background: rgba(255, 255, 255, 0.5);
}
.hero__pill--badge {
	background: var(--amber);
	color: var(--navy-dark);
	border-color: var(--amber);
}
/* Iter 15.8: revert mobile crop (Mieszko: "nie kropuj"). Aspect 3/4 wszedzie, no object-position override. */
.hero__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
 * 6. ROZUMIEM OBAWY — 4 akty
 * ============================================================ */
.rozumiem-obawy { padding: 0; }
.rozumiem-obawy__akt { padding: var(--sp-16) var(--container-padding); }
@media (min-width: 768px) { .rozumiem-obawy__akt { padding: var(--sp-20) var(--container-padding); } }
.rozumiem-obawy__akt > * { max-width: 880px; margin-left: auto; margin-right: auto; }

.rozumiem-obawy__akt--1 { background: var(--beige); }

/* sesja 076 2026-05-27: ROOT CAUSE FIX gap między sekcjami — WordPress wstawia
   :where(.wp-site-blocks) > * { margin-block-start: 1.2rem } przez inline CSS.
   To wprowadza 19.2px gap = body bg (beige) prześwituje między sekcjami.
   Override z większą specificity. */
.wp-site-blocks > section,
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > div { margin-block-start: 0; margin-block-end: 0; }
section + section,
.rozumiem-obawy__akt + .rozumiem-obawy__akt { margin-block-start: 0; }
.rozumiem-obawy__akt1-title {
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	color: var(--burgund);
	font-style: normal;
	font-weight: 700;
	text-align: center;
	margin-bottom: var(--sp-12);
	line-height: 1.2;
}
/* Akt 1 prose — 4-paragraph intro on beige bg (P1/1 refactor 2026-05-10: split lede class collision) */
.rozumiem-obawy__akt-1-prose { font-size: var(--fs-md); color: var(--navy); max-width: 720px; margin: 0 auto var(--sp-12); }
.rozumiem-obawy__akt-1-prose p { margin-bottom: var(--sp-4); }
.rozumiem-obawy__akt-1-prose em { color: var(--burgund); font-style: italic; }
/* Akt 2 lede em color (terracotta-light on navy bg) — descendant scope replaces deprecated --on-navy modifier */
.rozumiem-obawy__akt--2 .rozumiem-obawy__lede em { color: var(--terracotta-light); }

.rozumiem-obawy__quotes {
	list-style: none;
	padding: 0;
	margin: 0 auto var(--sp-12);
	display: grid;
	gap: var(--sp-4);
}
.rozumiem-obawy__quotes li {
	background: rgba(122, 40, 48, 0.04);
	border-left: 3px solid var(--burgund);
	padding: var(--sp-4) var(--sp-6);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rozumiem-obawy__quotes blockquote {
	margin: 0;
	color: var(--burgund);
	font-style: italic;
	font-family: var(--font-italic-accent);
	font-size: var(--fs-md);
}

.rozumiem-obawy__punchline {
	font-family: var(--font-italic-accent);
	font-style: italic;
	font-size: var(--fs-2xl);
	font-weight: 500;
	color: var(--navy);
	text-align: center;
	margin: var(--sp-8) auto 0;
	width: fit-content;
	max-width: 100%;
}
.rozumiem-obawy__punchline strong { color: var(--burgund); }

/* Iteracja 3 (2026-05-07): Claude Design replikacja — alignment-left, 5⭐ decoratywne SVG, foot 1-zdanie */
.rozumiem-obawy__akt--2 { background: var(--navy); color: var(--beige); }
.rozumiem-obawy__title {
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	color: var(--beige);
	margin-bottom: 4rem; /* sesja 076 2026-05-27: 24px → 40px → 56px → 80px → 64px (4th iter, 80 za dużo per Mieszko, cofam) */
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}
.rozumiem-obawy__akt--2 .rozumiem-obawy__lede {
	font-family: var(--font-italic-accent);
	color: var(--terracotta-light);
	font-style: italic;
	font-size: var(--fs-xl);
	margin: 0 auto 40px; /* sesja 076 2026-05-27: 30px → 40px (oddech lede → boxes) */
	text-align: left;
	font-weight: 500;
	max-width: 1000px;
}
/* sub usunięty z markup w Iteracji 3; rule zachowana dla potential reuse w innych aktach */
.rozumiem-obawy__sub { font-family: var(--font-body); font-size: var(--fs-md); color: var(--dusty-pink-light); margin-bottom: var(--sp-12); }
/* Iter 6 (2026-05-09): pillars rozmieszczenie — większy gap/padding, equal heights via flex, centered (margin auto) */
.rozumiem-obawy__pillars { list-style: none; padding: 0; margin: 0 auto var(--sp-12); display: grid; gap: var(--sp-8); max-width: 1000px; align-items: stretch; }
@media (min-width: 768px) { .rozumiem-obawy__pillars { grid-template-columns: repeat(3, 1fr); } }
.rozumiem-obawy__pillar {
	padding: var(--sp-8);
	border: 1px solid rgba(237, 228, 211, 0.15);
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.15);
	text-align: left;
	display: flex;
	flex-direction: column;
}
/* 5⭐ decoratywne SVG — nie rating, nie Schema Review (per Mieszko 2026-05-07 + memory feedback-html-decision-tool-2026-05-07.md anti-AI-bot reasoning) */
.rozumiem-obawy__pillar-stars {
	display: flex; gap: 0.15rem;
	margin: 0 0 var(--sp-4);
	color: var(--amber);
}
.rozumiem-obawy__pillar-stars svg { width: 18px; height: 18px; fill: var(--amber); }
.rozumiem-obawy__pillar-title { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--beige); margin-bottom: var(--sp-3); font-weight: 700; }
.rozumiem-obawy__pillar p { color: var(--beige); font-size: var(--fs-base); margin: 0; opacity: 0.9; line-height: 1.55; }
.rozumiem-obawy__foot {
	color: var(--beige);
	font-family: var(--font-body); /* sesja 076 2026-05-27: italic-accent → body (match .realizacje__cta-text, spójność body font na stronie) */
	font-size: var(--fs-lg); /* sesja 076 2026-05-27: fs-base → fs-lg (match Realizacje CTA size) */
	line-height: 1.5; /* sesja 076 2026-05-27: dodane (match Realizacje CTA) */
	margin: 0 auto;
	text-align: left;
	opacity: 0.85;
	max-width: 1000px;
}
.rozumiem-obawy__foot em { font-style: italic; }
.rozumiem-obawy__foot a { color: var(--dusty-pink); text-decoration: underline; }
.rozumiem-obawy__foot a:hover { color: var(--amber); }

.rozumiem-obawy__akt--3 { background: var(--dusty-pink-light); }
/* Iteracja 4 (2026-05-08) — split 2-col layout: title L | list R + solid 1px separators + glyph burgund */
.rozumiem-obawy__akt--3 .rozumiem-obawy__akt-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
}
@media (min-width: 768px) {
	.rozumiem-obawy__akt--3 .rozumiem-obawy__akt-inner {
		grid-template-columns: minmax(320px, 1fr) 1.5fr;
		gap: var(--sp-16);
		align-items: start;
	}
}
.rozumiem-obawy__promise-title {
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	color: var(--burgund-dark);
	text-align: left;
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
@media (min-width: 768px) {
	.rozumiem-obawy__promise-title {
		font-size: var(--fs-4xl);
		max-width: 14ch;
	}
}
.rozumiem-obawy__promise-title em { font-style: normal; color: var(--burgund-dark); border-bottom: 3px solid var(--amber); padding-bottom: 2px; } /* sesja 076 2026-05-27: italic → amber underline (match hero__emphasis--amber, spójność in-sentence emphasis na całej stronie) */
.rozumiem-obawy__promise-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.rozumiem-obawy__promise-list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-6);
	color: var(--burgund);
	font-size: var(--fs-md);
	line-height: 1.7;
	align-items: start;
	padding: 1.25rem 0;
	border-top: 1px solid var(--dusty-pink-dark);
}
.rozumiem-obawy__promise-list li:first-child { border-top: none; padding-top: 0; }
.rozumiem-obawy__promise-list li:last-child { padding-bottom: 0; }
.rozumiem-obawy__glyph {
	color: var(--burgund);
	font-family: var(--font-heading);
	font-size: 1.75rem;
	line-height: 1;
	display: inline-block;
	width: 2rem;
	text-align: center;
	flex-shrink: 0;
	padding-top: 2px;
}

/* Akt 4 CSS REMOVED (Iter 19.3) — CTA przeniesiony do hero jako btn--secondary. */

/* ============================================================
 * 7. METODA — gradient bg + 6 kroków + terracotta-dark
 * ============================================================ */
/* Iteracja 3 (2026-05-07): vertical timeline 6 kroków + tytuł amber center + intro left + bold akcenty + roman cyfry counter */
.metoda { background: linear-gradient(180deg, var(--beige) 0%, var(--beige-light) 50%, var(--dusty-pink-light) 100%); }
.metoda__inner { max-width: 800px; margin: 0 auto; padding: 0 var(--container-padding); }
/* Iter 19.0 (2026-05-11): eyebrow przeniesiona ze "before H2" do "before timeline" jako punchline-style
   analogicznie do .rozumiem-obawy__punchline (Akt 1). Center, italic, fs-2xl. */
.metoda__punchline {
	font-family: var(--font-italic-accent);
	font-style: italic;
	color: var(--burgund);
	font-size: var(--fs-2xl);
	font-weight: 500;
	text-align: center;
	margin: 0 auto var(--sp-8);
	max-width: 720px;
}
.metoda__title {
	font-family: var(--font-heading);
	font-size: var(--fs-4xl);
	color: var(--terracotta-dark);
	text-align: center;
	margin-bottom: var(--sp-6);
	font-weight: 700;
	line-height: 1.15;
}
.metoda__intro { max-width: 720px; margin: 0 0 var(--sp-12); color: var(--text); font-size: var(--fs-md); line-height: 1.7; text-align: left; }
.metoda__intro p { margin: var(--sp-3) 0; }
.metoda__intro p strong { color: var(--navy-dark); font-weight: 700; }
/* Specifity fix: .metoda__intro p ma (0,1,1), pokonuje .metoda__intro-question (0,1,0) — używamy (0,2,1) */
.metoda__intro p.metoda__intro-question {
	font-family: var(--font-italic-accent);
	font-style: italic;
	color: var(--navy-dark);
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-4);
	font-weight: 600;
}

/* Vertical timeline 6 kroków — pionowa linia navy + amber dot + roman cyfry counter */
/* B7 fix Iter 6 (2026-05-09): selector ol.metoda__steps wygrywa nad reset 'ol[role="list"] { padding: 0 }' (linia 122).
   Iter 3 rev3 P1/10 design intent: vertical timeline z dot kropkami na lewo (32px padding-left) — restored. */
ol.metoda__steps {
	list-style: none; padding: 0 0 0 var(--sp-8); margin: 0;
	display: flex; flex-direction: column; gap: var(--sp-8);
	counter-reset: step-counter;
	position: relative;
	max-width: 800px;
}
.metoda__steps::before {
	content: ''; position: absolute; left: 12px; top: 8px; bottom: 8px;
	width: 2px; background: var(--navy);
}
.metoda__step {
	position: relative;
	background: var(--white);
	border-radius: var(--radius-md);
	padding: var(--sp-6);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	counter-increment: step-counter;
}
.metoda__step::before {
	content: ''; position: absolute; left: -32px; top: 8px;
	width: 14px; height: 14px;
	background: var(--amber); border-radius: 50%;
	border: 3px solid var(--beige-light); box-shadow: 0 0 0 2px var(--navy);
}
/* Roman cyfry I-VI generowane przez counter; markup span class="metoda__num" pusty (aria-hidden) */
.metoda__num {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: var(--fs-3xl);
	color: var(--navy-dark);
	line-height: 1;
	margin: 0 0 var(--sp-2);
	border-bottom: 1px solid var(--amber);
	padding-bottom: var(--sp-2);
	display: inline-block;
	background: none;
	width: auto;
	height: auto;
}
.metoda__num::before { content: counter(step-counter, upper-roman) "."; }
.metoda__step-title { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--navy-dark); margin: var(--sp-3) 0 var(--sp-1); font-weight: 700; }
.metoda__step-subtitle { font-family: var(--font-italic-accent); font-size: var(--fs-base); color: var(--burgund); font-style: italic; margin: 0 0 var(--sp-3); }
.metoda__step-body { color: var(--text); font-size: var(--fs-base); margin: 0 0 var(--sp-3); line-height: 1.7; }
.metoda__step-zysk {
	font-size: var(--fs-sm);
	color: var(--text);
	margin: var(--sp-3) 0 0;
	padding: var(--sp-3);
	background: var(--beige-light);
	border-left: 3px solid var(--amber);
}
.metoda__step-zysk strong { color: var(--burgund); font-weight: 700; }

/* ============================================================
 * 8. REALIZACJE — bg burgund full + 4 case studies
 * ============================================================ */
/* Iteracja 3 (2026-05-07): photo 4/3 + ramki 1px amber + label-row pill + bordery solid amber + intro left amber */
.realizacje { background: linear-gradient(180deg, var(--burgund-dark) 0%, var(--burgund) 100%); color: var(--beige); }
.realizacje__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.realizacje__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-4xl); color: var(--beige); text-align: center; margin: 0 0 var(--sp-6); }
.realizacje__intro {
	font-family: var(--font-italic-accent);
	font-style: italic;
	font-size: var(--fs-xl);
	font-weight: 500;
	color: var(--amber);
	margin: 0 0 30px;
	max-width: 500px;
	text-align: left;
}
.realizacje__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .realizacje__grid { grid-template-columns: repeat(2, 1fr); } }

/* CTA footer po grid 4 case studies (Iter 7.10 sesja 067, 2026-05-14) */
.realizacje__cta-footer {
	text-align: center;
	margin-top: 0; /* sesja 076 2026-05-28: var(--sp-10) nie istniało w :root, margin-top defaultował do 0 — explicit */
	padding: var(--sp-16) var(--sp-4) 0; /* sesja 076 2026-05-28: padding-top sp-6 → sp-16 (24px → 64px) — match section gaps, oddech od grid do CTA text */
}
.realizacje__cta-text {
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	color: var(--beige);
	margin: 0 0 var(--sp-4);
	line-height: 1.5;
}
.realizacje__cta-text em { font-style: italic; }
.realizacje__cta-button {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-3) var(--sp-6);
	background: var(--amber);
	color: var(--navy-dark);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-base);
	border-radius: var(--radius-sm);
	transition: background var(--transition-base);
}
.realizacje__cta-button:hover,
.realizacje__cta-button:focus-visible {
	background: var(--beige);
	color: var(--navy-dark);
	outline: none;
}
.realizacje__cta-button:focus-visible { box-shadow: 0 0 0 3px rgba(213, 127, 42, 0.4); }

.case-card {
	background: rgba(237, 228, 211, 0.06);
	border: 1px solid var(--amber);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: background var(--transition-base);
}
.case-card:hover { background: rgba(237, 228, 211, 0.12); }
@media (prefers-reduced-motion: reduce) { .case-card { transition: none; } }

.case-card__photo { margin: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.case-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; }

/* Label-row wrapper — flex row dla label + pill inline (case_3 Muranów Off-market) */
.case-card__label-row {
	display: flex; align-items: center; gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	flex-wrap: wrap;
}
.case-card__label {
	font-size: var(--fs-xs); letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--amber);
	font-weight: 700;
	margin: 0 0 var(--sp-4);
	display: inline-block;
	opacity: 0.9;
}
/* Override gdy label w wrapperze label-row — neutralize margin (margin trzyma się na wrapperze, nie label) */
.case-card__label-row .case-card__label { margin: 0; }

/* Off-market pill — delikatniejszy bg + amber border + center */
.case-card__amber-pill {
	display: inline-block;
	background: rgba(213, 127, 42, 0.15);
	color: var(--amber);
	padding: 0.2rem 1rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid rgba(213, 127, 42, 0.4);
	margin: 0;
	text-align: center;
	min-width: 100px;
}

.case-card__title { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--beige); margin: 0 0 var(--sp-4); font-weight: 700; line-height: 1.3; }

/* Problem: italic + solid border-bottom amber 0.4 */
.case-card__problem {
	font-family: var(--font-body); font-style: italic;
	font-size: var(--fs-base);
	color: var(--beige);
	opacity: 0.85;
	margin: 0 0 var(--sp-4);
	padding: 0 0 var(--sp-4);
	border-bottom: 1px solid rgba(213, 127, 42, 0.4);
	line-height: 1.5;
}

/* Action-list centered visually między problem-bottom a result-top */
.case-card__action-list {
	list-style: disc; padding-left: var(--sp-6);
	margin: auto 0;
	color: rgba(237, 228, 211, 0.9);
	font-size: var(--fs-base);
}
.case-card__action-list li { margin: var(--sp-2) 0; line-height: 1.45; }

/* Result emphasis (sesja 076 2026-05-27 Wariant B): fs-lg + 2px solid amber border + większy padding-top.
   Match z brand emphasis pattern (hero "partnerka" 3px, Akt 3 "masz pewność" 3px). Punchline każdego case study. */
.case-card__result {
	color: var(--beige);
	margin: var(--sp-4) 0 0;
	font-size: 1.25rem; /* sesja 076 2026-05-27: fs-lg (21px) → 20px, -1px per Mieszko */
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(213, 127, 42, 0.4);
	line-height: 1.5;
}
.case-card__result strong { color: var(--amber); font-weight: 700; }
/* Eyebrow "WYNIK" sesja 076 2026-05-27: match .case-card__label styling (fs-xs + 0.15em + uppercase + amber 700) */
.case-card__result::before {
	content: "WYNIK";
	display: block;
	font-size: var(--fs-xs);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--amber);
	font-weight: 700;
	margin-bottom: var(--sp-2);
}

/* ============================================================
 * 9. BIO — Iteracja 5 (2026-05-08): full-width navy section + 3-layer terracotta card + photo box + testimonials POZA card + pills row
 * ============================================================ */
.bio {
	background:
		linear-gradient(45deg, transparent 78%, rgba(0,0,0,0.18) 100%),
		linear-gradient(225deg, transparent 78%, rgba(255,255,255,0.07) 100%),
		var(--navy);
}
.bio__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.bio__title {
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	color: var(--beige);
	text-align: center;
	margin: 0 0 var(--sp-20);
	font-weight: 700;
	line-height: 1.15;
}
@media (min-width: 768px) {
	.bio__title { font-size: var(--fs-4xl); }
}

.bio__grid { display: grid; gap: var(--sp-12); align-items: stretch; }
@media (min-width: 1024px) {
	.bio__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
}

/* LEFT col — text-side: terracotta card + testimonials POZA card */
.bio__text-side { display: flex; flex-direction: column; gap: var(--sp-10, 2.5rem); order: 2; }
@media (min-width: 1024px) { .bio__text-side { order: 1; } }

/* 3-layer wrapper: outer terracotta line + navy gap + inner content */
.bio__card-frame { background: var(--terracotta-dark); border-radius: var(--radius-bio-outer); padding: 4px; }
.bio__card-gap { background: var(--navy); border-radius: var(--radius-bio-middle); padding: 6px; }
.bio__card { background: var(--terracotta-dark); border: none; border-radius: var(--radius-bio-frame); padding: var(--sp-8) var(--sp-8); color: var(--beige); } /* sesja 076 2026-05-27: horizontal padding 40→32px mobile, więcej szerokości tekstu */
@media (min-width: 1024px) { .bio__card { padding: var(--sp-10, 2.5rem) var(--sp-10, 2.5rem); } } /* sesja 076 2026-05-27: horizontal padding 48→40px desktop, +16px szerokości tekstu */

.bio__body { color: var(--beige); font-size: var(--fs-base); line-height: 1.7; }
.bio__body p { margin: 0 0 var(--sp-6); }
.bio__body p:last-of-type { margin-bottom: 0; }
.bio__body p:first-child { font-size: var(--fs-md); font-weight: 500; color: var(--white); }
.bio__body em { font-style: italic; color: var(--white); }
/* C — subtle underline editorial accent (amber 50% alpha, 2px thick, 4px offset) */
.bio__body strong {
	font-weight: 400;
	font-size: 1em;
	text-decoration: underline;
	text-decoration-color: rgba(213, 127, 42, 0.5);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.bio__body-dash { color: var(--beige); font-weight: 700; margin-right: var(--sp-2); }
.bio__body-line2 { display: inline-block; padding-top: 2px; }

/* Testimonials block (POZA terracotta card, na navy section bg) */
.bio__testimonials { text-align: center; color: var(--beige); padding: var(--sp-2) var(--sp-4); }
.bio__testimonials-title { font-family: var(--font-italic-accent); font-style: italic; font-size: calc(var(--fs-xl) + 2px); color: var(--beige); margin: 0 0 var(--sp-3); font-weight: 400; }
.bio__testimonials-quote { margin: 0; color: var(--white); line-height: 1.5; font-size: var(--fs-md); font-family: var(--font-italic-accent); font-style: italic; }
.bio__testimonials-quote-line1 { font-style: normal; font-size: calc(var(--fs-md) + 3px); }
.bio__testimonials-quote-line2 { font-style: italic; font-family: var(--font-italic-accent); display: block; text-align: right; margin-top: var(--sp-6); }
.bio__testimonials-dash { color: var(--amber); font-weight: 700; font-style: normal; margin-right: var(--sp-2); }
.bio__testimonials-emoji { font-style: normal; font-family: var(--font-heading); color: var(--amber); margin-left: var(--sp-2); font-size: 1.5em; line-height: 1; vertical-align: -0.18em; }

/* RIGHT col — photo (equal-width via flex stretch) */
.bio__photo-side { order: 1; display: flex; }
@media (min-width: 1024px) { .bio__photo-side { order: 2; } }
.bio__photo { margin: 0; width: 100%; overflow: hidden; border-radius: var(--radius-bio-frame); flex: 1; background: var(--navy-dark); }
.bio__photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 1023px) { .bio__photo { aspect-ratio: 3 / 4; } }

/* Pills row POD gridem (centered na navy section bg) */
.bio__credentials { list-style: none; padding: 0; margin: var(--sp-12) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.bio__pill { display: inline-block; border: 1px solid rgba(245, 237, 224, 0.55); color: var(--beige); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 500; background: rgba(0, 0, 0, 0.06); }

/* ============================================================
 * 10. OPINIE — bg dusty-pink saturowany + side stripe burgund
 * ============================================================ */
.opinie { background: var(--dusty-pink); }
.opinie__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.opinie__title { font-family: var(--font-heading); font-size: var(--fs-3xl); color: var(--burgund-dark); text-align: center; margin-bottom: var(--sp-2); font-weight: 600; }
/* Audyt sesja 063 P0/2 + Mieszko 2026-05-10 follow-up: lede ujednolicony z Realizacje intro
   (left-align, max-width 500, fs-xl, margin 0 0 30px) — canonical pattern. */
.opinie__lede { font-family: var(--font-italic-accent); font-style: italic; font-size: var(--fs-xl); color: var(--burgund-dark); text-align: left; margin: 0 0 30px; opacity: 0.9; max-width: 500px; }
/* Audyt sesja 063 P0/4 + extra: jedno pod drugim ZAWSZE (nie 3-col grid) — eliminuje mobile fatigue.
   Mieszko 2026-05-10 follow-up: szerokość matching Realizacje canonical (`.realizacje__grid` 1136px na inner 1200px) — usunięto max-width 720px (było za wąskie vs Realizacje). */
.opinie__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-8); }
.opinie__item { margin: 0; }
/* Audyt sesja 063 P2/1 B: quote glyph „ przed każdym blockquote (visual cue „to opinia") */
.opinie__quote {
	background: rgba(255, 255, 255, 0.18);
	border-left: 4px solid var(--navy-dark);
	padding: var(--sp-6);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin: 0;
	position: relative;
}
/* Mieszko 2026-05-10 follow-up rev2: glyph 5rem ABOVE blockquote (top -3rem) + p padding-top 3rem
   = glyph w pełni nad tekstem, zero overlap z pierwszą literą. */
.opinie__quote::before {
	content: "„";
	position: absolute;
	top: -3rem;
	left: 0.75rem;
	font-family: var(--font-heading);
	font-size: 5rem;
	color: var(--burgund-dark);
	line-height: 1;
	opacity: 0.4;
	pointer-events: none;
}
.opinie__quote p { font-family: var(--font-body); font-style: italic; font-size: var(--fs-md); font-weight: 500; color: var(--burgund-dark); margin: 0 0 var(--sp-4); line-height: 1.7; padding-top: 3rem; }
/* Mieszko 2026-05-10: <strong> w testimonialach analogicznie do .bio__body strong — subtle underline.
   Iteracja kolor: side-by-side 10 wariantów (opinie-underline-colors-2026-05-10.html) → wybór #4 dusty-pink-dark 0.7α (tone-on-bg dusty-pink). NIE amber (zbyt mocne na pink bg jak w Bio na navy). */
.opinie__quote strong {
	font-weight: 500;
	font-size: 1em;
	text-decoration: underline;
	text-decoration-color: rgba(166, 110, 104, 0.7);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.opinie__cite { display: block; font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: var(--fs-sm); color: var(--navy-dark); }

/* ============================================================
 * 11. USŁUGI — bg beige + 3 hero-cards + accordion + amber divider
 * ============================================================ */
/* Iter 9 audyt sesja 063 (2026-05-10): rev11 — h2 "Moje usługi", 4 hero-cards, accordion-grid 3-col cards, banner grid 8 ikon, Service[] do wp_head functions.php. */
.uslugi { background: var(--beige); }
.uslugi__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.uslugi__title { font-family: var(--font-heading); font-size: var(--fs-3xl); color: var(--navy); text-align: center; margin-bottom: var(--sp-12); font-weight: 700; }
/* Iter 9.3 (Mieszko 2026-05-10): margin-bottom hero = accordion gap → równa odległość row 1/2 */
.uslugi__hero-cards { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (min-width: 768px) { .uslugi__hero-cards { grid-template-columns: repeat(3, 1fr); } }
.uslugi__card { background: var(--white); padding: var(--sp-6); border-radius: var(--radius-md); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); border-top: 4px solid var(--navy); }
.uslugi__card--featured { border-top-color: var(--amber); }
.uslugi__card-title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 500; color: var(--navy); margin-bottom: var(--sp-3); }
.uslugi__card-desc { color: var(--text); font-size: var(--fs-base); margin: 0; line-height: 1.6; }
/* Accordion grid 3-col (Iter 9.2+9.3 — Mieszko 2026-05-10: subtle + desktop content always visible opacity 0.5 → hover/open full + większy odstęp przed banner) */
.uslugi__accordion-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-24); }
@media (min-width: 768px) { .uslugi__accordion-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.uslugi__details { background: var(--white); border-radius: var(--radius-sm); padding: var(--sp-4); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); border-top: 3px solid transparent; transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.uslugi__details[open] { border-top-color: var(--navy); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.uslugi__details summary { cursor: pointer; font-family: var(--font-heading); font-weight: 500; color: var(--navy); font-size: var(--fs-xl); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); outline: none; }
.uslugi__details summary::-webkit-details-marker { display: none; }
/* Iter 9.4 (Mieszko 2026-05-10): browser default focus ring (cyan) usunięty — accessibility zachowana przez subtle bg highlight */
.uslugi__details summary:focus-visible { background: var(--beige-light); border-radius: var(--radius-sm); }
.uslugi__details-title { flex: 1; }
.uslugi__details-arrow { color: var(--burgund); font-size: 1.3rem; transition: transform var(--transition-base), opacity var(--transition-base); display: inline-block; opacity: 0.4; }
.uslugi__details:hover .uslugi__details-arrow { opacity: 0.8; }
.uslugi__details[open] .uslugi__details-arrow { transform: rotate(90deg); opacity: 1; }
.uslugi__details p { margin: var(--sp-3) 0 0; color: var(--text); font-size: var(--fs-base); line-height: 1.6; padding-top: var(--sp-3); border-top: 1px solid rgba(51, 84, 106, 0.08); }

/* Desktop — JS row behavior (Iter 10.1 Mieszko 2026-05-10): default wszystkie zwinięte, klik 1 → cały row open (active full + sąsiednie opacity 0.6 ghosted). */
@media (min-width: 768px) {
	/* [open] not active = ghosted sąsiad w aktywnym row */
	.uslugi__details[open]:not(.uslugi__details--active) > p { opacity: 0.6; transition: opacity var(--transition-base); }
	.uslugi__details[open]:not(.uslugi__details--active) { border-top-color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); }
	.uslugi__details[open]:not(.uslugi__details--active) .uslugi__details-arrow { transform: none; opacity: 0.4; }
	/* Hover na ghosted [open] sąsiada → wzmocnij do full */
	.uslugi__details[open]:not(.uslugi__details--active):hover > p { opacity: 1; }
	.uslugi__details[open]:not(.uslugi__details--active):hover { border-top-color: var(--navy); }
	/* Active (klikniety) = full highlight */
	.uslugi__details--active > p { opacity: 1; transition: opacity var(--transition-base); }
	.uslugi__details--active { border-top-color: var(--navy); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
	.uslugi__details--active .uslugi__details-arrow { transform: rotate(90deg); opacity: 1; }
}

/* CTA block (Iter 10.2 — V2 split photo + CTA "Porozmawiajmy") — wstawiony MIĘDZY accordion-grid a banner specjalistów */
.uslugi__cta-block { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--navy); margin: 0 auto var(--sp-12); overflow: hidden; display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .uslugi__cta-block { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 100vh; } }
.uslugi__cta-photo { aspect-ratio: 4/3; overflow: hidden; }
@media (min-width: 700px) { .uslugi__cta-photo { aspect-ratio: auto; height: 100%; } }
.uslugi__cta-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uslugi__cta-content { padding: var(--sp-8) var(--sp-8); display: flex; flex-direction: column; justify-content: center; background: var(--beige-light); }
@media (min-width: 700px) { .uslugi__cta-content { padding: var(--sp-10, 2.5rem) var(--sp-10, 2.5rem); } }
.uslugi__cta-title { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--burgund); margin: 0 0 var(--sp-3); font-weight: 600; line-height: 1.2; }
.uslugi__cta-desc { font-family: var(--font-body); color: var(--navy); font-size: var(--fs-base); margin: 0 0 var(--sp-6); line-height: 1.6; }
.uslugi__cta-button { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); background: var(--navy); color: var(--beige); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); border-radius: var(--radius-sm); align-self: flex-start; transition: background var(--transition-base); }
.uslugi__cta-button:hover { background: var(--burgund); color: var(--white); }
.uslugi__cta-button span { transition: transform var(--transition-base); }
.uslugi__cta-button:hover span { transform: translateX(3px); }

/* Banner specjalistów — V2 wybrany 2-col split (Mieszko 2026-05-10 Iter 9.2): intro lewy + lista vertical 2-col z amber dash */
/* Banner specjalistów — Wariant D-underline (sesja 076 2026-05-27): beige-light bg + amber border-bottom pod pozycjami, bez em-dash markers. Editorial directory feel. */
.uslugi__banner { background: var(--beige-light); padding: var(--sp-10, 2.5rem) var(--sp-8); border-radius: var(--radius-md); margin: 0 auto; max-width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; }
@media (min-width: 700px) { .uslugi__banner { grid-template-columns: 1fr 1fr; gap: var(--sp-12); padding: var(--sp-12) var(--sp-10, 2.5rem); } }
.uslugi__banner-head { text-align: left; }
.uslugi__banner-title { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--burgund); margin: 0 0 var(--sp-3); font-weight: 600; line-height: 1.2; }
.uslugi__banner-intro { font-family: var(--font-italic-accent); font-style: italic; color: var(--navy); font-size: var(--fs-md); margin: 0; opacity: 0.9; line-height: 1.5; }
.uslugi__banner-list-vertical { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--sp-8); }
.uslugi__banner-list-vertical li { color: var(--navy); padding: 10px 0; font-family: var(--font-body); font-size: var(--fs-base); break-inside: avoid; border-bottom: 1px solid rgba(213, 127, 42, 0.35); }
.divider-amber-stripe { display: block; width: 80px; height: 3px; background: var(--amber); border: none; margin: var(--sp-12) auto 0; }

/* ============================================================
 * 12. FAQ — bg beige-light + 13 details/summary
 * ============================================================ */
.faq { background: var(--beige-light); }
.faq__inner { max-width: 880px; margin: 0 auto; padding: 0 var(--container-padding); }
.faq__title { font-family: var(--font-heading); font-size: var(--fs-3xl); color: var(--navy); text-align: center; margin-bottom: var(--sp-3); font-weight: 700; }
.faq__intro { text-align: center; color: var(--text); font-size: var(--fs-md); margin-bottom: var(--sp-12); }
.faq__list { display: grid; gap: var(--sp-3); }
/* P1/11 fix Mieszko 2026-05-07: 13 Q+A pogrupowane w 6 kategorii */
.faq__category {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	color: var(--burgund);
	margin: var(--sp-8) 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid rgba(122, 40, 48, 0.18);
	font-weight: 600;
}
.faq__category:first-of-type { margin-top: 0; }
.faq__item { background: var(--white); border-radius: var(--radius-md); border: 1px solid rgba(51, 84, 106, 0.12); transition: background var(--transition-base); }
.faq__item:hover { background: var(--dusty-pink-light); }
.faq__item[open] { background: var(--white); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }
.faq__item summary { cursor: pointer; padding: var(--sp-4) var(--sp-6); font-family: var(--font-body); font-weight: 600; color: var(--navy); font-size: var(--fs-md); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); outline: none; }
.faq__item summary::-webkit-details-marker { display: none; }
/* Iter 9.6 (Mieszko 2026-05-10): browser default focus ring (cyan) usunięty + accessibility przez subtle bg highlight (jak .uslugi__details) */
.faq__item summary:focus-visible { background: var(--beige-light); border-radius: var(--radius-md); }
.faq__item summary::after { content: '⌃'; color: var(--burgund); transform: rotate(180deg); transition: transform var(--transition-base); flex: none; font-size: var(--fs-xl); }
.faq__item[open] summary::after { transform: rotate(0); }
.faq__answer { padding: 0 var(--sp-6) var(--sp-6); color: var(--text); font-size: var(--fs-base); line-height: 1.7; }
.faq__answer p { margin-bottom: var(--sp-3); }
.faq__inline-cta a { color: var(--burgund); font-weight: 600; border-bottom: 2px solid var(--amber); padding-bottom: 1px; }
.faq__inline-cta a:hover { color: var(--burgund-dark); }

/* ============================================================
 * 13. KONTAKT — bg navy + 4 CTA + form bg white
 * ============================================================ */
.kontakt { background: var(--navy); color: var(--beige); }
.kontakt__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.kontakt__title { font-family: var(--font-heading); font-size: var(--fs-3xl); color: var(--beige); text-align: center; margin-bottom: var(--sp-16); font-weight: 600; } /* sesja 076 2026-05-27: 48px → 64px (kontakt bez lede pod H2, gap H2→CTA-grid wyglądał naciśnięty vs inne sekcje z intro/lede) */
.kontakt__cta-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-16); }
@media (min-width: 768px) { .kontakt__cta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kontakt__cta-grid { grid-template-columns: repeat(4, 1fr); } }
.kontakt__cta {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-6);
	background: rgba(237, 228, 211, 0.08);
	border: 1px solid rgba(237, 228, 211, 0.2);
	border-radius: var(--radius-md);
	text-align: center;
	color: var(--beige);
	transition: all var(--transition-base);
}
.kontakt__cta:hover { background: rgba(237, 228, 211, 0.16); color: var(--white); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .kontakt__cta { transition: none; } .kontakt__cta:hover { transform: none; } }
.kontakt__cta--whatsapp { border-color: var(--whatsapp); }
/* Iter 12 (Mieszko 2026-05-11): emoji → inline SVG outline (Lucide-style) currentColor matching brand */
.kontakt__cta-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--amber); transition: color var(--transition-base), transform var(--transition-base); margin-bottom: var(--sp-3); }
.kontakt__cta-icon svg { display: block; stroke-width: 2; } /* Iter 12.3: pogrub outline 1.5→2 dla wyrównania visual weight z WA filled */
.kontakt__cta:hover .kontakt__cta-icon { color: var(--beige); transform: scale(1.1); }
.kontakt__cta-label { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; }
.kontakt__cta-value { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--dusty-pink-light); letter-spacing: 0.05em; }

/* Iter 6 (2026-05-09): Kontakt split layout — photo lewa kolumna + form prawa kolumna (analog Kylos staging). Mobile: stacked. */
.kontakt__form-wrap { display: grid; gap: var(--sp-8); max-width: 1100px; margin: 0 auto; align-items: stretch; }
@media (min-width: 1024px) { .kontakt__form-wrap { grid-template-columns: 1fr 1fr; gap: var(--sp-12); } }
.kontakt__photo { border-radius: var(--radius-md); overflow: hidden; background: var(--terracotta-dark); }
.kontakt__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; aspect-ratio: 4 / 5; }
@media (min-width: 1024px) { .kontakt__photo img { aspect-ratio: auto; } }
.kontakt__form { background: var(--white); color: var(--text); padding: var(--sp-8); border-radius: var(--radius-md); }
.kontakt__form-title { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--navy); margin-bottom: var(--sp-6); text-align: center; }
.kontakt__form .ff-el-form-control { width: 100%; padding: var(--sp-3); border: 1px solid var(--border-new); border-radius: var(--radius-sm); font: inherit; background: var(--white); }
.kontakt__form label { font-weight: 600; color: var(--navy); margin-bottom: var(--sp-2); display: block; }
.kontakt__form .ff-btn-submit { background: var(--burgund); color: var(--white); border: 0; padding: var(--sp-3) var(--sp-8); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: background var(--transition-base); }
.kontakt__form .ff-btn-submit:hover { background: var(--burgund-dark); }

/* ============================================================
 * 14. FOOTER — bg navy-dark + Schema RealEstateAgent
 * ============================================================ */
.bv2-footer { background: var(--navy-dark); color: var(--beige); padding: var(--sp-16) var(--container-padding); text-align: center; }
.bv2-footer__inner { max-width: var(--container-max); margin: 0 auto; display: grid; gap: var(--sp-8); }
.bv2-footer__line { color: var(--beige); font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.bv2-footer__line:first-child { font-weight: 600; font-size: var(--fs-md); }
.bv2-footer__copyright { font-size: var(--fs-sm); color: rgba(237, 228, 211, 0.7); margin-top: var(--sp-4); }
.bv2-footer__social-list { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: var(--sp-6); }
.bv2-footer__social-link { color: var(--beige); font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: 0.05em; transition: color var(--transition-base); }
.bv2-footer__social-link:hover { color: var(--amber); }
.bv2-footer__legal { font-size: var(--fs-sm); }
.bv2-footer__legal-link { color: var(--beige); border-bottom: 1px dotted rgba(237, 228, 211, 0.4); }
.bv2-footer__legal-link:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ============================================================
 * 15. FAB Universal Contact — desktop+mobile, prawy dolny róg, horizontal expand do lewej (Iter 14.1 — Mieszko 2026-05-11)
 * ============================================================ */
.fab-wrap { position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: 999; display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); }
.fab { width: 56px; height: 56px; border-radius: var(--radius-pill); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--beige), 0 4px 16px rgba(0, 0, 0, 0.2); border: 0; cursor: pointer; transition: transform var(--transition-base), background var(--transition-base); } /* sesja 076 2026-05-28: ring beige 2px (max visible kontrast vs burgund FAB, Mieszko: zmiana z navy-dark na beige) */
.fab--contact { background: var(--burgund); color: var(--white); }
.fab--contact:hover { background: var(--burgund-dark); transform: scale(1.05); }
.fab__icon-close { display: none; }
.fab-wrap[data-open="true"] .fab__icon-open { display: none; }
.fab-wrap[data-open="true"] .fab__icon-close { display: block; }

/* Menu items — Iter 14.3 (Mieszko 2026-05-11): KAŻDY item startuje w pozycji FAB (overlay) i wybiega do lewej.
   Pozycja FAB = lewa krawędź items. Per-item translateX = jego offset od FAB (FAB 56px + gap 12px + sąsiad 48px+12px ...). */
.fab-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; gap: var(--sp-3); align-items: center; pointer-events: none; }
.fab-wrap[data-open="true"] .fab-menu { pointer-events: auto; }
.fab-menu__item { opacity: 0; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; }
/* Default (closed) — każdy item przesunięty do prawej (na FAB). Iter 14.4: wrap=row (FAB right), ul=row-reverse → tel(nth-1) najbliżej FAB.
   Math: FAB 56 + gap 12 = 68 (tel), +60 per kolejny */
.fab-menu__item:nth-child(1) { transform: translateX(68px); }
.fab-menu__item:nth-child(2) { transform: translateX(128px); }
.fab-menu__item:nth-child(3) { transform: translateX(188px); }
.fab-menu__item:nth-child(4) { transform: translateX(248px); }
/* Open — wszystkie wracają na pozycję 0 */
.fab-wrap[data-open="true"] .fab-menu__item { transform: translateX(0); opacity: 1; }
/* Stagger — najbliższy FAB (tel = nth-1) pojawia się pierwszy */
.fab-wrap[data-open="true"] .fab-menu__item:nth-child(1) { transition-delay: 0s; }
.fab-wrap[data-open="true"] .fab-menu__item:nth-child(2) { transition-delay: 0.06s; }
.fab-wrap[data-open="true"] .fab-menu__item:nth-child(3) { transition-delay: 0.12s; }
.fab-wrap[data-open="true"] .fab-menu__item:nth-child(4) { transition-delay: 0.18s; }
.fab--mini { width: 48px; height: 48px; background: var(--white); color: var(--burgund); border: 1px solid rgba(122, 40, 48, 0.18); }
.fab--mini:hover { transform: scale(1.08); background: var(--beige); }
.fab--mini.fab--whatsapp { background: var(--whatsapp); color: var(--white); border-color: var(--whatsapp); }
.fab--mini.fab--whatsapp:hover { background: var(--whatsapp-dark); }
@media (prefers-reduced-motion: reduce) { .fab, .fab-menu, .fab-menu__item { transition: none; } .fab:hover, .fab--mini:hover { transform: none; } }

/* ============================================================
 * 15.5 NAV (Iter 15.0 — 2026-05-12 sesja 064)
 * Sticky top nav z hide-on-scroll-down, mobile overlay drawer ≥900px, scroll-spy active.
 * Brand mark: SVG logo lewo. Desktop: 5 anchor linków (Metoda/Realizacje/O mnie/Opinie/Kontakt).
 * Bez CTA w nav — FAB Universal Contact (Iter 14) pokrywa multi-channel.
 * ============================================================ */
/* UWAGA: nie używamy `transform` na .bv2-nav — transform tworzy containing block
   dla position:fixed potomków (CSS spec), co łamałoby fullscreen drawer.
   Hide-on-scroll przez `top: -100px` zamiast translateY. */
.bv2-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--beige);
	border-bottom: 1px solid rgba(36, 57, 74, 0.08);
	transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s;
}
.bv2-nav[data-state="hidden"] {
	top: -100px;
}
.bv2-nav[data-scrolled="true"] {
	box-shadow: 0 1px 12px rgba(36, 57, 74, 0.06);
}
.bv2-nav__inner {
	max-width: var(--container-max); /* sesja 076 2026-05-27: sync z global container 1200px (było 1400px), aligned logo z hero left edge */
	margin: 0 auto;
	padding: 0.875rem var(--container-padding); /* sesja 076 2026-05-27: horizontal padding sync z global (było 1.5rem stałe) */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.bv2-nav__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}
.bv2-nav__brand img {
	display: block;
	height: 54px;
	width: auto;
	transition: opacity 0.2s;
}
@media (min-width: 900px) {
	.bv2-nav__brand img {
		height: 62px;
	}
}
.bv2-nav__brand:hover img,
.bv2-nav__brand:focus-visible img {
	opacity: 0.78;
}
.bv2-nav__primary {
	display: none;
}
.bv2-nav__list {
	display: flex;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 1200px) {
	.bv2-nav__list {
		gap: 2rem;
	}
}
.bv2-nav__list a {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--navy-dark);
	text-decoration: none;
	letter-spacing: 0.01em;
	padding: 0.5rem 0;
	position: relative;
	transition: color 0.2s;
}
.bv2-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--terracotta);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.bv2-nav__list a:hover,
.bv2-nav__list a:focus-visible,
.bv2-nav__list a[data-active="true"] {
	color: var(--terracotta-dark);
}
.bv2-nav__list a:hover::after,
.bv2-nav__list a:focus-visible::after,
.bv2-nav__list a[data-active="true"]::after {
	transform: scaleX(1);
}

.bv2-nav__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--navy-dark);
	border-radius: 4px;
	transition: background 0.2s;
}
.bv2-nav__toggle:hover,
.bv2-nav__toggle:focus-visible {
	background: rgba(36, 57, 74, 0.06);
}
.bv2-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
	transform-origin: center;
}
.bv2-nav__toggle[aria-expanded="true"] .bv2-nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.bv2-nav__toggle[aria-expanded="true"] .bv2-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}
.bv2-nav__toggle[aria-expanded="true"] .bv2-nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.bv2-nav__drawer {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: var(--beige);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s, visibility 0s linear 0.32s;
	padding: 4.5rem 1.5rem 2rem;
}
.bv2-nav__drawer-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--navy-dark);
	border-radius: 50%;
	transition: background 0.2s, color 0.2s;
	font-size: 0;
}
.bv2-nav__drawer-close svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}
.bv2-nav__drawer-close:hover,
.bv2-nav__drawer-close:focus-visible {
	background: rgba(36, 57, 74, 0.08);
	color: var(--terracotta-dark);
}
.bv2-nav__drawer[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.32s, visibility 0s;
}
.bv2-nav__drawer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	text-align: center;
}
.bv2-nav__drawer-list a {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 4.5vw, 2rem);
	font-weight: 500;
	color: var(--navy-dark);
	text-decoration: none;
	padding: 0.5rem 1rem;
	display: inline-block;
	position: relative;
	transition: color 0.2s;
}
.bv2-nav__drawer-list a::after {
	content: "";
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0.25rem;
	height: 2px;
	background: var(--terracotta);
	transform: scaleX(0);
	transition: transform 0.28s;
}
.bv2-nav__drawer-list a:hover,
.bv2-nav__drawer-list a:focus-visible {
	color: var(--terracotta-dark);
}
.bv2-nav__drawer-list a:hover::after,
.bv2-nav__drawer-list a:focus-visible::after {
	transform: scaleX(1);
}

/* Body offset dla fixed nav + scroll-padding dla anchor jumps (browser native + JS smooth) */
html {
	scroll-padding-top: 80px;
}
body {
	padding-top: 76px;
}
@media (min-width: 900px) {
	body {
		padding-top: 84px;
	}
}

/* Desktop ≥900px: primary nav widoczna, hamburger schowany */
@media (min-width: 900px) {
	.bv2-nav__primary {
		display: block;
	}
	.bv2-nav__toggle {
		display: none;
	}
	.bv2-nav__drawer {
		display: none;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bv2-nav,
	.bv2-nav__list a::after,
	.bv2-nav__drawer,
	.bv2-nav__toggle-bar {
		transition: none;
	}
}

/* Print: ukryj nav */
@media print {
	.bv2-nav { display: none; }
	body { padding-top: 0; }
}

/* Footer logo (Iter 15.2 — 2026-05-12) */
.bv2-footer__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	margin-bottom: 1.5rem;
	transition: opacity 0.2s;
}
.bv2-footer__brand img {
	display: block;
	height: 68px;
	width: auto;
	/* Logo SVG ma fill navy (#33546A) — na navy-dark footer tle używamy filter invert
	   żeby logo było czytelne (beige tonal). */
	filter: brightness(0) invert(1) opacity(0.92);
	transition: opacity 0.2s;
}
.bv2-footer__brand:hover img,
.bv2-footer__brand:focus-visible img {
	opacity: 0.7;
}
@media (min-width: 768px) {
	.bv2-footer__brand img {
		height: 76px;
	}
}

/* ============================================================
 * 16. WP Native overrides
 * ============================================================ */
.wp-site-blocks > main { max-width: none; padding: 0; }
.wp-block-template-skip-link { display: none; }

/* ============================================================
 * 17. PRINT
 * ============================================================ */
@media print {
	.fab, .skip-to-content { display: none; }
	body { background: white; color: black; }
	.hero, .rozumiem-obawy__akt, .metoda, .realizacje, .bio, .opinie, .uslugi, .faq, .kontakt, .bv2-footer {
		background: white !important;
		color: black !important;
		page-break-inside: avoid;
	}
}