/* =========================================================
   Linda Parys — design tokens & base
   ========================================================= */
:root{
	--lp-color-cream:#FEFBF6;
	--lp-color-white:#FFFFFF;
	--lp-color-ink:#0F0F0F;
	--lp-color-purple-deep-hover:#39156F;
	--lp-color-purple-deep:#693B85;
	--lp-color-purple-dark:#39156F;
	--lp-color-lime:#B7F441;
	/* Z brandingu, trzymany na przyszłe akcenty — świadomie nieużywany w widokach. */
	--lp-color-magenta:#EA1594;

	--lp-font-serif:'Lora', Georgia, serif;
	--lp-font-sans:'Lato', system-ui, sans-serif;

	/* Ptaszek list „dla kogo" — maska, nie znak w treści. */
	--lp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

	--lp-container: 1200px;
	--lp-gutter: clamp(18px, 3vw, 36px);
	/* Odstęp pod hero na mobile; pasek kotwic kasuje go ujemnym marginesem. */
	--lp-hero-gap: 16px;
	--lp-header-h: 60px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	background:var(--lp-color-cream);
	color:var(--lp-color-ink);
	font-family:var(--lp-font-sans);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	padding-top:var(--lp-header-h);
	/* `clip`, not `hidden`: it stops the off-canvas mobile menu from creating a
	   horizontal scrollbar without turning body into a scroll container (which
	   would break the hero's position:sticky pin). */
	overflow-x:clip;
}
body.lp-landing-header{padding-top:64px}

img{max-width:100%;display:block;height:auto}
a{color:var(--lp-color-ink);text-decoration:none}
a:hover{color:var(--lp-color-purple-deep)}
::selection{background:var(--lp-color-purple-deep);color:var(--lp-color-cream)}

h1,h2,h3,h4{font-family:var(--lp-font-serif);font-weight:500;margin:0 0 .5em;line-height:1.15}
h1{font-size:clamp(2.5rem,7vw,5.5rem)}
.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}
.lp-skip-link{
	position:absolute;top:-999px;left:0;z-index:300;
	padding:14px 22px;background:var(--lp-color-ink);color:var(--lp-color-cream)!important;
	font:700 12px/1 var(--lp-font-sans);text-transform:uppercase;letter-spacing:.1em;
}
.lp-skip-link:focus{top:0}
h2.lp-h2,.lp-band__heading{font-size:clamp(1.75rem,4vw,3rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.7rem)}
p{margin:0 0 1em}

/* Etykieta sekcji (Współpraca, Opinie) — z zapasem miejsca pod spodem. */
.lp-section-label{
	margin:0 0 clamp(40px,5vw,72px);text-align:center;
	font:700 14px/1 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase;
}

.lp-eyebrow{
	font:700 11px/1 var(--lp-font-sans);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--lp-color-purple-deep);
	margin:0 0 .75em;
}
.lp-color-cream .lp-eyebrow,
.lp-color-cream{color:var(--lp-color-ink)}

.lp-container{
	max-width:var(--lp-container);
	margin:0 auto;
	padding:0 var(--lp-gutter);
}

.lp-section{padding-block:clamp(48px,8vw,96px)}

.lp-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:var(--lp-color-purple-deep);
	color:var(--lp-color-cream);
	font:700 11px/1 var(--lp-font-sans);
	letter-spacing:.12em;
	text-transform:uppercase;
	padding:16px 28px;
	border-radius:999px;
	border:none;
	cursor:pointer;
	transition:background .25s ease,color .25s ease,transform .25s ease;
}
.lp-btn:hover{background:var(--lp-color-purple-deep-hover);color:var(--lp-color-cream);transform:translateY(-1px)}
.lp-btn--block{width:100%;justify-content:center}
/* Główne CTA landingu — ten sam kształt, o stopień mocniejszy. */
.lp-btn--lg{padding:21px 40px;font-size:12.5px;letter-spacing:.14em}
.lp-btn--outline{background:transparent;border:1.5px solid currentColor;color:var(--lp-color-ink)}
/* CTA w nagłówku landingu stoi w jednym wierszu z logo. Na telefonie zostaje
   po nim ~221 px przy 375 px ekranu, a pełne "Sprawdź dofinansowanie"
   potrzebuje 243 px — łamało się na dwa wiersze i rozpychało pasek. */
.lp-header-cta__short{display:none}
@media (max-width:600px){
	.lp-header-cta__full{display:none}
	.lp-header-cta__short{display:inline}
	/* Węższe boki, żeby krótsza etykieta zmieściła się w jednym wierszu
	   także przy 320 px, gdzie na przycisk zostaje 166 px. */
	.lp-header-cta{padding:15px 18px;white-space:nowrap}
}

/* =========================================================
   Header / primary nav
   ========================================================= */
/* Nagłówek jest position:fixed, więc kotwica bez tego lądowałaby pod nim —
   dotyczy tak samo skoków po #hash, jak i scrollIntoView() z podmenu.
   Mocniejszy selektor .lp-about-content > [id] niżej zostaje bez zmian. */
main [id]{scroll-margin-top:var(--lp-header-h)}
@media (max-width:900px){
	/* Na stronach oferty pod nagłówkiem stoi jeszcze przyklejony pasek kotwic.
	   Jego wysokość zależy od liczby i długości etykiet, więc mierzy ją main.js
	   i podaje tutaj; 44px to sensowny zapas, zanim skrypt zdąży policzyć. */
	.lp-offer-layout [id]{scroll-margin-top:calc(var(--lp-header-h) + var(--lp-anchor-nav-h,44px))}
}

.lp-header{
	position:fixed;top:0;left:0;right:0;z-index:200;
	background:var(--lp-color-cream);
	height:var(--lp-header-h);
	border-bottom:1px solid rgba(15,15,15,.08);
}
.lp-header__inner{
	display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);
	height:100%;padding:0 var(--lp-gutter);
}
.lp-logo{display:block;width:clamp(104px,10vw,128px);flex:none;line-height:0}
.lp-logo svg{width:100%;height:auto;fill:var(--lp-color-ink)}

.lp-nav{display:none}
@media (min-width:900px){
	.lp-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex:1;min-width:0;list-style:none;margin:0;padding:0}
	.lp-nav > li{position:relative;display:flex;align-items:center;gap:8px;flex:none}
	.lp-nav > li.lp-nav__dash{flex:1 1 0%;min-width:24px;height:0;border-top:1px solid rgba(15,15,15,.3);align-self:center}
	.lp-nav a{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
	.lp-nav__icon{display:flex;flex:none;color:var(--lp-color-purple-deep)}
	.lp-nav__icon svg{flex:none}
	.lp-nav li.current-menu-item > a,
	.lp-nav li.current_page_item > a{color:var(--lp-color-purple-deep)}
}

.lp-menu-toggle{
	display:flex;flex-direction:column;gap:5px;
	margin-left:auto;background:none;border:none;padding:8px;cursor:pointer;
}
@media (min-width:900px){.lp-menu-toggle{display:none}}

/* Przełącznik języka: na telefonie przejmuje margin-left:auto od przycisku
   menu, żeby oba stały razem przy prawej krawędzi. */
.lp-lang{flex:none;margin-left:auto;padding:8px 4px;font:700 12px/1 var(--lp-font-sans);letter-spacing:.14em;color:var(--lp-color-ink)}
.lp-lang:hover{color:var(--lp-color-purple-deep)}
.lp-lang + .lp-menu-toggle{margin-left:0}
@media (min-width:900px){.lp-lang{margin-left:0}}
.lp-menu-toggle span{display:block;width:24px;height:1.5px;background:var(--lp-color-ink)}

.lp-header__progress-track{position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent}
.lp-header__progress{height:1px;width:0;background:var(--lp-color-purple-deep)}

.lp-mobile-menu{
	position:fixed;inset:0;z-index:300;
	background-image:var(--lp-menu-image);background-size:cover;background-position:center center;
	display:flex;flex-direction:column;justify-content:center;
	padding:clamp(28px,7vw,60px);
	transform:translateX(100%);transition:transform .4s cubic-bezier(.19,1,.22,1);
	overflow-y:auto;
}
.lp-mobile-menu.is-open{transform:translateX(0)}
.lp-mobile-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(22px,5vw,38px)}
/* min kept low enough that the longest label ("Eventy i konferencje")
   still fits on narrow phones instead of running past the edge. */
.lp-mobile-menu a{font:400 clamp(28px,9vw,60px)/1.05 var(--lp-font-serif);color:var(--lp-color-lime);overflow-wrap:break-word}
.lp-mobile-menu a:hover{color:var(--lp-color-cream)}
.lp-mobile-menu .lp-mobile-menu__lang{margin-top:clamp(28px,6vw,48px);font:700 14px/1 var(--lp-font-sans);letter-spacing:.14em}
.lp-mobile-menu__logo{
	position:absolute;top:0;left:clamp(18px,3vw,36px);height:60px;
	display:flex;align-items:center;width:clamp(104px,10vw,128px);pointer-events:none;
}
.lp-mobile-menu__logo svg{width:100%;height:auto;fill:var(--lp-color-cream)}
.lp-mobile-close{position:absolute;top:0;right:14px;height:60px;display:flex;align-items:center;background:none;border:none;cursor:pointer;padding:8px;color:var(--lp-color-cream)}
@media (min-width:900px){.lp-mobile-menu,.lp-menu-toggle{display:none}}

/* =========================================================
   Footer
   ========================================================= */
.lp-footer{
	background:var(--lp-color-ink);color:var(--lp-color-cream);
	padding:clamp(48px,7vw,86px) clamp(22px,5vw,72px) clamp(26px,3vw,40px);
	font-family:var(--lp-font-sans);
}
.lp-footer > .lp-container{max-width:1180px;padding:0}
.lp-footer a{color:var(--lp-color-cream)}
.lp-footer a:hover{color:var(--lp-color-purple-deep)}

.lp-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(28px,4vw,56px)}
/* Extra breathing room between a column's title and its links. */
.lp-footer-col__title{display:block;margin:0 0 20px;font:700 11px/1 var(--lp-font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--lp-color-cream)}
.lp-footer-col__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lp-footer-col__links a{color:rgba(254,251,246,.72);font:700 11px/1.3 var(--lp-font-sans);letter-spacing:.1em;text-transform:uppercase}

.lp-footer-divider{height:1px;background:rgba(254,251,246,.18)}
.lp-footer-grid + .lp-footer-divider{margin:clamp(34px,5vw,60px) 0 clamp(20px,3vw,28px)}
.lp-footer-row + .lp-footer-divider{margin:clamp(20px,3vw,28px) 0}

/* Secondary links and the social icons share one row — icons sit at the
   right on desktop and wrap underneath on narrow screens. */
.lp-footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,34px)}
.lp-footer-secondary{flex:1 1 auto}
.lp-footer-secondary__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px)}
.lp-footer-secondary a{color:rgba(254,251,246,.8);font:400 12px/1 var(--lp-font-sans)}
.lp-footer-social{display:flex;gap:16px;align-items:center}
.lp-footer-social a{display:block;line-height:0;color:rgba(254,251,246,.8)}

.lp-footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.lp-footer-bottom p{margin:0;font:400 10px/1.6 var(--lp-font-sans);color:rgba(254,251,246,.5)}
/* Prawa kolumna stopki: nota o cookies w jednej linii, pod nią SSL z kłódką.
   Bez max-width — to ono łamało notę na dwie linie, mimo że w wierszu zostaje
   jeszcze ponad 900px wolnego miejsca. */
.lp-footer-legal{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right}
.lp-footer-ssl{display:flex;align-items:center;gap:6px}
/* Kłódka ma trzymać linię bazową tekstu, nie pudełko wiersza. */
.lp-footer-ssl svg{flex:none;display:block}
@media (max-width:640px){
	/* Wąska kolumna: nota i tak się złamie, więc równamy wszystko do lewej. */
	.lp-footer-legal{align-items:flex-start;text-align:left}
}

/* =========================================================
   Colour bands / CTA
   ========================================================= */
.lp-band{width:100%}
.lp-band__inner{padding:clamp(48px,8vw,88px) var(--lp-gutter);text-align:center;max-width:820px;margin:0 auto}
.lp-band--image{background-size:cover;background-position:center}
.lp-text-ink{color:var(--lp-color-ink)}
.lp-text-cream{color:var(--lp-color-cream)}
.lp-text-cream .lp-eyebrow{color:var(--lp-color-lime)}

/* =========================================================
   FAQ accordion
   ========================================================= */
.lp-faq{max-width:760px;margin:0 auto}
.lp-faq__item{border-bottom:1px solid rgba(15,15,15,.15)}
.lp-faq__question{
	width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
	background:none;border:none;text-align:left;cursor:pointer;
	padding:22px 0;font:500 18px/1.4 var(--lp-font-serif);color:var(--lp-color-ink);
}
.lp-faq__question svg{flex:none;transition:transform .25s ease}
.lp-faq__question[aria-expanded="true"] svg{transform:rotate(180deg)}
.lp-faq__answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.lp-faq__answer-inner{padding:0 0 22px;color:rgba(15,15,15,.75);font-size:15px}

/* =========================================================
   Pricing cards
   ========================================================= */
.lp-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
@media (max-width:900px){.lp-price-grid{grid-template-columns:1fr}}
.lp-price-card{
	position:relative;background:var(--lp-color-cream);color:var(--lp-color-ink);
	border-radius:20px;padding:36px 28px;display:flex;flex-direction:column;gap:18px;
}
.lp-price-card--highlight{background:var(--lp-color-white);box-shadow:0 24px 60px rgba(15,15,15,.18);transform:scale(1.03);border:2px solid var(--lp-color-purple-deep)}
.lp-price-card__badge{
	position:absolute;top:-14px;left:50%;transform:translateX(-50%);
	background:var(--lp-color-purple-deep);color:var(--lp-color-cream);
	font:700 10px/1 var(--lp-font-sans);letter-spacing:.1em;text-transform:uppercase;
	padding:8px 16px;border-radius:999px;white-space:nowrap;
}
.lp-price-card__name{margin:6px 0 0}
.lp-price-card__price{font:500 40px/1 var(--lp-font-serif);margin:0}
.lp-price-card__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;font-size:14px}
.lp-price-card__features li{display:flex;gap:10px;align-items:flex-start}
.lp-price-card__features svg{flex:none;margin-top:3px;color:var(--lp-color-purple-deep)}
/* Opis karty przychodzi z edytora. Akapit pogrubiony w całości czyta się
   jako linijka „co zawiera" — to ona odróżnia warianty na pierwszy rzut oka
   — a zwykłe akapity jako opis pod nią. Przeglądarka bez :has() pokaże ją
   po prostu jako pogrubiony akapit. */
.lp-price-card__body{display:flex;flex-direction:column;gap:10px;flex:1}
.lp-price-card__body p{margin:0;font-size:14px;line-height:1.65;color:rgba(15,15,15,.72);text-wrap:pretty}
.lp-price-card__body p:has(> strong:only-child){font-weight:700;color:var(--lp-color-ink);line-height:1.5}
.lp-price-card__body ul{margin:0;padding-left:1.2em;font-size:14px;line-height:1.65;color:rgba(15,15,15,.72)}
/* Nazwa bywa długa („VIP – e-book + Masterclass – indywidualny Brand
   Mentoring"), więc na karcie schodzi o stopień poniżej zwykłego h3. */
.lp-price-card__name{font-size:clamp(1.05rem,1.8vw,1.3rem);text-wrap:pretty}
.lp-price-card__note{font-size:12px;color:rgba(15,15,15,.6)}
/* Wyróżniony wiersz nad przyciskiem: opis (.lp-price-card__body) ma flex:1
   i pochłania różnicę w długości tekstu między kartami, ale to działa tylko
   wtedy, gdy sam wiersz ma zawsze tę samą wysokość — inaczej dłuższy tekst
   (więcej zawiniętych linii) i tak przesuwa swój początek wyżej, bo to on
   rośnie, a nie opis nad nim. Stąd zarezerwowane miejsce na 5 linii: tyle,
   ile zajmuje najdłuższy z trzech wariantów. Redakcja powinna trzymać treść
   w tej granicy (ok. 5 linii przy szerokości karty), żeby start zostawał
   równy. Własny margines na dole to dodatkowy, widoczny odstęp od przycisku
   — osobny od standardowego gapu karty. */
.lp-price-card__note--highlight{
	font:700 15px/1.4 var(--lp-font-sans);color:var(--lp-color-ink);
	min-height:7em;margin:0 0 8px;
}

/* =========================================================
   Testimonial carousel
   ========================================================= */
/* Karty mają biec od krawędzi do krawędzi ekranu, ale pierwsza zaczyna się
   równo z kolumną tekstu — stąd ujemny margines na szerokość okna i padding
   wracający do siatki kontenera. */
.lp-carousel{max-width:none;margin:0;--lp-carousel-gap:24px;--lp-carousel-peek:clamp(40px,6vw,96px)}
.lp-carousel__viewport{
	overflow:hidden;touch-action:pan-y;cursor:grab;
	margin-inline:calc(50% - 50vw);padding-inline:max(var(--lp-gutter),calc(50vw - 50%)) 0;
	padding-block:6px;margin-block:-6px;
}
.lp-carousel__viewport.is-dragging{cursor:grabbing}
.lp-carousel__viewport.is-dragging .lp-carousel__card{transition:none}
/* Ruch prowadzi GSAP, więc bez przejścia CSS (obie warstwy by się biły). */
.lp-carousel__track{display:flex;gap:var(--lp-carousel-gap);align-items:stretch;will-change:transform}
.lp-carousel__card{
	flex:0 0 300px;background:var(--lp-color-cream);color:var(--lp-color-ink);border-radius:20px;
	padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
	transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s ease;
}
.lp-carousel__card:hover{transform:scale(1.028);box-shadow:0 26px 60px rgba(15,15,15,.12)}
/* Desktop: w kadrze stoją dokładnie dwie opinie, trzecia wystaje zza prawej
   krawędzi jako sygnał, że karuzela jedzie dalej. Reszta — po przewinięciu.
   100% to szerokość pasa (track), więc podział działa na każdej szerokości
   okna, a maxIndex() w JS sam policzy z tego liczbę kroków. */
@media (min-width:900px){
	.lp-carousel__card{flex:0 0 calc((100% - var(--lp-carousel-gap) - var(--lp-carousel-peek)) / 2)}
}
.lp-carousel__cat{
	align-self:flex-start;background:rgba(105,59,133,.12);color:var(--lp-color-purple-deep);
	font:700 9px/1 var(--lp-font-sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 13px;border-radius:999px;
}
.lp-carousel__quote{margin:0;flex:1;font:italic 400 clamp(18px,1.5vw,23px)/1.42 var(--lp-font-serif)}
.lp-carousel__author{margin:0;font:700 10px/1 var(--lp-font-sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(15,15,15,.55)}
.lp-carousel__nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,26px);margin-top:clamp(30px,3.4vw,46px)}
.lp-carousel__arrow{
	flex:none;width:clamp(38px,4vw,46px);height:clamp(38px,4vw,46px);padding:0;
	display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5);
	background:transparent;border-radius:50%;cursor:pointer;color:inherit;
}
.lp-carousel__arrow:hover{background:var(--lp-color-purple-deep);border-color:var(--lp-color-purple-deep);color:var(--lp-color-cream)}
.lp-carousel__dots{display:flex;align-items:center;gap:11px}
.lp-carousel__dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.lp-carousel__dot.is-active{background:currentColor}

/* Wariant „zrzuty z rozmów": ta sama karuzela, inna zawartość karty.
   Cytat jest tekstem i może się przelewać, zrzut nie — niesie tekst
   w pikselach, więc powiększony ponad natywny rozmiar robi się nieczytelny.
   Dlatego karta ma stałą szerokość z najszerszego pliku (536 px + 2×12 px
   marginesu), a nie połowę pasa jak przy cytatach. Na desktopie w kadrze
   i tak stają dwie karty z podglądem trzeciej — dokładnie jak na stronie
   głównej. */
/* Selektor z dwiema klasami bije bazowe `.lp-carousel__card` także w regule
   desktopowej, więc osobne nadpisanie w media query jest zbędne. */
.lp-carousel--shots .lp-carousel__card{
	flex:0 0 min(560px, calc(100vw - var(--lp-gutter) * 2));
	padding:12px;justify-content:center;
	/* Czysta biel, nie krem: zrzuty mają tło rgb(255,255,255), więc na
	   kremowym #FEFBF6 obrysowywała je ciepła ramka szerokości paddingu.
	   Na bieli karta i zrzut są jedną płaszczyzną. */
	background:var(--lp-color-white);
}
/* Limit z natywnej szerokości pliku (zmienna z szablonu) — zrzut nigdy nie
   rośnie ponad 1:1. width:100% zostaje, bo daje wymiar przed wczytaniem:
   przy width:auto obrazek byłby 0×0 i loading="lazy" nigdy by się nie
   odpalił. */
/* Bez zaokrąglenia — karta i zrzut mają teraz ten sam biały, więc łuk nic
   nie rysuje, a mógłby ściąć treść dochodzącą do krawędzi kadru. */
.lp-review-shot__img{
	display:block;width:100%;height:auto;
	max-width:var(--lp-shot-w,100%);margin-inline:auto;
}

/* =========================================================
   Image grid
   ========================================================= */
.lp-image-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lp-image-grid__item img{display:block;width:100%;height:auto}
/* Siatka bywa jednozdjęciowa (Konsultacje 1:1) — samotny kafelek bierze całą
   szerokość zamiast zostawiać pustą drugą kolumnę, ale trzyma się limitu,
   żeby nie urósł w wielki kwadrat nad tekstem. */
.lp-image-grid__item:only-child{grid-column:1/-1;max-width:520px}

/* =========================================================
   Anchor sidebar (Indywidualnie / Firmy / Eventy)
   ========================================================= */
.lp-offer-layout{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start}
.lp-anchor-nav{position:sticky;top:calc(var(--lp-header-h) + 24px)}
@media (min-width:901px){
	/* Gdy nad paskiem stoi okładka, przyklejamy cały słupek — inaczej zdjęcie
	   zostałoby w tyle, a sama lista pojechała dalej. */
	.lp-offer-sidebar{position:sticky;top:calc(var(--lp-header-h) + 24px)}
	.lp-offer-sidebar .lp-anchor-nav{position:static}
}
@media (max-width:900px){
	/* Grid odpada: sticky w gridzie jest ograniczone do własnego obszaru,
	   a w jednej kolumnie pasek zajmuje tylko swój wiersz — nie miałby po
	   czym jechać. Jako zwykły blok jedzie wzdłuż całej sekcji. */
	.lp-offer-layout{display:block}
	/* Pasek sam trzyma 8px nad i pod linkami, więc hero i sekcja oddają mu
	   tutaj swoje odstępy — ujemny margines kasuje margines hero. */
	.lp-page-hero + .lp-section.lp-offer-layout{margin-top:calc(-1 * var(--lp-hero-gap));padding-top:0}
	.lp-anchor-nav{
		position:sticky;top:var(--lp-header-h);z-index:110;
		background:var(--lp-color-cream);
		margin:0 calc(-1 * var(--lp-gutter)) 24px;
		padding:12px var(--lp-gutter);
		overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
	}
	.lp-anchor-nav::-webkit-scrollbar{display:none}
	.lp-anchor-nav ul{flex-direction:row!important;white-space:nowrap}
	/* display:block zdejmuje półinterlinię line-boxa <li> — przy inline <a>
	   link jest centrowany w wyższym wierszu i 8px paddingu robiło się 15px. */
	.lp-anchor-nav a{flex:none;display:block}
}
.lp-anchor-nav__label{font:700 11px/1 var(--lp-font-sans);letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.lp-anchor-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
/* Ten sam scroll-spy co w „O mnie”: link przygaszony, a aktywny dostaje
   kolor i linię wjeżdżającą pod spodem. width:fit-content jest istotne —
   bez niego linia rozciągnęłaby się na całą szerokość kolumny. */
.lp-anchor-nav a{
	font:700 12px/1 var(--lp-font-sans);letter-spacing:.08em;text-transform:uppercase;
	opacity:.45;width:fit-content;border-bottom:2px solid transparent;padding-bottom:5px;
	transition:color .3s ease,opacity .3s ease,border-color .3s ease;
}
.lp-anchor-nav a.is-active{opacity:1;color:var(--lp-color-purple-deep);border-bottom-color:var(--lp-color-purple-deep)}

.lp-offer-block{padding:56px 0;border-top:1px solid rgba(15,15,15,.1)}
.lp-offer-block:first-child{border-top:none}
.lp-offer-block__eyebrow{font:700 11px/1 var(--lp-font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lp-color-purple-deep)}
.lp-offer-block__subhead{font:italic 500 20px/1.4 var(--lp-font-serif);margin-bottom:1em}

/* Lista obszarów pracy („Firmy i zespoły”) — nagłówek listy + pojedynczy obszar. */
.lp-topics__title{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:44px 0 24px}
.lp-topic{margin:0 0 28px}
.lp-topic h4{font-size:clamp(1.05rem,1.7vw,1.25rem);margin-bottom:.45em}
.lp-topic p:last-child{margin-bottom:0}
.lp-topic--format{margin-bottom:40px}
.lp-offer-quote{text-align:left;font-size:18px;margin:0}

/* Podstrony oferty składają się z tych samych sekcji co „O mnie”: zdjęcie
   okładkowe, nagłówek H2 i treść z edytora. Typografia treści siedzi
   w .lp-about-rte (niżej), tutaj zostaje sam rytm kolumny.
   720 px to ta sama miara wiersza co w „O mnie” — kolumna obok paska kotwic
   ma blisko 900 px, a przy 16–18 px tekstu wiersz robi się za długi. */
.lp-offer-content{display:flex;flex-direction:column;gap:clamp(30px,4vw,52px);max-width:720px;min-width:0}
.lp-offer-section{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}

/* Kreska rozdziela wyłącznie formaty współpracy — czyta się wtedy jako
   lista równoległych ofert, a nie ciąg rozdziałów. Pierwsza sekcja jej nie
   dostaje, bo stoi zaraz pod nagłówkiem strony. */
.lp-offer-section--format + .lp-offer-section--format{
	border-top:1px solid rgba(15,15,15,.1);
	/* Tyle samo, ile odstęp kolumny nad kreską — linia trafia dokładnie
	   w połowę przerwy między formatami, zamiast przyklejać się do dolnego. */
	padding-top:clamp(30px,4vw,52px);
}

/* Czas trwania nad nagłówkiem formatu — ten sam stopień co dawny eyebrow. */
.lp-offer-section__eyebrow{margin:0;font:700 11px/1 var(--lp-font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lp-color-purple-deep)}

/* Wyróżnione zdanie pod formatami. Awatar jest opcjonalny — bez niego
   zostaje sam tekst na białej karcie. */
.lp-offer-quote-card{display:flex;gap:20px;align-items:center;margin:0;padding:24px;background:var(--lp-color-white);border-radius:16px}
.lp-offer-quote-card img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}

/* =========================================================
   Hero (home page) — scattered headings around a central portrait
   ========================================================= */
/* Desktop hero is a sticky-pinned stage: the section is taller than the
   viewport, its inner sticks for the scroll distance, and JS maps that
   scroll progress onto the photo/headline dissolve + the next section
   rising over it (see animations.js). Mobile keeps a plain stacked hero. */
.lp-hero-pin{position:relative}
.lp-hero-sticky{position:relative;display:flex;align-items:center;justify-content:center}

.lp-hero-bleed{display:none}

.lp-hero-stage{position:relative;z-index:2;width:min(1280px,92vw);margin:0 auto}

.lp-hero__photo{position:relative;z-index:1;will-change:transform,opacity,filter}
.lp-hero__image{display:block;width:100%;height:auto}

.lp-hero__group{position:relative;z-index:2}
/* 5.4vw robiło nagłówek tak duży na laptopowych rozdzielczościach (np. 1366×768),
   że "Clear Vision" (dolny blok) wjeżdżało na opis bloku "Creative Mindset" nad nim —
   desktopowe grupy są pozycjonowane niezależnie (top/bottom w %), więc wyższy nagłówek
   przesuwa się w stronę sąsiada. 4.3vw daje bezpieczny odstęp od ok. 1060px w górę. */
.lp-hero__heading{font:400 clamp(2.5rem,4.3vw,5.5rem)/1.02 var(--lp-font-serif);margin:0}
/* Każdy wiersz hasła to osobny span — domyślnie blok, czyli układ z makiety
   ("Creative" / "Mindset"). Na telefonie spany wracają do inline. */
.lp-hero__line{display:block}
/* Fioletowe tło ma obejmować tekst, nie całą kolumnę: width:fit-content sprawia,
   że blok jest szeroki na najdłuższy wiersz, a max-width trzyma miejsce łamania. */
.lp-hero__kicker,.lp-hero__caption{
	display:block;margin:10px 0 0;color:var(--lp-color-cream);background:var(--lp-color-purple-deep);
	padding:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-wrap:pretty;
	width:fit-content;max-width:min(340px,100%);
}
.lp-hero__kicker{font:700 clamp(16px,1.3vw,19px)/1.35 var(--lp-font-sans);max-width:100%}
.lp-hero__caption{font:400 15px/1.55 var(--lp-font-sans)}

/* Mobile / tablet: photo with a "Współpraca" pill, then the three headlines
   as an accordion — captions stay collapsed until tapped, exactly like the
   mockup's separate mobile hero. */
.lp-hero-pin{padding-top:10px}
.lp-hero-sticky{flex-direction:column}
.lp-hero-stage{display:flex;flex-direction:column;padding:0 20px 36px}
/* % (not vw) so the scrollbar width isn't counted and the photo can't
   spill past the stage's padding. */
.lp-hero__photo{width:min(100%,440px,41vh);max-width:100%;margin:0 auto}

.lp-hero__photo-cta{
	position:absolute;left:50%;bottom:26%;transform:translateX(-50%);
	background:var(--lp-color-purple-deep);color:var(--lp-color-cream);
	font:700 12px/1 var(--lp-font-sans);letter-spacing:.12em;text-transform:uppercase;
	padding:15px 26px;border-radius:999px;white-space:nowrap;
}
.lp-hero__photo-cta:hover{background:var(--lp-color-ink);color:var(--lp-color-cream)}

@media (max-width:1059px){
	.lp-hero__group{margin-top:14px;border-bottom:1px solid rgba(15,15,15,.35)}
	.lp-hero__group:first-of-type{margin-top:22px}
	.lp-hero__mask{padding-bottom:12px;cursor:pointer}
	/* Dolny próg 28px, nie 32: przy 320 px "Creative Mindset" w jednej linii
	   wypełnia kolumnę co do piksela, a bez zapasu wystarczy inny fallback
	   kroju, żeby zawinęło na drugi wiersz. */
	.lp-hero__heading{font:400 clamp(28px,9vw,44px)/1.05 var(--lp-font-serif)}
	/* Jedna linia na hasło: trzy hasła = trzy wiersze i całe hero mieści się
	   na ekranie telefonu bez przewijania. */
	.lp-hero__line{display:inline}
	.lp-hero__kicker{background:none;color:rgba(15,15,15,.72);padding:0;margin:0 0 12px;font:700 16px/1.35 var(--lp-font-sans);width:auto}
	.lp-hero__caption{display:none;margin:0 0 16px;padding:2px;font:400 13.5px/1.65 var(--lp-font-sans);width:auto}
	.lp-hero__group.is-open .lp-hero__caption{display:block}
}

@media (min-width:1060px){
	.lp-hero-pin{height:175vh;padding-top:0}
	.lp-hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;flex-direction:row}
	.lp-hero-bleed{
		display:block;position:absolute;left:0;right:0;bottom:0;height:42vh;z-index:0;pointer-events:none;
		opacity:.42;background-size:cover;background-position:center 78%;
		-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.9) 100%);
		mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.55) 64%,rgba(0,0,0,.9) 100%);
	}
	.lp-hero-stage{display:block;height:78vh;padding:0;gap:0}
	.lp-hero__photo{position:absolute;left:50%;top:4%;height:92%;width:auto;max-width:92vw;margin:0;transform:translateX(-50%)}
	.lp-hero__image{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center}
	.lp-hero__photo-cta{display:none}
	.lp-hero__group{position:absolute;max-width:34%}
	.lp-hero__group--tl{left:6%;top:0}
	.lp-hero__group--tr{left:67%;top:19%}
	.lp-hero__group--bl{left:16%;bottom:7%}
	/* Pulled up so it can rise over the pinned hero; the matching
	   translate keeps it at its natural spot until JS drives the lift
	   (also prevents an overlap flash before scripts run). */
	.lp-hero-next{position:relative;z-index:3;margin-top:-60vh;transform:translateY(60vh)}
}

.lp-editorial-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,28px)}
@media (max-width:760px){
	/* Single column: the negative margins that make photos overlap on desktop
	   would collapse the stack here, so they're cleared along with the rows. */
	.lp-editorial-grid{grid-template-columns:1fr!important;row-gap:clamp(28px,7vw,44px)}
	.lp-editorial-grid > *{grid-column:1/-1!important;grid-row:auto!important;margin:0!important}
	.lp-ed__title{font-size:clamp(32px,9vw,52px)}
	.lp-ed p.lp-ed__quote{font-size:clamp(20px,5.5vw,28px)}
	.lp-ed__img--a,.lp-ed__img--b,.lp-ed__img--c{height:auto!important}
}

.lp-collab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:760px){.lp-collab-grid{grid-template-columns:1fr}}

/* Textured band: flat colour + a photographic overlay at .86 opacity, exactly
   as every colour band in the mockup is built (never a flat colour alone). */
/* Tekstura pasa ma opacity .86, więc pas musi mieć pod sobą coś kryjącego —
   inaczej prześwituje to, co leży niżej (na stronie głównej dolna krawędź
   tła hero dawała widoczną poziomą linię w poprzek pasa „O mnie”).
   Kremowy odpowiada temu, co i tak prześwitywało, więc wygląd bez zmian. */
.lp-textured{position:relative;overflow:hidden;background-color:var(--lp-color-cream)}
/* Bez opacity — tekstura ma wyglądać dokładnie tak jak plik, tak samo jak
   w panelu submenu „Współpraca" i w menu mobilnym, które rysują ją wprost
   jako background-image. Wcześniejsze .86 przepuszczało kremowe tło spod
   spodu i ten sam plik wychodził w pasach bledszy niż w submenu. */
.lp-textured::before{
	content:'';position:absolute;inset:0;background-image:var(--lp-band-image);
	background-size:cover;background-position:center;pointer-events:none;
}
.lp-textured > *{position:relative;z-index:1}

.lp-pink-band{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,64px);padding-block:clamp(56px,8vw,110px)}
@media (min-width:1060px){
	/* Generous breathing room so the texture reads as a full band rather than
	   a strip behind the copy — and so the soft bottom fade lands in empty
	   space instead of cutting through text. */
	.lp-pink-band{padding-block:clamp(120px,20vh,240px);min-height:105vh}
}
/* Fallback soft bottom edge for when the scroll choreography isn't running
   (no JS, reduced motion, or below the desktop breakpoint). */
.lp-hero-next{
	-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1.000) 70.00%, rgba(0,0,0,0.939) 74.50%, rgba(0,0,0,0.784) 79.00%, rgba(0,0,0,0.575) 83.50%, rgba(0,0,0,0.352) 88.00%, rgba(0,0,0,0.156) 92.50%, rgba(0,0,0,0.028) 97.00%, rgba(0,0,0,0.000) 100.00%);
	mask-image:linear-gradient(to bottom,rgba(0,0,0,1.000) 70.00%, rgba(0,0,0,0.939) 74.50%, rgba(0,0,0,0.784) 79.00%, rgba(0,0,0,0.575) 83.50%, rgba(0,0,0,0.352) 88.00%, rgba(0,0,0,0.156) 92.50%, rgba(0,0,0,0.028) 97.00%, rgba(0,0,0,0.000) 100.00%);
}
.lp-pink-band__text{flex:1 1 480px;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.lp-pink-band__text p{margin:0;font:400 clamp(22px,3vw,42px)/1.32 var(--lp-font-serif);text-wrap:pretty}
/* Bloki z edytora: akapity i listy dostają ten sam rytm co odstęp między blokami. */
.lp-pink-band__text .lp-rte{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.lp-pink-band__text .lp-rte > :first-child{margin-top:0}
.lp-pink-band__text .lp-rte > :last-child{margin-bottom:0}
.lp-pink-band__text ul,
.lp-pink-band__text ol{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)}
.lp-pink-band__text li{font:400 clamp(19px,2.3vw,30px)/1.38 var(--lp-font-serif);text-wrap:pretty}
.lp-pink-band__text li::marker{color:var(--lp-color-lime)}
.lp-pink-band__text a{text-decoration:underline;text-underline-offset:.18em}
.lp-pink-band__text a:hover{color:var(--lp-color-lime)}
/* Strzałka zrzucona w dół, żeby kolumny nie stały symetrycznie. */
.lp-pink-band__cta{
	flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
	align-self:flex-end;margin-top:clamp(48px,9vw,140px);margin-bottom:clamp(8px,2vw,28px);
}
.lp-pink-band__cta .lp-arrow-link{color:var(--lp-color-cream)}
.lp-pink-band__cta .lp-arrow-link:hover{color:var(--lp-color-lime)}
.lp-arrow-link{display:flex;align-items:center;gap:10px;font:700 10px/1 var(--lp-font-sans);letter-spacing:.16em;text-transform:uppercase}
.lp-arrow-link:hover{color:var(--lp-color-ink)}
/* Na ciemnych pasmach link musi być biały — globalne `a{color:ink}` wygrywa z dziedziczonym kremem. */
.lp-text-cream .lp-arrow-link,
.lp-text-cream .lp-arrow-link:hover{color:var(--lp-color-white)}

.lp-collab-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,86px);align-items:center;max-width:1180px;margin:0 auto clamp(60px,9vw,130px)}
@media (max-width:760px){.lp-collab-row{grid-template-columns:1fr}}
.lp-collab-row--reverse{direction:rtl}
.lp-collab-row--reverse .lp-collab-row__body{direction:ltr}
.lp-collab-row__image{background:var(--lp-color-white);border-radius:6px;overflow:hidden;direction:ltr}
.lp-collab-row__image img{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.19,1,.22,1)}
.lp-collab-row__image:hover img{transform:scale(1.06)}
.lp-collab-row__body{direction:ltr}
.lp-collab-row__body h3{font-size:clamp(28px,3.4vw,42px);margin-bottom:0}
.lp-collab-row__links{display:flex;flex-direction:column;margin-top:clamp(24px,2.6vw,34px);border-top:1px solid rgba(15,15,15,.14)}
.lp-collab-row__links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 2px;border-bottom:1px solid rgba(15,15,15,.14);transition:color .3s ease,padding-left .35s ease}
.lp-collab-row__links a:hover{color:var(--lp-color-purple-deep);padding-left:8px}
.lp-collab-row__links svg{flex:none;opacity:.55}
.lp-collab-row__body > p{margin:clamp(24px,2.6vw,32px) 0 0;color:rgba(15,15,15,.66);max-width:46ch}
.lp-collab-row__body > .lp-btn{margin-top:clamp(28px,3.4vw,46px)}

/* Editorial storytelling blocks — a 12-column grid where photos deliberately
   overlap the text rows via negative margins, exactly as in the mockup. */
.lp-editorial{padding:clamp(80px,12vw,180px) clamp(22px,5vw,72px)}
.lp-editorial__inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(64px,9vw,130px)}

.lp-ed{align-items:start}
.lp-ed__title{margin:0;font-weight:400;letter-spacing:-.015em;line-height:1.02}
.lp-ed__title sup{font-size:.42em;vertical-align:super;line-height:0}
.lp-ed__img{margin:0;overflow:hidden;border-radius:4px;background:#F0EAE1}
.lp-ed__img img{display:block;width:100%;height:auto}
.lp-ed__text{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,18px)}
.lp-ed__text p{margin:0}
.lp-ed p,.lp-ed__text{font:400 clamp(15px,1.2vw,17px)/1.62 var(--lp-font-sans);color:rgba(15,15,15,.66);text-wrap:pretty}
.lp-ed p.lp-ed__quote{font:italic 400 clamp(22px,2.6vw,38px)/1.24 var(--lp-font-serif);color:var(--lp-color-ink);max-width:22ch;margin:0}
/* Each section sets its own degree in the mockup. */
.lp-ed--lsp p.lp-ed__quote{font-size:clamp(20px,2.1vw,30px);line-height:1.3;max-width:none}
.lp-ed--jrn p.lp-ed__quote{font-size:clamp(24px,2.8vw,42px);line-height:1.2;max-width:none}

@media (min-width:761px){
	.lp-ed{row-gap:clamp(16px,2.2vw,28px)}

	/* Unique Brand Vibe */
	/* Kwadrat wchodzi w lewy róg i wychodzi poza krawędź kontenera, więc nie
	   stoi równo ani z nią, ani ze zdjęciem niżej — tytuł ustępuje mu w prawo,
	   bo inaczej wielkie „Unique Brand Vibe” ległoby na zdjęciu. */
	.lp-ed--ubv .lp-ed__head{grid-column:5/13;grid-row:1;z-index:3}
	.lp-ed--ubv .lp-ed__title{font-size:clamp(36px,5.8vw,84px)}
	.lp-ed--ubv .lp-ed__img--a{grid-column:1/4;grid-row:1;margin-top:clamp(8px,1.4vw,22px);margin-left:clamp(-48px,-2.6vw,-14px);z-index:2;box-shadow:0 18px 44px rgba(15,15,15,.12)}
	.lp-ed--ubv .lp-ed__text{grid-column:1/6;grid-row:2;margin-top:clamp(22px,3.6vw,58px);z-index:2}
	.lp-ed--ubv .lp-ed__img--b{grid-column:7/13;grid-row:2;margin-top:clamp(-72px,-5vw,-18px)}
	/* Dół małego kadru ma siadać dokładnie na ostatniej linii cytatu obok.
	   Stałym marginesem tego nie utrzymamy — wysokość zdjęcia zmienia się
	   z szerokością kolumny i proporcjami pliku. Dlatego zdjęcie rozpina się
	   na wiersze 2–3 i wyrównuje do końca tego obszaru, a wiersz 3 mierzy sam
	   cytat: obie dolne krawędzie lądują na tej samej linii. */
	.lp-ed--ubv .lp-ed__img--c{grid-column:1/5;grid-row:2/4;align-self:end}
	.lp-ed--ubv .lp-ed__quote{grid-column:6/13;grid-row:3;margin-top:clamp(18px,2.4vw,34px)}

	/* LEGO SERIOUS PLAY */
	.lp-ed--lsp{row-gap:clamp(14px,1.8vw,24px)}
	.lp-ed--lsp .lp-ed__head{grid-column:1/10;grid-row:1}
	.lp-ed--lsp .lp-ed__title{font-size:clamp(28px,5.2vw,76px);line-height:1.04}
	/* Trzy kadry stoją w tych samych kolumnach co akapity pod nimi. Bez
	   kadrowania, więc różne proporcje plików dają różne wysokości — górne
	   krawędzie trzymają linię, dolne mogą się różnić. */
	.lp-ed--lsp .lp-ed__img--a{grid-column:1/5;grid-row:2;margin-top:clamp(14px,2vw,30px)}
	.lp-ed--lsp .lp-ed__img--b{grid-column:5/9;grid-row:2;margin-top:clamp(14px,2vw,30px)}
	.lp-ed--lsp .lp-ed__img--c{grid-column:9/13;grid-row:2;margin-top:clamp(14px,2vw,30px)}
	.lp-ed--lsp .lp-ed__text--1{grid-column:1/5;grid-row:3;margin-top:clamp(26px,3.4vw,48px)}
	.lp-ed--lsp .lp-ed__text--2{grid-column:5/9;grid-row:3;margin-top:clamp(26px,3.4vw,48px)}
	.lp-ed--lsp .lp-ed__quote{grid-column:9/13;grid-row:3;font-size:clamp(20px,2.1vw,30px);line-height:1.3}
	/* `p.lp-ed__quote{margin:0}` wyżej bije selektor sekcji, więc margines
	   górny cytatu trzeba podać z tą samą wagą co tam — inaczej trzecia
	   kolumna startuje wyżej niż dwie pozostałe. */
	.lp-ed--lsp p.lp-ed__quote{margin-top:clamp(26px,3.4vw,48px)}
	/* Cytat jest większy i z innego kroju niż akapity obok — równe górne
	   krawędzie dałyby rozjechane pierwsze wiersze, więc wiersz wyrównujemy
	   po linii pisma. */
	.lp-ed--lsp .lp-ed__text--1,
	.lp-ed--lsp .lp-ed__text--2,
	.lp-ed--lsp .lp-ed__quote{align-self:baseline}

	/* Journaling */
	.lp-ed--jrn{row-gap:clamp(16px,2.2vw,30px)}
	.lp-ed--jrn .lp-ed__head{grid-column:1/8;grid-row:1;z-index:2}
	.lp-ed--jrn .lp-ed__title{font-size:clamp(44px,7.6vw,124px);line-height:1;letter-spacing:-.02em}
	.lp-ed--jrn .lp-ed__img--a{grid-column:9/13;grid-row:1/4;align-self:start;margin-top:clamp(10px,1.6vw,24px);margin-right:clamp(-72px,-5vw,-22px)}
	.lp-ed--jrn .lp-ed__text{grid-column:2/8;grid-row:2;margin-top:clamp(24px,4vw,64px)}
	.lp-ed--jrn .lp-ed__quote{grid-column:1/4;grid-row:3;margin-top:clamp(20px,3vw,44px);font-size:clamp(24px,2.8vw,42px);line-height:1.2}
	.lp-ed--jrn .lp-ed__text--2{grid-column:4/9;grid-row:3;margin-top:clamp(20px,3vw,44px)}
}

/* Pasek kadrów LEGO® SERIOUS PLAY®.
   Na desktopie opakowanie znika z układu — figury zostają elementami siatki
   i trzymają swoje kolumny (patrz reguły .lp-ed--lsp .lp-ed__img--* wyżej). */
.lp-ed__gallery{display:contents}

@media (max-width:760px){
	/* Na telefonie te same trzy portrety w słupku dokładały kilka ekranów
	   przewijania, więc jadą w poziomie. Kadr jest węższy niż kolumna, żeby
	   krawędź następnego mówiła, że pasek da się przesunąć. */
	.lp-ed__gallery{
		display:flex;align-items:flex-start;gap:12px;
		overflow-x:auto;overscroll-behavior-x:contain;
		scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.lp-ed__gallery::-webkit-scrollbar{display:none}
	/* Figury nie są już elementami siatki, więc reset `.lp-editorial-grid > *`
	   ich nie dotyczy — szerokość podajemy tutaj. */
	.lp-ed__gallery .lp-ed__img{flex:0 0 78%;scroll-snap-align:start}
	/* Pasek łapie się klawiaturą (tabindex dokłada main.js), więc musi mieć
	   widoczny stan skupienia. */
	.lp-ed__gallery:focus-visible{outline:2px solid var(--lp-color-purple-deep);outline-offset:4px}

	/* Mały kadr Unique Brand Vibe wypada na telefonie. Na desktopie jego
	   zadaniem jest domknięcie cytatu obok — w jednej kolumnie nie ma czego
	   domykać i zostaje sam kolejny portret w słupku. */
	.lp-ed--ubv .lp-ed__img--c{display:none}
}

.lp-newsletter{max-width:640px;margin:0 auto;text-align:center}
.lp-newsletter__title{margin:0 0 14px;font:400 clamp(32px,4vw,52px)/1.12 var(--lp-font-serif);color:var(--lp-color-lime)}
.lp-newsletter__lead{margin:0;font:400 clamp(16px,1.5vw,19px)/1.55 var(--lp-font-sans);color:var(--lp-color-cream)}
.lp-newsletter__note{margin:18px 0 0;font:400 12px/1.5 var(--lp-font-sans);color:rgba(254,251,246,.85)}
/* Leży w środku formularza (flex), więc musi zająć własny wiersz. */
.lp-newsletter__consent{
	flex:1 0 100%;display:flex;align-items:flex-start;justify-content:center;gap:10px;
	margin:10px auto 0;max-width:520px;text-align:left;cursor:pointer;
	font:400 14px/1.55 var(--lp-font-sans);color:var(--lp-color-cream);
}
/* Selektor z [type] bije regułę pola e-mail (.lp-newsletter-form input),
   która inaczej rozdymała checkbox do rozmiaru inputa. Natywny checkbox
   ignoruje border-radius, więc rysujemy go sami (appearance:none + ptaszek). */
.lp-newsletter-form input[type="checkbox"]{
	appearance:none;-webkit-appearance:none;
	flex:none;width:20px;height:20px;min-width:0;margin:1px 0 0;padding:0;
	display:grid;place-content:center;cursor:pointer;
	border:1px solid rgba(15,15,15,.22);border-radius:6px;background:var(--lp-color-cream);
	transition:background .2s ease,border-color .2s ease;
}
.lp-newsletter-form input[type="checkbox"]::before{
	content:'';width:11px;height:11px;transform:scale(0);transition:transform .15s ease;
	background:var(--lp-color-cream);
	clip-path:polygon(14% 44%,0 60%,39% 100%,100% 18%,84% 4%,39% 68%);
}
.lp-newsletter-form input[type="checkbox"]:checked{
	background:var(--lp-color-purple-deep);border-color:var(--lp-color-purple-deep);
}
.lp-newsletter-form input[type="checkbox"]:checked::before{transform:scale(1)}
.lp-newsletter-form input[type="checkbox"]:focus-visible{outline:2px solid var(--lp-color-lime);outline-offset:2px}
.lp-newsletter__msg{margin:16px 0 0;font:700 13px/1.5 var(--lp-font-sans);color:var(--lp-color-cream);min-height:1em}
.lp-newsletter__fallback{margin:8px 0 0;font:700 13px/1.5 var(--lp-font-sans)}
.lp-newsletter__fallback a{color:var(--lp-color-lime);text-decoration:underline}
.lp-newsletter__fallback a:hover{color:var(--lp-color-cream)}
.lp-newsletter-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.lp-newsletter-form input{flex:1 1 260px;min-width:0;height:50px;padding:0 22px;border:0;border-radius:999px;background:var(--lp-color-cream);font:400 15px/1 var(--lp-font-sans);color:var(--lp-color-ink)}
.lp-newsletter-form button{flex:0 0 auto;height:50px;padding:0 30px;border:0;border-radius:999px;background:var(--lp-color-purple-deep);color:var(--lp-color-cream);font:700 12px/1 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .3s ease}
.lp-newsletter-form button:hover{background:var(--lp-color-ink)}
.lp-newsletter-form button[disabled]{opacity:.6;cursor:default}

/* Fullscreen "Współpraca" submenu */
.lp-submenu{position:fixed;inset:0;z-index:250;display:none;background:var(--lp-color-cream);overflow:auto}
.lp-submenu.is-open{display:flex;flex-wrap:wrap}
.lp-submenu__visual{
	position:relative;flex:1 1 420px;align-self:stretch;min-height:min(46vh,340px);overflow:hidden;display:none;
	background-color:#EDEAE4;background-image:var(--lp-submenu-image);background-size:cover;background-position:center center;
}
/* The mockup wipes the new photo down over the previous one rather than
   cross-fading, so each layer is clipped from the bottom when inactive.
   The photo sits centred in the panel at its own proportions with room to
   breathe on every side, so the box is clipped to the image itself. */
.lp-submenu__visual img{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:auto;height:auto;max-width:min(72%,460px);max-height:72%;object-fit:contain;
	clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1);
}
.lp-submenu__visual img.is-active{clip-path:inset(0 0 0 0)}
@media (min-width:900px){.lp-submenu__visual{display:block}}

.lp-submenu__panel{
	position:relative;flex:1 1 460px;display:flex;flex-direction:column;justify-content:center;
	gap:clamp(36px,5vw,58px);padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);
}
.lp-submenu__close{
	position:absolute;top:clamp(18px,3vw,34px);right:clamp(18px,3vw,34px);
	background:none;border:0;cursor:pointer;padding:6px;color:var(--lp-color-ink);z-index:2;
}
.lp-submenu__item{max-width:420px}
.lp-submenu__item h3{
	margin:0;font:400 clamp(24px,2.5vw,32px)/1.1 var(--lp-font-serif);letter-spacing:.02em;text-transform:uppercase;
	padding-bottom:10px;border-bottom:1px solid rgba(15,15,15,.35);
}
.lp-submenu__item h3 a{color:inherit;transition:color .3s ease}
.lp-submenu__item h3 a:hover{color:var(--lp-color-purple-deep)}
.lp-submenu__item p{margin:12px 0 22px;font:400 14px/1.5 var(--lp-font-sans);color:rgba(15,15,15,.7)}
.lp-submenu__item ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lp-submenu__item ul a{font:700 13px/1 var(--lp-font-sans);letter-spacing:.06em;text-transform:uppercase}
.lp-submenu__item ul a:hover{color:var(--lp-color-purple-deep)}

/* Sticky pill CTA + the tooltip that opens above it on hover */
.lp-pill{
	position:fixed;right:26px;bottom:var(--lp-pill-bottom,32px);z-index:130;
	background:var(--lp-color-purple-deep);color:var(--lp-color-cream);
	font:700 11px/1 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase;
	padding:15px 24px;border-radius:999px;
	opacity:0;transform:translateY(26px);pointer-events:none;
	transition:opacity .5s ease,transform .45s cubic-bezier(.19,1,.22,1),background .45s ease;
}
.lp-pill.is-visible{opacity:1;transform:none;pointer-events:auto}
.lp-pill:hover{background:var(--lp-color-purple-deep-hover);color:var(--lp-color-cream);transform:scale(1.06)}

.lp-pill-tip{
	position:fixed;right:26px;bottom:calc(var(--lp-pill-bottom,32px) + 57px);z-index:129;width:min(78vw,360px);
	background:var(--lp-color-cream);box-shadow:0 18px 50px rgba(15,15,15,.13);
	border-radius:18px;padding:26px;
	opacity:0;transform:scale(.94);transform-origin:100% 100%;pointer-events:none;
	transition:opacity .34s ease,transform .38s cubic-bezier(.19,1,.22,1);
}
.lp-pill-tip.is-visible{opacity:1;transform:scale(1)}
.lp-pill-tip__title{
	display:flex;align-items:baseline;gap:10px;margin:0;
	font:500 clamp(21px,2.1vw,27px)/1.28 var(--lp-font-serif);color:var(--lp-color-ink);
}
.lp-pill-tip__title svg{flex:none;transform:translateY(-2px);color:var(--lp-color-purple-deep)}
.lp-pill-tip__text{margin:8px 0 0;font:400 clamp(13px,1.05vw,14.5px)/1.5 var(--lp-font-sans);color:#8A8580}

/* Cursor follower — shows a label when hovering elements that declare one. */
.lp-cursor{
	position:fixed;top:0;left:0;z-index:400;width:78px;height:78px;border-radius:50%;
	background:var(--lp-color-purple-deep);color:var(--lp-color-cream);
	display:flex;align-items:center;justify-content:center;text-align:center;
	font:700 14px/1.25 var(--lp-font-sans);letter-spacing:.1em;text-transform:uppercase;
	pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.35);
	transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.2,1);
}
.lp-cursor.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.lp-cursor{display:none}}

/* =========================================================
   WooCommerce — shop archive & single product
   ========================================================= */
.lp-shop-title{font-size:clamp(28px,3.4vw,44px);margin:0}

/* Wyróżnienie niesie sam rozmiar — bez etykiety nad blokiem: szersza kolumna
   na zdjęcie, większa typografia i więcej powietrza niż w kartach siatki.
   Zdjęcie trzyma własne proporcje (get_image('lp-portrait'), bez kadrowania),
   więc kolumna obrazu jest węższa niż treści — różne zdjęcia mają różną
   wysokość, a kolumna treści ma zostać stabilna. */
.lp-featured-product{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
	gap:clamp(32px,4vw,64px);align-items:center;
	background:var(--lp-color-white);border-radius:20px;padding:clamp(24px,3vw,48px);
}
.lp-featured-product__body h2{margin:0 0 14px;font-size:clamp(28px,3.4vw,44px);line-height:1.12}
.lp-featured-product__body > p{margin:0 0 18px;font-size:clamp(16px,1.4vw,18px);color:rgba(15,15,15,.7)}
@media (max-width:760px){.lp-featured-product{grid-template-columns:1fr}}
.lp-featured-product__image img{display:block;width:100%;height:auto;border-radius:12px}
.lp-featured-product__price{margin:0 0 40px;font:500 clamp(34px,3.8vw,46px)/1 var(--lp-font-serif)}
@media (max-width:600px){.lp-featured-product__body .lp-btn{width:100%;justify-content:center}}

.lp-shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:900px){.lp-shop-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.lp-shop-grid{grid-template-columns:1fr}}
/* Names wrap to a different number of lines per card, so let the card fill
   the grid row and push the price to the bottom — otherwise prices sit on
   ragged baselines across the row. */
.lp-shop-grid>li,.lp-shop-grid>div{display:flex}
.lp-shop-card{display:flex;flex-direction:column;width:100%}
.lp-shop-card__price{margin-top:auto;padding-top:4px}
.lp-shop-card__image{display:block;aspect-ratio:1/1;background:var(--lp-color-white);margin-bottom:14px;overflow:hidden}
.lp-shop-card__image img{width:100%;height:100%;object-fit:cover}
.lp-shop-card__category{display:block;font:700 10px/1 var(--lp-font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lp-color-purple-deep);margin-bottom:6px}
.lp-shop-card__name{display:block;font:500 18px/1.3 var(--lp-font-serif);margin-bottom:4px}
.lp-shop-card__price{display:block;font-weight:700}

.lp-product-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:760px){.lp-product-hero{grid-template-columns:1fr}}
.lp-product-hero__image img{display:block;width:100%;height:auto;border-radius:12px}
.lp-product-hero__price{font:500 32px/1 var(--lp-font-serif);margin:12px 0}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce button.button{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--lp-color-purple-deep)!important;color:var(--lp-color-cream)!important;
	font:700 11px/1 var(--lp-font-sans)!important;letter-spacing:.12em;text-transform:uppercase;
	padding:16px 28px!important;border-radius:999px!important;border:none!important;
}
.woocommerce div.product form.cart .button:hover{background:var(--lp-color-purple-deep)!important}
/* The theme's product templates don't emit WooCommerce's own `div.product`
   wrapper, so rules scoped to it never matched and the quantity field stayed
   browser-default. Key off form.cart instead. */
form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
form.cart div.quantity{margin:0}
form.cart input.qty{
	width:72px;height:47px;padding:0 10px;border-radius:999px;border:1px solid rgba(15,15,15,.2);
	font:400 15px/1 var(--lp-font-sans);text-align:center;color:var(--lp-color-ink);background:var(--lp-color-cream);
}
form.cart .variations{width:100%;border-collapse:collapse}
form.cart .variations th,form.cart .variations td{padding:0 0 10px;text-align:left;vertical-align:middle}
form.cart .variations th{padding-right:14px;font:700 10px/1 var(--lp-font-sans);letter-spacing:.16em;text-transform:uppercase}
form.cart .variations select{
	height:47px;min-width:220px;padding:0 38px 0 16px;border-radius:999px;border:1px solid rgba(15,15,15,.2);
	font:400 15px/1 var(--lp-font-sans);color:var(--lp-color-ink);background:var(--lp-color-cream);
	appearance:none;-webkit-appearance:none;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0F0F' stroke-width='1.6'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
form.cart .reset_variations{font:700 10px/1 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase}
form.cart .woocommerce-variation-price{margin:4px 0 12px;font:400 22px/1 var(--lp-font-serif)}

/* Add-to-cart rendered inside a textured CTA band. */
.lp-band__form{margin-top:clamp(24px,3vw,34px)}
.lp-band__form form.cart{justify-content:center}
.lp-band__form input.qty,.lp-band__form select{border-color:rgba(254,251,246,.55);background-color:rgba(254,251,246,.94)}
.lp-band__form .variations th,.lp-band__form .variations td{text-align:center}
.lp-band__form .variations{margin:0 auto;width:auto}
.lp-band__form .lp-text-cream label,.lp-band__form label{color:inherit}
.woocommerce-message,.woocommerce-error,.woocommerce-info{
	list-style:none;padding:16px 22px;border-radius:12px;margin:0 0 24px;font-size:14px;
	background:rgba(105,59,133,.10);border:1px solid rgba(105,59,133,.26);
}

/* =========================================================
   Masterclass — strona sprzedażowa czytana liniowo
   ========================================================= */
.lp-pull-quote{font:italic 500 clamp(22px,3.2vw,32px)/1.35 var(--lp-font-serif);margin:0;text-align:center}

/* Nagłówek strony wzorowany na .lp-bur-hero („Dofinansowania"): okładka po
   lewej, tytuł i lead po prawej, na kremowym tle. Te same miary kolumn, więc
   oba landingi otwierają się tak samo — osobna klasa, bo tylko tu tekst idzie
   z szablonu, a nie z edytora. */
.lp-mc-hero{
	display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
	gap:clamp(32px,5vw,72px);align-items:center;
	padding-block:clamp(36px,6vw,80px) clamp(28px,4vw,48px);
}
.lp-mc-hero__photo{margin:0}
.lp-mc-hero__photo img{display:block;width:100%;height:auto;border-radius:4px}
/* Zapas pod maską na ogonki liter — maska przycina do krawędzi paddingu. */
.lp-mc-hero__mask{padding-bottom:.08em}
/* Ten sam stopień i rozstrzelenie co etykieta „Opinie" (.lp-section-label),
   tylko dosunięte do lewej i w czerni — na kremowym tle limonka i krem
   z pasów byłyby nieczytelne. */
.lp-mc-hero__eyebrow{
	margin:0 0 clamp(14px,1.6vw,20px);
	font:700 14px/1 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase;
	color:var(--lp-color-ink);
}
/* Wiersz z pola = osobna linia nagłówka (spany z lp_lines_spans()). */
.lp-mc-hero__title{margin:0;font:400 clamp(30px,4.4vw,52px)/1.19 var(--lp-font-serif);text-wrap:pretty}
.lp-mc-hero__title span{display:block}
/* Lead jest podtytułem masterclassu, więc stoi stopień wyżej niż wstęp pod
   nim — inaczej oba czytałyby się jako jeden blok akapitów. */
.lp-mc-hero__lead{
	margin:clamp(18px,2.2vw,26px) 0 0;max-width:620px;
	font:400 clamp(17px,1.7vw,20px)/1.6 var(--lp-font-sans);text-wrap:pretty;
}
/* Data rozpoczęcia: wyraźnie większa i mocniejsza niż lead/wstęp, ale
   zawsze mniejsza niż H1 (min. tytułu 30px > maks. daty 28px), więc nie
   konkuruje z nagłówkiem — tylko się wyróżnia kolorem marki. */
.lp-mc-hero__date{
	margin:clamp(16px,2vw,22px) 0 0;
	font:700 clamp(22px,2.4vw,28px)/1.3 var(--lp-font-serif);
	color:var(--lp-color-purple-deep);
}
.lp-mc-hero__rte{margin-top:clamp(20px,2.6vw,30px);max-width:640px}
/* Sam kolor — stopień niesie .lp-about-rte p (18 px), ten sam co treść
   w dalszej części strony. */
.lp-mc-hero__rte p{color:rgba(15,15,15,.72)}
/* Przycisk potrzebuje powietrza z obu stron: nad nim kończy się wstęp,
   pod nim krawędź hero, a zaraz za nią ciemny pas opinii. */
.lp-mc-hero__cta{margin:clamp(28px,3.4vw,40px) 0 clamp(20px,3vw,40px)}
/* Bez okładki zostaje sama kolumna tekstu — inaczej po pustej lewej
   kolumnie zostałaby dziura szerokości 380 px. */
.lp-mc-hero--no-photo,
.lp-mc-story--no-photo{grid-template-columns:minmax(0,1fr)}
/* Skrót faktów (termin · cena „od”) — tylko na telefonie. Okładka zajmuje
   tam cały pierwszy ekran, a termin stał dopiero pod nią, więc skrót wchodzi
   nad okładkę, a data w treści znika, żeby nie powtarzać jej ekran niżej.
   Na szerokim ekranie termin stoi obok okładki i skrót byłby powtórzeniem. */
.lp-mc-hero__facts{display:none}
@media (max-width:860px){
	/* Ujemny dolny margines skraca tylko odstęp skrót–okładka (połowa
	   odstępu siatki) — skrót jest podpisem okładki, nie osobną sekcją. */
	.lp-mc-hero__facts{
		display:block;margin:0 0 -16px;
		font:700 17px/1.45 var(--lp-font-serif);color:var(--lp-color-purple-deep);text-wrap:pretty;
	}
	.lp-mc-hero--has-facts .lp-mc-hero__date{display:none}
}
@media (max-width:860px){
	.lp-mc-hero{grid-template-columns:1fr;padding-block:clamp(24px,5vw,36px) clamp(24px,4vw,40px)}
	/* Okładka bierze całą kolumnę treści — równo z przyciskiem pod spodem
	   i z krawędzią tekstu. Węższa zostawiała po prawej pas pustego tła,
	   który wyglądał jak błąd wyrównania, a nie jak margines. */
	.lp-mc-hero__photo{max-width:none}
}

/* Miara wiersza ta sama co w kolumnie treści podstron oferty
   (.lp-offer-content), tylko wyśrodkowana — tu nie ma słupka z kotwicami,
   który by ją podpierał z lewej. */
.lp-mc-col{max-width:720px;margin-inline:auto}

/* Diagnoza: pytania czytane jako lista, nie jako akapit. Znak zapytania
   niesie rytm, więc każdemu pytaniu wystarczy własny wiersz i kreska —
   dokładnie ten sam zabieg co w agendzie niżej. */
/* Równy odstęp z obu stron: nad listą kończy się ciemny pas opinii, więc
   bez górnego paddingu pierwsze pytanie przyklejało się do jego krawędzi,
   choć pod ostatnim było już pełne światło. */
.lp-mc-questions{padding-block:clamp(48px,8vw,96px)}
/* Listę pisze redakcja w edytorze, więc styl siedzi na znacznikach, nie na
   klasach wpisywanych ręcznie w treści. */
.lp-mc-questions__list{max-width:820px;margin-inline:auto}
.lp-mc-questions__list ul,
.lp-mc-questions__list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lp-mc-questions__list li{
	font:400 clamp(19px,2.4vw,26px)/1.45 var(--lp-font-serif);text-wrap:pretty;
	padding:clamp(18px,2.4vw,26px) 0 clamp(18px,2.4vw,26px) clamp(20px,3vw,34px);
	border-top:1px solid rgba(15,15,15,.12);position:relative;
}
.lp-mc-questions__list li:first-child{border-top:none}
/* Limonka jest kolorem akcentu pasów — na kremowym tle sama w sobie jest
   za jasna, więc niesie ją kropka, nie tekst. Transform centruje kropkę
   dokładnie w punkcie „top”, więc offset trzyma się środka x-height
   pierwszego wiersza niezależnie od średnicy kropki. */
.lp-mc-questions__list li::before{
	content:'';position:absolute;left:0;top:calc(clamp(18px,2.4vw,26px) + .76em);
	width:clamp(6px,0.9vw,8px);height:clamp(6px,0.9vw,8px);border-radius:50%;
	background:var(--lp-color-purple-deep);transform:translateY(-50%);
}

/* Pas „ukrytego kosztu" — jedno zdanie, więc czyta się jak wyróżnienie,
   a nie jak akapit w pasie. */
.lp-mc-cost .lp-band__body p{margin:0;font:400 clamp(22px,3vw,32px)/1.5 var(--lp-font-serif);text-wrap:pretty}
/* Puenta ma dwa zdania w osobnych akapitach — bez tego zlałyby się w blok. */
.lp-mc-cost .lp-band__body p + p{margin-top:clamp(14px,1.8vw,24px)}

/* Historia autorki: te same kolumny co nagłówek strony — zdjęcie po lewej,
   tekst po prawej. Zdjęcie jedzie w oryginalnych proporcjach (motyw nie
   kadruje), więc kolumna ma stałą szerokość, a wysokość bierze z pliku.
   align-items:start, nie center: tekst jest tu dużo wyższy od zdjęcia. */
.lp-mc-story{
	display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
	gap:clamp(32px,5vw,72px);align-items:start;
}
.lp-mc-story__photo{margin:0}
.lp-mc-story__photo img{display:block;width:100%;height:auto;border-radius:4px}
@media (min-width:861px){
	/* Portret zostaje w kadrze, dopóki jedzie przy nim cała historia — ten sam
	   zabieg co przyklejony słupek na podstronach oferty. */
	.lp-mc-story__photo{position:sticky;top:calc(var(--lp-header-h) + 24px)}
}
@media (max-width:860px){
	.lp-mc-story{grid-template-columns:1fr}
	/* Na telefonie zdjęcie wraca przed tekst („Z czym wyjdziesz”) — tak samo
	   jak w historii wyżej — mimo że w DOM stoi po nim (tak wygodniej odwraca
	   się kolumny na desktopie). „order” zmienia tylko kolejność wizualną. */
	.lp-mc-story--reverse .lp-mc-story__photo{order:-1}
}
/* „Z czym wyjdziesz”: lustrzane odbicie historii wyżej — tekst po lewej,
   zdjęcie po prawej. Znacznik ma tekst przed zdjęciem w DOM, więc wystarczy
   zamienić szerokości kolumn, bez osobnego „order”. Tylko od 861px: reguła
   bez media query nadpisywała mobilny układ jednokolumnowy wyżej (obie
   klasy mają tę samą specyficzność, a ta stała niżej w pliku), więc na
   telefonie wracał układ dwukolumnowy i zdjęcie nachodziło na tekst. */
@media (min-width:861px){
	.lp-mc-story--reverse{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
}

/* Zegar odliczający: kafelki odwrócone względem tła pasa — jasne (kremowe)
   z ciemnymi (ink) cyframi, ten sam zestaw co karta cennika
   (.lp-price-card: krem + ink). Cień odrywa kafelek od teksturowanego tła,
   które w części kadru też bywa jasne (bg-tkanina.webp), więc sama różnica
   koloru by czasem nie wystarczyła. Cyfry i etykiety w kontenery wypełnia
   main.js na podstawie data-lp-countdown-target — patrz lp_countdown_widget(). */
.lp-countdown__units{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,3vw,32px)}
.lp-countdown__unit{display:flex;flex-direction:column;align-items:center;gap:10px}
.lp-countdown__digits{display:flex;gap:4px}
.lp-countdown__digit{
	background:var(--lp-color-cream);color:var(--lp-color-ink);
	font:700 clamp(28px,4.5vw,44px)/1 var(--lp-font-serif);
	min-width:clamp(38px,5vw,56px);padding:clamp(10px,1.4vw,16px) 4px;
	border-radius:8px;text-align:center;
	box-shadow:0 6px 20px rgba(15,15,15,.22);
}
.lp-countdown__label{
	margin:0;font:700 12px/1 var(--lp-font-sans);letter-spacing:.12em;text-transform:uppercase;
	color:rgba(254,251,246,.75);
}
/* Pierwsze słowo nagłówka („Masterclass”) — patrz lp_countdown_heading_html().
   Inline na desktopie, więc nagłówek płynie jako jeden tekst; na telefonie
   blokowe, więc reszta zdania zawsze zaczyna nowy wiersz, zamiast łamać się
   w przypadkowym miejscu przy zawijaniu. */
.lp-countdown__heading-first{display:inline}
/* Sekundy tykają zbyt szybko, żeby coś wnosić na wąskim ekranie — na
   telefonie zostają trzy jednostki (Dni/Godziny/Minuty). JS dalej liczy
   sekundy w tle (nieszkodliwe), tylko kafelek jest ukryty. Przycisk też znika:
   ten sam cel (#cennik) ma już przyklejony przycisk na dole ekranu
   (.lp-mc-sticky), więc drugi tuż nad nim byłby powtórzeniem. */
@media (max-width:860px){
	.lp-countdown__heading-first{display:block}
	.lp-countdown__cta{display:none}
}
/* Sekundy zostają widoczne na telefonie, ale w jednym wierszu z pozostałymi
   trzema jednostkami potrzebują mniejszych kafelków i węższych odstępów —
   w rozmiarze desktopowym cztery jednostki nie mieszczą się w szerokości
   kontenera na wąskim ekranie i zawijały się do drugiego wiersza.
   Rząd rozciąga się na pełną szerokość (width:100%) i justify-content:
   space-between rozstawia cztery jednostki od krawędzi do krawędzi —
   inaczej ciasny gap:6px trzymałby je stłoczone na środku z pustym
   marginesem po bokach kontenera. */
@media (max-width:480px){
	.lp-countdown__units{width:100%;justify-content:space-between;gap:6px}
	.lp-countdown__digits{gap:2px}
	.lp-countdown__digit{min-width:26px;padding:6px 2px;font-size:19px;border-radius:6px}
	.lp-countdown__label{font-size:9px;letter-spacing:.06em}
}
/* .lp-band__form już dokłada odstęp nad tym blokiem — .lp-countdown nie
   dubluje go swoim marginesem. Odstęp do przycisku pod zegarem to zwykły
   gap w kolumnie .lp-countdown, dodany przez lp_countdown_widget(). */
.lp-countdown{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,40px)}

/* Agenda: numer w słupku, a obok tytuł punktu i zdanie o tym, z czym się
   z niego wychodzi. Ostatni punkt nie ma tego zdania i nie zostawia po nim
   pustego wiersza. */
/* Punkty składa lp_group_topics() z „Nagłówka 4” i akapitu pod nim, więc
   numer musi być licznikiem, a nie tekstem — dopisanie punktu w edytorze
   niczego nie przenumerowuje. Punkt bez akapitu to sam tytuł. */
.lp-agenda{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:0;max-width:820px;counter-reset:lp-agenda}
.lp-agenda__item{
	counter-increment:lp-agenda;
	display:grid;grid-template-columns:clamp(44px,5vw,64px) minmax(0,1fr);
	column-gap:clamp(16px,2.4vw,28px);
	padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid rgba(15,15,15,.12);
}
.lp-agenda__item:first-child{border-top:none}
.lp-agenda__item::before{
	content:counter(lp-agenda,decimal-leading-zero);
	grid-row:1/span 2;
	font:500 clamp(26px,3.4vw,36px)/1 var(--lp-font-serif);color:var(--lp-color-purple-deep);
}
.lp-agenda__item > *{grid-column:2;margin:0}
.lp-agenda__item h4{font:400 clamp(18px,2.2vw,23px)/1.35 var(--lp-font-serif);text-wrap:pretty}
.lp-agenda__item p{margin-top:.5em;font-size:clamp(15px,1.7vw,16px);line-height:1.7;color:rgba(15,15,15,.72);text-wrap:pretty}

/* 1020 px = szerokość pasa treści reszty strony (300 px portretu + 64 px
   przerwy + 720 px kolumny tekstu). Bez limitu obie kolumny rozjechałyby się
   na całe 1128 px kontenera i wypadły szersze niż wszystko dookoła. */
.lp-for-you{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1020px;margin-inline:auto}
@media (max-width:760px){.lp-for-you{grid-template-columns:1fr}}
.lp-for-you__col{border-radius:16px;padding:clamp(24px,3.2vw,36px)}
.lp-for-you__col--yes{background:var(--lp-color-white)}
.lp-for-you__col--no{background:transparent;border:1.5px solid rgba(15,15,15,.15)}
/* Oba nagłówki to h2, bo obie listy są równorzędnymi rozdziałami strony —
   stopień trzyma je jednak przy skali karty, nie przy skali pasów. */
.lp-for-you__col h2{margin:0;font-size:clamp(20px,2.4vw,26px);text-wrap:pretty}
/* Obie listy pisze redakcja w edytorze jako zwykłe punkty — znacznik przed
   pozycją (ptaszek albo półpauza) dokłada tutaj CSS, więc w treści nie ma
   ani ikon, ani klas. Ptaszek jest tłem, nie znakiem: w treści kopiowanej ze
   strony zostawiłby śmieć. */
.lp-for-you__col ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.lp-for-you__col li{position:relative;padding-left:28px;font-size:15px;line-height:1.6;text-wrap:pretty}
.lp-for-you__col--yes li::before{
	content:'';position:absolute;left:0;top:.36em;width:16px;height:16px;
	background:var(--lp-color-purple-deep);
	-webkit-mask:var(--lp-check) center/contain no-repeat;mask:var(--lp-check) center/contain no-repeat;
}
.lp-for-you__col--no li::before{content:'–';position:absolute;left:4px;top:0;color:rgba(15,15,15,.4)}

/* Cennik stoi na teksturowanym pasie, bo karty są kremowe — na kremowym tle
   strony zlałyby się z nim. */
.lp-mc-pricing__title{text-align:center;margin-bottom:clamp(32px,4.4vw,56px)}
/* Metody płatności pod kartami — kolor z pasa (krem), stopień niżej niż
   treść kart, żeby czytało się jak przypis, a nie kolejna oferta. */
.lp-mc-pricing__pay{
	margin:clamp(24px,3vw,36px) auto 0;max-width:640px;text-align:center;
	font:400 15px/1.5 var(--lp-font-sans);opacity:.85;text-wrap:pretty;
}

/* Pas domykający stronę. Etykieta „Masterclass" bierze kolor z pasa (krem),
   tak samo jak „Opinie" wyżej, ale stoi bliżej nagłówka: tam oddziela ją od
   karuzeli cały pas, tu jest jego nadtytułem. */
.lp-mc-cta .lp-section-label{margin-bottom:clamp(16px,2vw,26px)}
/* Wiersz z pola = osobna linia, jak w nagłówku strony. Cały nagłówek na
   limonkę — kremowa zostaje sama etykieta nad nim, więc nazwa masterclassu
   niesie tu akcent w całości. */
.lp-mc-cta .lp-band__heading{color:var(--lp-color-lime)}
.lp-mc-cta .lp-band__heading span{display:block}

/* Skrót do cennika przyklejony do dołu ekranu na telefonie. Wygląd bierze
   z .lp-btn (znacznik niesie obie klasy), więc jest tym samym zaokrąglonym
   przyciskiem co reszta serwisu — tutaj zostaje samo osadzenie: odsunięty
   od krawędzi na szerokość marginesu strony, żeby nie zlewał się w pas. */
.lp-mc-sticky{
	display:none;position:fixed;z-index:150;width:auto;
	left:var(--lp-gutter);right:var(--lp-gutter);bottom:var(--lp-gutter);
	box-shadow:0 10px 30px rgba(15,15,15,.28);
	transition:opacity .35s ease,transform .35s ease,visibility 0s;
}
/* Nad cennikiem przycisk nie ma dokąd prowadzić i tylko zasłania karty —
   klasę zdejmuje i nakłada obserwator w main.js. visibility zjeżdża dopiero
   po zaniku, żeby przejście było widoczne, ale zniknięty przycisk wypadał
   też z kolejności czytania. */
.lp-mc-sticky.is-hidden{
	opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;
	transition:opacity .35s ease,transform .35s ease,visibility 0s .35s;
}
@media (prefers-reduced-motion:reduce){
	.lp-mc-sticky{transition:none}
	.lp-mc-sticky.is-hidden{transform:none;transition:none}
}
@media (max-width:900px){
	.lp-mc-sticky{display:flex}
	/* Ten sam skrót do cennika stoi na telefonie stale pod ręką, więc
	   przycisk z tą samą etykietą w treści byłby jego duplikatem. */
	.lp-mc-hero__cta{display:none}
	/* Zapas pod stopką na wysokość przycisku (43 px) plus jego dolny odstęp
	   i tyle samo oddechu — bez niego przycisk przykrywa ostatni wiersz. */
	.lp-has-sticky-cta{padding-bottom:calc(43px + var(--lp-gutter) * 2)}
}

/* =========================================================
   Contact Form 7 (Dofinansowania lead form)
   ========================================================= */
.lp-cf7-form label{display:block;font:700 12px/1 var(--lp-font-sans);letter-spacing:.05em;text-transform:uppercase;margin-bottom:22px}
.lp-cf7-form input[type=text],
.lp-cf7-form input[type=email],
.lp-cf7-form input[type=tel],
.lp-cf7-form select{
	display:block;width:100%;margin-top:8px;padding:14px 16px;
	border:1px solid rgba(15,15,15,.2);border-radius:10px;
	font:400 15px/1.4 var(--lp-font-sans);text-transform:none;letter-spacing:normal;
	background:var(--lp-color-white);
}
.lp-cf7-form .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:10px;font:400 14px/1.5 var(--lp-font-sans);text-transform:none;letter-spacing:normal}
.lp-cf7-form input[type=submit]{
	background:var(--lp-color-purple-deep);color:var(--lp-color-cream);
	font:700 11px/1 var(--lp-font-sans);letter-spacing:.12em;text-transform:uppercase;
	padding:16px 28px;border-radius:999px;border:none;cursor:pointer;width:100%;
}
.lp-cf7-form input[type=submit]:hover{background:var(--lp-color-purple-deep)}
.lp-cf7-form .wpcf7-not-valid-tip{color:var(--lp-color-purple-deep);font-size:12px;text-transform:none;font-weight:400;margin-top:4px}
.lp-cf7-form .wpcf7-response-output{margin-top:20px;padding:16px 20px;border-radius:12px;border:1px solid rgba(105,59,133,.26)}

/* =========================================================
   Substack — post teasers from the feed + signup embed
   ========================================================= */
/* Górny padding: po zdjęciu teksturowanego pasa hero to pierwsza treść na
   stronie, więc odstęp od nagłówka serwisu musi nieść sama sekcja. */
.lp-substack{padding:clamp(30px,4.2vw,60px) clamp(22px,5vw,72px) clamp(60px,8vw,120px)}
.lp-substack__inner{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(30px,4vw,52px)}

/* Wprowadzenie przychodzi z edytora, więc styl obejmuje całe drzewo, nie sam
   akapit: stopień jak w leadzie pozostałych podstron, odstępy na gapie, żeby
   marginesy z wpautop() nie dodawały się do przerw kolumny. */
.lp-substack__intro{
	display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);
	font:400 clamp(17px,4.2vw,20px)/1.7 var(--lp-font-sans);text-wrap:pretty;
}
.lp-substack__intro > *{margin:0}
/* Nagłówki z edytora: Lora, stopień między tytułem sekcji a leadem. Margines
   dokłada powietrza do gapu kolumny, żeby tekst nie kleił się do nagłówka. */
.lp-substack__intro h2{
	margin-bottom:clamp(2px,.6vw,8px);
	font:400 clamp(24px,2.8vw,32px)/1.22 var(--lp-font-serif);text-wrap:balance;
}
/* Tytuł strony: stopień wyżej niż nagłówki z edytora (h2), ale nie tak duży
   jak dawny hero — zdanie jest długie, a kolumna ma 720px. */
.lp-substack__title{
	margin:0 0 clamp(4px,.8vw,10px);
	font:400 clamp(28px,3.2vw,40px)/1.18 var(--lp-font-serif);letter-spacing:-.01em;text-wrap:balance;
}
.lp-substack__intro h3{
	margin-bottom:clamp(2px,.4vw,4px);
	font:400 clamp(19px,2.2vw,24px)/1.3 var(--lp-font-serif);color:var(--lp-color-purple-deep);
}
.lp-substack__intro ul,.lp-substack__intro ol{padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.lp-substack__intro a{text-decoration:underline;text-underline-offset:.18em}

/* Lista wpisów to kolumna poboczna, nie główna treść — cała skala o stopień
   niżej niż nagłówki sekcji, żeby nie konkurowała z wprowadzeniem. */
.lp-substack__posts-title{
	margin:0 0 clamp(16px,2.2vw,24px);font:400 clamp(22px,2.4vw,28px)/1.18 var(--lp-font-serif);
}

.lp-post-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lp-post{display:flex;gap:clamp(14px,1.8vw,22px);padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid rgba(15,15,15,.14)}
.lp-post:first-child{border-top:none;padding-top:0}
.lp-post__thumb{flex:none;align-self:flex-start;width:clamp(84px,9vw,116px);overflow:hidden;border-radius:4px;background:#F0EAE1}
.lp-post__thumb--empty{aspect-ratio:4/3;border:1px solid rgba(15,15,15,.08);background:#F4EEE6}
.lp-post__thumb img{display:block;width:100%;height:auto;aspect-ratio:auto 4/3;transition:transform .9s cubic-bezier(.19,1,.22,1)}
.lp-post:hover .lp-post__thumb img{transform:scale(1.06)}
.lp-post__body{min-width:0}
.lp-post__date{margin:0 0 8px;font:700 10px/1 var(--lp-font-sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(15,15,15,.55)}
.lp-post__title{margin:0 0 8px;font:400 clamp(18px,1.9vw,21px)/1.3 var(--lp-font-serif)}
.lp-post__excerpt{margin:0 0 10px;font:400 14px/1.6 var(--lp-font-sans);color:rgba(15,15,15,.66);text-wrap:pretty}
.lp-post__more{
	display:inline-flex;align-items:center;gap:8px;
	font:700 10px/1 var(--lp-font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lp-color-purple-deep);
}
.lp-substack__all{margin-top:clamp(20px,3vw,32px)}

@media (min-width:1060px){
	/* Równe kolumny: tekst po lewej, wpisy po prawej. align-items:start trzyma
	   obie przy górnej krawędzi, niezależnie od tego, która jest wyższa. */
	.lp-substack__inner--split{
		max-width:1180px;
		display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		column-gap:clamp(48px,6vw,96px);align-items:start;
	}
}

@media (max-width:600px){
	.lp-post{flex-direction:column}
	.lp-post__thumb{width:100%}
}

/* =========================================================
   Kontakt
   ========================================================= */
/* Dolny padding = row-gap siatki, żeby odstęp pod tekstem był równy odstępom
   między elementami hero powyżej. Na desktopie ten padding schodzi do zera i
   odstęp niesie margin-bottom tekstu (patrz @media 761px) — tam nad tekstem
   stoi row-gap plus jego margin-top, więc suma musi być inna niż tutaj.
   Marginesu nie da się tu użyć: .lp-editorial-grid > * zeruje go poniżej 761px. */
.lp-contact-hero{padding:clamp(30px,4.2vw,60px) clamp(22px,5vw,72px) clamp(16px,2.4vw,32px)}
.lp-contact-hero__inner{max-width:1180px;margin:0 auto;align-items:start;row-gap:clamp(16px,2.4vw,32px)}

.lp-contact-eyebrow{
	margin:0 0 clamp(14px,1.8vw,24px);font:700 10px/1 var(--lp-font-sans);
	letter-spacing:.24em;text-transform:uppercase;color:var(--lp-color-purple-deep);
}
.lp-contact-eyebrow--light{color:var(--lp-color-cream)}

.lp-contact-hero__title{margin:0;font:400 clamp(38px,5.4vw,80px)/1.02 var(--lp-font-serif);letter-spacing:-.02em}
.lp-contact-hero__photo{margin:0;overflow:hidden;border-radius:4px;background:#F0EAE1}
/* Zdjęcie wypełnia swój kontener na całą szerokość i rośnie w wysokość wg
   własnych proporcji — żadnego limitu wysokości ani kadrowania. Ograniczanie
   wysokości robiło zdjęcie węższe niż ramka i odsłaniało jej tło z lewej. */
.lp-contact-hero__photo img{display:block;width:100%;height:auto}
.lp-contact-hero__text{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,18px)}
.lp-contact-hero__text > *{margin:0;font:400 clamp(16px,1.3vw,18px)/1.7 var(--lp-font-sans);color:rgba(15,15,15,.72);text-wrap:pretty}
/* Treść idzie z edytora, więc poza akapitami mogą tu wejść listy, odnośniki
   i pogrubienia — same akapity stylowały tylko pole tekstowe. */
.lp-contact-hero__text ul,.lp-contact-hero__text ol{padding-left:1.15em}
.lp-contact-hero__text li+li{margin-top:.5em}
.lp-contact-hero__text a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .3s ease}
.lp-contact-hero__text a:hover{color:var(--lp-color-purple-deep)}
.lp-contact-hero__text strong{font-weight:700;color:rgba(15,15,15,.88)}

@media (min-width:761px){
	.lp-contact-hero__inner{position:relative}
	.lp-contact-hero__head{grid-column:1/8;grid-row:1;z-index:2}
	/* Spans both rows and bleeds past the right edge, as in the mockup.
	   Pozycjonowane absolutnie — jako zwykły element gridu było wyższe niż
	   kolumna tekstu obok, więc rozpychało oba wiersze i robiło martwą
	   przerwę pod nagłówkiem. Siatka nadal wyznacza jego miejsce (left/right
	   to krawędzie obszaru 9/13), ale nie liczy się już do wysokości wierszy,
	   dzięki czemu może swobodnie zejść na pas poniżej. */
	.lp-contact-hero__photo{
		position:absolute;z-index:2;grid-column:9/13;grid-row:1/3;left:0;right:0;top:0;
		margin-top:clamp(8px,1.6vw,26px);margin-right:clamp(-72px,-5vw,-22px);
	}
	/* Kolumna 1, nie 2: tekst ma zaczynać się w tej samej pionowej linii co
	   adres e-mail w pasie poniżej, a ten stoi na lewej krawędzi siatki. */
	.lp-contact-hero__text{
		grid-column:1/8;grid-row:2;margin-top:clamp(18px,2.2vw,32px);
		margin-bottom:calc(clamp(16px,2.4vw,32px) + clamp(18px,2.2vw,32px));
	}
	/* Odstęp nad pasem niesie sam tekst (margin-bottom wyżej), żeby był co do
	   piksela równy temu nad tekstem. Zdjęcie jest wyjęte z układu wierszy,
	   więc swobodnie schodzi na pas niezależnie od tego paddingu. */
	.lp-contact-hero{padding-bottom:0}
}

/* Margines boczny siedzi na sekcji, nie w środku — tak jak w hero. Wcześniej
   był wewnątrz pola o max-width 1180px, więc e-mail startował 72px na prawo
   od osi, na której stoi cała reszta strony (H1, tekst hero, stopka). */
.lp-contact-band{padding-inline:clamp(22px,5vw,72px)}
.lp-contact-band__inner{
	max-width:1180px;margin:0 auto;padding:clamp(36px,4.4vw,66px) 0 clamp(48px,6.2vw,92px);
	display:flex;flex-direction:column;gap:clamp(48px,7vw,110px);
}
.lp-contact-mail{
	display:inline-block;font:400 clamp(26px,5vw,72px)/1.06 var(--lp-font-serif);
	letter-spacing:-.02em;color:var(--lp-color-lime);word-break:break-word;transition:opacity .3s ease;
}
.lp-contact-mail:hover{opacity:.72;color:var(--lp-color-lime)}
/* Na wąskich ekranach 5vw z reguły wyżej wpada w dolny limit 26px i adres
   siedzi w jednej trzeciej szerokości. Tutaj rośnie tak, żeby wypełnić
   wiersz: 9.5vw to bezpieczne maksimum, co przy 8.63em szerokości tekstu i bocznym
   marginesie 22px nie łamie adresu na dwie linie (sprawdzone od 320px). */
@media (max-width:760px){
	.lp-contact-mail{font-size:clamp(26px,9.5vw,38px)}
}
.lp-contact-follow{
	margin:0 0 clamp(20px,2.6vw,36px);
	font:italic 400 clamp(18px,1.9vw,26px)/1.45 var(--lp-font-serif);max-width:32ch;text-wrap:pretty;
}
.lp-contact-socials{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px)}
.lp-contact-socials a{
	font:700 12px/1 var(--lp-font-sans);letter-spacing:.16em;text-transform:uppercase;
	color:var(--lp-color-cream);border-bottom:1px solid rgba(254,251,246,.45);padding-bottom:7px;
	transition:color .3s ease,border-color .3s ease;
}
.lp-contact-socials a:hover{color:var(--lp-color-lime);border-color:var(--lp-color-lime)}

/* Maski nagłówków: nagłówek wjeżdża od dołu, więc na czas animacji trzeba
   przyciąć to, co wystaje poza ramkę. Przycięcie jest jednak groźne dla
   samego tekstu — ogonki „p", „j", „y", „ą", „ę" siedzą pod dolną krawędzią
   line-boxa (Lora schodzi 0.27em pod linię pisma, a nagłówki mają ciasną
   interlinię), więc maska, która zostaje po animacji, ścina im dolne części.
   Dlatego klasę zakłada i zdejmuje animations.js: jest tylko w trakcie
   wjazdu. Bez JS-u i przy „ogranicz ruch" nie ma jej wcale, więc nie ma też
   czego ścinać — to samo rozwiązanie, które hero strony głównej stosowało
   już wcześniej, tyle że teraz dotyczy wszystkich masek. */
[data-lp-mask].is-clipped,
[data-lp-hero-mask].is-clipped{overflow:hidden}

/* =========================================================
   O mnie
   ========================================================= */
/* Jeden hero na wszystkie podstrony (O mnie / Substack / Indywidualnie /
   Firmy / Eventy), wg makiety: teksturowany pas, kremowy tytuł serif
   dosunięty w prawo, a wokół niego trzy limonkowe hasła z hero strony
   głównej. Znaczniki: template-parts/page-hero.php. */
.lp-page-hero{
	/* Mobile: pas ma 80px, a pod nim było 72px pustki (24px tego marginesu
	   + 48px górnego paddingu sekcji). Desktopowa wartość wraca niżej. */
	margin-bottom:var(--lp-hero-gap);
	/* Mobile ma własny rozmiar: pas ma 80px, więc tytuł musi zmieścić się
	   w dwóch liniach w wąskiej lewej kolumnie.
	   Desktopowe 3.5vw (wprost z makiety) wraca w media query niżej. */
	--lp-hero-title:clamp(15px,5.2vw,20px);
	/* Lora: ascent 1.01em, descent 0.27em. Przy line-height 1.1 dół line-boxa
	   wypada 0.18em pod baseline, więc ogonki (ż, j, y) wystają 0.091em poza
	   niego i maska je ścinała. 0.14em to ten zapas z marginesem błędu.
	   Liczone od rozmiaru tytułu, bo "em" na masce znaczyłoby 16px. */
	--lp-hero-descender:calc(var(--lp-hero-title) * .14);
}
.lp-page-hero__inner{
	position:relative;display:flex;align-items:center;
	min-height:80px;
	padding:clamp(10px,2.6vw,16px) clamp(22px,5vw,72px);
}
/* Przy 80px hasła nie mieszczą się już nad i pod tytułem, więc tytuł oddaje
   im prawą kolumnę — tak jak na desktopie. Kolumny się nie zachodzą, więc
   trójkąt nie może wejść na tytuł niezależnie od długości nazwy. */
.lp-page-hero__head{width:68%}
/* Maska przycina do krawędzi paddingu, więc zapas idzie w padding-bottom.
   Ujemny margines zdejmuje go z układu, żeby nie przesuwał centrowania. */
/* Zapas liczony od rozmiaru tytułu hero, więc zmienna istnieje tylko wewnątrz
   pasa — selektor jest zawężony, bo tej samej klasy używają też nagłówki H2
   w treści „O mnie", gdzie --lp-hero-descender nie jest zdefiniowany. */
.lp-page-hero .lp-page-hero__mask{
	padding-bottom:var(--lp-hero-descender);
	margin-bottom:calc(var(--lp-hero-descender) * -1);
}
/* text-wrap:balance jest tylko awaryjne — gdyby ktoś wpisał tytuł dłuższy
   niż ~40 znaków, dwie linie wyjdą równe zamiast sieroty na drugiej. */
.lp-page-hero h1{margin:0;font:400 var(--lp-hero-title)/1.1 var(--lp-font-serif);color:var(--lp-color-cream);text-wrap:balance}
.lp-page-hero__lead{margin:clamp(18px,2.4vw,28px) 0 0;max-width:620px;font:400 19px/1.65 var(--lp-font-sans)}

/* Sekcja tuż pod hero oddaje część górnego paddingu — .lp-section jest użyte
   41 razy w szablonach, więc regułę zawężam do sąsiada hero, żeby nie ruszać
   rytmu pozostałych sekcji. Desktop dostaje pełny padding z powrotem. */
.lp-page-hero + .lp-section{padding-top:20px}

/* Hasła leżą na osobnej warstwie nad pasem i są rozstawione na wierzchołkach
   trójkąta, z tytułem w jego środku — celowo niesymetrycznie, tak samo na
   mobile jak na desktopie, tylko na innych współrzędnych. */
.lp-page-hero__words{position:absolute;inset:0;pointer-events:none}
.lp-page-hero__word{
	position:absolute;
	font:400 clamp(13px,3.4vw,16px)/1.2 var(--lp-font-serif);
	color:var(--lp-color-lime);white-space:nowrap;
}
/* Mobile: trójkąt schodkuje w prawo i w dół — współrzędne ustalone ręcznie,
   żeby kompozycja czytała się jako trójkąt, a nie jako kolumna przy krawędzi.
   Hasła są jednoliniowe (spany inline), bo przy 80px dwie linie × trzy
   hasła to 79px, czyli cały pas bez odstępów. */
.lp-page-hero__word{font-size:clamp(11px,2.9vw,12px)}
.lp-page-hero__word span{display:inline}
.lp-page-hero__word--1{top:6%;left:50%}
.lp-page-hero__word--2{top:36%;left:70%}
.lp-page-hero__word--3{top:72%;left:59%}

@media (min-width:1060px){
	/* Pas jest szeroki i niski, tytuł wyśrodkowany w pionie — dlatego góra
	   i dół mają równy padding, bo przy nierównym flex centruje w polu
	   treści i tytuł wizualnie ucieka do góry. Prawy margines trzyma
	   kolumnę na "Futures Thinking", jedyne hasło na wysokości tytułu. */
	.lp-page-hero__inner{
		min-height:clamp(170px,12.75vw,204px);
		padding-block:clamp(34px,4.6vw,64px);padding-right:clamp(110px,10vw,190px);
	}
	.lp-page-hero{--lp-hero-title:clamp(30px,3.5vw,52px);margin-bottom:clamp(16px,3vw,40px)}
	.lp-page-hero + .lp-section{padding-top:clamp(28px,4vw,52px)}
	/* Jawna szerokość, nie max-width: jako element flex head zwinąłby się do
	   szerokości tytułu, więc krótka nazwa ("Substack") startowałaby zupełnie
	   gdzie indziej niż długa. 86% pola treści = wcięcie ~17% jak w makiecie. */
	.lp-page-hero__head{margin-left:auto;width:86%}
	.lp-page-hero__word{white-space:normal;font-size:clamp(15px,1.25vw,19px)}
	.lp-page-hero__word span{display:block}
	/* Procenty przeliczone pod niższy pas — przy starych wartościach
	   "Creative Mindset" schodziło na 6px od tytułu.
	   Clear Vision podniesione o 10%, Futures Thinking o 5% (czyli o te ~5%
	   mniej), Creative Mindset bez zmian. */
	.lp-page-hero__word--1{top:7%;left:73%}
	.lp-page-hero__word--2{top:31%;left:90%}
	/* 85%, nie 79%: po podniesieniu Clear Vision wchodzi w pas wysokości
	   tytułu, a długi tytuł („O mnie") sięga 83% — przy 79% nachodziły. */
	.lp-page-hero__word--3{top:62%;left:85%}
}

/* Sidebar sticks alongside the scrolling copy; the anchor list is a
   scroll-spy driven by ScrollTrigger (see animations.js). */
.lp-about{padding:0 clamp(22px,5vw,72px) clamp(60px,8vw,120px);display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px);align-items:flex-start}
.lp-about-sidebar{flex:0 1 250px;margin-right:clamp(20px,4vw,56px);position:sticky;top:90px}
/* Portret w „O mnie” i okładka nad paskiem kotwic na podstronach oferty to
   ten sam słupek, więc i ten sam rozmiar — wspólna reguła, żeby przy zmianie
   nie rozjechały się na dwie różne szerokości. */
.lp-about-sidebar__photo,
.lp-offer-sidebar__photo{display:block;width:150px;height:auto;margin-bottom:16px}
/* Na telefonie pasek kotwic jest poziomy i pełnej szerokości, więc okładka
   nad nim nie ma gdzie stanąć — znika tak samo jak cały sidebar w „O mnie”.
   Reguła musi stać PO deklaracji wyżej: przy równej specyficzności decyduje
   kolejność w pliku. */
@media (max-width:900px){
	.lp-offer-sidebar__photo{display:none}
}
.lp-about-sidebar__name{font:700 11px/1.4 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase;margin:0}
.lp-about-sidebar__role{margin:5px 0 26px;font:400 11px/1.5 var(--lp-font-sans);color:rgba(15,15,15,.6)}

.lp-about-nav{display:flex;flex-direction:column;gap:11px}
.lp-about-nav a{
	font:700 11px/1 var(--lp-font-sans);letter-spacing:.14em;text-transform:uppercase;
	opacity:.45;width:fit-content;border-bottom:2px solid transparent;padding-bottom:5px;
	transition:color .3s ease,opacity .3s ease,border-color .3s ease;
}
.lp-about-nav a.is-active{opacity:1;color:var(--lp-color-purple-deep);border-bottom-color:var(--lp-color-purple-deep)}
.lp-about-nav--mobile{display:none}

.lp-about-content{flex:1 1 560px;max-width:720px;display:flex;flex-direction:column;gap:clamp(30px,4vw,52px);min-width:0}
.lp-about-content > [id]{scroll-margin-top:100px}
.lp-about-lead{font:400 clamp(16px,4vw,18px)/1.75 var(--lp-font-sans);margin:0;text-wrap:pretty}

/* Treść sekcji „O mnie” pochodzi z edytora, więc styl niosą same znaczniki:
   akapit wygląda jak .lp-about-lead, „Nagłówek 3” jak .lp-about-h3, a cytat
   jak dawne motto przy portrecie. Dzięki temu w edytorze nie trzeba dopisywać
   żadnych klas — wystarczy wybrać format z listy. */
.lp-about-rte{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.lp-about-rte p,.lp-about-rte h2,.lp-about-rte h3,.lp-about-rte h4,
.lp-about-rte ul,.lp-about-rte ol,.lp-about-rte blockquote,.lp-about-rte figure{margin:0}
.lp-about-rte p,.lp-about-rte li{font:400 clamp(16px,4vw,18px)/1.75 var(--lp-font-sans);text-wrap:pretty}
.lp-about-rte ul,.lp-about-rte ol{padding-left:1.4em}
.lp-about-rte ul{list-style:disc}
.lp-about-rte ol{list-style:decimal}
.lp-about-rte li+li{margin-top:6px}
.lp-about-rte h2{font:400 clamp(26px,3.2vw,38px)/1.18 var(--lp-font-serif);text-wrap:balance}
.lp-about-rte h3,.lp-about-rte h4{
	font:400 clamp(19px,2.2vw,25px)/1.3 var(--lp-font-serif);
	color:var(--lp-color-purple-deep);text-wrap:balance;
	/* Tyle, ile miała dawna podsekcja H3 — nagłówek w środku treści dostaje
	   oddech ponad odstęp kolumny, żeby przyklejał się do swojego akapitu. */
	margin-top:clamp(6px,1.2vw,16px);
}
/* „Firmy i zespoły” mają w treści dwa poziomy: nagłówek listy obszarów (H3)
   i każdy obszar osobno (H4). Wspólna deklaracja wyżej dawała im ten sam
   stopień, więc hierarchia czytała się płasko. Tyle, ile miał dawny
   .lp-topic h4, zanim obszary przeniosły się do edytora. */
.lp-about-rte h4{font-size:clamp(17px,1.8vw,20px)}

/* Obszary pracy warsztatowej / szkoleniowej: numer, wyraźny tytuł i przygaszony
   opis, rozdzielone cienką kreską. Wcześniej był to jednolity ciąg nagłówków
   i akapitów — 1864 px, których nie dało się przelecieć wzrokiem, a to jest
   menu tematów do wyboru, nie tekst do przeczytania od deski do deski.

   Numer liczy licznik CSS, więc dopisanie tematu w edytorze niczego nie
   przenumerowuje. Selektory są dwuklasowe, bo muszą wygrać z ogólnymi
   regułami listy i akapitu w .lp-about-rte. */
.lp-about-rte .lp-topics{list-style:none;margin:0;padding:0;counter-reset:lp-topic}
.lp-about-rte .lp-topic{
	counter-increment:lp-topic;margin-top:0;
	display:grid;grid-template-columns:auto 1fr;
	column-gap:clamp(12px,1.8vw,22px);
	padding-block:clamp(13px,1.6vw,18px);
}
/* Kreska rozdziela tematy, więc pierwszy jej nie dostaje — inaczej dublowałaby
   się z odstępem pod nagłówkiem listy. */
.lp-about-rte .lp-topic + .lp-topic{border-top:1px solid rgba(15,15,15,.12)}
.lp-about-rte .lp-topic::before{
	content:counter(lp-topic,decimal-leading-zero) "\00a0\2014";
	grid-column:1;grid-row:1;white-space:nowrap;
	font:700 12px/1.9 var(--lp-font-sans);letter-spacing:.08em;
	color:var(--lp-color-purple-deep);
}
.lp-about-rte .lp-topic > *{grid-column:2}
.lp-about-rte .lp-topic h4{margin-top:0}
.lp-about-rte .lp-topic p{font-size:clamp(15px,1.7vw,16px);line-height:1.7;color:rgba(15,15,15,.72)}
.lp-about-rte .lp-topic p + p{margin-top:.7em}
@media (max-width:600px){
	/* Na telefonie kolumna ma 339 px, a wcięcie pod numerem zabierało z niej 42 —
	   każdy wiersz opisu łamał się wcześniej. Numer zostaje przy tytule, opis
	   wraca na pełną szerokość. */
	.lp-about-rte .lp-topic > :not(h4){grid-column:1/-1}
}

.lp-about-rte blockquote{font:italic 400 clamp(18px,2vw,26px)/1.4 var(--lp-font-serif);text-wrap:pretty}
.lp-about-rte blockquote p{font:inherit;margin:0}
.lp-about-rte a{text-decoration:underline;text-underline-offset:.18em}
.lp-about-rte strong{font-weight:700}
.lp-about-rte img{max-width:100%;height:auto}

/* Zdjęcie okładkowe stoi nad nagłówkiem swojej sekcji — odstęp większy niż
   między nagłówkiem a akapitem, żeby kadr czytał się jako otwarcie sekcji. */
.lp-about-cover{margin-bottom:clamp(4px,1vw,14px)}

/* Na desktopie limitujemy WYSOKOŚĆ kadru, nie szerokość. Kolumna ma 720 px,
   więc zdjęcie pionowe rozciągnięte na jej szerokość urastało do 1080 px —
   ponad wysokość ekranu. Limit szerokości naprawiłby pionowe, ale spłaszczyłby
   każde przyszłe zdjęcie poziome, a limit wysokości działa na oba: pionowy
   kadr 2:3 maleje do 347×520, poziomy dalej bierze całą kolumnę.
   width:auto + height:auto (z reguły wyżej) = proporcje bez kadrowania.
   Telefon zostaje bez zmian — tam pełna szerokość jest w porządku. */
@media (min-width:901px){
	/* Centrowanie niesie flex, nie margin-inline:auto na obrazku: przy
	   width:auto automatyczne marginesy liczą się od szerokości SPRZED limitu
	   wysokości, więc kadr zwężony z 720 do 347 px wypadał 29 px od osi
	   kolumny. */
	.lp-about figure.lp-about-cover,
	.lp-offer-content figure.lp-about-cover{display:flex;justify-content:center}
	.lp-about figure.lp-about-cover img,
	.lp-offer-content figure.lp-about-cover img{
		width:auto;max-width:100%;max-height:520px;
	}
}

/* Jedna sekcja = nagłówek H2 + jej akapity (i ewentualne podsekcje H3).
   Odstępy wewnątrz robi gap, więc nagłówki nie noszą własnych marginesów —
   inaczej margin-bottom H2 dodawałby się do gapu kolumny. */
.lp-about-section{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.lp-about-sub{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);margin-top:clamp(6px,1.2vw,16px)}

/* Nagłówki sekcji to całe zdania, nie hasła — stąd stopień mniejszy niż
   w hero, żeby w kolumnie 720 px mieściły się w dwóch, trzech wierszach. */
.lp-about-h2{margin:0;font:400 clamp(26px,3.2vw,38px)/1.18 var(--lp-font-serif);text-wrap:balance}
.lp-about-h3{margin:0;font:400 clamp(19px,2.2vw,25px)/1.3 var(--lp-font-serif);color:var(--lp-color-purple-deep);text-wrap:balance}

.lp-about figure,
.lp-offer-content figure{margin:0;overflow:hidden}
.lp-about figure img,
.lp-offer-content figure img{display:block;width:100%;height:auto}

/* Wcześniej stały tu dwa zdjęcia obok siebie; zostało jedno, więc bierze całą
   szerokość kolumny. Wysokości nie narzucamy — wynika z proporcji pliku. */
.lp-about figure.lp-about-single{width:100%}

/* Needs the extra class to outrank `.lp-about figure{margin:0}`, otherwise
   the auto margin that pushes this frame to the right is cancelled. */
.lp-about figure.lp-about-big{width:min(100%,520px);margin-left:auto}

.lp-about-speaking{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,2vw,24px)}
.lp-about-speaking figure.is-offset{margin-top:clamp(20px,3vw,44px)}

.lp-about-cta__inner{
	max-width:1180px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(22px,5vw,72px);
	display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(24px,4vw,56px);
}
.lp-about-cta__inner p{margin:0;flex:1 1 460px;font:400 clamp(24px,3vw,42px)/1.32 var(--lp-font-serif);text-wrap:pretty}
.lp-arrow-link__line{display:block;width:52px;height:1px;background:currentColor}

@media (max-width:900px){
	.lp-about-sidebar{display:none}
	/* Mobile keeps the same anchors as a sticky, horizontally scrollable bar. */
	.lp-about-nav--mobile{
		display:flex;flex-direction:row;position:sticky;top:var(--lp-header-h);z-index:110;
		flex:1 1 100%;width:100%;background:var(--lp-color-cream);
		padding:12px clamp(22px,5vw,72px);gap:24px;
		overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
		margin:0 calc(-1 * clamp(22px,5vw,72px));
	}
	.lp-about-nav--mobile::-webkit-scrollbar{display:none}
	.lp-about-nav--mobile a{flex:none;white-space:nowrap}
}

/* =========================================================
   Dofinansowania (landing BUR)
   Mockup's two flat blue (#8AB9DB) bands are rendered here with the
   site-wide textured band instead, so the page sits next to the other
   subpages. Copy is unchanged — only the presentation.
   ========================================================= */
.lp-bur-hero{
	display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
	gap:clamp(32px,5vw,72px);align-items:center;
	padding-block:clamp(36px,6vw,80px) clamp(28px,4vw,48px);
}
.lp-bur-hero__photo{margin:0}
.lp-bur-hero__photo img{display:block;width:100%;height:auto;border-radius:4px}
.lp-bur-hero__mask{padding-bottom:.08em}
.lp-bur-hero__title{margin:0;font:400 clamp(30px,4.4vw,52px)/1.19 var(--lp-font-serif);max-width:692px;text-wrap:pretty}

/* Treść „Dofinansowań” pochodzi z edytora, więc styl niosą same znaczniki —
   tak samo jak na „O mnie”. W edytorze nie dopisuje się żadnych klas:
   akapit wygląda jak dawny lead, akapit pogrubiony w całości jak dawne pole
   „wyróżniony akapit”, cytat jak ramka z terminem, a lista numerowana jak
   kroki „Jak to działa”. */
.lp-bur-hero__rte{margin-top:clamp(20px,2.6vw,32px);max-width:620px}
.lp-bur-hero__rte p{
	margin:0;font:400 clamp(16px,1.5vw,18px)/1.65 var(--lp-font-sans);
	color:rgba(15,15,15,.72);text-wrap:pretty;
}
.lp-bur-hero__rte p+p{margin-top:clamp(12px,1.4vw,16px)}
/* Akapit pogrubiony w całości to dawny .lp-bur-hero__note: pełna czerń
   i większy odstęp nad nim, żeby odkleił się od leadu. Przeglądarka bez
   :has() pokazuje go po prostu jako pogrubiony lead. */
.lp-bur-hero__rte p:has(> strong:only-child){
	margin-top:clamp(20px,2.6vw,32px);color:inherit;line-height:1.6;
}
.lp-bur-hero__rte a{text-decoration:underline;text-underline-offset:.18em}
.lp-bur-hero__cta{margin-top:clamp(24px,3vw,36px)}

.lp-bur-badges{
	list-style:none;margin:0;padding:0 0 clamp(24px,4vw,44px);
	display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;
	font:700 11px/1 var(--lp-font-sans);letter-spacing:.12em;text-transform:uppercase;
}
.lp-bur-badges li{display:flex;align-items:center;gap:14px}
.lp-bur-badges li:not(:last-child)::after{
	content:'';width:5px;height:5px;border-radius:50%;background:var(--lp-color-purple-deep);
}

.lp-bur-intro{max-width:820px;padding-top:0}
.lp-bur-intro__rte p{
	margin:0 0 clamp(18px,2.4vw,28px);
	font:400 clamp(18px,2vw,24px)/1.45 var(--lp-font-serif);text-wrap:pretty;
}
.lp-bur-intro__rte ul,.lp-bur-intro__rte ol{margin:0 0 clamp(18px,2.4vw,28px);padding-left:1.4em}
.lp-bur-intro__rte li{font:400 clamp(16px,1.5vw,18px)/1.7 var(--lp-font-sans)}
.lp-bur-intro__rte a{text-decoration:underline;text-underline-offset:.18em}
/* Cytat we wstępie to dawna ramka „Ważny termin” — pogrubiony początek
   zostaje jej etykietą, reszta treścią. */
.lp-bur-intro__rte blockquote{
	margin:0;border:1px solid var(--lp-color-purple-deep);
	background:rgba(105,59,133,.07);padding:clamp(20px,2.4vw,28px);
}
.lp-bur-intro__rte blockquote p{
	margin:0;font:400 clamp(15px,1.5vw,18px)/1.6 var(--lp-font-sans);
}
.lp-bur-intro__rte blockquote p+p{margin-top:12px}
.lp-bur-intro__rte blockquote strong{
	display:block;margin-bottom:12px;font:700 11px/1 var(--lp-font-sans);
	letter-spacing:.18em;text-transform:uppercase;color:var(--lp-color-purple-deep);
}
.lp-bur-intro__rte > :last-child{margin-bottom:0}

/* Unlike the other textured bands (huge display type), these two carry
   16px body copy, which the texture's light patches wash out — hence a
   scrim between the texture (::before) and the content (z-index:1). */
.lp-bur-who::after,.lp-bur-steps::after{
	content:'';position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(90deg,rgba(15,15,15,.34),rgba(15,15,15,.18));
}
.lp-bur-who__title,.lp-bur-steps__title{text-align:center;margin-bottom:clamp(28px,4vw,48px)}
/* Kafelki powstają z „Nagłówków 4” w edytorze (lp_group_topics()), więc
   selektory celują w znaczniki, a nie w klasy wpisywane ręcznie. */
.lp-bur-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,2.6vw,36px)}
.lp-bur-card{
	text-align:center;padding:clamp(26px,3vw,38px) clamp(18px,2vw,26px);border-radius:16px;
	background:rgba(254,251,246,.10);border:1px solid rgba(254,251,246,.30);
}
.lp-bur-card__icon{
	display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;
	margin:0 auto 22px;background:rgba(254,251,246,.16);color:var(--lp-color-cream);
}
.lp-bur-card h3,.lp-bur-card h4{margin:0;font:400 clamp(19px,1.9vw,24px)/1.2 var(--lp-font-serif)}
.lp-bur-card p{margin:12px 0 0;font:400 15px/1.6 var(--lp-font-sans);opacity:.85;text-wrap:pretty}

.lp-bur-story{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,340px);gap:clamp(32px,5vw,72px);align-items:center}
.lp-bur-story__body{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);align-items:flex-start}
.lp-bur-story__body h2{margin:0}
.lp-bur-story__rte{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.lp-bur-story__rte p{margin:0}
.lp-bur-story__rte ul,.lp-bur-story__rte ol{margin:0;padding-left:1.4em}
.lp-bur-story__rte a{text-decoration:underline;text-underline-offset:.18em}
/* Cytat w tej sekcji to dawne „wyróżnione zdanie” — kursywa serif. */
.lp-bur-story__rte blockquote{
	margin:0;font:italic 400 clamp(17px,1.8vw,22px)/1.5 var(--lp-font-serif);text-wrap:pretty;
}
.lp-bur-story__rte blockquote p{font:inherit}
.lp-bur-story__photo{margin:0}
.lp-bur-story__photo img{display:block;width:100%;height:auto;border-radius:4px}

.lp-bur-modules__title{margin-bottom:clamp(20px,2.4vw,28px)}
.lp-bur-modules__intro{margin:0 0 clamp(36px,5vw,64px);max-width:820px}
.lp-bur-modules__intro p,.lp-bur-modules__intro li{
	margin:0;font:400 clamp(16px,1.5vw,18px)/1.65 var(--lp-font-sans);
	color:rgba(15,15,15,.72);text-wrap:pretty;
}
.lp-bur-modules__intro p+p{margin-top:clamp(12px,1.4vw,16px)}
.lp-bur-modules__intro ul,.lp-bur-modules__intro ol{margin:clamp(12px,1.4vw,16px) 0 0;padding-left:1.4em}
.lp-bur-modules__list{display:flex;flex-direction:column;gap:clamp(40px,6vw,88px)}
.lp-bur-module{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center}
/* Zigzag: even rows put the photo on the right, as in the mockup. */
.lp-bur-module:nth-child(even) .lp-bur-module__photo{order:2}
.lp-bur-module__photo{margin:0;overflow:hidden;border-radius:4px}
.lp-bur-module__photo img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.lp-bur-module:hover .lp-bur-module__photo img{transform:scale(1.04)}
.lp-bur-module__title{margin:0 0 14px;font:400 clamp(24px,2.8vw,36px)/1.15 var(--lp-font-serif)}
.lp-bur-module__rte p,.lp-bur-module__rte li{
	margin:0 0 12px;font:400 15px/1.65 var(--lp-font-sans);
	color:rgba(15,15,15,.75);text-wrap:pretty;
}
.lp-bur-module__rte ul,.lp-bur-module__rte ol{margin:0 0 12px;padding-left:1.4em}
.lp-bur-module__rte li{margin-bottom:6px}
.lp-bur-module__rte a{text-decoration:underline;text-underline-offset:.18em}
/* Odstęp pod treścią należy do przycisku; ostatni akapit sam go nie niesie,
   bo bez przycisku zostawiałby pustą przerwę. */
.lp-bur-module__rte > :last-child{margin-bottom:0}
.lp-bur-module__rte + .lp-btn{margin-top:20px}

/* Kroki pisze się w edytorze jako listę numerowaną; numer 01, 02… liczy
   licznik CSS, więc dopisanie kroku niczego nie przenumerowuje. Tekst pozycji
   owija lp_wrap_list_text(), bo kreska i wcięcie należą do samego tekstu —
   wielki numer wystaje ponad nie, tak jak w makiecie. */
.lp-bur-steps__rte ol{
	list-style:none;margin:0 auto;padding:0;max-width:820px;counter-reset:lp-bur-step;
	display:flex;flex-direction:column;gap:clamp(26px,3.5vw,48px);
}
.lp-bur-steps__rte ol li{
	counter-increment:lp-bur-step;
	display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);align-items:baseline;
}
.lp-bur-steps__rte ol li::before{
	content:counter(lp-bur-step,decimal-leading-zero);
	flex:none;width:clamp(80px,8vw,130px);text-align:right;
	font:400 clamp(56px,6vw,92px)/1 var(--lp-font-serif);color:var(--lp-color-cream);
}
.lp-bur-step__text{
	flex:1 1 300px;min-width:220px;max-width:46ch;
	font:400 16px/1.7 var(--lp-font-sans);text-wrap:pretty;
	padding-top:clamp(6px,1vw,16px);border-top:1px solid rgba(254,251,246,.55);
}
.lp-bur-step__text p{margin:0}
/* Akapit poza listą (zdanie wprowadzające kroki) trzyma miarę wiersza listy. */
.lp-bur-steps__rte > p{
	margin:0 auto clamp(20px,2.6vw,32px);max-width:820px;
	font:400 16px/1.7 var(--lp-font-sans);text-wrap:pretty;
}

.lp-bur-form{max-width:760px}
.lp-bur-form__title{margin-bottom:clamp(28px,3.4vw,40px)}
.lp-bur-form__card{background:var(--lp-color-white);border:1px solid rgba(15,15,15,.14);padding:clamp(24px,3.4vw,44px)}
.lp-bur-faq{max-width:860px}

@media (max-width:860px){
	.lp-bur-hero,.lp-bur-story,.lp-bur-module{grid-template-columns:1fr}
	.lp-bur-hero__photo{max-width:380px}
	/* On one column the zigzag order would push photos below their copy. */
	.lp-bur-module:nth-child(even) .lp-bur-module__photo{order:0}
	.lp-bur-story__photo{order:-1;max-width:340px}
	.lp-bur-steps__rte ol li{gap:14px}
	.lp-bur-steps__rte ol li::before{width:auto;text-align:left}
}

/* Utility */
.lp-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}