/*
 * Landing page system — arkusz ładowany wyłącznie dla CPT landing.
 * Cała paleta i skala na CSS custom properties: edytowalne kolory per landing
 * można później dodać nadpisując te zmienne bez przebudowy arkusza.
 */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
    --lp-color-primary: #e8641b;
    --lp-color-primary-hover: #cf5613;
    --lp-color-primary-soft: rgba(232, 100, 27, 0.1);
    --lp-color-dark: #0e0e0e;
    --lp-color-dark-soft: #1a1a1a;
    --lp-color-light: #ffffff;
    --lp-color-grey: #f7f6f4;
    --lp-color-text: #1a1a1a;
    --lp-color-text-soft: #555555;
    --lp-color-text-inverse: #ffffff;
    --lp-color-text-muted: #b5b5b5;

    --lp-font: 'Work Sans', sans-serif;

    --lp-container: 1200px;
    --lp-section-padding: 100px;
    --lp-header-height: 76px;
    /* kwadratowe krawędzie — spójnie z przyciskami i kartami opinii kmcenter.pl */
    --lp-radius: 0;
    --lp-radius-lg: 0;
    /* cienie neutralne jak na stronie głównej (rgba czarnego, nie pomarańcz) */
    --lp-shadow-card: 0 15px 45px rgba(0, 0, 0, 0.07);
    --lp-shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.13);
    --lp-shadow-card-dark: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* ---------- baza ---------- */

/* neutralizacja globalnych reguł głównego motywu (html,body {width:100vw}
   robi poziomy scroll o szerokość paska przewijania) — arkusz ładuje się
   tylko na CPT landing, więc nadpisanie jest bezpieczne */
html {
    width: auto;
    /* motyw ustawia html {overflow-x:hidden}, a pasek admina WP dokłada
       html {margin-top:32px!important} - hidden robi z html scroll container,
       margines wystaje poza niego i zalogowany admin widzi drugi pasek
       przewijania + biały pas przy stopce; clip przycina bez scroll containera */
    overflow-x: clip;
}

body.lp {
    width: auto;
    margin: 0;
    font-family: var(--lp-font);
    color: var(--lp-color-text);
    background-color: var(--lp-color-light);
    -webkit-font-smoothing: antialiased;
}

.lp-container {
    width: 100%;
    max-width: var(--lp-container);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.lp-section {
    display: block;
    padding: var(--lp-section-padding) 0;
}

.lp-main {
    /* --lp-header-offset ustawia landing.js na realna wysokosc belki
       (rosnie z zawinietym tekstem CTA); fallback = wysokosc bazowa */
    padding-top: var(--lp-header-offset, var(--lp-header-height));
}

/* ---------- przyciski CTA ---------- */

/* przycisk jak .hero-button.orange na stronie głównej:
   kwadratowy, bold, hover rozjaśnia kolor — bez unoszenia i cieni */
.lp-button {
    display: inline-block;
    padding: 14px 40px;
    background-color: var(--lp-color-primary);
    color: var(--lp-color-text-inverse);
    font-family: var(--lp-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    text-align: center;
    border: 1px solid var(--lp-color-primary);
    border-radius: 0;
    cursor: pointer;
    transition: 0.3s ease all;
}

.lp-button:hover {
    background-color: #ef935f;
    border-color: #ef935f;
    color: var(--lp-color-text-inverse);
}

.lp-button:focus-visible {
    outline: 3px solid var(--lp-color-primary);
    outline-offset: 3px;
}

.lp-button--large {
    padding: 17px 48px;
    font-size: 17px;
}

/* wariant na pomarańczowym tle (sekcja zamykająca):
   czarny, hover rozjaśnia — analogia do pomarańczowego (#e8641b -> #ef935f) */
.lp-button--black {
    background-color: var(--lp-color-dark);
    border-color: var(--lp-color-dark);
    color: var(--lp-color-text-inverse);
    transition: 0.2s ease-in-out all;
}

.lp-button--black:hover {
    background-color: #3d3d3d;
    border-color: #3d3d3d;
    color: var(--lp-color-text-inverse);
}

.lp-cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 40px;
}

.lp-cta-note {
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- header ---------- */

.lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* belka rosnie, gdy tekst CTA zawinie sie na 2+ linie; landing.js
       przepisuje realna wysokosc do --lp-header-height, zeby tresc
       strony (padding .lp-main) odsunela sie razem z nia */
    height: auto;
    background-color: var(--lp-color-light);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.lp-header.is-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* header na pełną szerokość: logo w lewym rogu, CTA w prawym (brief, sekcja 1) */
.lp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--lp-header-height);
    box-sizing: border-box;
    max-width: none;
    padding: 8px 32px;
}

/* pod zalogowanym adminem pasek WP nachodzi na fixed header */
body.admin-bar .lp-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .lp-header {
        top: 46px;
    }

    .lp-header-nav {
        gap: 16px;
    }
}

.lp-header-logo {
    display: flex;
    align-items: center;
    /* logo nie zweza sie, gdy prawa strona headera robi sie ciasna */
    flex-shrink: 0;
    margin-right: 16px;
}

.lp-header-logo img {
    display: block;
    width: 171px;
    height: auto;
}

/* prawa strona headera: link "Strona glowna" + telefon + przycisk CTA */
.lp-header-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.lp-header-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--lp-color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.lp-header-link:hover {
    color: var(--lp-color-primary);
}

.lp-header-cta {
    padding: 11px 26px;
    font-size: 15px;
    /* dlugi tekst zawija sie na przycisku, a belka rosnie razem z nim */
    max-width: 440px;
    line-height: 1.35;
}

/* ---------- wspólne dla sekcji treściowych ---------- */

.lp-section-heading {
    margin: 0 0 56px;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
}

.lp-section-heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin: 18px auto 0;
    background-color: var(--lp-color-primary);
    border-radius: 2px;
}

/* ---------- hero ---------- */

.lp-hero {
    background-color: var(--lp-color-dark);
    background-image:
        radial-gradient(ellipse 60% 50% at 15% 0%, rgba(232, 100, 27, 0.16), transparent),
        radial-gradient(ellipse 50% 60% at 100% 100%, rgba(232, 100, 27, 0.08), transparent);
    color: var(--lp-color-text-inverse);
}

.lp-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
}

.lp-hero-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 30px;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.lp-hero-question--accent {
    color: var(--lp-color-primary);
}

.lp-hero-quote {
    margin: 0;
    padding-left: 20px;
    border-left: 3px solid var(--lp-color-primary);
}

.lp-hero-quote p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--lp-color-text-muted);
    font-style: italic;
}

.lp-hero-quote cite {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--lp-color-text-inverse);
}

.lp-hero-media .lp-video {
    border: 2px solid var(--lp-color-primary);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 60px rgba(232, 100, 27, 0.12);
}

/* pytania 2+ jako kompaktowa lista z checkami (pierwsze pytanie = duży nagłówek) */
.lp-hero-questions-list {
    list-style: none;
    margin: -10px 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-hero-questions-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.lp-hero-questions-list svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--lp-color-primary);
}

/* ---------- hero: wariant pionowy (nagłówek / wideo / CTA) ---------- */

.lp-hero-stacked-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lp-hero--stacked .lp-hero-heading {
    margin: 0 0 20px;
    font-size: 46px;
    align-items: center;
}

.lp-hero--stacked .lp-hero-quote {
    max-width: 760px;
    margin: 0 auto;
    padding-left: 0;
    border-left: 0;
}

.lp-hero-stacked-media {
    width: 100%;
    max-width: 880px;
    margin-top: 44px;
}

.lp-hero-stacked-media .lp-video {
    border: 2px solid var(--lp-color-primary);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 60px rgba(232, 100, 27, 0.12);
}

.lp-hero--stacked .lp-cta-group {
    align-items: center;
}

/* ---------- wideo (embed YouTube/Vimeo) ---------- */

.lp-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--lp-radius);
    overflow: hidden;
    background-color: var(--lp-color-dark-soft);
}

.lp-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- liczby (statystyki) ---------- */

.lp-numbers {
    background-color: var(--lp-color-dark-soft);
    background-image: radial-gradient(ellipse 70% 80% at 50% 120%, rgba(232, 100, 27, 0.1), transparent);
    color: var(--lp-color-text-inverse);
}

.lp-numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 40px 0;
    text-align: center;
}

.lp-numbers-item {
    padding: 4px 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-numbers-item:first-child {
    border-left: none;
}

.lp-numbers-value {
    font-size: 54px;
    font-weight: 900;
    line-height: 1.05;
    color: var(--lp-color-primary);
}

.lp-numbers-desc {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--lp-color-text-muted);
}

.lp-numbers-closing {
    margin: 64px 0 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--lp-color-text-inverse);
}

/* ---------- opis treningów (dwie karty) ---------- */

.lp-training {
    background-color: var(--lp-color-grey);
}

.lp-training-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.lp-training-col {
    box-sizing: border-box;
    padding: 44px 40px;
    background-color: var(--lp-color-light);
    border: 2px solid rgba(232, 100, 27, 0.4);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lp-training-col:hover {
    transform: translateY(-4px);
    border-color: var(--lp-color-primary);
    box-shadow: var(--lp-shadow-card-hover);
}

/* druga karta: ciemna, dla kontrastu — cień jak na jasnej karcie,
   żeby nie nachodził ciemną łuną na sąsiedni kafelek */
.lp-training-col--alt {
    background-color: var(--lp-color-dark);
    background-image: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(232, 100, 27, 0.14), transparent);
    border-color: rgba(232, 100, 27, 0.45);
    color: var(--lp-color-text-inverse);
}

.lp-training-col--alt:hover {
    box-shadow: var(--lp-shadow-card-hover);
}

.lp-training-title {
    margin: 0 0 28px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.25;
}

.lp-training-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-training-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    line-height: 1.55;
}

.lp-training-col--alt .lp-training-item {
    color: rgba(255, 255, 255, 0.85);
}

.lp-training-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background-color: var(--lp-color-primary-soft);
    border-radius: 8px;
    color: var(--lp-color-primary);
}

.lp-training-col--alt .lp-training-icon {
    background-color: rgba(232, 100, 27, 0.18);
}

.lp-training-icon img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.lp-training-icon svg {
    width: 16px;
    height: 16px;
}

.lp-training-closing {
    margin: 48px 0 0;
    font-size: 19px;
    font-weight: 800;
    text-align: center;
    color: var(--lp-color-text);
}

.lp-training-closing strong {
    color: var(--lp-color-primary);
}

/* ---------- lokalizacje i grafik ---------- */

.lp-locations {
    background-color: var(--lp-color-light);
}

.lp-locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.lp-locations-card {
    position: relative;
    overflow: hidden;
    padding: 32px 30px;
    background-color: var(--lp-color-light);
    border: 2px solid rgba(232, 100, 27, 0.4);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lp-locations-card:hover {
    transform: translateY(-4px);
    border-color: var(--lp-color-primary);
    box-shadow: var(--lp-shadow-card-hover);
}

.lp-locations-city {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.lp-locations-pin {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--lp-color-primary);
}

.lp-locations-street {
    margin: 6px 0 0 32px;
    font-size: 15px;
    color: var(--lp-color-text-soft);
    font-weight: 500;
}

.lp-locations-schedule {
    width: 100%;
    margin-top: 24px;
    border-collapse: collapse;
    font-size: 15px;
}

.lp-locations-schedule td {
    padding: 11px 8px 11px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: top;
}

.lp-locations-day {
    font-weight: 700;
    white-space: nowrap;
}

.lp-locations-time {
    white-space: nowrap;
    color: var(--lp-color-primary);
    font-weight: 700;
}

.lp-locations-group {
    color: var(--lp-color-text-soft);
}

/* ---------- FAQ (akordeon) ---------- */

.lp-faq {
    background-color: var(--lp-color-grey);
}

.lp-faq-inner {
    max-width: 860px;
}

.lp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-faq-item {
    background-color: var(--lp-color-light);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid transparent;
    border-radius: var(--lp-radius);
    box-shadow: 0 6px 18px rgba(14, 14, 14, 0.05);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lp-faq-item.is-open {
    border-left-color: var(--lp-color-primary);
    box-shadow: 0 14px 34px rgba(14, 14, 14, 0.1);
}

.lp-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    background: none;
    border: none;
    font-family: var(--lp-font);
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    color: var(--lp-color-text);
    cursor: pointer;
}

.lp-faq-chevron-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background-color: var(--lp-color-primary-soft);
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.lp-faq-item.is-open .lp-faq-chevron-wrap {
    transform: rotate(180deg);
    background-color: var(--lp-color-primary);
}

.lp-faq-chevron {
    width: 16px;
    height: 16px;
    color: var(--lp-color-primary);
    transition: color 0.2s ease;
}

.lp-faq-item.is-open .lp-faq-chevron {
    color: var(--lp-color-text-inverse);
}

/* płynne zwijanie/rozwijanie: animacja grid-template-rows 0fr -> 1fr */
.lp-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.lp-faq-item.is-open .lp-faq-answer {
    grid-template-rows: 1fr;
}

.lp-faq-answer-inner {
    overflow: hidden;
    min-height: 0;
}

.lp-faq-answer p {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--lp-color-text-soft);
    opacity: 0;
    transition: opacity 0.25s ease 0.1s;
}

.lp-faq-item.is-open .lp-faq-answer p {
    opacity: 1;
}

/* ---------- historie klientów ---------- */

.lp-stories {
    background-color: var(--lp-color-dark);
    background-image: radial-gradient(ellipse 60% 60% at 85% 0%, rgba(232, 100, 27, 0.1), transparent);
    color: var(--lp-color-text-inverse);
}

.lp-stories-list {
    display: flex;
    flex-direction: column;
    gap: 64px;
    max-width: 1080px;
    margin: 0 auto;
}

.lp-stories-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* co drugi wiersz lustrzanie: wideo po prawej, cytat z kreską po prawej stronie */
.lp-stories-row:nth-child(even) .lp-stories-media {
    order: 2;
}

.lp-stories-row:nth-child(even) .lp-stories-body {
    padding-left: 0;
    padding-right: 28px;
    border-left: none;
    border-right: 3px solid var(--lp-color-primary);
    text-align: right;
}

.lp-stories-row--novideo {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.lp-stories-media .lp-video {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 60px rgba(232, 100, 27, 0.12);
}

/* blok cytatu: zwarta kompozycja przy pomarańczowej linii,
   cudzysłów SVG (jak na głównej) wystaje nad tekst.
   Kreska rozciąga się na pełną wysokość wiersza (= wysokość wideo),
   a treść jest w niej wycentrowana — obie historie wyglądają równo
   niezależnie od długości cytatu */
.lp-stories-body {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 28px;
    border-left: 3px solid var(--lp-color-primary);
}

.lp-stories-quote-svg {
    display: block;
    line-height: 0;
    margin-bottom: 20px;
}

.lp-stories-quote-svg svg {
    width: 44px;
    height: auto;
}

.lp-stories-quote {
    margin: 0;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.94);
}

.lp-stories-name {
    margin-top: 22px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lp-color-primary);
}

/* ---------- kroki ---------- */

.lp-steps {
    background-color: var(--lp-color-light);
}

.lp-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
    counter-reset: lp-step;
}

.lp-steps-card {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 36px 30px;
    background-color: var(--lp-color-light);
    background-image: linear-gradient(160deg, rgba(232, 100, 27, 0.04), rgba(232, 100, 27, 0) 55%);
    border: 2px solid rgba(232, 100, 27, 0.4);
    border-radius: var(--lp-radius-lg);
    counter-increment: lp-step;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lp-steps-card:hover {
    transform: translateY(-8px);
    border-color: var(--lp-color-primary);
    box-shadow: var(--lp-shadow-card-hover);
}

/* duży numer-duch w tle karty */
.lp-steps-card::after {
    content: counter(lp-step);
    position: absolute;
    top: -18px;
    right: 8px;
    font-size: 130px;
    font-weight: 900;
    line-height: 1;
    color: rgba(232, 100, 27, 0.09);
    pointer-events: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.lp-steps-card:hover::after {
    color: rgba(232, 100, 27, 0.18);
    transform: translateY(6px) scale(1.06);
}

.lp-steps-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    background-color: var(--lp-color-primary);
    color: var(--lp-color-text-inverse);
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(232, 100, 27, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-steps-card:hover .lp-steps-number {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 26px rgba(232, 100, 27, 0.4);
}

.lp-steps-title {
    position: relative;
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
}

.lp-steps-desc {
    position: relative;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--lp-color-text-soft);
}

/* ---------- cennik (zakładki wariantów) ---------- */

.lp-pricing {
    background-color: var(--lp-color-grey);
}

.lp-pricing-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 44px;
}

.lp-pricing-tab {
    padding: 12px 30px;
    background-color: var(--lp-color-light);
    border: 2px solid rgba(232, 100, 27, 0.4);
    border-radius: var(--lp-radius);
    font-family: var(--lp-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--lp-color-text);
    cursor: pointer;
    transition: 0.3s ease all;
}

.lp-pricing-tab:hover {
    border-color: var(--lp-color-primary);
}

.lp-pricing-tab.is-active {
    background-color: var(--lp-color-primary);
    border-color: var(--lp-color-primary);
    color: var(--lp-color-text-inverse);
}

.lp-pricing-panel {
    display: none;
}

.lp-pricing-panel.is-active {
    display: block;
}

/* karty centrowane flexem: pojedyncza karta nie rozciąga się na całą szerokość */
.lp-pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}

.lp-pricing-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1 1 300px;
    max-width: 380px;
    padding: 38px 32px;
    background-color: var(--lp-color-light);
    border: 2px solid rgba(232, 100, 27, 0.4);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lp-pricing-card:hover {
    transform: translateY(-8px);
    border-color: var(--lp-color-primary);
    box-shadow: var(--lp-shadow-card-hover);
}

.lp-pricing-card-title {
    margin: 0 0 26px;
    font-size: 21px;
    font-weight: 800;
    text-align: center;
}

.lp-pricing-prices {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.lp-pricing-price {
    padding: 0 22px;
    border-left: 1px solid rgba(232, 100, 27, 0.35);
    text-align: center;
}

.lp-pricing-price:first-child {
    border-left: none;
}

.lp-pricing-price-value {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--lp-color-primary);
}

.lp-pricing-price-label {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lp-color-text-soft);
}

.lp-pricing-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
    margin: 0 0 30px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(232, 100, 27, 0.35);
    list-style: none;
}

.lp-pricing-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
}

.lp-pricing-benefit svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--lp-color-primary);
}

.lp-pricing-card .lp-button {
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}

/* ---------- o nas ---------- */

.lp-about {
    background-color: var(--lp-color-light);
}

.lp-about-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
}

.lp-about-inner--noimage {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

.lp-about-media img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    border: 2px solid rgba(232, 100, 27, 0.4);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-card);
}

.lp-about-text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--lp-color-text-soft);
}

.lp-about-text p {
    margin: 0 0 18px;
}

.lp-about-text p:last-child {
    margin-bottom: 0;
}

.lp-about-text strong {
    color: var(--lp-color-text);
}

/* ---------- kontakt (formularz CF7) ---------- */

.lp-contact {
    background-color: var(--lp-color-dark);
    background-image: radial-gradient(ellipse 60% 60% at 15% 100%, rgba(232, 100, 27, 0.1), transparent);
    color: var(--lp-color-text-inverse);
}

.lp-contact-inner {
    max-width: 920px;
}

/* intro podciągnięte pod nagłówek (heading ma margines 56px) */
.lp-contact-intro {
    margin: -28px 0 44px;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
    color: var(--lp-color-text-muted);
}

/* pola formularza CF7: wpautop owija pola w <p> - odstępy przez gap.
   display:block neutralizuje globalne `.wpcf7 p {display:flex; align-items:center}`
   z arkusza głównego motywu (centrowało pola i psuło szerokości) */
.lp-contact .wpcf7 form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lp-contact .wpcf7 form p {
    display: block;
    margin: 0;
}

/* dwie kolumny: imię/e-mail/telefon po lewej, wiadomość po prawej
   (siatka .lp-form-grid pochodzi z szablonu formularza "Landing") */
.lp-contact .lp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
    align-items: stretch;
}

.lp-contact .lp-form-fields {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* kolumna wiadomości: textarea rozciąga się na wysokość lewej kolumny
   (selektory z .wpcf7, żeby wygrać z późniejszymi regułami label/p) */
.lp-contact .wpcf7 .lp-form-message,
.lp-contact .wpcf7 .lp-form-message p,
.lp-contact .wpcf7 .lp-form-message label {
    display: flex;
    flex-direction: column;
    /* jawnie, bo globalne `.wpcf7 p {align-items:center}` z głównego
       motywu zwęża i centruje pole wiadomości */
    align-items: stretch;
    flex: 1 1 auto;
}

.lp-contact .wpcf7 .lp-form-message .wpcf7-form-control-wrap {
    flex: 1 1 auto;
}

.lp-contact .wpcf7 .lp-form-message textarea {
    height: 100%;
    min-height: 0;
}

.lp-contact .wpcf7 label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lp-contact .wpcf7-form-control-wrap {
    display: block;
    margin-top: 8px;
}

.lp-contact .wpcf7 input[type='text'],
.lp-contact .wpcf7 input[type='email'],
.lp-contact .wpcf7 input[type='tel'],
.lp-contact .wpcf7 textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--lp-radius);
    color: var(--lp-color-text-inverse);
    font-family: var(--lp-font);
    font-size: 16px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lp-contact .wpcf7 input::placeholder,
.lp-contact .wpcf7 textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.lp-contact .wpcf7 input:focus,
.lp-contact .wpcf7 textarea:focus {
    outline: none;
    border-color: var(--lp-color-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

.lp-contact .wpcf7 textarea {
    min-height: 140px;
    resize: vertical;
}

/* zgoda RODO (pole acceptance) */
.lp-contact .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.lp-contact .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--lp-color-text-muted);
    cursor: pointer;
}

.lp-contact .wpcf7-acceptance input[type='checkbox'] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--lp-color-primary);
}

/* przycisk wysyłki jak .lp-button: auto-szerokość, wycentrowany */
.lp-contact .wpcf7-submit {
    display: block;
    width: auto;
    min-width: 320px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 16px 56px;
    background-color: var(--lp-color-primary);
    border: 1px solid var(--lp-color-primary);
    border-radius: 0;
    color: var(--lp-color-text-inverse);
    font-family: var(--lp-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease all;
}

.lp-contact .wpcf7-submit:hover:not(:disabled) {
    background-color: #ef935f;
    border-color: #ef935f;
}

.lp-contact .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.lp-contact .wpcf7-spinner {
    margin: 8px auto 0;
}

/* walidacja i komunikat odpowiedzi CF7 */
.lp-contact .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 13px;
    color: #ff9c8a;
}

/* selektor z form - nadpisuje `.wpcf7 form .wpcf7-response-output {width:305px}`
   z arkusza głównego motywu */
.lp-contact .wpcf7 form .wpcf7-response-output {
    width: auto;
    margin: 4px 0 0;
    padding: 13px 16px;
    border: 2px solid var(--lp-color-primary);
    font-size: 15px;
    text-align: center;
}

.lp-contact .wpcf7 form.sent .wpcf7-response-output {
    border-color: #4caf7d;
}

.lp-contact .wpcf7 form.invalid .wpcf7-response-output,
.lp-contact .wpcf7 form.failed .wpcf7-response-output {
    border-color: #ff9c8a;
}

/* ---------- zdanie zamykające ---------- */

.lp-closing {
    background: linear-gradient(130deg, #ef7228 0%, var(--lp-color-primary) 45%, #c94f0f 100%);
    color: var(--lp-color-text-inverse);
}

.lp-closing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    text-align: center;
}

.lp-closing-statement {
    max-width: 800px;
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ---------- footer ---------- */

.lp-footer {
    display: block;
    padding: 28px 0;
    background-color: var(--lp-color-dark);
    color: var(--lp-color-text-muted);
}

.lp-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lp-footer-copy {
    font-size: 14px;
}

/* linki stopki w jednej grupie po prawej: Strona glowna | tel | Polityka */
.lp-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.lp-footer-link {
    font-size: 14px;
    color: var(--lp-color-text-muted);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.lp-footer-link:hover {
    color: var(--lp-color-text-inverse);
}

/* ---------- responsywność ---------- */

@media (max-width: 991px) {
    :root {
        --lp-section-padding: 68px;
    }

    .lp-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .lp-hero-heading,
    .lp-hero--stacked .lp-hero-heading {
        font-size: 34px;
    }

    .lp-hero-stacked-media {
        margin-top: 32px;
    }

    .lp-section-heading {
        font-size: 29px;
        margin-bottom: 40px;
    }

    .lp-training-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .lp-training-col {
        padding: 36px 32px;
    }

    .lp-numbers-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px 0;
    }

    /* przy zawijaniu do 3 kolumn: bez lewej krawędzi na początku wiersza */
    .lp-numbers-item {
        border-left-width: 0;
    }

    .lp-numbers-item:nth-child(3n + 2),
    .lp-numbers-item:nth-child(3n) {
        border-left-width: 1px;
    }

    .lp-numbers-value {
        font-size: 42px;
    }

    .lp-stories-list {
        gap: 56px;
    }

    /* na mobile zawsze wideo nad cytatem */
    .lp-stories-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .lp-stories-row:nth-child(even) .lp-stories-media {
        order: 0;
    }

    /* na mobile pionowa kreska przechodzi nad cytat jako pozioma linia,
       całość wycentrowana - cudzysłów SVG centruje się przez text-align,
       bo jest elementem inline w swoim divie
       (podwójny selektor bije desktopową regułę even) */
    .lp-stories-body,
    .lp-stories-row:nth-child(even) .lp-stories-body {
        padding: 24px 0 0;
        border-left: none;
        border-right: none;
        border-top: 3px solid var(--lp-color-primary);
        text-align: center;
    }

    .lp-stories-quote {
        font-size: 20px;
    }

    .lp-pricing-tabs {
        margin-bottom: 36px;
    }

    .lp-contact .lp-form-grid {
        grid-template-columns: 1fr;
    }

    .lp-contact .lp-form-message textarea {
        min-height: 140px;
    }

    .lp-about-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .lp-closing-statement {
        font-size: 26px;
    }
}

@media (max-width: 575px) {
    :root {
        --lp-section-padding: 52px;
        --lp-header-height: 64px;
    }

    .lp-container {
        padding: 0 16px;
    }

    .lp-header-inner {
        padding: 8px 16px;
    }

    .lp-header-logo {
        margin-right: 10px;
    }

    .lp-header-logo img {
        width: 108px;
    }

    /* jeden wiersz: logo | telefon + CTA ("Strona glowna" tylko od 576px) */
    .lp-header-link--home {
        display: none;
    }

    .lp-header-nav {
        gap: 12px;
        min-width: 0;
    }

    .lp-header-cta {
        flex: 0 1 auto;
        min-width: 0;
        padding: 10px 12px;
        font-size: 12px;
    }

    .lp-header-link {
        font-size: 13px;
    }

    .lp-hero-heading,
    .lp-hero--stacked .lp-hero-heading {
        font-size: 27px;
    }

    .lp-button--large {
        width: 100%;
        box-sizing: border-box;
        padding: 17px 24px;
        font-size: 15px;
    }

    .lp-section-heading {
        font-size: 25px;
    }

    .lp-numbers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 0;
    }

    /* zeruje też reguły 3n z breakpointu 991px - inaczej "przeciekają"
       do układu 2-kolumnowego i kreski lądują przy złych kafelkach */
    .lp-numbers-item,
    .lp-numbers-item:nth-child(3n + 2),
    .lp-numbers-item:nth-child(3n) {
        border-left-width: 0;
    }

    .lp-numbers-item:nth-child(even) {
        border-left-width: 1px;
    }

    .lp-numbers-value {
        font-size: 34px;
    }

    .lp-numbers-closing {
        font-size: 16px;
    }

    .lp-training-col {
        padding: 28px 22px;
    }

    .lp-training-item {
        font-size: 15px;
    }

    .lp-training-closing {
        font-size: 16px;
    }

    .lp-locations-grid {
        grid-template-columns: 1fr;
    }

    .lp-locations-card {
        padding: 24px 20px;
    }

    /* grafik: dzień + godziny w jednej linii, nazwa grupy pod spodem
       (w układzie tabelowym dłuższe nazwy grup robiły się ciasne) */
    .lp-locations-schedule,
    .lp-locations-schedule tbody {
        display: block;
    }

    .lp-locations-schedule tr {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 12px;
        padding: 11px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
    }

    .lp-locations-schedule td {
        display: block;
        padding: 0;
        border-top: none;
    }

    .lp-locations-group {
        flex-basis: 100%;
    }

    /* pytanie musi zostać większe od odpowiedzi (16/15), inaczej
       hierarchia się odwraca i sekcja wygląda "dziwnie" */
    .lp-faq-question {
        font-size: 16px;
        padding: 16px;
    }

    .lp-faq-answer p {
        padding: 0 16px 15px;
        font-size: 15px;
    }

    .lp-steps-grid {
        grid-template-columns: 1fr;
    }

    .lp-stories-quote {
        font-size: 18px;
    }

    .lp-stories-quote-svg svg {
        width: 44px;
        height: auto;
    }

    .lp-steps-card::after {
        font-size: 100px;
    }

    .lp-pricing-tab {
        flex: 1 1 auto;
        padding: 11px 14px;
        font-size: 14px;
    }

    .lp-pricing-card {
        max-width: none;
        padding: 28px 22px;
    }

    .lp-pricing-price {
        padding: 0 20px;
    }

    .lp-pricing-price-value {
        font-size: 32px;
    }

    .lp-contact-intro {
        font-size: 15px;
        margin-bottom: 36px;
    }

    .lp-contact .wpcf7-submit {
        width: 100%;
        min-width: 0;
    }

    .lp-closing-statement {
        font-size: 22px;
    }

    .lp-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Kolory tła sekcji (pole "Tło sekcji" w każdym layoutcie)

   lp-bg--*   ustawia samo tło sekcji (wygrywa z tłem bazowym sekcji,
              bo selektor .lp-section.lp-bg--* jest bardziej specyficzny
              i stoi później w arkuszu),
   lp-tone--* przestawia kolory treści: dark/light/orange. Sekcje bez pola
              (wartość "default") nie dostają klas i wyglądają jak dotąd.
   Karty (training/locations/faq/steps/pricing) są samowystarczalne -
   mają własne białe tło i działają na każdym kolorze sekcji.
   ========================================================================== */

.lp-section.lp-bg--dark {
    background-color: var(--lp-color-dark);
    background-image: radial-gradient(ellipse 60% 60% at 85% 0%, rgba(232, 100, 27, 0.1), transparent);
    color: var(--lp-color-text-inverse);
}

.lp-section.lp-bg--white {
    background-color: var(--lp-color-light);
    background-image: none;
    color: var(--lp-color-text);
}

.lp-section.lp-bg--grey {
    background-color: var(--lp-color-grey);
    background-image: none;
    color: var(--lp-color-text);
}

.lp-section.lp-bg--orange {
    background: linear-gradient(130deg, #ef7228 0%, var(--lp-color-primary) 45%, #c94f0f 100%);
    color: var(--lp-color-text-inverse);
}

/* ----- ton jasny (tła białe/szare): elementy projektowane na ciemnym ----- */

.lp-tone--light .lp-hero-quote p {
    color: var(--lp-color-text-soft);
}

.lp-tone--light .lp-hero-quote cite {
    color: var(--lp-color-text);
}

/* ciężki "nocny" cień wideo zamieniony na kartowy */
.lp-tone--light .lp-hero-media .lp-video,
.lp-tone--light .lp-hero-stacked-media .lp-video {
    box-shadow: var(--lp-shadow-card);
}

.lp-tone--light .lp-numbers-desc {
    color: var(--lp-color-text-soft);
}

.lp-tone--light .lp-numbers-closing {
    color: var(--lp-color-text);
}

.lp-tone--light .lp-numbers-item {
    border-left-color: rgba(0, 0, 0, 0.12);
}

.lp-tone--light .lp-stories-quote {
    color: var(--lp-color-text);
}

.lp-tone--light .lp-stories-media .lp-video {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--lp-shadow-card);
}

.lp-tone--light .lp-contact-intro {
    color: var(--lp-color-text-soft);
}

.lp-contact.lp-tone--light .wpcf7 input[type='text'],
.lp-contact.lp-tone--light .wpcf7 input[type='email'],
.lp-contact.lp-tone--light .wpcf7 input[type='tel'],
.lp-contact.lp-tone--light .wpcf7 textarea {
    background-color: var(--lp-color-light);
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--lp-color-text);
}

.lp-contact.lp-tone--light .wpcf7 input::placeholder,
.lp-contact.lp-tone--light .wpcf7 textarea::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.lp-contact.lp-tone--light .wpcf7 input:focus,
.lp-contact.lp-tone--light .wpcf7 textarea:focus {
    background-color: var(--lp-color-light);
    border-color: var(--lp-color-primary);
}

.lp-contact.lp-tone--light .wpcf7-acceptance label {
    color: var(--lp-color-text-soft);
}

.lp-contact.lp-tone--light .wpcf7-not-valid-tip {
    color: #d63301;
}

.lp-contact.lp-tone--light .wpcf7 form.invalid .wpcf7-response-output,
.lp-contact.lp-tone--light .wpcf7 form.failed .wpcf7-response-output {
    border-color: #d63301;
}

/* ----- ton ciemny (tło czarne): elementy projektowane na jasnym ----- */

/* jasne karty dziedziczą kolor tekstu z sekcji - na ciemnym i pomarańczowym
   tle muszą jawnie wrócić do ciemnego tekstu (inaczej biały tekst na białej
   karcie); ciemna karta treningów odzyskuje jasny tekst regułą niżej */
.lp-tone--dark .lp-training-col,
.lp-tone--orange .lp-training-col,
.lp-tone--dark .lp-locations-card,
.lp-tone--orange .lp-locations-card,
.lp-tone--dark .lp-steps-card,
.lp-tone--orange .lp-steps-card,
.lp-tone--dark .lp-pricing-card,
.lp-tone--orange .lp-pricing-card,
.lp-tone--dark .lp-faq-item,
.lp-tone--orange .lp-faq-item {
    color: var(--lp-color-text);
}

.lp-tone--dark .lp-training-col--alt,
.lp-tone--orange .lp-training-col--alt {
    color: var(--lp-color-text-inverse);
}

.lp-tone--dark .lp-training-closing {
    color: var(--lp-color-text-inverse);
}

.lp-tone--dark .lp-about-text {
    color: rgba(255, 255, 255, 0.85);
}

.lp-tone--dark .lp-about-text strong {
    color: var(--lp-color-text-inverse);
}

/* czarny przycisk (zdanie zamykające) zlewałby się z czarnym tłem */
.lp-tone--dark .lp-button--black {
    background-color: var(--lp-color-primary);
    border-color: var(--lp-color-primary);
}

.lp-tone--dark .lp-button--black:hover {
    background-color: #ef935f;
    border-color: #ef935f;
}

/* ----- ton pomarańczowy: pomarańczowe akcenty przestają być widoczne ----- */

.lp-tone--orange .lp-section-heading::after {
    background-color: var(--lp-color-light);
}

/* pomarańczowe CTA -> czarne (wzorzec sekcji zamykającej) */
.lp-tone--orange .lp-button {
    background-color: var(--lp-color-dark);
    border-color: var(--lp-color-dark);
}

.lp-tone--orange .lp-button:hover {
    background-color: #3d3d3d;
    border-color: #3d3d3d;
}

.lp-tone--orange .lp-cta-note {
    color: var(--lp-color-text-inverse);
}

.lp-tone--orange .lp-hero-question--accent {
    color: var(--lp-color-dark);
}

.lp-tone--orange .lp-hero-questions-list svg {
    color: var(--lp-color-text-inverse);
}

.lp-tone--orange .lp-hero-quote p {
    color: rgba(255, 255, 255, 0.92);
}

.lp-tone--orange .lp-hero-quote {
    border-left-color: var(--lp-color-light);
}

.lp-tone--orange .lp-video {
    border-color: var(--lp-color-light);
}

.lp-tone--orange .lp-numbers-value {
    color: var(--lp-color-text-inverse);
}

.lp-tone--orange .lp-numbers-desc {
    color: rgba(255, 255, 255, 0.88);
}

.lp-tone--orange .lp-numbers-item {
    border-left-color: rgba(255, 255, 255, 0.35);
}

.lp-tone--orange .lp-training-closing {
    color: var(--lp-color-text-inverse);
}

.lp-tone--orange .lp-training-closing strong {
    color: var(--lp-color-dark);
}

.lp-tone--orange .lp-stories-body,
.lp-tone--orange .lp-stories-row:nth-child(even) .lp-stories-body {
    border-color: var(--lp-color-light);
}

.lp-tone--orange .lp-stories-quote-svg svg path {
    fill: var(--lp-color-light);
}

.lp-tone--orange .lp-stories-name {
    color: var(--lp-color-text-inverse);
}

.lp-tone--orange .lp-pricing-tab.is-active {
    background-color: var(--lp-color-dark);
    border-color: var(--lp-color-dark);
    color: var(--lp-color-text-inverse);
}

.lp-tone--orange .lp-about-text {
    color: rgba(255, 255, 255, 0.92);
}

.lp-tone--orange .lp-about-text strong {
    color: var(--lp-color-text-inverse);
}

.lp-tone--orange .lp-about-media img {
    border-color: rgba(255, 255, 255, 0.6);
}

.lp-tone--orange .lp-contact-intro {
    color: rgba(255, 255, 255, 0.9);
}

.lp-contact.lp-tone--orange .wpcf7 input[type='text'],
.lp-contact.lp-tone--orange .wpcf7 input[type='email'],
.lp-contact.lp-tone--orange .wpcf7 input[type='tel'],
.lp-contact.lp-tone--orange .wpcf7 textarea {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.lp-contact.lp-tone--orange .wpcf7 input:focus,
.lp-contact.lp-tone--orange .wpcf7 textarea:focus {
    border-color: var(--lp-color-light);
    background-color: rgba(255, 255, 255, 0.18);
}

.lp-contact.lp-tone--orange .wpcf7-acceptance label {
    color: rgba(255, 255, 255, 0.9);
}

.lp-contact.lp-tone--orange .wpcf7-acceptance input[type='checkbox'] {
    accent-color: var(--lp-color-dark);
}

.lp-contact.lp-tone--orange .wpcf7-submit {
    background-color: var(--lp-color-dark);
    border-color: var(--lp-color-dark);
}

.lp-contact.lp-tone--orange .wpcf7-submit:hover:not(:disabled) {
    background-color: #3d3d3d;
    border-color: #3d3d3d;
}

.lp-contact.lp-tone--orange .wpcf7-not-valid-tip {
    color: var(--lp-color-light);
    font-weight: 700;
}

.lp-contact.lp-tone--orange .wpcf7 form .wpcf7-response-output {
    border-color: var(--lp-color-light);
}