@media(max-width:1080px) {
  .fgrid5 {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px
  }

  .fcol-logo {
    grid-column: 1/-1
  }
}

@media(max-width:720px) {
  .fgrid5 {
    grid-template-columns: repeat(2, 1fr)
  }

  .fbottom {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center
  }

  .fbottom>span:first-child,
  .fcredit,
  .ftop {
    justify-self: center
  }
}

@media(max-width:480px) {
  .fgrid5 {
    grid-template-columns: 1fr
  }
}


@media(max-width:1140px) {
  nav {
    display: none
  }

  .hphone {
    display: none
  }

  .serv-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .hero h1 {
    font-size: 48px
  }
}

@media(max-width:920px) {
  .section {
    padding: 72px 0
  }

  .hero .top,
  .about .wrap,
  .why .wrap,
  .rev .wrap,
  .pob-wrap,
  .book .wrap {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .docs-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 165px
  }

  .gal-grid a {
    grid-column: auto !important;
    grid-row: auto !important
  }

  .topbar .r {
    display: none
  }

  .hero-figure>img,
  .why-img img,
  .rev-img img {
    height: 420px
  }

  .about-media {
    position: static
  }

  .about-collage {
    grid-template-rows: repeat(4, 116px)
  }

  .stat {
    border-right: none
  }

  .why-img,
  .rev-img {
    order: -1
  }

  .book-info {
    padding: 40px 32px
  }

  .book-form {
    padding: 40px 30px
  }
}

@media(max-width:560px) {

  .docs-grid,
  .blog-grid,
  .gal-grid,
  .fgrid {
    grid-template-columns: 1fr
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .hero h1 {
    font-size: 38px
  }

  .section {
    padding: 56px 0
  }

  .fgrid2 {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .hcta .btn {
    display: none
  }
}

/* ===== Breakpointy motywu (obowiązkowe wg procesu: 1680 · 1380 · 1200 · 991 · 768 · 576 · 340) ===== */

@media(max-width:1680px) {
  .wrap {
    padding: 0 40px
  }
}

@media(max-width:1380px) {
  .phero h1 {
    font-size: 46px
  }

  .vals-grid,
  .steps-grid,
  .serv-grid,
  .docs-list .docs-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .doc-grid {
    grid-template-columns: 330px 1fr;
    gap: 40px
  }
}

@media(max-width:1200px) {
  .wrap {
    padding: 0 28px
  }

  .gal-masonry {
    columns: 2
  }
}

@media(max-width:1140px) {
  .burger {
    display: flex
  }

  .mnav {
    top: 68px
  }
}

@media(max-width:991px) {
  .phero {
    padding: 58px 0 48px
  }

  .phero.has-img {
    padding: 92px 0 74px
  }

  .phero h1 {
    font-size: 38px
  }

  .vals-grid,
  .steps-grid,
  .serv-grid,
  .docs-list .docs-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .doc-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .doc-side {
    position: static
  }

  .doc-photo img {
    height: 380px
  }

  .cmap iframe {
    height: 380px
  }
}

@media(max-width:768px) {
  .entry h2 {
    font-size: 28px
  }

  .entry h3 {
    font-size: 22px
  }

  .lead-big {
    font-size: 17px
  }

  .gal-masonry {
    columns: 2;
    column-gap: 14px
  }

  .gal-masonry a {
    margin-bottom: 14px
  }

  .docs-more {
    margin-top: 56px;
    padding-top: 40px
  }

  .doc-cta {
    padding: 22px
  }
}

@media(max-width:576px) {
  .wrap {
    padding: 0 18px
  }

  .phero h1,
  .e404 h1 {
    font-size: 30px
  }

  .vals-grid,
  .steps-grid,
  .serv-grid,
  .docs-list .docs-grid {
    grid-template-columns: 1fr
  }

  .gal-masonry {
    columns: 1
  }

  .doc-photo img {
    height: 320px
  }

  .docs-filter {
    gap: 8px;
    margin-bottom: 28px
  }

  .fbtn {
    padding: 9px 16px;
    font-size: 13.5px
  }

  .e404 {
    padding: 72px 0
  }

  .cmap iframe {
    height: 300px
  }

  .pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    margin: 0 3px
  }
}

@media(max-width:340px) {
  .wrap {
    padding: 0 14px
  }

  .phero h1 {
    font-size: 26px
  }

  .brand .wm {
    font-size: 20px
  }

  .brand .mk {
    width: 48px;
    height: 48px
  }

  .burger {
    width: 42px;
    height: 42px
  }

  .doc-photo img {
    height: 260px
  }

  .uc-search input {
    padding: 12px 16px
  }
}

@media(max-width:1200px) {
  .ti-intro {
    max-width: 100%
  }

  .ti-intro p {
    white-space: normal
  }

  .ti-meta {
    flex: 0 1 auto;
    width: 100%
  }
}

@media(max-width:991px) {
  .book--solo .book-info {
    padding: 56px 0
  }

  .doc-hero {
    gap: 16px
  }
}

@media(max-width:768px) {
  .doc-cta {
    grid-template-columns: 1fr
  }
}

@media(max-width:991px) {
  .doc-bottom {
    grid-template-columns: 1fr
  }
}

@media(max-width:1680px) {
  .pob-wrap {
    padding: 0 40px
  }
}

@media(max-width:1380px) {
  .cgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:1200px) {
  .pob-wrap {
    padding: 0 28px
  }
}

@media(max-width:991px) {
  .spec-split {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .spec-split-img {
    position: static
  }

  .docs-list .docs-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:576px) {
  .pob-wrap {
    padding: 0 18px
  }

  .cgrid,
  .docs-list .docs-grid {
    grid-template-columns: 1fr
  }

  .cphone {
    font-size: 24px
  }
}

@media(max-width:1380px) {
  .vals .vals-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    border-top: none
  }

  .vals .val,
  .vals .val:hover,
  .vals .val:first-child {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 36px 0 24px
  }
}

@media(max-width:576px) {
  .vals .vals-grid {
    grid-template-columns: 1fr
  }

  .doc-cta {
    padding: 18px 20px
  }
}

@media(max-width:1380px) {
  .cgrid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    border-top: none
  }

  .cbox,
  .cbox:first-child,
  .cbox-review {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .24);
    padding: 36px 0 28px
  }
}

@media(max-width:991px) {
  .doc-phero-row {
    align-items: flex-start
  }
}

@media(max-width:576px) {
  .cgrid {
    grid-template-columns: 1fr
  }

  .crev-score b {
    font-size: 44px
  }

  .doc-zl-box .zl .zb {
    padding: 12px 18px
  }
}

/* boxy z radiusem - nadpisanie wcześniejszego układu liniowego */
@media(max-width:1380px) {
  .vals .vals-grid,
  .cgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    border-top: none
  }

  .vals .val,
  .vals .val:hover,
  .vals .val:first-child,
  .cbox,
  .cbox:first-child,
  .cbox-review {
    border: 1px solid rgba(255, 255, 255, .10);
    padding: 36px 30px 32px
  }

  .cband .cbox,
  .cband .cbox:first-child,
  .cband .cbox-review {
    border-color: rgba(255, 255, 255, .22)
  }
}

@media(max-width:576px) {
  .vals .vals-grid,
  .cgrid {
    grid-template-columns: 1fr
  }

  .vals .val-n {
    font-size: 52px
  }
}

@media(max-width:991px) {
  .doc-phero-zl {
    width: 100%;
    max-width: 420px
  }
}

/* ══════════════════════════════════════════════════════════════
   PRZEGLĄD RWD: 1680 · 1380 · 1200 · 991 · 768 · 576 · 340
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1380px) {
  .hero h1 {
    font-size: 52px
  }

  .hero .top {
    gap: 36px
  }
}

@media(max-width:1200px) {
  .hero h1 {
    font-size: 46px
  }

  .phero h1 {
    font-size: 42px
  }

  .about h2,
  .serv h2,
  .why h2,
  .docs h2,
  .gal h2,
  .blog h2,
  .ti-intro h2,
  .vals .head h2,
  .steps .head h2 {
    font-size: 36px
  }
}

/* Panel mobilny jako pełnoekranowe okno (burger pojawia się przy 1140) */
@media(max-width:1140px) {
  .mnav {
    position: fixed;
    inset: 0;
    z-index: 60;
    padding: 0;
    overflow-y: auto;
    box-shadow: none;
    border-top: none
  }

  .mnav.is-open {
    display: flex;
    flex-direction: column
  }

  .mnav-head {
    display: flex
  }

  .mnav>ul {
    padding: 8px 20px
  }

  .mnav>ul>li>a {
    font-size: 19px;
    padding: 16px 0
  }

  .mnav-foot {
    margin-top: auto;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line)
  }
}

@media(max-width:991px) {
  .hero {
    padding-top: 44px
  }

  .hero h1 {
    font-size: 38px
  }

  .phero h1 {
    font-size: 34px
  }

  .about h2,
  .serv h2,
  .why h2,
  .docs h2,
  .gal h2,
  .blog h2,
  .ti-intro h2,
  .vals .head h2,
  .steps .head h2 {
    font-size: 30px
  }

  .credo-quote {
    font-size: 26px
  }

  .doc-seo {
    font-size: 21px
  }

  .stat .n {
    font-size: 36px
  }

  /* Nagłówek sekcji opinii: na wąskim ekranie kolumna, nie trzyszpaltowy grid */
  .ti-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px
  }

  .ti-head .ti-summary,
  .ti-head .ti-nav,
  .ti-summary--zl {
    justify-self: start
  }

  .ti-intro,
  .ti-intro p {
    max-width: 100%;
    white-space: normal
  }

  /* Ornamenty: mniejsze i dosunięte, żeby nie zasłaniały treści */
  .hero .orns .c1 {
    width: 380px;
    height: 380px;
    right: -150px
  }

  .hero .orns .c2 {
    width: 560px;
    height: 560px;
    right: -240px
  }

  .hero .orns .c3 {
    width: 740px;
    height: 740px;
    right: -330px
  }

  .hero .orns .s1 {
    width: 84px;
    height: 84px;
    top: 2%;
    left: 62%
  }

  .hero .orns .s2 {
    width: 54px;
    height: 54px;
    top: 22%;
    left: 8%
  }

  .credo .orns {
    top: -120px;
    bottom: -120px
  }

  .credo .orns .o1 {
    width: 210px;
    height: 210px
  }

  .credo .orns .o2 {
    width: 380px;
    height: 380px
  }

  .credo .orns .o3 {
    width: 540px;
    height: 540px
  }

  .credo .orns .o4 {
    display: none
  }

  .why .orns .wc1 {
    width: 380px;
    height: 380px;
    bottom: -150px;
    left: -140px
  }

  .why .orns .wc2 {
    display: none
  }

  .why .orns .ws1 {
    width: 64px;
    height: 64px;
    top: 5%
  }

  .why .orns .ws2 {
    width: 96px;
    height: 96px
  }

  .pob .orns .pc1 {
    width: 320px;
    height: 320px;
    top: -120px;
    left: -100px
  }

  .pob .orns .pc2 {
    width: 190px;
    height: 190px;
    top: -60px
  }

  .pob .orns .pc3 {
    width: 420px;
    height: 420px;
    bottom: -240px
  }

  .pob .orns .pc4 {
    width: 110px;
    height: 110px
  }
}

@media(max-width:768px) {
  .section {
    padding: 64px 0
  }

  .hero h1 {
    font-size: 33px
  }

  .phero h1 {
    font-size: 30px
  }

  .about h2,
  .serv h2,
  .why h2,
  .docs h2,
  .gal h2,
  .blog h2,
  .ti-intro h2,
  .vals .head h2,
  .steps .head h2 {
    font-size: 27px
  }

  .credo-quote {
    font-size: 22px
  }

  .alab-logo {
    font-size: 32px
  }

  .hero .orns .s1,
  .hero .orns .s2,
  .why .orns .ws1 {
    display: none
  }
}

@media(max-width:576px) {
  .section {
    padding: 48px 0
  }

  .hero h1 {
    font-size: 29px
  }

  .phero h1,
  .e404 h1 {
    font-size: 26px
  }

  .about h2,
  .serv h2,
  .why h2,
  .docs h2,
  .gal h2,
  .blog h2,
  .ti-intro h2,
  .vals .head h2,
  .steps .head h2 {
    font-size: 24px
  }

  .credo-quote {
    font-size: 20px
  }

  .stat .n {
    font-size: 30px
  }

  .why .orns .ws2,
  .pob .orns .pc4 {
    display: none
  }

  .ti-summary,
  .ti-summary--zl {
    width: 100%
  }
}

@media(max-width:340px) {
  .section {
    padding: 40px 0
  }

  .hero h1 {
    font-size: 25px
  }

  .phero h1 {
    font-size: 23px
  }

  .about h2,
  .serv h2,
  .why h2,
  .docs h2,
  .gal h2,
  .blog h2,
  .ti-intro h2,
  .vals .head h2,
  .steps .head h2 {
    font-size: 22px
  }

  .mnav>ul>li>a {
    font-size: 17px
  }

  .btn {
    padding: 13px 20px;
    font-size: 14px
  }
}

/* ══════════════════════════════════════════════════════════════
   PRZEGLĄD RWD II
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1200px) {
  .gal-masonry {
    grid-template-columns: repeat(3, 1fr)
  }

  .dphoto {
    height: auto;
    aspect-ratio: 4 / 3
  }
}

/* Stopka: kontakt i social do lewej, gdy kolumny się zwężają */
@media(max-width:1080px) {
  .fcol-contact {
    text-align: left;
    align-items: flex-start
  }
}

@media(max-width:991px) {
  .btn {
    padding: 11px 20px;
    font-size: 14px;
    gap: 9px
  }

  .btn i {
    font-size: 12px
  }

  .zl .zb,
  .doc-zl-box .zl .zb {
    padding: 10px 16px;
    font-size: 13px
  }

  /* Górny pasek: telefon i e-mail zostają, adres dopiero od 992 px */
  .topbar {
    font-size: 12.5px
  }

  .topbar .l span {
    display: none
  }

  .topbar .l a {
    margin-right: 18px
  }
}

@media(max-width:768px) {
  .gal-masonry {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
  }
}

@media(max-width:576px) {
  .btn {
    padding: 10px 18px;
    font-size: 13.5px
  }

  .gal-masonry,
  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
  }

  .gal-grid {
    grid-template-rows: none;
    grid-auto-rows: 116px
  }

  .gal-grid a {
    grid-column: auto !important;
    grid-row: auto !important
  }

  .dphoto {
    aspect-ratio: 5 / 4
  }
}

@media(max-width:340px) {
  .gal-masonry,
  .gal-grid {
    gap: 10px
  }
}

/* ══════════════════════════════════════════════════════════════
   PRZEGLĄD RWD III
   ══════════════════════════════════════════════════════════════ */

@media(max-width:991px) {
  .hero .eyebrow {
    letter-spacing: .06em
  }

  /* Jednolity rozmiar tekstu czytanego na mobile */
  .section p,
  .section li,
  .lead,
  .lead-big,
  .entry,
  .entry p,
  .entry li,
  .hero .rt p,
  .credo p,
  .credo-lead,
  .about-text>p,
  .about-text .lead,
  .pob-intro p,
  .ti-intro p,
  .val p,
  .vals .val p,
  .step p,
  .caddr,
  .cnote,
  .crev-opis,
  .doc-hero-role,
  .fcol p,
  .fcol li,
  .checks li,
  .pob-feats li,
  .why-item p,
  .spec-body p {
    font-size: 15px
  }

  /* Okręgi w stopce: mniejsze i wciągnięte w kadr */
  .footer-orns {
    top: -60px
  }

  .footer-orns .fo1 {
    width: 300px;
    height: 300px;
    top: -90px;
    left: -60px
  }

  .footer-orns .fo2 {
    width: 180px;
    height: 180px;
    top: -30px;
    left: -10px
  }

  .footer-orns .fo3 {
    width: 380px;
    height: 380px;
    top: 40px;
    right: -170px
  }

  .footer-orns .fo4 {
    width: 90px;
    height: 90px;
    top: 60px;
    right: 12%
  }
}

/* Kontakt w dwóch kolumnach: numer i ocena muszą zmieścić się w jednej linii */
@media(min-width:577px) and (max-width:768px) {
  .cphone {
    font-size: 23px
  }

  .cmail {
    font-size: 14px
  }

  .crev-score b {
    font-size: 38px
  }

  .crev-stars {
    font-size: 16px;
    letter-spacing: 2px
  }
}

@media(max-width:576px) {
  .cphone {
    font-size: 26px
  }
}

@media(max-width:340px) {
  .footer-orns .fo3 {
    display: none
  }
}

/* ══════════════════════════════════════════════════════════════
   PRZEGLĄD RWD IV: karuzele i duże kadry na wąskim ekranie
   ══════════════════════════════════════════════════════════════ */

/* Slajdy miały sztywną szerokość, więc poniżej ~380 px karta była przycinana */
@media(max-width:576px) {
  .serv-swiper .swiper-slide {
    width: min(358px, 84vw)
  }

  .ti-swiper .swiper-slide {
    width: min(332px, 84vw)
  }

  .hero-figure>img,
  .why-img img,
  .rev-img img {
    height: 300px
  }

  .band {
    height: 260px
  }

  .spec-img {
    height: 180px
  }
}

@media(max-width:340px) {
  .hero-figure>img,
  .why-img img,
  .rev-img img {
    height: 240px
  }

  .band {
    height: 210px
  }
}

@media(max-width:768px) {
  .band {
    height: 320px
  }
}

/* ══════════════════════════════════════════════════════════════
   PRZEGLĄD RWD V: nawigacja, pasek górny, hero
   ══════════════════════════════════════════════════════════════ */

/* Adres w pasku górnym mieści się w jednej linii dopiero od 1381 px */
@media(max-width:1380px) {
  .topbar .l span {
    display: none
  }
}

@media(max-width:1440px) {
  nav ul {
    gap: 2px
  }

  nav a {
    padding: 8px 11px;
    font-size: 14.5px
  }
}

@media(max-width:1280px) {
  nav a {
    padding: 7px 9px;
    font-size: 14px
  }

  header .wrap {
    gap: 16px
  }
}

@media(max-width:991px) {
  .why-item p {
    font-size: 13px
  }
}

/* Hero zwija się do jednej kolumny przy 920 px - tam znika odstęp między
   przyciskami a akapitem, wyżej kolumny stoją obok siebie i odstęp jest potrzebny. */
@media(max-width:920px) {
  .hero .top {
    gap: 20px
  }

  .hero .rt {
    padding-top: 0
  }
}

@media(max-width:576px) {
  .hero-chip {
    display: none
  }
}

@media(max-width:991px) {
  .book--solo .book-info {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .book-actions {
    min-width: 0
  }
}

/* Filtr specjalistów jako pełnoekranowy modal poniżej 992 px */
@media(max-width:991px) {
  .docs-filter-toggle {
    display: flex
  }

  .docs-filter {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom));
    background: #fff;
    overflow-y: auto
  }

  .docs-filter.is-open {
    display: flex
  }

  .docs-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    margin: 0 -20px 14px;
    padding: 18px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--navy-900)
  }

  .docs-filter-close {
    flex: none;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--cream);
    color: var(--navy-800);
    font-size: 17px;
    cursor: pointer
  }

  .docs-filter .fbtn {
    width: 100%;
    text-align: left;
    padding: 15px 18px;
    font-size: 16px;
    border-radius: var(--r);
    margin-bottom: 8px
  }

  body.filter-open {
    overflow: hidden
  }
}

/* Logo w wąskim zakresie desktopu: ciaśniej, żeby nawigacja miała miejsce */
@media(min-width:1200px) and (max-width:1380px) {
  .brand {
    gap: 0
  }

  .brand .mk {
    width: 54px;
    height: 54px
  }

  .brand .wm {
    font-size: 19px
  }
}

@media(max-width:576px) {
  .phero-search .searchbar {
    margin-top: 20px
  }

  .phero-search .uc-search input {
    padding: 13px 18px;
    font-size: 15px
  }

  .phero-search .uc-search button {
    width: 48px;
    height: 48px
  }

  .result-link {
    padding: 20px 22px
  }
}

@media(max-width:991px) {
  .phero-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 22px
  }

  .phero-search-row .searchbar {
    width: 100%
  }
}

@media(max-width:1200px) {
  .soc-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }
}

@media(max-width:576px) {
  .soc-card {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px
  }

  .soc-ic {
    width: 52px;
    height: 52px;
    font-size: 22px;
    border-radius: 14px
  }

  .soc-tx b {
    font-size: 19px
  }

  .soc-cta {
    width: 100%;
    justify-content: center
  }
}

@media(max-width:1380px) {
  .doc-grid.has-book {
    grid-template-columns: 240px minmax(0, 1fr) 340px;
    gap: 32px
  }
}

@media(max-width:1200px) {
  .doc-grid.has-book {
    grid-template-columns: 280px minmax(0, 1fr)
  }

  .doc-book {
    position: static;
    grid-column: 2;
    max-width: 420px
  }
}

@media(max-width:991px) {
  .doc-grid.has-book {
    grid-template-columns: 1fr
  }

  .doc-book {
    grid-column: auto;
    width: 100%
  }
}