/* ==========================================================
   NAWIGATOR PARTNERSTW INWESTYCYJNYCH
   Wersja uporządkowana
   ========================================================== */


/* ==========================================================
   GLOBAL / USTAWIENIA WSPÓLNE
   ========================================================== */

.nawigatorpage {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #163060;
}

.nawigatorpage * {
    box-sizing: border-box;
}

.nawigatorpage div {
    float: none;
}

.nawigatorInner {
    width: calc(100% - 120px);
    max-width: 1280px;
    margin: 0 auto;
}

.nawigatorEyebrow {
    margin: 0 0 14px;
    color: #ff8440 !important;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nawigatorBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    min-width: 230px;
    height: 64px;
    margin-top: 20px;
    padding: 0 32px;
    background: #ff8440;
    color: #fff !important;
    border-radius: 28px;
    text-decoration: none !important;
}

.nawigatorBtn > span {
    display: block;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transform: translateY(-2px);
}

.nawigatorSection {
    width: 100%;
    padding: 90px 0;
}

.nawigatorWhite {
    background: #fff;
}

.nawigatorSection h2 {
    margin: 0 0 38px;
    color: #163060;
    font-size: 40px;
    line-height: 1.2;
}

.nawigatorGray {
    background: #f5f6f8;
}

.nawigatorNavy {
    background: radial-gradient(
                circle at 90% 20%,
                rgba(255,132,64,.10) 0%,
                rgba(255,132,64,0) 30%
            ),
            linear-gradient(
                120deg,
                #163060 0%,
                #1e3b75 100%
            );
}

.nawigatorNavy h2 {
    color: #fff;
}

.nawigatorIntro {
    max-width: 850px;
    margin: -15px 0 42px;
    font-size: 18px;
    line-height: 1.65;
}



/* ==========================================================
   HERO
   ========================================================== */

.nawigatorHero {
    width: 100%;
    padding: 170px 0 110px;
    background: radial-gradient(
                circle at 88% 25%,
                rgba(255,132,64,.13) 0%,
                rgba(255,132,64,0) 28%
            ),
            linear-gradient(
                120deg,
                #163060 0%,
                #1c3b73 55%,
                #244a8b 100%
            );
    position: relative;
    overflow: hidden;
}

.nawigatorHeroContent {
    width: 820px;
    max-width: 72%;
}

.nawigatorHero h1 {
    margin: 0 0 28px;
    color: #fff;
    font-size: 56px;
    line-height: 1.08;
}

.nawigatorHeroSubtitle {
    margin-bottom: 26px;
    color: #fff;
    font-size: 25px;
    line-height: 1.45;
    font-weight: 600;
}

.nawigatorHero p {
    color: rgba(255,255,255,.90);
    font-size: 18px;
    line-height: 1.7;
}

.nawigatorHero .nawigatorBtn {
    border: 1.5px solid #ff8440;
    box-shadow: none;
    transition: background-color .3s ease,
            color .3s ease,
            border-color .3s ease,
            transform .3s ease,
            box-shadow .3s ease;
}

.nawigatorHero .nawigatorBtn > span {
    color: #fff !important;
    transition: color .3s ease;
}

.nawigatorHero .nawigatorBtn:hover {
    background: #fff !important;
    border-color: #fff;
    color: #ff8440 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

.nawigatorHero .nawigatorBtn:hover > span {
    color: #ff8440 !important;
}

.nawigatorHero .nawigatorInner {
    position: relative;
    z-index: 3;
}

.nawigatorHeroVisual {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    pointer-events: none;
    background-image: url("/wp-content/themes/ts/gfx/nawigator-hero.jpg");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: .72;
    -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.08) 6%,
            rgba(0,0,0,.30) 14%,
            rgba(0,0,0,.65) 25%,
            #000 40%,
            #000 100%
        );
    mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.08) 6%,
            rgba(0,0,0,.30) 14%,
            rgba(0,0,0,.65) 25%,
            #000 40%,
            #000 100%
        );
}

/* ==========================================================
   HERO – TABLETY POZIOMO / MNIEJSZE LAPTOPY
   ========================================================== */

@media (min-width: 1024px) and (max-width: 1440px) {

    .nawigatorHero {
        padding: 210px 0 82px !important;
    }

    .nawigatorHero .nawigatorInner {
        width: min(100% - 64px, 1180px) !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 48%) !important;
        gap: 34px !important;

        align-items: center !important;
    }

    .nawigatorHeroContent {
        max-width: 560px !important;
        padding-top: 22px !important;
        position: relative;
        z-index: 2;
    }

    .nawigatorHero .nawigatorEyebrow {
        margin: 0 0 18px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .nawigatorHero h1 {
        margin: 0 0 20px !important;
        font-size: clamp(58px, 5.1vw, 76px) !important;
        line-height: 0.98 !important;
    }

    .nawigatorHeroSubtitle {
        margin-bottom: 22px !important;
        font-size: 19px !important;
        line-height: 1.45 !important;
    }

    .nawigatorHero p {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }

    .nawigatorHero .nawigatorBtn {
        margin-top: 22px !important;
    }

    .nawigatorHeroVisual {
        min-height: 560px !important;
    }

    /* jeśli obraz w hero jest jako <img> */
    .nawigatorHeroVisual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 68% center;
    }
}

/* ==========================================================
   KIEDY WARTO SKORZYSTAĆ
   ========================================================== */

.nawigatorWhen {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr)
            minmax(320px, .75fr);
    gap: 60px;
    align-items: start;
}

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

.nawigatorChecklist li {
    position: relative;
    padding: 0 0 18px 30px;
    font-size: 18px;
    line-height: 1.65;
}

.nawigatorChecklist li::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 3px;
    color: #ff8440;
    font-size: 13px;
}

.nawigatorHighlight {
    padding: 38px;
    background: #163060;
    border-radius: 30px;
    box-shadow: 0 18px 45px rgba(22,48,96,.16);
}

.nawigatorHighlight p {
    margin: 0 0 20px;
    color: #fff;
    font-size: 18px;
    line-height: 1.7;
}

.nawigatorHighlight p:last-child {
    margin-bottom: 0;
}

.nawigatorHighlight strong {
    color: #fff;
}



/* ==========================================================
   JAK PRACUJEMY
   ========================================================== */

.nawigatorSteps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.nawigatorStep {
    position: relative;
    min-height: 320px;
    padding: 34px 30px;
    background: #fff;
    border: 1px solid rgba(22,48,96,.08);
    border-radius: 28px;
    box-shadow: 0 14px 35px rgba(22,48,96,.07);
    transition: transform .25s ease,
            box-shadow .25s ease;
    z-index: 2;
}

.nawigatorStep:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(22,48,96,.12);
}

.nawigatorNumber {
    display: flex;
    width: 46px;
    height: 46px;
    margin-bottom: 25px;
    align-items: center;
    justify-content: center;
    background: #ff8440;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    position: relative;
    z-index: 3;
}

.nawigatorStep h3 {
    margin: 0 0 14px;
    color: #163060;
    font-size: 24px;
    line-height: 1.25;
}

.nawigatorStep strong {
    display: block;
    margin-bottom: 18px;
    color: #163060;
    line-height: 1.45;
}

.nawigatorStep p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

.nawigatorQuote {
    margin-top: 40px;
    padding: 24px 30px;
    background: #fff;
    border-left: 5px solid #ff8440;
    border-radius: 0 22px 22px 0;
    box-shadow: 0 10px 30px rgba(22,48,96,.05);
    color: #163060;
    font-size: 18px;
    line-height: 1.6;
}

.nawigatorStep::after {
    content: none !important;
}

.nawigatorSteps::before {
    content: "";
    position: absolute;
    top: 53px;
    left: 9%;
    right: 9%;
    height: 2px;
    background: rgba(242, 138, 71, 0.65);
    z-index: 0;
}



/* ==========================================================
   MODELE WSPÓŁPRACY
   ========================================================== */

.nawigatorModels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.nawigatorCard {
    position: relative;
    min-height: 250px;
    padding: 34px;
    overflow: hidden;
    background: linear-gradient(
                145deg,
                #ffffff 0%,
                #ffffff 75%,
                rgba(255,132,64,.04) 100%
            );
    border: 1px solid rgba(22,48,96,.10);
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(22,48,96,.05);
    transition: transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
}

.nawigatorCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
                90deg,
                #ff8440 0%,
                rgba(255,132,64,.15) 60%,
                transparent 100%
            );
}

.nawigatorCardNumber {
    display: block;
    margin-bottom: 34px;
    color: #ff8440;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .10em;
}

.nawigatorCardIcon {
    position: absolute;
    top: 27px;
    right: 28px;
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    background: rgba(255,132,64,.055);
    border: 1.5px solid rgba(255,132,64,.28);
    border-radius: 16px;
    transition: background-color .3s ease,
            border-color .3s ease,
            transform .3s ease,
            box-shadow .3s ease;
}

.nawigatorCardIcon img {
    display: block;
    width: 31px;
    height: 31px;
    object-fit: contain;
    transition: transform .3s ease;
}

.nawigatorCard h3 {
    margin: 0 0 16px;
    color: #163060;
    font-size: 24px;
    line-height: 1.25;
}

.nawigatorCard p {
    margin: 0;
    color: rgba(22,48,96,.82);
    font-size: 17px;
    line-height: 1.6;
}

.nawigatorCard:hover {
    transform: translateY(-6px);
    border-color: rgba(255,132,64,.28);
    box-shadow: 0 20px 45px rgba(22,48,96,.10);
}

.nawigatorCard:hover .nawigatorCardIcon {
    background: rgba(255,132,64,.12);
    border-color: rgba(255,132,64,.55);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255,132,64,.12);
}

.nawigatorCard:hover .nawigatorCardIcon img {
    transform: scale(1.07);
}

.nawigatorNote {
    max-width: 900px;
    margin: 35px 0 0;
    color: rgba(22,48,96,.72);
    font-size: 15px;
    line-height: 1.6;
}



/* ==========================================================
   EFEKT NAWIGATORA
   ========================================================== */

.nawigatorEffectSection {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.nawigatorEffectSection::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 46%;
    height: 100%;
    background: url("/wp-content/themes/ts/gfx/nawigator-compass.png")
            center / cover no-repeat;
    opacity: .30;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
                to right,
                transparent 0%,
                rgba(0,0,0,.10) 10%,
                rgba(0,0,0,.40) 24%,
                rgba(0,0,0,.75) 40%,
                #000 58%,
                #000 100%
            );
    mask-image: linear-gradient(
                to right,
                transparent 0%,
                rgba(0,0,0,.10) 10%,
                rgba(0,0,0,.40) 24%,
                rgba(0,0,0,.75) 40%,
                #000 58%,
                #000 100%
            );
}

.nawigatorEffectSection::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 46%;
    height: 100%;
    background: linear-gradient(
                90deg,
                rgba(22,48,96,0) 0%,
                rgba(22,48,96,.15) 50%,
                rgba(22,48,96,.32) 100%
            );
    pointer-events: none;
}

.nawigatorEffectSection > .nawigatorInner {
    position: relative;
    z-index: 2;
}

.nawigatorResultsHeader {
    display: flex;
    margin-bottom: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.nawigatorResultsHeading {
    max-width: 720px;
    flex: 1 1 auto;
}

.nawigatorResultsHeading h2 {
    margin-bottom: 0;
}

.nawigatorResultsHeading .nawigatorEyebrow {
    margin-bottom: 14px;
}

.nawigatorResults {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.nawigatorResult {
    position: relative;
    width: auto;
    min-height: 340px;
    padding: 38px 34px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 30px;
    box-shadow: 0 18px 42px rgba(0,0,0,.11);
    transition: transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
}

.nawigatorResult::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
                90deg,
                #ff8440 0%,
                rgba(255,132,64,.35) 55%,
                transparent 100%
            );
}

.nawigatorResult:hover {
    transform: translateY(-6px);
    border-color: rgba(255,132,64,.26);
    box-shadow: 0 24px 50px rgba(0,0,0,.15);
}

.nawigatorResultNumber {
    display: block;
    margin-bottom: 48px;
    color: #ff8440;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
}

.nawigatorResult h3 {
    margin: 0 0 22px;
    color: #163060;
    font-size: 24px;
    line-height: 1.25;
}

.nawigatorResult p {
    margin: 0;
    color: #163060;
    font-size: 17px;
    line-height: 1.65;
}

.nawigatorResultIcon {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    background: rgba(255, 132, 64, 0.06);
    border: 2.5px solid rgba(255, 132, 64, 0.35);
    border-radius: 20px;
    box-shadow: 0 8px 18px rgba(255, 132, 64, 0.08);
}

.nawigatorResultIcon img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
}



/* ==========================================================
   PRZYKŁAD
   ========================================================== */

.nawigatorCase {
    max-width: 1050px;
    padding: 45px;
    background: #fff;
    border-top: 5px solid #ff8440;
    border-radius: 30px;
    box-shadow: 0 15px 45px rgba(22,48,96,.08);
}

.nawigatorCase p {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.65;
}

.nawigatorCaseLabel {
    margin-top: 30px !important;
    font-weight: 600;
}

.nawigatorCaseOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 15px 0 30px;
    padding: 0;
    list-style: none;
}

.nawigatorCaseOptions li {
    position: relative;
    padding: 10px 18px 10px 38px;
    background: #fff;
    border: 1px solid #ff8440;
    border-radius: 30px;
    color: #163060;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
}

.nawigatorCaseOptions li::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff8440;
    font-weight: 700;
}

.nawigatorCaseResult {
    margin: 30px 0 0 !important;
    padding: 20px 24px;
    background: rgba(255,132,64,.13);
    border-radius: 18px;
}



/* ==========================================================
   ZAKRES PRODUKTU
   ========================================================== */

.nawigatorScope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.nawigatorScopeYes,
.nawigatorScopeNo {
    padding: 38px;
    border-radius: 30px;
}

.nawigatorScopeYes {
    background: linear-gradient(
                145deg,
                rgba(255,132,64,.18) 0%,
                rgba(255,132,64,.11) 100%
            );
    border: 1px solid rgba(255,132,64,.32);
    box-shadow: 0 12px 30px rgba(255,132,64,.06);
}

.nawigatorScopeNo {
    background: linear-gradient(
                145deg,
                #e9edf3 0%,
                #dde3ec 100%
            );
    border: 1px solid rgba(22,48,96,.14);
    box-shadow: 0 12px 30px rgba(22,48,96,.05);
}

.nawigatorScope h3 {
    margin: 0 0 24px;
    color: #163060;
    font-size: 26px;
}

.nawigatorScope ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nawigatorScope li {
    position: relative;
    padding: 0 0 15px 28px;
    font-size: 17px;
    line-height: 1.55;
}

.nawigatorScopeYes li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff8440;
    font-weight: 700;
}

.nawigatorScopeNo li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: #163060;
    font-weight: 700;
}



/* ==========================================================
   RAPORT WWLZ
   ========================================================== */

.nawigatorReport {
    display: grid;
    grid-template-columns: minmax(0, 1fr)
        560px;
    gap: 42px;
    align-items: start;
    width: calc(100% + 56px);
    margin: -40px 0 0 -28px;
    padding: 26px 28px 36px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 14px 40px rgba(22,48,96,.07);
    box-sizing: border-box;
}

.nawigatorReportText {
    min-width: 0;
    padding-top: 3px;
}

.nawigatorReportText p {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.65;
}

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

.nawigatorReportList li {
    position: relative;
    padding: 0 0 10px 26px;
    font-size: 17px;
    line-height: 1.5;
}

.nawigatorReportList li::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 2px;
    color: #ff8440;
    font-size: 11px;
}

.nawigatorReportTags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.nawigatorReportTags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    background: #fff;
    border: 1.5px solid rgba(255,132,64,.75);
    border-radius: 999px;
    color: #163060;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color .25s ease,
            color .25s ease,
            border-color .25s ease,
            transform .25s ease,
            box-shadow .25s ease;
}

.nawigatorReportTags span:hover {
    background: #ff8440;
    border-color: #ff8440;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(255,132,64,.18);
}

.nawigatorReportForm {
    width: 100%;
    max-width: 560px;
    margin: 0;
    justify-self: end;
    align-self: start;
    padding: 22px;
    background: linear-gradient(
                145deg,
                #163060 0%,
                #1d3d75 100%
            );
    border-radius: 26px;
    box-shadow: 0 16px 38px rgba(22,48,96,.16);
    box-sizing: border-box;
}

.nawigatorReportForm .mailerlite-form {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
}



/* ==========================================================
   FINAL CTA I STOPKA
   ========================================================== */

.nawigatorFinal {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    padding: 90px 0;
    overflow: hidden;
    background: linear-gradient(
                90deg,
                rgba(10, 31, 70, .18) 0%,
                rgba(10, 31, 70, .28) 35%,
                rgba(10, 31, 70, .72) 64%,
                rgba(10, 31, 70, .94) 100%
            ),
            url("/wp-content/themes/ts/gfx/nawigator-final.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.nawigatorFinal .nawigatorInner {
    width: calc(100% - 120px);
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}

.nawigatorFinalContent {
    width: 100%;
    max-width: 570px;
    text-align: left;
}

.nawigatorFinal .nawigatorEyebrow {
    margin-bottom: 16px;
    color: #ff8440 !important;
}

.nawigatorFinal h2 {
    margin: 0 0 25px;
    color: #fff;
    font-size: 42px;
    line-height: 1.18;
}

.nawigatorFinal p {
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: 18px;
    line-height: 1.7;
}

.nawigatorFinal .nawigatorBtn {
    margin: 30px 0 0;
    background: transparent !important;
    border: 1.5px solid #ff8440;
    color: #fff !important;
    box-shadow: none;
    transition: background-color .3s ease,
            color .3s ease,
            border-color .3s ease,
            transform .3s ease,
            box-shadow .3s ease;
}

.nawigatorFinal .nawigatorBtn > span {
    color: #fff !important;
    transition: color .3s ease;
}

.nawigatorFinal .nawigatorBtn:hover {
    background: #ff8440 !important;
    border-color: #ff8440;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,132,64,.25);
}

.nawigatorFinal .nawigatorBtn:hover > span {
    color: #fff !important;
}

.nawigatorFinal::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(
                to bottom,
                rgba(22,48,96,0) 0%,
                rgba(22,48,96,.35) 45%,
                rgba(22,48,96,.75) 75%,
                #163060 100%
            );
    pointer-events: none;
}

body.page-id-15269 footer {
    margin-top: 0 !important;
}

body.page-id-15269 footer.navybg {
    background: #163060 !important;
}

/* ==========================================================
   MAILERLITE - HOVER PRZYCISKU RAPORTU
   ========================================================== */

.nawigatorReportForm .ml-form-embedSubmit button.primary,
.nawigatorReportForm .ml-form-embedSubmit input[type="submit"] {
    transition:
        background-color .6s ease,
        color .6s ease,
        border-color .6s ease,
        box-shadow .6s ease !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    /* HERO */

    .nawigatorHero {
        padding: 210px 0 85px;
        background: linear-gradient(
            120deg,
            #163060 0%,
            #1c3b73 100%
        );
    }

    .nawigatorHero .nawigatorInner {
        position: relative;
        z-index: 3;
    }

    .nawigatorHeroVisual {
        display: block !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 68%;
        height: 100%;
        opacity: .52;
        background-position: 68% center;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.25) 14%,
            rgba(0,0,0,.70) 30%,
            #000 48%,
            #000 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.25) 14%,
            rgba(0,0,0,.70) 30%,
            #000 48%,
            #000 100%
        );
    }

    .nawigatorHeroContent {
        width: 100%;
        max-width: 680px;
    }

    .nawigatorHero h1 {
        font-size: 48px;
        line-height: 1.08;
    }


    /* UKŁADY KAFELKÓW */

    .nawigatorSteps,
    .nawigatorModels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nawigatorResults {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nawigatorResult:last-child {
        grid-column: 1 / -1;
    }


    /* EFEKT NAWIGATORA */

    .nawigatorEffectSection::before,
    .nawigatorEffectSection::after {
        width: 55%;
    }

    .nawigatorEffectSection::before {
        opacity: .20;
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    /* ---------- OGÓLNA SZEROKOŚĆ ---------- */

    .nawigatorInner,
    .nawigatorHero .nawigatorInner,
    .nawigatorFinal .nawigatorInner {
        width: calc(100% - 36px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .nawigatorSection {
        padding: 58px 0 !important;
    }

    .nawigatorSection h2 {
        margin-bottom: 30px !important;
        font-size: 31px !important;
        line-height: 1.18 !important;
    }

    .nawigatorpage p,
    .nawigatorpage li {
        font-size: 17px !important;
    }


    /* ---------- HERO ---------- */

    .nawigatorHero {
        position: relative !important;
        overflow: hidden !important;
        padding: 220px 0 75px !important;

        background:
            linear-gradient(
                180deg,
                rgba(22,48,96,.56) 0%,
                rgba(22,48,96,.66) 28%,
                rgba(22,48,96,.76) 60%,
                rgba(22,48,96,.88) 100%
            ),
            url("/wp-content/themes/ts/gfx/nawigator-hero.jpg")
            66% center / cover no-repeat !important;
    }

    .nawigatorHeroVisual {
        display: none !important;
    }

    .nawigatorHero .nawigatorInner {
        position: relative !important;
        z-index: 2 !important;
    }

    .nawigatorHeroContent {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nawigatorHero .nawigatorEyebrow {
        margin: 0 0 16px !important;
    }

    .nawigatorHero h1 {
        margin: 0 0 24px !important;
        font-size: 38px !important;
        line-height: 1.08 !important;
        color: #fff !important;
    }

    .nawigatorHeroSubtitle {
        margin-bottom: 26px !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .nawigatorHero p {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }

    .nawigatorHero .nawigatorBtn {
        margin-top: 18px !important;
    }


    /* ---------- KIEDY WARTO SKORZYSTAĆ ---------- */

    .nawigatorWhen {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 28px !important;
    }

    .nawigatorWhen > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .nawigatorChecklist {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nawigatorChecklist li {
        width: 100% !important;
        padding: 0 0 16px 28px !important;
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    .nawigatorHighlight {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 28px !important;
        border-radius: 24px !important;
    }


    /* ---------- KROKI / MODELE / WYNIKI / ZAKRES / RAPORT ---------- */

    .nawigatorSteps,
    .nawigatorModels,
    .nawigatorResults,
    .nawigatorScope,
    .nawigatorReport {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .nawigatorSteps > *,
    .nawigatorModels > *,
    .nawigatorResults > *,
    .nawigatorScope > *,
    .nawigatorReport > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .nawigatorSteps::before {
        display: none !important;
    }

    .nawigatorResult:last-child {
        grid-column: auto;
    }


    /* ---------- KAFLE ---------- */

    .nawigatorStep,
    .nawigatorCard,
    .nawigatorResult {
        width: 100% !important;
        min-height: 0 !important;
        padding: 26px !important;
    }

    .nawigatorNumber {
        box-shadow: none !important;
    }

    .nawigatorCardIcon {
        top: 24px;
        right: 24px;
        width: 50px;
        height: 50px;
    }

    .nawigatorCardIcon img {
        width: 29px;
        height: 29px;
    }

    .nawigatorResultIcon {
        top: 24px;
        right: 24px;
        width: 58px;
        height: 58px;
    }

    .nawigatorResultIcon img {
        width: 36px;
        height: 36px;
    }

    .nawigatorResultNumber {
        margin-bottom: 42px;
    }


    /* ---------- EFEKT NAWIGATORA ---------- */

    .nawigatorEffectSection::before {
        width: 100%;
        height: 300px;
        top: 0;
        right: 0;
        opacity: .13;
        background-position: 72% center;
        background-size: cover;

        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            rgba(0,0,0,.72) 45%,
            transparent 100%
        );

        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            rgba(0,0,0,.72) 45%,
            transparent 100%
        );
    }

    .nawigatorEffectSection::after {
        width: 100%;
        height: 300px;
        top: 0;
        right: 0;

        background: linear-gradient(
            to bottom,
            rgba(22,48,96,.10) 0%,
            rgba(22,48,96,.45) 55%,
            #163060 100%
        );
    }


    /* ---------- PRZYKŁAD ---------- */

    .nawigatorCase {
        width: 100% !important;
        max-width: 100% !important;
        padding: 28px !important;
    }

    .nawigatorCaseOptions {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }


    /* ---------- ZAKRES ---------- */

    .nawigatorScopeYes,
    .nawigatorScopeNo {
        width: 100% !important;
        padding: 28px !important;
    }


    /* ---------- RAPORT WWLZ ---------- */

    .nawigatorReport {
        margin: -6px 0 0 -8px !important;
        padding: 28px !important;
        border-radius: 24px !important;
    }

    .nawigatorReportText {
        width: 100% !important;
        padding-top: 0 !important;
    }

    .nawigatorReportText p {
        line-height: 1.55 !important;
    }

    .nawigatorReportList li {
        padding-bottom: 9px !important;
        line-height: 1.5 !important;
    }

    .nawigatorReportTags {
        gap: 8px !important;
        margin-top: 18px !important;
    }

    .nawigatorReportTags span {
        min-height: 34px;
        padding: 0 13px;
        font-size: 13px;
    }

    .nawigatorReportForm {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-self: stretch !important;
        align-self: start !important;
        padding: 10px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
    }

    .nawigatorReportForm .mailerlite-form {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* MailerLite: pokazanie grafiki raportu na mobile */

    .nawigatorReportForm .ml-form-embedContainer
    .ml-form-embedWrapper
    .ml-form-embedHeader {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .nawigatorReportForm .ml-form-embedContainer
    .ml-form-embedWrapper
    .ml-form-embedHeader img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }


    /* ---------- FINAL CTA ---------- */

    .nawigatorFinal {
        min-height: auto;
        padding: 65px 0;

        background:
            linear-gradient(
                180deg,
                rgba(10,31,70,.78) 0%,
                rgba(10,31,70,.86) 45%,
                rgba(10,31,70,.94) 100%
            ),
            url("/wp-content/themes/ts/gfx/nawigator-final.jpg");

        background-size: cover;
        background-position: 38% center;
        background-repeat: no-repeat;
    }

    .nawigatorFinal .nawigatorInner {
        display: block;
    }

    .nawigatorFinalContent {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    .nawigatorFinal h2 {
        margin-bottom: 22px;
        font-size: 31px;
        line-height: 1.18;
    }

    .nawigatorFinal p {
        font-size: 17px;
        line-height: 1.65;
    }

    .nawigatorFinal .nawigatorBtn {
        margin-top: 26px;
    }

    .nawigatorFinal::after {
        height: 90px;
    }
}

/* ==========================================================
   MAŁE TELEFONY
   ========================================================== */

@media (max-width: 390px) {

    .nawigatorReport {
        width: calc(100% + 20px) !important;
        margin-left: -10px !important;
        padding: 18px 10px 22px !important;
    }

    .nawigatorReportForm {
        padding: 8px !important;
        border-radius: 20px !important;
    }

    .nawigatorReportTags span {
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }
}