/* ============================================================
   MERLON — /finansowanie/ v2 (2026-07-29)
   Przebudowa 1:1 wg projektu Finansowanie.pdf.
   Scope: body.page-flon (body_class w functions.php childa).
   Paleta projektu: primary #1d5ff0, hero duotone ~#1b5be7,
   szare tlo sekcji #f4f4f6, tekst #16181d / #555c66.
   Poprzednia wersja: finansowanie.css.bak-v1-20260729 (lokalnie).
   ============================================================ */

body.page-flon { --fl-blue: #1d5ff0; --fl-blue-d: #1747b8; --fl-ink: #16181d; --fl-gray: #555c66;
  --fl-bg: #f4f4f6; --fl-line: #e3e5ea; }

body.page-flon .the-content, body.page-flon #content { max-width: none; padding: 0; }
body.page-flon #content.container { margin-top: 0 !important; padding-top: 0; padding-bottom: 0; }
body.page-flon .fl2 { font-family: 'Poppins', sans-serif; color: var(--fl-ink); }
body.page-flon .fl2 *, body.page-flon .fl2 *::before, body.page-flon .fl2 *::after { box-sizing: border-box; }

/* ---------- INTEGRACJA Z SZABLONEM ----------
   Pas tytulu strony + widget adresowy slidera chowamy TYLKO na tej podstronie.
   Menu/top-bar/stopka szablonu — nietkniete. */
body.page-flon #slider-widgets-1 { display: none; }
body.page-flon #content h1.title, body.page-flon h1.title { display: none; }

/* ---------- SLIDER SZABLONU = HERO ----------
   Zdjecie = featured image strony (inc_slider.php), duotone wypalony w pliku.
   Lancuch wysokosci wypracowany w v1: parent ma `.slider.height-N > ul._slider li
   { height:..; max-height:60vh }` — max-height CLAMPUJE height:100%, stad fixy. */
body.page-flon #slider { display: block !important; }
body.page-flon #slider.slider { height: min(56vh, 540px) !important; }
html body.page-flon #slider.slider ._slider { height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body.page-flon #slider.slider ._slider.owl-carousel li,
html body.page-flon #slider.slider ._slider li { height: 100% !important; max-height: none !important; }
html body.page-flon #slider.slider ._slider.owl-carousel li img,
html body.page-flon #slider.slider ._slider li img { height: 100% !important; width: 100% !important;
  object-fit: cover !important; object-position: center 55% !important; }
/* lekkie przyciemnienie pod bialy H1 (duotone jest w pliku zdjecia) */
html body.page-flon #slider.slider ._slider li::after { content: ""; position: absolute; inset: 0; z-index: 1;
  /* 2026-08-06: zdjety welon-filtr (zdjecia maja natywny gradient od klienta);
     zostaje TYLKO krotki niebieski gradient od gory (czytelnosc menu) */
  background: linear-gradient(180deg, #1d5ff0 0%, rgba(29, 95, 240, 0) 100px); pointer-events: none; }

/* 640px niebieski gradient rodzica (#header::after) zbedny przy natywnych gradientach;
   wyjatek /kontakt/ (page-id-11, tez ma klase page-flon) — tam zostaje szary welon
   z body.page-id-11 #header::after w style.css */
body.page-flon:not(.page-id-11) #header::after { display: none; }

/* ---------- HERO: H1 na sliderze (JS podciaga nad slider, klasa flon-overlay) ---------- */
body.page-flon .fl2-hero { padding: 60px 24px; background: linear-gradient(135deg, #123d9e, #1d5ff0); }
body.page-flon.flon-overlay .fl2-hero { background: transparent; padding: 0 24px; position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center; }
body.page-flon .fl2-hero h1 { font-family: 'Poppins', sans-serif; font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 500; color: #fff; text-align: center; letter-spacing: .3px; margin: 0;
  text-shadow: 0 2px 24px rgba(9, 26, 74, .35); }

/* ---------- WSPOLNE ---------- */
.fl2-inner { max-width: 1280px; margin: 0 auto; padding: 0 36px; }
.fl2 h2.fl2-h2 { font-family: 'Poppins', sans-serif; font-size: clamp(25px, 2.5vw, 37px); font-weight: 500;
  line-height: 1.28; color: var(--fl-blue); margin: 0 0 26px; }
.fl2 .fl2-h2--c { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
.fl2 p { font-size: 15.5px; line-height: 1.8; color: var(--fl-gray); font-weight: 300; margin: 0 0 14px; }
.fl2 .fl2-mini { margin-top: 26px; color: var(--fl-ink); }
.fl2 .fl2-mini strong { display: block; font-weight: 600; font-size: 16.5px; margin-bottom: 4px; color: var(--fl-ink); }
.fl2-btn { display: inline-block; margin-top: 26px; padding: 13px 32px; border: 1px solid var(--fl-blue);
  color: var(--fl-blue) !important; background: transparent; font-family: 'Poppins', sans-serif; font-size: 13px;
  font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none !important;
  transition: background .3s ease, color .3s ease; cursor: pointer; }
.fl2-btn:hover { background: var(--fl-blue); color: #fff !important; }
.fl2-btn--w { border-color: #fff; color: #fff !important; }
.fl2-btn--w:hover { background: #fff; color: var(--fl-blue) !important; }

/* ---------- SEKCJE SPLIT (tekst + zdjecie) ---------- */
.fl2-sec { padding: 96px 0; background: #fff; }
.fl2-sec--gray { background: var(--fl-bg); }
.fl2-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.fl2-split figure { margin: 0; }
.fl2-split img { display: block; width: 100%; height: auto; }

/* ---------- KARTY BENEFITOW ---------- */
.fl2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 56px; }
.fl2-card { background: #fff; border: 1px solid var(--fl-line); padding: 34px 38px 38px; }
.fl2-card h3 { font-family: 'Poppins', sans-serif; font-size: 17.5px; font-weight: 600; color: var(--fl-ink); margin: 14px 0 12px; }
.fl2-card p { margin: 0; font-size: 15px; }
.fl2-ico { display: inline-block; width: 28px; height: 28px; background: var(--fl-blue);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fl2-ico--wallet { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h13a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='16.5' cy='13.5' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.fl2-ico--bank { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 9l9-5 9 5'/%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M6 9v8M10 9v8M14 9v8M18 9v8'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E"); }
.fl2-ico--doc { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M7 3h8l4 4v14H7z'/%3E%3Cpath d='M15 3v4h4'/%3E%3Cpath d='M10 12h6M10 15h6M10 9h2'/%3E%3C/svg%3E"); }
.fl2-ico--shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.2 7.7-8 9-4.8-1.3-8-4.5-8-9V6z'/%3E%3C/svg%3E"); }

/* ---------- DLA KOGO (niebieski box + zdjecie na zakladke) ---------- */
.fl2-forwho { position: relative; padding: 96px 0 120px; background: #fff; }
.fl2-forwho__grid { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 36px; }
.fl2-forwho__box { width: 60%; background: var(--fl-blue); color: #fff; padding: clamp(40px, 5vw, 76px) clamp(34px, 4.5vw, 90px); }
.fl2-forwho__box h2 { font-family: 'Poppins', sans-serif; font-size: clamp(26px, 2.8vw, 40px); font-weight: 500;
  color: #fff; margin: 0 0 30px; }
.fl2-forwho__box .fl2-lead { color: #fff; font-weight: 600; font-size: 16.5px; margin-bottom: 18px; }
.fl2-forwho__box ul { list-style: none; margin: 0 0 34px; padding: 0; }
.fl2-forwho__box li { position: relative; padding-left: 20px; margin: 9px 0; font-size: 15px; font-weight: 300;
  line-height: 1.65; color: rgba(255, 255, 255, .96); }
.fl2-forwho__box li::before { content: "•"; position: absolute; left: 2px; color: rgba(255, 255, 255, .85); }
.fl2-forwho__box .fl2-btn { margin-top: 0; }
/* zal. 12: bez cienia. Mial 70px rozmycia i to on byl "szara poswiata" wokol
   zdjecia — w projekcie zdjecie jest odciete twarda krawedzia. Zdjete globalnie,
   bo klient zglosil to dla wyceny "i innych" (ta sama klasa jedzie na finansowaniu). */
.fl2-forwho__photo { position: absolute; right: 36px; top: 54%; transform: translateY(-50%); width: 44%; margin: 0; }
.fl2-forwho__photo img { display: block; width: 100%; height: auto; }

/* ---------- KROKI ---------- */
.fl2-steps { max-width: 960px; margin: 56px auto 0; }
.fl2-step { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 30px 0; border-bottom: 1px solid var(--fl-line); }
.fl2-step:last-child { border-bottom: 0; }
.fl2-step .n { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 600; color: var(--fl-blue); line-height: 1.2; }
.fl2-step h3 { font-family: 'Poppins', sans-serif; font-size: 17.5px; font-weight: 600; color: var(--fl-ink); margin: 0 0 10px; }
.fl2-step p { margin: 0; }

/* ---------- BAND: finansowanie i posrednictwo ---------- */
.fl2-band { position: relative; padding: 110px 0; color: #fff; text-align: center;
  background: linear-gradient(rgba(29, 95, 240, .30), rgba(29, 95, 240, .30)),
    var(--fl-band-img, linear-gradient(#1d5ff0, #1d5ff0)) center 30% / cover no-repeat; }
.fl2-band h2 { font-family: 'Poppins', sans-serif; font-size: clamp(27px, 3vw, 44px); font-weight: 500; color: #fff; margin: 0 0 30px; }
.fl2-band p { color: rgba(255, 255, 255, .95); max-width: 1020px; margin-left: auto; margin-right: auto; }
.fl2-band .fl2-mini { margin-top: 34px; }
.fl2-band .fl2-mini strong { color: #fff; }

/* ---------- FAQ ---------- */
.fl2-faq { max-width: 900px; margin: 56px auto 0; }
.fl2-faq details { border-bottom: 1px solid var(--fl-line); }
.fl2-faq summary { list-style: none; cursor: pointer; position: relative; padding: 24px 44px 24px 0;
  font-family: 'Poppins', sans-serif; font-size: 16.5px; font-weight: 600; color: var(--fl-ink); }
.fl2-faq summary::-webkit-details-marker { display: none; }
.fl2-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--fl-blue); border-bottom: 2px solid var(--fl-blue);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s ease; }
.fl2-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.fl2-faq details p { margin: 0; padding: 0 0 24px; }

/* ---------- KONTAKT (formularz asariplug na niebieskim) ---------- */
.fl2-contact { background: var(--fl-blue); color: #fff; padding: 100px 0; }
.fl2-contact .fl2-kicker { display: block; text-align: center; font-family: 'Poppins', sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: rgba(255, 255, 255, .92); margin-bottom: 14px; }
.fl2-contact h2 { font-family: 'Poppins', sans-serif; font-size: clamp(27px, 3vw, 44px); font-weight: 500;
  color: #fff; text-align: center; margin: 0 0 24px; }
.fl2-contact .fl2-intro { text-align: center; max-width: 640px; margin: 0 auto 48px; color: rgba(255, 255, 255, .95); }
/* formularz wtyczki (istniejacy element szablonu, dziala wysylka) przefarbowany pod projekt */
body.page-flon .fl2-contact .widget-contact-form { max-width: 720px; margin: 0 auto; background: transparent; padding: 0; }
body.page-flon .fl2-contact .widget-contact-form h2 { display: none; } /* naglowek sekcji mamy wlasny */
body.page-flon .fl2-contact .widget-contact-form .form-group { margin-bottom: 26px; }
body.page-flon .fl2-contact .widget-contact-form .form-control {
  width: 100%; background: transparent !important; border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .55) !important; border-radius: 0 !important;
  color: #fff !important; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 300;
  padding: 10px 2px !important; box-shadow: none !important; transition: border-color .3s ease; }
body.page-flon .fl2-contact .widget-contact-form .form-control:focus { border-bottom-color: #fff !important; outline: 0; }
body.page-flon .fl2-contact .widget-contact-form .form-control::placeholder { color: rgba(255, 255, 255, .85); opacity: 1; }
body.page-flon .fl2-contact .widget-contact-form textarea.form-control { min-height: 96px; resize: vertical; }
body.page-flon .fl2-contact .widget-contact-form label { color: rgba(255, 255, 255, .92); font-weight: 300; }
body.page-flon .fl2-contact .widget-contact-form .row { display: flex; flex-wrap: wrap; gap: 0 40px; }
body.page-flon .fl2-contact .widget-contact-form .row .col { flex: 1 1 260px; }
body.page-flon .fl2-contact .widget-contact-form .clausule { font-size: 12px; }
body.page-flon .fl2-contact .widget-contact-form .clausule label { font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
body.page-flon .fl2-contact .widget-contact-form .clausule a { color: #fff; text-decoration: underline; }
body.page-flon .fl2-contact .widget-contact-form button[type=submit],
body.page-flon .fl2-contact .widget-contact-form input[type=submit],
body.page-flon .fl2-contact .widget-contact-form .btn {
  display: block; margin: 34px auto 0; padding: 14px 40px; background: transparent !important;
  border: 1px solid #fff !important; border-radius: 0 !important; color: #fff !important;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; cursor: pointer; transition: background .3s ease, color .3s ease; }
body.page-flon .fl2-contact .widget-contact-form button[type=submit]:hover,
body.page-flon .fl2-contact .widget-contact-form input[type=submit]:hover,
body.page-flon .fl2-contact .widget-contact-form .btn:hover { background: #fff !important; color: var(--fl-blue) !important; }
body.page-flon .fl2-contact .widget-contact-form .form-status,
body.page-flon .fl2-contact .widget-contact-form .alert { color: #fff; }

/* ---------- RWD ---------- */
@media (max-width: 1024px) {
  .fl2-forwho__box { width: 100%; }
  .fl2-forwho__photo { position: static; transform: none; width: 100%; margin-top: 0; box-shadow: none; }
}
@media (max-width: 860px) {
  .fl2-sec, .fl2-forwho, .fl2-band, .fl2-contact { padding-top: 64px; padding-bottom: 64px; }
  .fl2-split { grid-template-columns: 1fr; gap: 34px; }
  .fl2-split--rev figure { order: 2; } /* na mobile zdjecie pod tekstem */
  .fl2-cards { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
  .fl2-step { grid-template-columns: 44px 1fr; padding: 24px 0; }
  .fl2-steps, .fl2-faq { margin-top: 36px; }
  body.page-flon #slider.slider { height: min(48vh, 420px) !important; }
  .fl2-inner { padding: 0 24px; }
  .fl2-forwho__grid { padding: 0 24px; }
}

/* korekty po weryfikacji live (2026-07-29) */
/* szablon nadpisywal rozmiar h3 w kartach/krokach — przywracamy skale projektu */
body.page-flon .fl2 .fl2-card h3 { font-size: 17.5px !important; line-height: 1.4; }
body.page-flon .fl2 .fl2-step h3 { font-size: 17.5px !important; line-height: 1.4; }
body.page-flon .fl2 .fl2-step .n { font-size: 22px; }
/* tekst "Zostaw kontakt — oddzwonimy..." w niebieskim bandzie mial kolor tuszu */
body.page-flon .fl2-band .fl2-mini { color: rgba(255, 255, 255, .95); }
/* zgodnosc z projektem: zdjecia w splitach sa niemal kwadratowe (685x650), nie 3:2 */
.fl2-split figure img { aspect-ratio: 1 / 0.95; object-fit: cover; }

/* ============================================================
   GEOMETRIA 1:1 z projektem (pomiar pikseli @1920):
   szerokie sekcje siegaja marginesu 195px; S1 tekst wciety do 350;
   zdjecia splitow 685px; box DK 918px od 195; zdjecie DK 832px
   (proporcja 1.26) nizej o ~140; kroki wezsze (730). Karty/FAQ byly OK.
   ============================================================ */
.fl2-steps { max-width: 760px; }
.fl2-forwho__photo img { aspect-ratio: 1.26 / 1; object-fit: cover; }
@media (min-width: 1500px) {
  .fl2-inner.fl2-split { max-width: 1602px; }
  .fl2-split { grid-template-columns: 1fr 685px; gap: 110px; }
  .fl2-split > div { padding-left: 155px; }            /* S1: tekst jak w projekcie (x=350) */
  .fl2-split--rev { grid-template-columns: 685px 1fr; gap: 95px; }
  .fl2-split--rev > div { padding-left: 0; padding-right: 65px; }
  .fl2-forwho__grid { max-width: 1602px; }
  .fl2-forwho__photo { width: 52%; top: 22%; transform: none; }
  .fl2-forwho { padding-bottom: 210px; }
}
@media (min-width: 1500px) {
  /* tekst listy DK nie moze wchodzic pod zdjecie (projekt lamie wiersz przed x~870) */
  .fl2-forwho__box { padding-right: 250px; }
}

/* ============================================================
   KARIERA (/kariera/) — wzorce wspoldzielone z /finansowanie/
   (body.page-flon, .fl2-*). Geometria wg makiety Figma:
   box ogloszenia 57% od marginesu 195, zdjecie 43% przylegle
   (bez zakladki poziomej), szary blok szerszy (74%) wchodzi
   pod zdjecie; portret ar 655/909, top +63px.
   ============================================================ */
.fk-kicker { display: block; text-align: center; font-family: 'Poppins', sans-serif; font-size: 12.5px;
  font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--fl-blue); margin-bottom: 18px; }
.fk-intro { background: #fff; padding: 96px 0 64px; }
.fk-intro h2 { font-family: 'Poppins', sans-serif; font-size: clamp(27px, 3vw, 44px); font-weight: 500;
  line-height: 1.3; color: var(--fl-blue); text-align: center; max-width: 1100px; margin: 0 auto; }

/* ogloszenie: niebieski box + szary blok + portret z prawej */
.fk-job { background: #fff; padding: 56px 0 96px; }
.fk-job__grid { position: relative; max-width: 1602px; margin: 0 auto; padding: 0 36px; }
.fk-job__box { width: 57%; background: var(--fl-blue); color: #fff; padding: clamp(38px, 4.5vw, 72px) clamp(30px, 4vw, 78px); }
.fk-job__box .fk-job__kicker { display: block; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255, 255, 255, .92); margin-bottom: 14px; }
.fk-job__box h2 { font-family: 'Poppins', sans-serif; font-size: clamp(28px, 2.9vw, 42px); font-weight: 500; color: #fff; margin: 0 0 30px; }
.fk-job__box h3 { font-family: 'Poppins', sans-serif; font-size: 17px !important; font-weight: 600; color: #fff; margin: 0 0 14px; }
.fk-job__box ul { list-style: none; margin: 0; padding: 0; }
.fk-job__box li { position: relative; padding-left: 20px; margin: 10px 0; font-size: 15px; font-weight: 300;
  line-height: 1.7; color: rgba(255, 255, 255, .96); }
.fk-job__box li::before { content: "•"; position: absolute; left: 2px; color: rgba(255, 255, 255, .85); }
.fk-job__gray { width: 74%; background: var(--fl-bg); padding: clamp(38px, 4vw, 64px) clamp(30px, 4vw, 78px); }
.fk-job__gray h3 { font-family: 'Poppins', sans-serif; font-size: 17px !important; font-weight: 600; color: var(--fl-ink); margin: 0 0 16px; }
.fk-job__gray ul { list-style: none; margin: 0 0 30px; padding: 0; }
.fk-job__gray li { position: relative; padding-left: 20px; margin: 8px 0; font-size: 15px; font-weight: 300;
  line-height: 1.7; color: var(--fl-gray); }
.fk-job__gray li::before { content: "•"; position: absolute; left: 2px; color: var(--fl-blue); }
.fk-job__gray .fl2-btn { margin-top: 0; }
.fk-job__photo { position: absolute; top: 63px; right: 36px; width: 43%; margin: 0; }
.fk-job__photo img { display: block; width: 100%; height: auto; aspect-ratio: 655 / 909; object-fit: cover; object-position: center top; }
@media (max-width: 1500px) { .fk-job__gray { padding-right: 30%; } }
@media (min-width: 1500px) { .fk-job__gray { padding-right: 22%; } }

/* CTA przed formularzem */
.fk-cta { background: #fff; padding: 24px 0 110px; text-align: center; }
.fk-cta p { max-width: 760px; margin: 0 auto; }

/* dodatkowe ikony kart (Oferujemy) */
.fl2-ico--brief { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='8' width='18' height='12' rx='1'/%3E%3Cpath d='M9 8V5h6v3M3 13h18'/%3E%3C/svg%3E"); }
.fl2-ico--coins { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M15.5 5.6A6 6 0 1 1 8.4 18.4'/%3E%3Cpath d='M7 9h4M9 7v4'/%3E%3C/svg%3E"); }
.fl2-ico--chair { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2.2' fill='white'/%3E%3Ccircle cx='15' cy='12' r='2.2' fill='white'/%3E%3Ccircle cx='7' cy='17' r='2.2' fill='white'/%3E%3C/svg%3E"); }
.fl2-ico--badge { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3Cpath d='M7.5 17c.8-2 2.5-3 4.5-3s3.7 1 4.5 3'/%3E%3C/svg%3E"); }
.fl2-ico--board { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 4h18M5 4v10h14V4'/%3E%3Cpath d='M12 14v3M8 21l4-4 4 4'/%3E%3C/svg%3E"); }
.fl2-ico--laptop { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5' y='5' width='14' height='9' rx='1'/%3E%3Cpath d='M3 18h18l-1.5-3h-15z'/%3E%3Cpath d='M10 9.5l1.5 1.5 2.8-3'/%3E%3C/svg%3E"); }
.fl2-ico--camera { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 8h3l2-2h6l2 2h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E"); }
.fl2-ico--building { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M5 21V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v17M15 9h4v12M3 21h18'/%3E%3Cpath d='M8 7h2M12 7h1M8 11h2M12 11h1M8 15h2M12 15h1'/%3E%3C/svg%3E"); }

/* pole CV (upload) w formularzu na niebieskim */
body.page-flon .fl2-contact .widget-contact-form .form-group.file label { font-size: 13px; }
body.page-flon .fl2-contact .widget-contact-form input[type=file].form-control { border-bottom: 0 !important; padding: 8px 0 !important; }
body.page-flon .fl2-contact .widget-contact-form input[type=file]::file-selector-button {
  background: transparent; border: 1px solid rgba(255, 255, 255, .7); color: #fff; padding: 8px 16px;
  font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; margin-right: 14px; }

@media (max-width: 1024px) {
  .fk-job__box, .fk-job__gray { width: 100%; }
  .fk-job__gray { padding-right: clamp(30px, 4vw, 78px) !important; }
  .fk-job__photo { position: static; width: 100%; margin-top: 0; }
  .fk-job__photo img { aspect-ratio: auto; max-height: 70vh; }
}

/* ============================================================
   WYCENA MIESZKANIA (/bezplatna-wycena-mieszkania/) — wg Figmy.
   Wspolny system .fl2-*; nowe .fw-*. Bialy box = miejsce na widget
   RENTIER (kontener #rentier-widget); do czasu wpiecia embeda
   formularz jest wizualny, submit pokazuje notke + link do kontaktu.
   ============================================================ */
.fw-kicker-w { display: block; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255, 255, 255, .92); margin-bottom: 16px; }
.fw-heropanel { background: var(--fl-blue); color: #fff; padding: 0 0 64px; }
.fw-heropanel__grid { max-width: 1602px; margin: 0 auto; padding: 0 36px; display: grid;
  grid-template-columns: 1fr minmax(520px, 620px); gap: clamp(40px, 5vw, 110px); align-items: start; }
.fw-heropanel__txt { padding-top: 84px; }
.fw-heropanel__txt h2 { font-family: 'Poppins', sans-serif; font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 500; line-height: 1.25; color: #fff; margin: 0 0 24px; }
.fw-heropanel__txt p { color: rgba(255, 255, 255, .95); max-width: 54ch; }
.fw-widget { background: #fff; margin-top: -190px; position: relative; z-index: 6;
  padding: 38px 34px 34px; box-shadow: 0 30px 80px rgba(9, 24, 76, .28); color: var(--fl-ink); }
.fw-widget .fw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fw-widget input[type=text], .fw-widget select {
  width: 100%; border: 1px solid #d6dae3; border-radius: 4px; background: #fff;
  padding: 13px 14px; margin-bottom: 15px; font-family: 'Poppins', sans-serif; font-size: 14px;
  font-weight: 300; color: var(--fl-ink); appearance: auto; }
.fw-widget input::placeholder { color: #7d8494; opacity: 1; }
.fw-widget .fw-uh { font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 400;
  color: var(--fl-ink); margin: 4px 0 12px; }
.fw-widget .fw-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 22px; }
.fw-widget .fw-checks label { display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 300; color: var(--fl-ink); cursor: pointer; }
.fw-widget .fw-checks input { width: 16px; height: 16px; accent-color: var(--fl-blue); }
.fw-widget .fw-submit { display: block; margin-left: auto; background: var(--fl-blue); color: #fff;
  border: 0; border-radius: 2px; padding: 15px 30px; font-family: 'Poppins', sans-serif; font-size: 13px;
  font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
  transition: background .25s ease; }
.fw-widget .fw-submit:hover { background: var(--fl-blue-d); }
.fw-widget__note { display: none; margin-top: 16px; padding: 14px 16px; background: var(--fl-bg);
  border-left: 3px solid var(--fl-blue); font-size: 13.5px; line-height: 1.6; color: var(--fl-gray); }
.fw-widget__note a { color: var(--fl-blue); font-weight: 500; }
.fw-widget.fw-noted .fw-widget__note { display: block; }

/* Jak dziala: zdjecie lewo + kroki (mniejsze naglowki nizej niz fl2-step) */
.fw-how .fl2-split { align-items: start; }
.fw-how .fl2-steps { margin: 0; max-width: none; }
.fw-how .fl2-step { padding: 22px 0; grid-template-columns: 48px 1fr; }
.fw-how .fl2-step:first-child { padding-top: 0; }
.fw-how h2.fl2-h2 { margin-bottom: 34px; }

/* Kiedy warto: lista z separatorami */
.fw-when { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: center; }
.fw-when__list > div { padding: 20px 0; border-bottom: 1px solid var(--fl-line); }
.fw-when__list > div:first-child { padding-top: 0; }
.fw-when__list > div:last-child { border-bottom: 0; }
.fw-when__list h3 { font-family: 'Poppins', sans-serif; font-size: 16.5px !important; font-weight: 600;
  color: var(--fl-ink); margin: 0 0 8px; }
.fw-when__list p { margin: 0; font-size: 15px; }
.fw-when figure { margin: 0; }
.fw-when img { display: block; width: 100%; height: auto; }

/* karty bez ikon (Nie ustalaj ceny przypadkowo) */
.fl2-card--noico h3 { margin-top: 0; }

/* box z 10 punktami (Wycena i sprzedaz) — geometria jak fl2-forwho */
.fw-sell .fl2-forwho__box li { margin: 7px 0; }
.fw-sell .fl2-forwho__photo { top: 30%; }
@media (min-width: 1500px) { .fw-sell .fl2-forwho__box { padding-right: 250px; } }

@media (max-width: 1100px) {
  .fw-heropanel__grid { grid-template-columns: 1fr; }
  .fw-widget { margin-top: 0; }
  .fw-heropanel__txt { padding-top: 56px; }
  .fw-when { grid-template-columns: 1fr; }
}
/* bootstrap-select szablonu przejmuje selecty widgetu (sztywne szerokosci -> overflow na mobile);
   dopasowanie dropdownow do inputow + min-width:0 dla itemow gridow */
.fw-heropanel__grid > *, .fw-widget .fw-row > * { min-width: 0; }
.fw-widget .bootstrap-select { width: 100% !important; margin-bottom: 15px; }
.fw-widget .bootstrap-select > .btn.dropdown-toggle {
  width: 100%; background: #fff !important; border: 1px solid #d6dae3 !important; border-radius: 4px !important;
  padding: 13px 14px !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important;
  font-weight: 300 !important; color: var(--fl-ink) !important; box-shadow: none !important; outline: 0 !important; }
.fw-widget .bootstrap-select .filter-option-inner-inner { font-family: 'Poppins', sans-serif; font-size: 14px; }
.fw-widget .bootstrap-select.bs-placeholder > .btn.dropdown-toggle { color: #7d8494 !important; }

/* poprawki wg uwag klienta (2026-07-29) */
/* naglowki centrowane: ogolne h2.fl2-h2 { margin:0 } wygrywalo z margin:auto klasy --c */
.fl2 h2.fl2-h2--c { margin-left: auto; margin-right: auto; }
/* bialy pasek nad szarym tlem stopki: margines #content z szablonu */
body.page-flon #content.container { margin-bottom: 0 !important; }

/* ============================================================
   POPRAWKI KLIENTA 2026-07-31
   ============================================================ */

/* --- WYCENA 1 / wspolne: biala kreska pod zdjeciem hero ---
   Motyw-rodzic pozycjonuje obrazek slidera przez top:50% + translateY(-50.2%).
   Te 0.2% to jego hack przeciw dziurze przy height:unset — u nas, przy
   wymuszonym height:100%, dziala ODWROTNIE: 0.2% z 540px = 1.08px odslonietego
   tla pod zdjeciem. Zerujemy pozycjonowanie i podkladamy kolor pod zaokraglenia
   subpikselowe. Scope na .page-flon — globalnie rozjechaloby slidery reszty serwisu. */
html body.page-flon #slider.slider ._slider.owl-carousel li img,
html body.page-flon #slider.slider ._slider li img {
  top: 0 !important;
  transform: none !important;
}
html body.page-flon #slider.slider ._slider li { background: #1b5be7; }

/* --- WYCENA 2: uklad tekstu w niebieskim panelu hero wg projektu ---
   Projekt trzyma panel w kontenerze 1280 (marginesy 320), a nie 1602 (195).
   Naglowek lamie sie na 3 linie — lamanie robimy <br> w tresci, bo okno
   bezpieczne dla max-width to tylko 408-444px. */
@media (min-width: 1101px) {
  .fw-heropanel { padding-bottom: 131px; }
  .fw-heropanel__grid { max-width: 1352px; grid-template-columns: 1fr 646px; gap: 110px; }
  .fw-heropanel__txt { padding-top: 148px; }
  .fw-widget { margin-top: -109px; }
}

/* --- WYCENA 3: "Jak dziala wycena online" — zdjecie na wysokosc tekstu ---
   Bylo align-items:start + aspect-ratio 1/0.95 => 201px bialej luki pod zdjeciem.
   Scope na .fw-how: reguła aspect-ratio jest wspolna z /finansowanie/. */
.fw-how .fl2-split { align-items: stretch; }
.fw-how .fl2-split figure { height: 100%; margin: 0; }
.fw-how .fl2-split figure img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }

/* --- WYCENA 4: "Kiedy warto skorzystac" — zdjecie na wysokosc tekstu ---
   align-items:center + height:auto dawalo 141px bialego nad i 142px pod zdjeciem.
   object-fit bylo domyslne (fill) — bez cover kadr by sie zgniotl. */
.fw-when { align-items: stretch; }
.fw-when figure { height: 100%; }
.fw-when img { height: 100% !important; object-fit: cover; }

/* --- WYCENA 5: "Wycena i sprzedaz" — box, naglowek i zdjecie wg projektu ---
   Projekt: box 45.7% i zdjecie 54.3% STYKAJA sie (zero nakladki), zdjecie
   wystaje ~75px pod box zamiast konczyc sie 3px nad nim (stad bialy prostokat
   z zalacznika). Zdejmujemy padding-right:250px, ktory wypychal H2 do 3 linii. */
.fw-sell .fl2-forwho__photo img { aspect-ratio: 1.052 / 1; }
@media (min-width: 1500px) {
  .fw-sell .fl2-forwho__box { width: 45.7%; padding-right: 56px; }
  .fw-sell .fl2-forwho__photo { width: 54.3%; top: 191px; }
}

/* --- FINANSOWANIE 1: hero — wysokosc i gradient wg projektu ---
   Projekt (Finansowanie.pdf, 1:1 1920x8102): hero 501px, nie 540.
   Welon nad zdjeciem robily DWIE nakladki, nie jedna: li::after (plaskie .08)
   oraz #header::after z motywu-RODZICA (linear-gradient #1d5ff0, 640px wysokosci,
   krycie 1.0 na gorze) — to drugie zostalo przeoczone przy v2. Wylaczamy je
   TYLKO na tej podstronie (na pozostalych zapewnia czytelnosc bialego menu)
   i odtwarzamy gradient projektu w li::after. */
body.page-id-10556 #slider.slider { height: min(56vh, 500px) !important; }
/* (2026-08-06) gradient 10556 ujednolicony z baza page-flon; #header::after wylaczany globalnie wyzej */
/* kadr wg projektu (bylo 55% — ustawiane wczesniej na sztywno z JS).
   UWAGA na specyficznosc: regula bazowa dla page-flon ma dwa warianty selektora,
   z ktorych jeden zawiera `._slider.owl-carousel` — to (1,4,4). Nadpisanie tylko
   przez `._slider` daje (1,3,4) i przy rownym !important PRZEGRYWA, gdy UL ma
   klase owl-carousel. Dlatego kazde nadpisanie kadru musi powtorzyc oba warianty. */
html body.page-id-10556 #slider.slider ._slider.owl-carousel li img,
html body.page-id-10556 #slider.slider ._slider li img { object-position: center 50% !important; }

/* --- KARIERA hero: kadr wg projektu (zgloszenie klienta „nie widac twarzy kobiety") ---
   Plik merlon-kar2-hero.jpg to PELNY oryginal z Figmy (dopasowanie template-match
   0.04, zero przyciecia), a paleta duotonu jest ta sama co w projekcie — rozjezdzal
   sie wylacznie kadr pionowy. Zmierzone na renderze projektu (node 283:709):
   widoczny jest wycinek oryginalu y 282..1270 z 2138, co przy cover w kadrze
   1920x500 daje object-position 25%. Bylo 55%, czyli o ~350px zdjecia nizej —
   i dlatego twarz kobiety w srodku kadru byla scieta. */
html body.page-id-10558 #slider.slider ._slider.owl-carousel li img,
html body.page-id-10558 #slider.slider ._slider li img { object-position: center 25% !important; }

/* --- FINANSOWANIE 2: "Bezpieczny zakup..." — dol zdjecia rowno z przyciskiem ---
   align-items:center centrowalo zdjecie 650.75 w wierszu 665.5, zostawiajac po
   ~7.4px luzu — dlatego dol zdjecia byl WYZEJ niz dol przycisku (klient zaznaczyl
   linie „ma byc rowno"). Rozciagniecie na wysokosc kolumny tekstu daje wspolna
   linie i przy okazji kadr bliszy projektowi (mniej scinania gora/dol).
   Tylko pierwszy split; wariant --rev zostaje nietkniety. */
@media (min-width: 861px) {
  body.page-id-10556 .fl2-sec > .fl2-split:not(.fl2-split--rev) > figure { align-self: stretch; }
  body.page-id-10556 .fl2-sec > .fl2-split:not(.fl2-split--rev) > figure img {
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* --- WYCENA 6: wysokosc hero wg projektu ---
   Bylo 540 -> 522, a ramka Header w projekcie (335:616) ma 500. Klient zglosil
   „obecnie jest zdjecie wyzsze" — stad 500. */
body.page-id-12012 #slider.slider { height: min(56vh, 500px) !important; }

/* --- WYCENA hero: zdjecie i kadr wg projektu ---
   Produkcja miala merlon-wyc2-hero.jpg, czyli salon z marmurowa podloga — TO SAMO
   zdjecie co sekcja „Wycena i sprzedaz". Projekt uzywa innego wnetrza (jasny salon
   z galeria obrazow i plakatem OSLO); zidentyfikowane template-matchingiem wsrod
   oryginalow z Figmy: wyc-09.jpg 4096x2714, blad 0.845 przy 100% szerokosci,
   pozostale kandydatki 1.21-1.40. Wgrane jako merlon-wyc3-hero.jpg (id 12135)
   w duotonie palety projektu.
   KADR: dopasowanie liczbowe dawalo 60%, ale render projektu ma wypalone logo,
   menu i H1, wiec bylo obciazone — rozstrzygniete wizualnie po polozeniu plakatu
   OSLO, oparcia kanapy i stolikow: 62% pokrywa sie z projektem (62/66/70 sprawdzone).
   Oba warianty selektora sa konieczne — patrz uwaga o ._slider.owl-carousel wyzej. */
html body.page-id-12012 #slider.slider ._slider.owl-carousel li img,
html body.page-id-12012 #slider.slider ._slider li img { object-position: center 62% !important; }

/* --- KARIERA 1: wysokosc hero wg projektu (500 zamiast 540) ---
   Duotone hero jest wypalony w pliku merlon-kar2-hero.jpg — samej barwy
   i kadru nie da sie poprawic CSS-em, potrzebny re-eksport z Figmy. */
body.page-id-10558 #slider.slider { height: min(56vh, 500px) !important; }

/* --- KARIERA 2+4a: ogloszenie — geometria boksow wg projektu ---
   W projekcie niebieski i szary maja TE SAMA szerokosc (59.4%), a szary konczy
   sie 70px PONIZEJ zdjecia. Dzis szary byl szerszy (74%) i konczyl sie 74px NAD
   zdjeciem — stad wrazenie, ze „zostal tylko fragment pod zdjeciem". */
@media (min-width: 1024px) {
  .fk-job__box  { width: 59.4%; padding-left: 70px; padding-right: 284px; }
  .fk-job__gray { width: 59.4%; padding-left: 60px; padding-bottom: 90px; }
}
@media (min-width: 1024px) and (max-width: 1499px) { .fk-job__gray { padding-right: 24%; } }
@media (min-width: 1500px) { .fk-job__gray { padding-right: 265px; } }

/* --- KARIERA 3: portret — geometria i kadr wg projektu ---
   PULAPKA: element pozycjonowany absolutnie liczy % od PADDING-boxa rodzica
   (1602px), a nie od content-boxa (1530px) — dlatego 43% dawalo 689px zamiast
   658px i zdjecie wchodzilo 31px na niebieski box. Stad calc() z odjeciem paddingu.
   Proporcja 1:1 zgodna z projektem; plik zrodlowy zostal przyciety (mial wklejony
   pas tla strony) i dopelniony czernia kadru do kwadratu. */
.fk-job__photo { top: 72px; width: calc((100% - 72px) * 0.542); }
.fk-job__photo img { aspect-ratio: 1 / 1; object-position: 50% 50%; }

/* --- KARIERA 5: pionowa kreska przy „WYBIERZ PLIK" ---
   Natywny input[type=file] nie przyjmuje ::after, wiec kreske rysujemy na
   wrapperze — a to znaczy, ze musimy znac szerokosc przycisku.

   POPRAWKA 2026-08-03 (klient zglosil brak kreski): poprzednio bylo
   `left: 116px`, policzone z szerokosci przycisku 104px. Feler w tym, ze
   etykieta przycisku jest NATYWNA i zalezy od jezyka przegladarki —
   „WYBIERZ PLIK" jest szersze od angielskiego „Choose File" (zmierzone: 112px),
   wiec u klienta kreska wypadala ZA przyciskiem i nie bylo jej widac.
   Dlatego przycisk dostaje sztywna szerokosc: geometria przestaje zalezec od
   dlugosci etykiety, a kreska ma stale, policzalne miejsce.

   POPRAWKA 2026-08-04 (klient: „brakuje przy wybierz plik lewej kreski"):
   przycisk mial `margin-left: -12px` (z shorthanda `margin: -6px 36px -6px -12px`),
   wiec jego LEWA krawedz wypadala na x=588, a content-box inputa zaczyna sie
   na x=600 (`padding: 8px 0`) i input ma `overflow: clip` — te 12px razem
   z lewa kreska byly po prostu OBCINANE. Ramka czytala sie jak otwarty nawias:
   zmierzone pionowe linie w kadrze to tylko prawa krawedz przycisku (x=737)
   i separator (x=762); lewej (x=588) nie bylo w ogole.
   Zerujemy TYLKO margines lewy — gorny i dolny (-6px) sa potrzebne, bo przycisk
   ma 36px wysokosci i musi wystawac z 24px content-boxa inputa.
   Po zmianie przycisk stoi w 600..750, czyli lewa krawedz ladnie w jednej osi
   z etykieta „Dodaj swoje CV" i wszystkimi pozostalymi polami formularza. */
body.page-flon .fl2-contact .widget-contact-form .form-group.file { position: relative; }
body.page-flon .fl2-contact .widget-contact-form input[type=file]::file-selector-button {
  width: 150px;
  text-align: center;
  margin-left: 0;
  margin-right: 36px;
}
/* Separator dosrodkowany w 36px przerwie miedzy przyciskiem (koniec 750)
   a nazwa pliku (start 786): 768 - 588 (x kolumny) = 180px. */
body.page-flon .fl2-contact .widget-contact-form .form-group.file::after {
  content: ""; position: absolute; left: 180px; top: 33px;
  width: 1px; height: 36px; background: rgba(255, 255, 255, .7); pointer-events: none;
}

/* --- korekty po pomiarze live (2026-07-31) --- */

/* WYCENA 5: ta sama pulapka co przy portrecie Kariery — .fl2-forwho__box jest
   statyczny (% od content-boxa 1530), a .fl2-forwho__photo absolutny (% od
   padding-boxa 1602). 45.7% + 54.3% dawalo 699+870 = 1569 > 1530, czyli 39px
   nakladki zamiast zera. Liczymy szerokosc zdjecia od content-boxa. */
@media (min-width: 1500px) {
  .fw-sell .fl2-forwho__photo { width: calc((100% - 72px) * 0.543); }
}

/* KARIERA 4a: bloki byly o ~83px wyzsze niz w projekcie, bo lista ma luzniejszy
   rytm (33.5px na pozycje vs 28.5px w makiecie) — stad szary schodzil 145px pod
   zdjecie zamiast 70px. Sciagamy interlinie do rytmu projektu zamiast obcinac
   padding, ktory zrobilby ciasny dol. */
@media (min-width: 1024px) {
  .fk-job__box li, .fk-job__gray li { margin: 6px 0; line-height: 1.6; }
  .fk-job__gray { padding-bottom: 64px; }
}

/* WYCENA 5 cd.: naglowek „Wycena i sprzedaz mieszkania" ma sie miescic w DWOCH
   liniach jak w projekcie. Przy boksie 699px i domyslnym paddingu (86+56) swiatlo
   wynosilo 556px, a pierwsza linia potrzebuje ~572px — stad trzecia linia.
   Zwezamy padding do wartosci z projektu (75/56 przeskalowane). */
@media (min-width: 1500px) {
  .fw-sell .fl2-forwho__box { padding-left: 72px; padding-right: 40px; }
  /* pierwsza linia przy 40px potrzebuje ~596px, a swiatlo boksu daje 587 —
     dalsze zwezanie paddingu wpychaloby tekst pod krawedz zdjecia, wiec
     scinamy stopien pisma o 5%. Efekt: dwie linie jak w projekcie. */
  .fw-sell .fl2-forwho__box h2 { font-size: 38px; }
}


/* ============================================================
   PARTIA POPRAWEK KLIENTA 2026-08-03 (zal. 10, 11, 12, 13)
   ============================================================ */

/* zal. 11: sekcja "Wycena i sprzedaz mieszkania" na szarym tle.
   Zmierzone w projekcie (Zal. 11): pasmo szare obejmuje cala te sekcje,
   biel wraca dopiero pod nia. Apla i zdjecie byly juz zgodne z projektem
   (apla 10.16% vs 9.92%, zdjecie do 89.8% vs 90.0%) — brakowalo samego tla. */
.fw-sell { background: var(--fl-bg); }

/* zal. 13: sekcja FAQ bez szarego tla.
   Szare zostaje na sekcji kart ("Nie ustalaj ceny przypadkowo") — tam projekt
   je ma. Reguly nie mozna postawic globalnie na .fl2-sec--gray, bo tej samej
   klasy uzywaja inne sekcje wyceny; stad zakres po id strony. */
body.page-id-12012 .fl2-sec--gray:has(.fl2-faq) { background: #fff; }

/* zal. 10: "Kiedy warto skorzystac" — zdjecie poszerzone w prawo.
   Zmierzone w projekcie (Zal. 10): tekst zaczyna sie na 18.54% (u nas 18.5% —
   zgodnie), ale zdjecie ma siegac 90.15%, a konczylo sie na 81.46%. Sekcja
   siedzi w kontenerze .fl2-inner (1280), reszta strony w 1602 — dlatego
   zamiast rozpychac caly kontener (co zabraloby tekstowi jego kadr) wypuszczamy
   w prawo samo zdjecie, dokladnie o roznice polowek obu kontenerow. */
@media (min-width: 1100px) {
  .fw-when figure {
    margin-right: calc(-1 * (min(1602px, 100vw) - min(1280px, 100vw)) / 2);
  }
}

/* --- Widget RENTIER: dopasowanie iframe'a do bialej karty ---
   Kod od klienta ma `width: clamp(320px, 100%, 600px)` jako styl INLINE. Na
   desktopie karta daje 578px swiatla i clamp trafia w 578 — jest dobrze. Na
   mobile karta ma tylko ~250px, wiec DOLNA granica clampa (320px) rozpychala
   iframe poza karte: przy 390px zmierzone karta 36..354, iframe 70..390.
   Uwalniamy szerokosc (inline style trzeba przebic !important) i zwezamy
   padding karty, zeby formularz mial realnie wiecej miejsca. */
@media (max-width: 700px) {
  #rentier-widget { padding-left: 14px; padding-right: 14px; }
  #rentier-widget iframe { width: 100% !important; min-width: 0 !important; }
}

/* --- Widget RENTIER: wysokosc dopasowana do TRESCI ---
   Inline `height: clamp(500px, 90vh, 800px)` z kodu klienta nie ma zwiazku z tym,
   ile formularz realnie zajmuje, a widget NIE wysyla swojej wysokosci przez
   postMessage (sprawdzone: zero wiadomosci z jego origin), wiec przegladarka nie
   ma jak tego policzyc — zostaje pomiar i progi.
   Zmierzone dolem przycisku „Wyceń nieruchomość":
     iframe >= 500px szerokosci        -> 516px tresci
     iframe ~ 400px                    -> 552px
     iframe <= 330px (pola w 1 kolumnie) -> 812-840px
   Przed poprawka: na desktopie 800px, czyli ~284px pustego tla pod przyciskiem;
   na mobile ODWROTNIE — 760px przy 826px tresci UCINALO przycisk. */
#rentier-widget iframe { height: 560px !important; }
@media (max-width: 600px) { #rentier-widget iframe { height: 600px !important; } }
@media (max-width: 480px) { #rentier-widget iframe { height: 880px !important; } }

/* ============================================================
   O NAS — /zespol/ (page-id-9), wdrozenie wg ramki Figmy 432:10
   Adres zostaje /zespol/, bo to on siedzi w menu pod etykieta „O nas".
   PROJEKT NIE MA sekcji Zespol, ale na stronie sa karty agentow z
   przyciskiem „POKAZ OFERTY" (punkt 14 pierwotnego ticketu) — zostaja
   w oryginalnych blokach motywu, poza wrapperem .fl2, zeby dzialaly
   dokladnie jak dotad. Dokladamy im tylko rytm pionowy.
   ============================================================ */

/* hero 500px — tyle ma ramka Header w projekcie */
body.page-id-9 #slider.slider { height: min(56vh, 500px) !important; }

/* Kadr hero wg projektu. Przy 55% (domyslka page-flon) w kadrze siedzial napis
   „Wiecej niz nieruchomosci" i adres merlon.pl, ktorych projekt na wierzchu NIE ma —
   makieta pokazuje sam pas ekranow z ofertami, czyli DOL zdjecia. Porownane
   wariantami 55/75/90/100%: dopiero 100% zdejmuje napis z kadru.
   Oba warianty selektora sa konieczne — patrz uwaga o ._slider.owl-carousel wyzej. */
/* (2026-08-06) zdjecie hero podmienione na kadr wyciety 1:1 z Figmy
   (media merlon-hero-onas-figma.jpg, napisy projektu usuniete inpaintingiem) —
   dociaganie do prawej juz zbedne, wracamy do centrowania jak w projekcie. */
html body.page-id-9 #slider.slider ._slider.owl-carousel li img,
html body.page-id-9 #slider.slider ._slider li img {
  object-position: center 50% !important;
  /* rodzic daje img margin-left:-8% (oversize-trick slidera) — przy zdjeciu 1:1
     z kadrem Figmy przesuwalo cala scene o 154px w lewo */
  margin-left: 0 !important;
}

/* lead pod naglowkiem: w projekcie wysrodkowany w ~730px */
.fo-lead { max-width: 760px; margin: 0 auto; text-align: center; }
.fo-intro { padding-bottom: 40px; }

/* Niebieski box + zdjecie. Zmierzone na ramce projektu: box 9.84%..49.02%,
   zdjecie 49.12%..90.98% szerokosci strony. Kontener .fl2-forwho__grid to
   1602px z paddingiem 36px (tresc 195..1725 = 10.16%..89.84%) — pokrywa sie.
   W ramach tresci 1530px wychodzi: box 49.2%, zdjecie 52.5%.
   PULAPKA (ta sama co w .fw-sell): box jest STATYCZNY i liczy % od content-boxa
   1530, a .fl2-forwho__photo jest ABSOLUTNY i liczy od padding-boxa 1602 —
   stad calc((100% - 72px) * k) dla zdjecia. */
@media (min-width: 1100px) {
  .fo-about .fl2-forwho__box { width: 49.2%; padding-right: 64px; }
  .fo-about .fl2-forwho__photo { width: calc((100% - 72px) * 0.525); top: 76px; transform: none; }
}
.fo-about .fl2-forwho__box p { color: rgba(255, 255, 255, .96); font-size: 15px; font-weight: 300;
  line-height: 1.75; margin: 0 0 16px; }
.fo-about .fl2-forwho__box p:last-child { margin-bottom: 0; }
/* zdjecie w naturalnych proporcjach — nie ma po co go przycinac */
.fo-about .fl2-forwho__photo img { aspect-ratio: auto; }

/* sekcja Zespol (bloki motywu) — naglowek w jezyku pozostalych podstron.
   Padding poziomy jest KONIECZNY: listing zespolu to bootstrapowy `.rows`
   z ujemnymi marginesami, ktore normalnie kompensuje padding #content —
   a `body.page-flon #content { padding: 0 }` go zeruje. Bez tego sekcja
   miala 414px przy widoku 390px i strona przewijala sie w poziomie. */
body.page-id-9 .fo-about { padding-bottom: 48px; }
body.page-id-9 .fo-zespol { padding: 72px 24px 24px; }
/* podnaglowek listingu („Biuro glowne") szedl do lewej, gdy „Zespol" jest wysrodkowany */
body.page-id-9 .fo-zespol .widget-team > h3,
body.page-id-9 .fo-zespol .widget-team .group-title { text-align: center; }
body.page-id-9 .fo-zespol > h2 { font-family: 'Poppins', sans-serif;
  font-size: clamp(25px, 2.5vw, 37px); font-weight: 500; color: var(--fl-blue); margin: 0 0 44px; }

/* --- WYCENA: ciaglosc proporcji .fw-sell ponizej 1500px ---
   Szerokosci boksu i zdjecia byly ustawione DOPIERO od 1500px. Ponizej wracaly
   bazowe wartosci .fl2-forwho: box 60% + zdjecie 44% = 104%, wiec box wchodzil
   POD zdjecie — zmierzone 85px przy 1400 i 77px przy 1200. Zdjecie zaslania
   tylko czesc wysokosci boksu (przy 1400 box siegal 307px ponizej zdjecia),
   wiec w tym pasie widac bylo pelna szerokosc niebieskiego tla i box wygladal
   jak schodek. Powtarzamy te same proporcje co w bloku 1500+, zeby geometria
   byla ciagla na calym desktopie.
   PULAPKA: box jest STATYCZNY (% liczy od content-boxa), a zdjecie ABSOLUTNE
   (% od padding-boxa) — stad calc((100% - 72px) * k) tylko dla zdjecia. */
@media (min-width: 1025px) and (max-width: 1499px) {
  /* `transform: none` jest KONIECZNE: regula bazowa .fl2-forwho__photo ma
     translateY(-50%) (bo pozycjonuje przez top:54%). Bez zdjecia tego resetu
     `top: 191px` liczy sie od gory, a potem transform ciagnie zdjecie o polowe
     jego wysokosci w gore — zmierzone 151px NAD gora boksu przy 1400px.
     W bloku 1500+ transform jest zerowany osobna regula. */
  .fw-sell .fl2-forwho__photo { width: calc((100% - 72px) * 0.543); top: 191px; transform: none; }
}

/* --- O NAS (/zespol/): lista pracownikow ukryta ---
   Na prosbe uzytkownika (2026-08-03) — TYMCZASOWO. Ukrywamy caly blok razem
   z naglowkiem „Zespol", bo sam naglowek nad pusta sekcja nie ma sensu.
   Shortcode [asariplug-team] ZOSTAJE w tresci strony 9, wiec przywrocenie to
   usuniecie tej jednej reguly — nic nie trzeba odbudowywac. */
body.page-id-9 .fo-zespol { display: none; }


/* --- WYCENA, sekcja „Wycena i sprzedaz": SZEROKOSC APLI wg projektu ---
   POPRAWKA WLASNEGO BLEDU z 31.07. Uznalem wtedy, ze geometria tej sekcji
   zgadza sie z projektem, bo prawa krawedz apli mierzylem progiem „kolumna
   niebieska w ponad 25% wierszy". Tymczasem ZDJECIE ZASLANIA prawa czesc apli,
   wiec wlasnie te kolumny progu nie przeszly i wyszlo 46.49% zamiast 57.46%.

   Pomiar wiersz po wierszu na Zal. 11 (projekt, 3437px szerokosci):
     y 250..560   niebieski 9.92%..57.46%   <- apla w pelnej szerokosci
     y 600..1800  niebieski 9.92%..46.49%   <- tu zaslania ja juz zdjecie
   Czyli w projekcie zdjecie ZACHODZI na aple o 10.97% szerokosci strony
   (211px przy 1920), a u nas zachodzenia nie bylo wcale — apla i zdjecie
   stykaly sie na 46.56%. Samo zdjecie bylo poprawne (46.56% vs 46.49%).

   Szerokosc apli: prawa krawedz 57.46% strony = 1103px przy 1920, przy kontenerze
   tresci 195..1725 daje 908/1530 = 59.35%.
   padding-right musi odsunac tekst od zdjecia: zachodzenie (13.7% kontenera)
   + 40px swiatla. Regula stoi na koncu pliku, bo bije trzy wczesniejsze
   ustawienia padding-right dla tego boksu (56px, 250px, 40px). */
@media (min-width: 1025px) {
  .fw-sell .fl2-forwho__box { width: 59.35%; padding-right: calc(13.7% + 40px); }
}

/* --- KARIERA: kadr portretu doradczyni wg projektu ---
   Bylo: plik merlon-kar-doradczyni3.jpg 1559x1559 (wlasny kwadratowy kadr
   z dopelnieniem czernia, robiony 31.07) + object-position 50% 50% — przy
   kwadratowym kadrze w kwadratowym boksie obcinalo to CZOLO modelki.
   Teraz: oryginal z Figmy merlon-kar-doradczyni4.jpg 1160x1740 (proporcje 2:3,
   postac siedzaca, dlonie na oparciu). Kadr projektu zmierzony template-matchingiem
   wobec node 283:775 (831x825): blad 0.0285, widoczna praktycznie pelna szerokosc
   oryginalu, pionowo y 30..1169 z 1740 — co przy cover w kwadracie daje 5%. */
.fk-job__photo img { object-position: 50% 5%; }

/* ============================================================
   O NAS (/zespol/, page-id-9) — ODWZOROWANIE 1:1 wg ramki Figmy 432:10
   Wartosci z get_design_context (nody 432:149, 432:175) na kanwie 1920px.
   Poziom wyrazony procentowo wzgledem kanwy, wysokosci w px.
   ============================================================ */

/* --- Section 1 (432:149): intro, bg bialy, wysokosc 466 ---
   H2 43px/52px #1d5ff0 tracking -0.86, tekst 16px/28.501 #171b26 tracking -0.32, szer. 728 */
body.page-id-9 .fo-intro { padding: 120px 0 99px; background: #fff; }
body.page-id-9 .fo-intro .fl2-inner { max-width: none; padding: 0 24px; }
body.page-id-9 .fo-intro h2.fl2-h2 {
  font-size: 43px; line-height: 52px; font-weight: 500; letter-spacing: -0.86px;
  color: #1d5ff0; margin: 0; max-width: none;
}
body.page-id-9 .fo-lead {
  width: 728px; max-width: 100%; margin: 52px auto 0;
  font-size: 16px; line-height: 28.501px; letter-spacing: -0.32px;
  color: #171b26; font-weight: 400; text-align: center;
}

/* --- Section 5 (432:175): niebieski box + zdjecie ---
   box: left 188 (9.7917%), top +78, 908x847 (47.2917%), bg #1d5ff0
   tekst w boksie: left 96, top 102, szer. 614 -> padding 102 / 198 / 89 / 96
   zdjecie: left 944 (49.1667%), top +160.5 (czyli +82.5 od gory boksu), 804x682 (41.875%)
   zdjecie ZACHODZI na box o 1096-944 = 152px */
/* Sekcje w projekcie NACHODZA NA SIEBIE: Section 1 konczy sie na y 965.57,
   a Section 5 zaczyna na 897.57 — czyli 68px wyzej. W ukladzie blokowym sekcje
   staja jedna pod druga, wiec box ladowal 68px nizej niz w makiecie (zmierzone
   diffem pikselowym: box projekt y 78, live y 146 w kadrze sekcji).
   margin-top: -68px odtwarza to nachodzenie. */
body.page-id-9 .fo-about { padding: 78px 0 113px; margin-top: -68px; background: #fff; }
body.page-id-9 .fo-about .fl2-forwho__grid {
  max-width: none; padding: 0; margin: 0; position: relative;
}
body.page-id-9 .fo-about .fl2-forwho__box {
  width: 47.2917%;
  margin-left: 9.7917%;
  /* PULAPKA: procent w paddingu liczy sie od szerokosci KONTENERA (1920), a nie
     od szerokosci boksu — pierwsza wersja miala 21.81%/10.57% i dala padding
     418.75px/202.94px, przez co tekst miał 286px zamiast 614 i box spuchl do
     1531px zamiast 847. Dlatego vw: 96/1920 = 5vw, 198/1920 = 10.3125vw. */
  padding: 102px 10.3125vw 89px 5vw;
  background: #1d5ff0;
}
body.page-id-9 .fo-about .fl2-forwho__box p {
  font-size: 16px; line-height: 28.5px; letter-spacing: -0.32px;
  color: #fff; font-weight: 400; margin: 0 0 28.5px;
}
body.page-id-9 .fo-about .fl2-forwho__box p:last-child { margin-bottom: 0; }
body.page-id-9 .fo-about .fl2-forwho__photo {
  position: absolute; left: 49.1667%; right: auto; top: 82.5px;
  width: 41.875%; transform: none; margin: 0; box-shadow: none;
}
body.page-id-9 .fo-about .fl2-forwho__photo img {
  width: 100%; height: auto; aspect-ratio: 804 / 682; object-fit: cover; display: block;
}

/* --- Form (432:309): bg #1d5ff0, wysokosc 772 ---
   kicker 16px SemiBold uppercase tracking -0.32 (top 77.2)
   H2 43px Medium tracking -0.86 (top 101.2)
   pola: szerokosc 816 (42.5%), skok 66px (244/310/376/442/508)
   przycisk 167.655x43.59, obrys 1.677px */
body.page-id-9 .fl2-contact { padding: 70px 0 119px; background: #1d5ff0; }
body.page-id-9 .fl2-contact .fl2-inner { max-width: none; padding: 0 24px; }
body.page-id-9 .fl2-contact .fl2-kicker {
  font-size: 16px; font-weight: 600; letter-spacing: -0.32px; text-transform: uppercase;
  color: #fff; margin-bottom: 4px;
}
body.page-id-9 .fl2-contact h2 {
  font-size: 43px; line-height: normal; font-weight: 500; letter-spacing: -0.86px;
  color: #fff; margin: 0 0 44px;
}
body.page-id-9 .fl2-contact .widget-contact-form { width: 816px; max-width: 100%; margin: 0 auto; }
/* skok pol 66px jak w projekcie (244/310/376/442/508) — zmierzone 69px przy 26px */
body.page-id-9 .fl2-contact .widget-contact-form .form-group { margin-bottom: 23px; }
body.page-id-9 .fl2-contact .widget-contact-form button[type=submit],
body.page-id-9 .fl2-contact .widget-contact-form input[type=submit],
body.page-id-9 .fl2-contact .widget-contact-form .btn {
  width: 167.655px; height: 43.59px; padding: 0;
  border: 1.677px solid #fff !important;   /* shorthand, bo regula bazowa ma `border: 1px ... !important` */
  font-size: 16px; font-weight: 500; letter-spacing: normal;
}

/* --- ponizej kanwy projektu: box i zdjecie jedno pod drugim --- */
@media (max-width: 1024px) {
  body.page-id-9 .fo-about .fl2-forwho__box { width: auto; margin: 0 24px; padding: 40px 28px; }
  body.page-id-9 .fo-about .fl2-forwho__photo { position: static; width: auto; margin: 0 24px; top: auto;
    height: auto; aspect-ratio: 804 / 682; }
  body.page-id-9 .fo-intro { padding: 64px 0 48px; }
  body.page-id-9 .fo-intro h2.fl2-h2 { font-size: 30px; line-height: 38px; }
  body.page-id-9 .fl2-contact h2 { font-size: 30px; }
  body.page-id-9 .fo-about { padding-bottom: 64px; }
}

/* --- O NAS: skala hero wg projektu ---
   Po zdjeciu welonu zostala roznica ZOOMU: template-match renderu projektu wobec
   naszego hero pokazal, ze projekt odpowiada 86% szerokosci naszego kadru, czyli
   zdjecie musi byc o 16% wieksze. `object-fit: cover` samo tego nie zrobi (zawsze
   wypelnia dokladnie kadr), wiec powiekszamy sam element obrazu i centrujemy go
   ujemnym marginesem: 100/0.86 = 116%, przesuniecie -8%. */
html body.page-id-9 #slider.slider ._slider.owl-carousel li img,
html body.page-id-9 #slider.slider ._slider li img {
  width: 116% !important;
  margin-left: -8%;
}

/* --- O NAS: zdjecie w ramce — kadr i przyciemnienie wg projektu ---
   Ramka 432:394 w Figmie sklada sie z rozmytego podkladu, CZARNEJ NAKLADKI
   rgba(0,0,0,.3) i ostrego zdjecia na wierzchu. Probowalem najpierw odwzorowac
   same transformacje wypelnienia (w-142.29% left--22.39% h-112.14% top--12.14%)
   — wyszlo GORZEJ (roznica sekcji 19.4 -> 32.6), bo te procenty odnosza sie do
   zagniezdzonych wrapperow, nie do ramki. Przeszukanie skali w przegladarce
   (127/131/135/139/142% x top -6/-12/-18%) wskazalo, ze najlepiej wypada zwykly
   cover — czyli skala NIE byla problemem.
   Problemem bylo PRZYCIEMNIENIE: zmierzona jasnosc obszaru zdjecia to 79.9
   w projekcie wobec 138.6 u nas, czyli stosunek 0.58 — zdjecie w makiecie jest
   o ~42% ciemniejsze. Stad nakladka na ::after. */
/* wysokosc stala z tego samego powodu co na /kontakt/: niebieski box ma
   wysokosc z tresci (847px), wiec proporcjonalna wysokosc zdjecia rozjezdzala
   sie z nim przy kazdej szerokosci innej niz 1920 */
body.page-id-9 .fo-about .fl2-forwho__photo {
  height: 682px;
  overflow: hidden;
}
body.page-id-9 .fo-about .fl2-forwho__photo img {
  position: static;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 55%;
}
body.page-id-9 .fo-about .fl2-forwho__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .065);   /* przeliczone po zmianie kadru: bez nakladki 85.5, cel 79.9 */
  pointer-events: none;
}

/* ============================================================
   KONTAKT (/kontakt/, page-id-11) — ODWZOROWANIE 1:1 wg ramki Figmy 432:185
   Wartosci z get_design_context (nod 432:260) na kanwie 1920px.
   Szablon page-contact.php sam renderuje mape oddzialow jako #slider.map
   (dokladnie tak, jak chce projekt) oraz the_content() — tam ida nasze bloki.
   Nizej wypisuje #secondary z lista oddzialow, druga mapa i wlasnym formularzem;
   projekt tego nie ma, a te same dane (adres, telefon, e-mail) nosza nasze boxy,
   wiec #secondary chowamy i uzywamy formularza asariplug jak na pozostalych
   podstronach.
   ============================================================ */

/* HERO NIETKNIETY — na zyczenie uzytkownika (2026-08-04) zostaje dokladnie taki,
   jaki byl pierwotnie: wysokosc z klasy szablonu (CONTACT_SLIDER_HEIGHT_CLASS, 724px)
   i szary welon #969696 z reguly body.page-id-11 #header::after w style.css.
   Ramka Header w projekcie (432:217) ma 630px i nie ma welonu — swiadome odstepstwo. */
/* lista oddzialow + druga mapa + formularz szablonu — zastapione trescia strony */
body.page-id-11 #secondary { display: none; }

/* --- Section 2 (432:260): naglowek + dwa boxy + zdjecie --- */
/* Sekcja musi zaczynac sie zaraz pod mapa (projekt: y 629.57, mapa konczy sie
   na 630). Miedzy #slider.map a #content szablon dodaje 77px (marginesy
   #primary/.the-content) — zmierzone: sekcja startowala na 739 zamiast 662. */
/* padding-bottom = zwis zdjecia (53px poniżej szarego boksu) + 78px odstepu
   z projektu. Zdjecie jest pozycjonowane ABSOLUTNIE, wiec nie powieksza
   wysokosci sekcji — bez tego formularz wchodzil 54px za wysoko. */
body.page-id-11 .fk2-sec { position: relative; margin-top: -77px; padding: 0 0 131px; background: #fff; }
/* H2 „Kontakt": 64px Poppins Medium #1d5ff0 tracking -1.28px, top +66.5 */
body.page-id-11 .fk2-h2 {
  font-family: 'Poppins', sans-serif; font-size: 64px; line-height: normal; font-weight: 500;
  letter-spacing: -1.28px; color: #1d5ff0; text-align: center; margin: 0; padding: 66px 24px 0;
}
/* boxy maja byc na +220 od gory sekcji; blok H2 zajmuje 161px (66 padding
   + 95 line-box), wiec zostaje 59px odstepu */
body.page-id-11 .fk2-grid { position: relative; margin-top: 59px; }

/* niebieski box: left 195 (10.156%), 908x446 (47.2917%) */
body.page-id-11 .fk2-blue {
  width: 47.2917%; margin-left: 10.156%; background: #1d5ff0; color: #fff;
  padding: 56.5px 3.28vw 47.6px 3.28vw;   /* 63px = 3.28vw */
  position: relative; z-index: 1;
}
/* szary box: left 195, 908x201, bezposrednio pod niebieskim */
body.page-id-11 .fk2-grey {
  width: 47.2917%; margin-left: 10.156%; background: #f4f4f6; color: #171b26;
  padding: 49.5px 3.28vw 54.1px 3.28vw; position: relative; z-index: 1;
}
/* zdjecie: left 734 (38.229%), top +59.5 od gory niebieskiego, 991x641 (51.615%) */
/* WYSOKOSC STALA, nie z proporcji. Boxy tekstowe maja wysokosc z TRESCI
   (446 + 201 = 647px) i nie skaluja sie z szerokoscia okna. Gdy zdjecie mialo
   `aspect-ratio` przy szerokosci procentowej, jego wysokosc malala razem z oknem
   i zwis pod tekstem znikal — zmierzone: 1920 -> +54px, 1792 -> +11, 1680 -> -27,
   1600 -> -53, 1440 -> -107, 1280 -> -160 (czyli zdjecie konczylo sie WYSOKO nad
   tekstem). Przy stalych 641px zwis wynosi 53px na kazdej szerokosci, a zmiane
   proporcji kadru obsluguje object-fit: cover. */
body.page-id-11 .fk2-photo {
  position: absolute; left: 38.229%; top: 59.5px; width: 51.615%; margin: 0; z-index: 2;
  height: 641px; overflow: hidden;
}
/* Kadr pionowy WYROWNANY DO GORY, nie centrowany.
   Zdjecie 2387x1596 (ar 1.496) w ramce 991x641 (ar 1.546) — cover skaluje po
   szerokosci, wiec w pionie zostaje 21.6px nadwyzki. `cover` domyslnie centruje
   (po ~10.8px z gory i dolu), a projekt ma wypelnienie na top-[0.09%], czyli
   praktycznie przy gornej krawedzi. Zmierzone landmarkiem (szerokosc szyldow
   wzgledem kadru): poziomo zgadzalo sie co do 0.05%, ale pionowo szyldy siedzialy
   u nas na 25.59-74.10% wobec 27.20-75.73% na zrzucie z projektu — dokladnie te
   ~10px roznicy. */
body.page-id-11 .fk2-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }

/* „Merlon Nieruchomosci": 43px/56px tracking -0.86px */
body.page-id-11 .fk2-name {
  font-family: 'Poppins', sans-serif; font-size: 43px; line-height: 56px; font-weight: 500;
  letter-spacing: -0.86px; color: #fff; margin: 0 0 37px;
}
/* naglowki blokow: SemiBold 19px/30.4px, tekst 16px/28.5px tracking -0.32px, odstep 10px */
body.page-id-11 .fk2-item h3 {
  font-family: 'Poppins', sans-serif; font-size: 19px; line-height: 30.4px; font-weight: 600;
  color: inherit; margin: 0 0 10px; text-transform: none; letter-spacing: normal;
}
body.page-id-11 .fk2-item p {
  font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 28.5px; font-weight: 400;
  letter-spacing: -0.32px; color: inherit; margin: 0;
}
body.page-id-11 .fk2-item--hours { margin-top: 26.6px; }
body.page-id-11 .fk2-grey .fk2-item a { color: inherit; text-decoration: none; }
body.page-id-11 .fk2-grey .fk2-item a:hover { text-decoration: underline; }

/* formularz — te same wartosci co na /zespol/ (ramka Form jest identyczna) */
body.page-id-11 .fl2-contact { padding: 70px 0 119px; background: #1d5ff0; }
body.page-id-11 .fl2-contact .fl2-inner { max-width: none; padding: 0 24px; }
body.page-id-11 .fl2-contact .fl2-kicker {
  font-size: 16px; font-weight: 600; letter-spacing: -0.32px; text-transform: uppercase;
  color: #fff; margin-bottom: 4px;
}
body.page-id-11 .fl2-contact h2 {
  font-size: 43px; line-height: normal; font-weight: 500; letter-spacing: -0.86px;
  color: #fff; margin: 0 0 44px;
}
body.page-id-11 .fl2-contact .widget-contact-form { width: 816px; max-width: 100%; margin: 0 auto; }
body.page-id-11 .fl2-contact .widget-contact-form .form-group { margin-bottom: 23px; }

/* --- ponizej kanwy projektu: zdjecie pod boxami --- */
@media (max-width: 1024px) {
  body.page-id-11 .fk2-h2 { font-size: 34px; padding-top: 40px; }
  body.page-id-11 .fk2-grid { margin-top: 32px; }
  body.page-id-11 .fk2-blue, body.page-id-11 .fk2-grey { width: auto; margin: 0 24px; padding: 32px 28px; }
  body.page-id-11 .fk2-photo { position: static; width: auto; margin: 24px 24px 0; top: auto;
    height: auto; aspect-ratio: 991 / 641; }
  /* zdjecie wraca do przeplywu, wiec dopelnienie na jego zwis jest zbedne */
  body.page-id-11 .fk2-sec { margin-top: 0; padding-bottom: 48px; }
  body.page-id-11 .fk2-name { font-size: 30px; line-height: 38px; margin-bottom: 24px; }
  body.page-id-11 .fl2-contact h2 { font-size: 30px; }
}

/* --- DOMKNIECIE KOLEJNOSCI: stale wysokosci zdjec tylko na duzych ekranach ---
   Reguly `height: 682px` (/zespol/) i `height: 641px` (/kontakt/) dopisalem na
   koncu pliku, czyli PO bloku @media (max-width: 1024px) — a przy rownej
   specyficznosci wygrywa pozniejsza regula. Skutek: na malych ekranach
   `height: auto` z media query przegrywalo, figure na /zespol/ dostawala
   804px szerokosci przy oknie 390 (bo wysokosc 682 + aspect-ratio na obrazku)
   i strona przewijala sie w poziomie. Ten blok przywraca wlasciwa kolejnosc. */
@media (max-width: 1024px) {
  body.page-id-9 .fo-about .fl2-forwho__photo { height: auto; aspect-ratio: 804 / 682; }
  body.page-id-11 .fk2-photo { height: auto; aspect-ratio: 991 / 641; }
}

/* --- BAND na /bezplatna-wycena-mieszkania/: grafika z Figmy ma juz wypalony
   niebieski duotone, wiec warstwa rgba(29,95,240,.30) z .fl2-band podwajalaby
   przyciemnienie. Zdjecie to dokladny kadr bandu — pozycja center. --- */
body.page-id-12012 .fl2-band {
  background: var(--fl-band-img, linear-gradient(#1d5ff0, #1d5ff0)) center center / cover no-repeat;
}