/* =========================================================================
   Joanna Kobyłko - Łódź
   Modern, cinematic real-estate theme.
   Palette: charcoal-navy + Łódź red-brick copper + warm cream.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
    /* Brand palette - Joanna Kobyłko (lime/olive green + charcoal) */
    --jkl-ink:        #26262a;     /* deep charcoal - secondary */
    --jkl-ink-2:      #2f2f34;
    --jkl-ink-3:      #3c3c42;
    --jkl-copper:     #aec836;     /* primary lime/olive */
    --jkl-copper-2:   #c2dc4b;     /* light lime hover */
    --jkl-copper-3:   #91af1e;     /* darker lime - third/accent */
    --jkl-cream:      #ffffff;     /* clean paper bg */
    --jkl-cream-2:    #eef0f6;     /* light grayish-blue panel */
    --jkl-paper:      #ffffff;
    --jkl-line:       #e5e7eb;

    --jkl-text:       #333333;
    --jkl-text-soft:  #626d86;
    --jkl-text-mute:  #8893a8;
    --jkl-text-inv:   #ffffff;

    --jkl-accent-amber:   #eab308;     /* yellow */
    --jkl-accent-emerald: #91af1e;     /* dark lime */
    --jkl-accent-copper:  #aec836;     /* lime */

    /* Type */
    --jkl-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --jkl-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Spacing */
    --jkl-s-2:  4px;
    --jkl-s-1:  8px;
    --jkl-s0:   12px;
    --jkl-s1:   16px;
    --jkl-s2:   24px;
    --jkl-s3:   32px;
    --jkl-s4:   48px;
    --jkl-s5:   72px;
    --jkl-s6:   96px;
    --jkl-s7:   128px;

    --jkl-r-sm:  6px;
    --jkl-r-md:  12px;
    --jkl-r-lg:  20px;
    --jkl-r-xl:  28px;
    --jkl-r-pill: 999px;

    --jkl-shadow-sm: 0 2px 6px rgba(21,32,43,.06);
    --jkl-shadow-md: 0 8px 24px rgba(21,32,43,.08);
    --jkl-shadow-lg: 0 24px 60px rgba(21,32,43,.12);
    --jkl-shadow-xl: 0 32px 80px rgba(21,32,43,.18);

    --jkl-nav-h: 80px;
    --jkl-container: 1280px;

    --jkl-tr-fast: 160ms ease;
    --jkl-tr:      280ms cubic-bezier(.2,.7,.2,1);
    --jkl-tr-slow: 600ms cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.jkl-theme {
    font-family: var(--jkl-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--jkl-text);
    background: var(--jkl-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* overflow-x: clip prevents horizontal scroll WITHOUT breaking position:sticky */
    overflow-x: clip;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--jkl-tr-fast); }
button { cursor: pointer; border: 0; background: none; font: inherit; color: inherit; }
input, textarea, select, button { font: inherit; }
[hidden] { display: none !important; }

.jkl-skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--jkl-ink); color: var(--jkl-text-inv);
    padding: 8px 16px; z-index: 9999;
}
.jkl-skip-link:focus { left: 8px; top: 8px; }

/* ---------- Layout helpers ---------- */
.jkl-container { width: 100%; max-width: var(--jkl-container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .jkl-container { padding: 0 32px; } }
@media (min-width: 1200px){ .jkl-container { padding: 0 48px; } }

.jkl-section-head { max-width: 760px; margin: 0 auto var(--jkl-s4); text-align: center; }
.jkl-section-head-left { margin-left: 0; text-align: left; }
.jkl-section-title {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--jkl-ink);
}
.jkl-section-title em {
    font-style: italic;
    color: var(--jkl-copper);
    background: linear-gradient(180deg, transparent 65%, rgba(174,200,54,.18) 0);
    padding: 0 .15em;
}
.jkl-section-title-light { color: var(--jkl-cream); }
.jkl-section-title-light em { color: var(--jkl-copper-2); background: linear-gradient(180deg, transparent 65%, rgba(174,200,54,.28) 0); }
.jkl-section-sub { margin-top: var(--jkl-s2); color: var(--jkl-text-soft); font-size: 1.0625rem; }
.jkl-section-sub-light { color: rgba(248,243,234,.85); }

.jkl-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--jkl-copper);
    margin-bottom: var(--jkl-s1);
}
.jkl-eyebrow-light { color: var(--jkl-copper-2); }

/* ---------- Buttons ---------- */
.jkl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 24px;
    font-weight: 600; font-size: .9375rem;
    border-radius: var(--jkl-r-pill);
    line-height: 1; letter-spacing: 0.01em;
    transition: all var(--jkl-tr);
    border: 2px solid transparent;
    white-space: nowrap;
}
.jkl-btn-lg { padding: 18px 32px; font-size: 1rem; }
.jkl-btn-full { width: 100%; }

.jkl-btn-primary { background: var(--jkl-copper); color: var(--jkl-ink); }
.jkl-btn-primary:hover { background: var(--jkl-copper-3); color: var(--jkl-cream); transform: translateY(-2px); box-shadow: var(--jkl-shadow-md); }

.jkl-btn-accent { background: var(--jkl-cream); color: var(--jkl-ink); }
.jkl-btn-accent:hover { background: var(--jkl-paper); transform: translateY(-2px); box-shadow: var(--jkl-shadow-md); }

.jkl-btn-ghost {
    background: rgba(255,255,255,.08);
    color: var(--jkl-cream);
    backdrop-filter: blur(8px);
    border-color: rgba(255,255,255,.25);
}
.jkl-btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

.jkl-btn-outline-light {
    background: transparent;
    color: var(--jkl-cream);
    border-color: rgba(248,243,234,.5);
}
.jkl-btn-outline-light:hover { background: var(--jkl-cream); color: var(--jkl-ink); border-color: var(--jkl-cream); }

/* ---------- Reveal animation ---------- */
.jkl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.jkl-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Navbar ---------- */
.jkl-navbar {
    position: fixed; inset: 0 0 auto 0;
    height: var(--jkl-nav-h);
    z-index: 1000;
    transition: background var(--jkl-tr), box-shadow var(--jkl-tr), backdrop-filter var(--jkl-tr);
}
.jkl-navbar-row { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; flex-wrap: nowrap; min-width: 0; }
.jkl-navbar-row > * { min-width: 0; }
.jkl-navbar .jkl-nav-list { flex-wrap: nowrap; }

.jkl-navbar.is-scrolled,
.jkl-navbar.is-open {
    background: rgba(246,241,232,.94);
    backdrop-filter: saturate(140%) blur(10px);
    box-shadow: 0 2px 12px rgba(21,32,43,.08);
}

.jkl-logo {
    display: flex; align-items: center; gap: 10px;
    color: var(--jkl-cream);
    max-height: calc(var(--jkl-nav-h) - 24px);
    flex-shrink: 0;
}
.jkl-navbar.is-scrolled .jkl-logo { color: var(--jkl-ink); }
.jkl-logo img,
.jkl-logo picture,
.jkl-logo picture img,
.jkl-logo-img,
.jkl-logo .custom-logo,
.jkl-logo .custom-logo-link,
.jkl-logo .custom-logo-link img {
    max-height: 48px;
    max-width: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Logo swap: light variant on transparent navbar, dark variant after scroll.
   Specificity bumped to beat `.jkl-logo img { display: block }` above. */
.jkl-logo .jkl-logo-img--dark,
.jkl-logo picture.jkl-logo-img--dark { display: none; }
.jkl-navbar.is-scrolled .jkl-logo .jkl-logo-img--light,
.jkl-navbar.is-open .jkl-logo .jkl-logo-img--light,
.jkl-navbar.is-scrolled .jkl-logo picture.jkl-logo-img--light,
.jkl-navbar.is-open .jkl-logo picture.jkl-logo-img--light { display: none; }
.jkl-navbar.is-scrolled .jkl-logo .jkl-logo-img--dark,
.jkl-navbar.is-open .jkl-logo .jkl-logo-img--dark,
.jkl-navbar.is-scrolled .jkl-logo picture.jkl-logo-img--dark,
.jkl-navbar.is-open .jkl-logo picture.jkl-logo-img--dark { display: block; }
@media (max-width: 540px) {
    .jkl-logo img,
    .jkl-logo picture,
    .jkl-logo picture img,
    .jkl-logo-img,
    .jkl-logo .custom-logo,
    .jkl-logo .custom-logo-link,
    .jkl-logo .custom-logo-link img { max-height: 40px; max-width: 160px; }
}

.jkl-nav { display: none; align-items: center; gap: 28px; }
.jkl-nav-list { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; }
.jkl-nav-link {
    font-size: .875rem; font-weight: 500; letter-spacing: .02em;
    color: var(--jkl-cream); padding: 6px 0; position: relative;
}
.jkl-navbar.is-scrolled .jkl-nav-link { color: var(--jkl-ink); }
.jkl-nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px; background: var(--jkl-copper);
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--jkl-tr);
}
.jkl-nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.jkl-nav-cta-wrap { display: flex; align-items: center; gap: 16px; }
.jkl-nav-phone { display: none; align-items: center; gap: 6px; font-size: .875rem; color: var(--jkl-cream); }
.jkl-navbar.is-scrolled .jkl-nav-phone { color: var(--jkl-ink); }
.jkl-nav-cta { padding: 10px 22px; font-size: .8125rem; }

.jkl-hamburger {
    display: flex; flex-direction: column; gap: 5px;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    z-index: 1001;
}
.jkl-hamburger span {
    width: 24px; height: 2px; background: var(--jkl-cream);
    transition: transform var(--jkl-tr), opacity var(--jkl-tr), background var(--jkl-tr);
}
.jkl-navbar.is-scrolled .jkl-hamburger span,
.jkl-navbar.is-open .jkl-hamburger span { background: var(--jkl-ink); }
.jkl-navbar.is-open .jkl-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jkl-navbar.is-open .jkl-hamburger span:nth-child(2) { opacity: 0; }
.jkl-navbar.is-open .jkl-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
    .jkl-nav {
        position: fixed; inset: var(--jkl-nav-h) 0 0 0;
        height: calc(100vh - var(--jkl-nav-h));
        background: var(--jkl-cream);
        flex-direction: column; justify-content: center; align-items: center;
        gap: 32px; padding: 32px;
        transform: translateX(100%); transition: transform var(--jkl-tr);
        overflow-y: auto;
    }
    .jkl-navbar.is-open .jkl-nav { transform: translateX(0); display: flex; }
    .jkl-nav-list { flex-direction: column; gap: 20px; align-items: center; }
    .jkl-nav-link { color: var(--jkl-ink); font-size: 1.25rem; }
    .jkl-nav-cta-wrap { flex-direction: column; gap: 12px; }
    .jkl-nav-phone { display: flex; color: var(--jkl-ink); }
}
@media (min-width: 1024px) {
    .jkl-nav { display: flex; }
    .jkl-hamburger { display: none; }
    .jkl-nav-phone { display: inline-flex; }
}

/* ============================== HERO ============================== */
.jkl-hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    max-height: 920px;
    color: var(--jkl-cream);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--jkl-nav-h) + 32px) 0 60px;
    isolation: isolate;
    overflow: hidden;
}
.jkl-hero-bg { position: absolute; inset: 0; z-index: -2; }
.jkl-hero-img, .jkl-hero-video {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.jkl-hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(21,32,43,.55) 0%, rgba(21,32,43,.7) 50%, rgba(21,32,43,.85) 100%),
        radial-gradient(circle at 70% 40%, rgba(174,200,54,.18) 0%, transparent 60%);
}
.jkl-hero-gradient {
    position: absolute; inset: auto 0 0 0; height: 200px;
    background: linear-gradient(0deg, var(--jkl-cream) 0%, transparent 100%);
}

.jkl-hero-inner { position: relative; z-index: 2; max-width: 880px; }

.jkl-hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--jkl-r-pill);
    padding: 7px 14px;
    font-size: .6875rem; font-weight: 600; letter-spacing: .15em;
    color: var(--jkl-cream);
    margin-bottom: 16px;
}
.jkl-hero-tag-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--jkl-copper-2);
    box-shadow: 0 0 12px var(--jkl-copper-2);
    animation: jkl-pulse 2s ease-in-out infinite;
}
@keyframes jkl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.jkl-hero-title {
    font-family: var(--jkl-serif);
    font-weight: 400;
    font-size: clamp(2rem, 5.4vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.jkl-hero-title-top {
    display: block;
    font-size: .55em;
    font-style: italic;
    font-weight: 400;
    color: var(--jkl-copper-2);
    margin-bottom: var(--jkl-s0);
    letter-spacing: 0;
}
.jkl-hero-title-main { display: inline; }
.jkl-ai-social-pill svg { color: var(--jkl-copper-2); width: 20px; height: 20px; display: block; }
/* Instagram should render as outlined camera - force stroke and no fill for its paths */
.jkl-ai-social-pill.jkl-social-instagram svg * { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }
.jkl-hero-title-acc {
    display: inline;
    font-style: italic;
    color: var(--jkl-cream);
    position: relative;
    background-image: linear-gradient(var(--jkl-copper), var(--jkl-copper));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 0.08em;
    padding-bottom: 0.06em;
    animation: jkl-hero-underline 1s cubic-bezier(.2,.7,.2,1) 0.5s forwards;
}
.jkl-hero-title-underline { display: none; }
@keyframes jkl-hero-underline {
    from { background-size: 0 0.08em; }
    to   { background-size: 100% 0.08em; }
}

/* Hero subtitle - pisany Caveat (jakby Joanna sama napisała). Większy
   font-size dla czytelności (Caveat to font rękopiśmienny - przy zwykłym
   body-size jest za mały). max-width większy żeby zmieściło się w jednej
   linii lub dwóch zamiast łamania na 4. */
.jkl-hero-subtitle {
    font-family: 'Caveat', cursive;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.25;
    max-width: 620px;
    color: rgba(248,243,234,.96);
    margin-bottom: 22px;
    letter-spacing: 0.005em;
}
.jkl-hero-subtitle strong { color: var(--jkl-cream); font-weight: 700; }

.jkl-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 100px; }
@media (max-width: 540px) {
    .jkl-hero-cta { flex-direction: column; align-items: stretch; }
    .jkl-hero-cta .jkl-btn { width: 100%; }
}

.jkl-hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    list-style: none; padding: 0;
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 18px;
    max-width: 680px;
    margin-bottom: 16px;
}
.jkl-hero-highlight { display: flex; flex-direction: column; }
.jkl-hero-highlight-value {
    font-family: var(--jkl-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--jkl-copper-2);
    line-height: 1;
}
.jkl-hero-highlight-label {
    font-size: .75rem;
    color: rgba(248,243,234,.75);
    margin-top: 4px;
    letter-spacing: .02em;
}

.jkl-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: .875rem; }
.jkl-hero-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--jkl-cream); font-weight: 600; }
.jkl-hero-phone:hover { color: var(--jkl-copper-2); }
.jkl-hero-area { display: inline-flex; align-items: center; gap: 6px; color: rgba(248,243,234,.75); }

.jkl-hero-scroll {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: rgba(248,243,234,.6);
    font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
}
.jkl-hero-scroll-line {
    width: 1px; height: 32px;
    background: linear-gradient(180deg, transparent 0%, var(--jkl-cream) 100%);
    animation: jkl-scroll-cue 2.4s ease infinite;
}
@media (max-height: 760px) {
    .jkl-hero-scroll { display: none; }
    .jkl-hero-highlights { padding-top: 14px; }
    .jkl-hero-highlight-value { font-size: 1.25rem; }
    .jkl-hero-tag { margin-bottom: 12px; }
    .jkl-hero-title { margin-bottom: 14px; font-size: clamp(1.75rem, 4.6vw, 3.5rem); }
    .jkl-hero-subtitle { font-size: 1.4rem; line-height: 1.25; margin-bottom: 18px; }
}
@keyframes jkl-scroll-cue { 0% { transform-origin: top; transform: scaleY(0); } 50% { transform-origin: top; transform: scaleY(1); } 51% { transform-origin: bottom; transform: scaleY(1); } 100% { transform-origin: bottom; transform: scaleY(0); } }

/* ============================== STATS - bare animated cards ============================== */
.jkl-stats {
    position: relative;
    background:
        radial-gradient(circle at 20% 30%, rgba(174,200,54,.10) 0%, transparent 50%),
        radial-gradient(circle at 85% 70%, rgba(174,200,54,.06) 0%, transparent 50%),
        var(--jkl-ink);
    color: var(--jkl-cream);
    padding: var(--jkl-s6) 0;
    overflow: hidden;
    isolation: isolate;
}
.jkl-stats::before, .jkl-stats::after {
    content: '';
    position: absolute;
    width: 1px; height: 100%;
    top: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(174,200,54,.15) 50%, transparent 100%);
    z-index: 0;
}
.jkl-stats::before { left: 25%; }
.jkl-stats::after  { right: 25%; }

.jkl-stats-grid-bare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    position: relative; z-index: 1;
}

.jkl-stats-grid-bare .jkl-stats-item {
    position: relative;
    padding: 36px 28px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--jkl-r-lg);
    backdrop-filter: blur(6px);
    text-align: center;
    transition: transform var(--jkl-tr), border-color var(--jkl-tr), background var(--jkl-tr);
    overflow: hidden;
}
.jkl-stats-grid-bare .jkl-stats-item::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(174,200,54,.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--jkl-tr);
    pointer-events: none;
}
.jkl-stats-grid-bare .jkl-stats-item:hover {
    transform: translateY(-6px);
    border-color: rgba(174,200,54,.4);
    background: rgba(255,255,255,.04);
}
.jkl-stats-grid-bare .jkl-stats-item:hover::before { opacity: 1; }

.jkl-stats-grid-bare .jkl-stats-num {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: var(--jkl-serif); font-weight: 600; line-height: 1;
    background: linear-gradient(180deg, var(--jkl-cream) 0%, var(--jkl-copper-2) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.jkl-stats-grid-bare .jkl-stats-num-val {
    font-size: clamp(2.75rem, 4.4vw, 3.75rem);
    color: var(--jkl-cream);
    -webkit-text-fill-color: transparent;
}
.jkl-stats-grid-bare .jkl-stats-num-sym {
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    color: var(--jkl-copper-2);
    background: none;
    -webkit-text-fill-color: var(--jkl-copper-2);
}
.jkl-stats-grid-bare .jkl-stats-label {
    margin-top: 14px;
    color: rgba(248,243,234,.7);
    font-size: .8125rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.4;
}
.jkl-stats-grid-bare .jkl-stats-item::after {
    content: '';
    position: absolute; left: 50%; bottom: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--jkl-copper-3) 0%, var(--jkl-copper) 50%, var(--jkl-copper-3) 100%);
    transform: translateX(-50%);
    transition: width var(--jkl-tr);
}
.jkl-stats-grid-bare .jkl-stats-item:hover::after { width: 50%; }

/* ====================== PATH (etapy + pomoc + reels + sticky form) ======================
   Scalone sekcje "Na jakim jesteś etapie" i "Jak mogę Ci pomóc" (+ slider reels)
   w jednej siatce: lewa kolumna scrolluje, prawa trzyma formularz w zasięgu wzroku.
   Na mobile formularz wskakuje zaraz po etapach (grid-template-areas). */
.jkl-path { background: var(--jkl-cream); padding: var(--jkl-s6) 0; }

.jkl-path-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stages" "form" "help" "reels";
    gap: var(--jkl-s5);
    align-items: start;
}
@media (min-width: 1024px) {
    .jkl-path-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
        grid-template-areas:
            "stages form"
            "help   form"
            "reels  form";
        column-gap: var(--jkl-s5);
        row-gap: var(--jkl-s6);
    }
    /* Kolumna z formularzem musi rozciągnąć się na całą wysokość trzech wierszy -
       inaczej sticky nie ma po czym jechać (align-items: start zbiłoby ją do
       wysokości samego formularza). */
    .jkl-path-aside { align-self: stretch; }
}
@media (min-width: 1200px) { .jkl-path-grid { column-gap: var(--jkl-s6); } }

.jkl-path-block { min-width: 0; }
.jkl-path-stages { grid-area: stages; }
.jkl-path-aside  { grid-area: form; min-width: 0; }
.jkl-path-help   { grid-area: help;  scroll-margin-top: calc(var(--jkl-nav-h) + 20px); }
.jkl-path-reels  { grid-area: reels; scroll-margin-top: calc(var(--jkl-nav-h) + 20px); }

.jkl-path-head { margin-bottom: var(--jkl-s3); }
.jkl-path-head .jkl-section-title { font-size: clamp(1.7rem, 3.1vw, 2.45rem); margin-top: 10px; }
.jkl-path-head .jkl-section-sub { margin-top: 12px; max-width: 58ch; }

/* ---------- Etapy: pionowy flow z numerami zamiast kafelków ---------- */
.jkl-stage-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jkl-stage {
    --clr: var(--jkl-copper);
    --clr-soft: rgba(174,200,54,.14);
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    padding: 20px 20px 22px;
    border-radius: var(--jkl-r-lg);
    transition: background var(--jkl-tr), box-shadow var(--jkl-tr);
}
.jkl-stage-amber   { --clr: var(--jkl-accent-amber);   --clr-soft: rgba(234,179,8,.14); }
.jkl-stage-emerald { --clr: var(--jkl-accent-emerald); --clr-soft: rgba(145,175,30,.14); }
.jkl-stage-copper  { --clr: var(--jkl-accent-copper);  --clr-soft: rgba(174,200,54,.16); }

.jkl-stage::before {
    content: ""; position: absolute; left: 0; top: 16px; bottom: 16px;
    width: 3px; border-radius: 3px; background: var(--clr);
    opacity: 0; transition: opacity var(--jkl-tr);
}
.jkl-stage:hover { background: var(--jkl-paper); box-shadow: var(--jkl-shadow-sm); }
.jkl-stage.is-selected { background: var(--jkl-paper); box-shadow: var(--jkl-shadow-md); }
.jkl-stage.is-selected::before { opacity: 1; }

.jkl-stage-marker { position: relative; display: flex; justify-content: center; }
/* linia łącząca kolejne etapy */
.jkl-stage:not(:last-child) .jkl-stage-marker::after {
    content: ""; position: absolute; left: 50%; top: 60px; bottom: -34px;
    width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--clr), rgba(38,38,42,.06));
    opacity: .4;
}
.jkl-stage-num {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    font-family: var(--jkl-serif); font-size: 1.0625rem; font-weight: 600;
    color: var(--clr);
    background: var(--jkl-paper);
    border: 1.5px solid var(--clr-soft);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(18,25,32,.06);
    transition: background var(--jkl-tr), color var(--jkl-tr), border-color var(--jkl-tr);
}
.jkl-stage.is-selected .jkl-stage-num,
.jkl-stage:hover .jkl-stage-num { background: var(--clr); color: #fff; border-color: var(--clr); }

.jkl-stage-label {
    display: inline-block; margin-bottom: 8px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--clr);
}
.jkl-stage-title { font-family: var(--jkl-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--jkl-ink); margin-bottom: 8px; }
.jkl-stage-desc  { color: var(--jkl-text-soft); font-size: .9375rem; margin-bottom: 14px; }
.jkl-stage-list  { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jkl-stage-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--jkl-text); }
.jkl-stage-list svg { color: var(--clr); flex-shrink: 0; margin-top: 4px; }
.jkl-stage-pick {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--jkl-r-pill);
    font-size: .85rem; font-weight: 600; color: var(--jkl-ink);
    background: var(--clr-soft);
    transition: gap var(--jkl-tr), background var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-stage-pick:hover { gap: 12px; background: var(--clr); color: #fff; }
.jkl-stage-amber .jkl-stage-pick:hover,
.jkl-stage-copper .jkl-stage-pick:hover { color: var(--jkl-ink); }
.jkl-stage-pick svg { flex-shrink: 0; }

/* ---------- Jak mogę pomóc: lista zamiast trzech kafelków ---------- */
.jkl-help-list { display: flex; flex-direction: column; }
.jkl-help-row {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px;
    padding: 24px 20px;
    border-top: 1px solid var(--jkl-line);
    border-radius: var(--jkl-r-md);
    transition: background var(--jkl-tr), box-shadow var(--jkl-tr);
}
.jkl-help-row:last-child { border-bottom: 1px solid var(--jkl-line); }
.jkl-help-row:hover { background: var(--jkl-paper); box-shadow: var(--jkl-shadow-sm); }
.jkl-help-icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(174,200,54,.18) 0%, rgba(174,200,54,.06) 100%);
    color: var(--jkl-copper-3);
}
.jkl-help-title { font-family: var(--jkl-serif); font-weight: 500; font-size: 1.25rem; color: var(--jkl-ink); margin-bottom: 8px; }
.jkl-help-desc  { color: var(--jkl-text-soft); font-size: .9375rem; margin-bottom: 14px; }
.jkl-help-tags  { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jkl-help-tags li {
    font-size: .78rem; font-weight: 600;
    color: var(--jkl-copper-3);
    background: rgba(174,200,54,.12);
    border-radius: var(--jkl-r-pill);
    padding: 6px 12px;
}

/* ---------- Reels w jasnej sekcji (kontrolki były pod ciemne tło) ---------- */
.jkl-path-reels .jkl-ai-socials { justify-content: center; }
.jkl-path-reels .jkl-section-title em { font-style: normal; font-weight: 700; }
.jkl-path-reels .jkl-ai-phones-btn {
    background: var(--jkl-paper); color: var(--jkl-ink);
    border: 1px solid var(--jkl-line); box-shadow: var(--jkl-shadow-sm);
}
.jkl-path-reels .jkl-ai-phones-btn:hover { background: var(--jkl-copper); color: var(--jkl-ink); border-color: var(--jkl-copper); }
.jkl-path-reels .jkl-ai-phones-dot { background: rgba(38,38,42,.16); }
.jkl-path-reels .jkl-ai-phones-dot.is-active { background: var(--jkl-copper-3); }
.jkl-path-reels .jkl-ai-social-pill {
    background: var(--jkl-paper); color: var(--jkl-ink);
    border: 1px solid var(--jkl-line); box-shadow: var(--jkl-shadow-sm);
}
.jkl-path-reels .jkl-ai-social-pill:hover { box-shadow: var(--jkl-shadow-md); background: var(--jkl-paper); }
.jkl-path-reels .jkl-ai-social-pill svg { color: var(--jkl-copper-3); }
/* Telefony muszą zmieścić się w węższej kolumnie (mobile zostaje na regule 720px niżej) */
@media (min-width: 721px) {
    .jkl-path-reels .jkl-ai-phones-viewport { min-height: 400px; }
    .jkl-path-reels .jkl-ai-phone { width: 184px; height: 327px; }
    .jkl-path-reels .jkl-ai-phone.is-prev { transform: translate(calc(-50% - 118px), calc(-50% + 8px)) scale(.84) rotate(-10deg); }
    .jkl-path-reels .jkl-ai-phone.is-next { transform: translate(calc(-50% + 118px), calc(-50% + 8px)) scale(.84) rotate(10deg); }
}
@media (min-width: 1280px) {
    .jkl-path-reels .jkl-ai-phones-viewport { min-height: 460px; }
    .jkl-path-reels .jkl-ai-phone { width: 210px; height: 373px; }
    .jkl-path-reels .jkl-ai-phone.is-prev { transform: translate(calc(-50% - 148px), calc(-50% + 10px)) scale(.85) rotate(-10deg); }
    .jkl-path-reels .jkl-ai-phone.is-next { transform: translate(calc(-50% + 148px), calc(-50% + 10px)) scale(.85) rotate(10deg); }
}

/* ---------- Przyklejony formularz ---------- */
/* .jkl-path-form dziedziczy wygląd i style CF7 po .jkl-contact-form (łącznie ze
   sticky przy min-height 780px) - tutaj tylko to, co go odróżnia. */
.jkl-path-form {
    padding: 30px 28px;
    scroll-margin-top: calc(var(--jkl-nav-h) + 20px);
}
/* Sticky niezależnie od wysokości okna (reguła .jkl-contact-form przykleja
   dopiero od 780px wysokości). Karta ma zmieścić się w oknie w całości -
   stąd jeden wiersz tytułu i zwarte pola, bez wewnętrznego scrolla. */
@media (min-width: 1024px) {
    .jkl-path .jkl-path-form {
        position: sticky;
        top: calc(var(--jkl-nav-h) + 16px);
        padding: 24px 24px 20px;
    }
    /* Zwarte pola - cały formularz mieści się w jednym ekranie. */
    .jkl-path .jkl-path-form .jkl-form,
    .jkl-path .jkl-path-form .wpcf7-form,
    .jkl-path .jkl-path-form .wpcf7 form { gap: 10px; }
    .jkl-path .jkl-path-form .jkl-form-row input,
    .jkl-path .jkl-path-form .jkl-form-row textarea,
    .jkl-path .jkl-path-form .wpcf7-text,
    .jkl-path .jkl-path-form .wpcf7-email,
    .jkl-path .jkl-path-form .wpcf7-tel,
    .jkl-path .jkl-path-form .wpcf7-number,
    .jkl-path .jkl-path-form .wpcf7-textarea,
    .jkl-path .jkl-path-form .wpcf7-select { padding: 11px 14px; border-radius: 13px; }
    .jkl-path .jkl-path-form .jkl-form-row textarea,
    .jkl-path .jkl-path-form .wpcf7-textarea { min-height: 84px; }
    .jkl-path .jkl-path-form .jkl-btn-lg,
    .jkl-path .jkl-path-form .wpcf7-submit { padding: 13px 22px; }
    .jkl-path .jkl-path-form-foot { margin-top: 14px; padding-top: 12px; }
}
.jkl-path-form::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--jkl-copper-3), var(--jkl-copper), var(--jkl-copper-2));
}
/* Niskie laptopy - jeszcze ciaśniej, żeby karta w całości mieściła się w oknie. */
@media (min-width: 1024px) and (max-height: 840px) {
    .jkl-path .jkl-path-form { padding: 18px 22px 16px; }
    .jkl-path .jkl-path-form-title { font-size: 1.0625rem; margin-bottom: 12px; }
    .jkl-path .jkl-path-form .jkl-form,
    .jkl-path .jkl-path-form .wpcf7-form,
    .jkl-path .jkl-path-form .wpcf7 form { gap: 8px; }
    .jkl-path .jkl-path-form .jkl-form-row input,
    .jkl-path .jkl-path-form .wpcf7-text,
    .jkl-path .jkl-path-form .wpcf7-email,
    .jkl-path .jkl-path-form .wpcf7-tel { padding: 9px 13px; }
    .jkl-path .jkl-path-form .jkl-form-row textarea,
    .jkl-path .jkl-path-form .wpcf7-textarea { min-height: 66px; }
    .jkl-path .jkl-path-form-foot { margin-top: 12px; padding-top: 10px; font-size: .8rem; }
}

.jkl-path-form-title {
    font-family: var(--jkl-serif); font-weight: 500;
    font-size: 1.1875rem; line-height: 1.25;
    color: var(--jkl-ink);
    margin-bottom: 16px;
}
@media (min-width: 1200px) { .jkl-path-form-title { white-space: nowrap; } }
.jkl-path-form-stage {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 16px; padding: 11px 14px;
    background: rgba(174,200,54,.12);
    border: 1px solid rgba(174,200,54,.3);
    border-radius: var(--jkl-r-md);
    font-size: .85rem; font-weight: 600; color: var(--jkl-ink);
}
.jkl-path-form-stage svg { color: var(--jkl-copper-3); flex-shrink: 0; }
.jkl-path-form-foot {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--jkl-line);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    font-size: .85rem; color: var(--jkl-text-soft);
}
.jkl-path-form-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--jkl-ink); }
.jkl-path-form-phone:hover { color: var(--jkl-copper-3); }
.jkl-path-form-phone svg { color: var(--jkl-copper-3); }

@media (max-width: 560px) {
    .jkl-stage { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 14px 20px; }
    .jkl-stage-num { width: 44px; height: 44px; font-size: .95rem; }
    .jkl-stage:not(:last-child) .jkl-stage-marker::after { top: 52px; }
    .jkl-help-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 14px; }
    .jkl-help-icon { width: 44px; height: 44px; border-radius: 12px; }
    .jkl-path-form { padding: 24px 20px; }
}

/* Phones cluster - stacked 3-phone display with one active center phone. */
.jkl-ai-phones { position: relative; padding: 0 0 12px; }
.jkl-ai-phones-viewport {
    position: relative;
    overflow: visible;
    padding: 24px 0 8px;
    min-height: 500px;
}
.jkl-ai-phone {
    position: absolute;
    top: 46%; left: 50%;
    width: 220px;
    height: 391px; /* 220 * 16/9 = 391 - explicit height avoids aspect-ratio quirks */
    border-radius: 28px;
    background: #0b1118;
    box-shadow: var(--jkl-shadow-xl);
    overflow: hidden;
    cursor: pointer;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(.74);
    opacity: 0;
    filter: brightness(.66) saturate(.9);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s ease, filter .4s ease, z-index 0s linear .1s;
    z-index: 1;
}
.jkl-ai-phone.is-prev,
.jkl-ai-phone.is-next,
.jkl-ai-phone.is-active {
    opacity: 1;
}
.jkl-ai-phone.is-prev {
    transform: translate(calc(-50% - 170px), calc(-50% + 10px)) scale(.86) rotate(-11deg);
    filter: brightness(.78) saturate(.92);
    z-index: 2;
}
.jkl-ai-phone.is-next {
    transform: translate(calc(-50% + 170px), calc(-50% + 10px)) scale(.86) rotate(11deg);
    filter: brightness(.78) saturate(.92);
    z-index: 2;
}
.jkl-ai-phone.is-active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: none;
    z-index: 3;
}
@media (max-width: 720px) {
    .jkl-ai-phones-viewport { min-height: 420px; }
    .jkl-ai-phone { width: 172px; height: 306px; top: 48%; }
    .jkl-ai-phone.is-prev {
        transform: translate(calc(-50% - 108px), calc(-50% + 8px)) scale(.82) rotate(-10deg);
    }
    .jkl-ai-phone.is-next {
        transform: translate(calc(-50% + 108px), calc(-50% + 8px)) scale(.82) rotate(10deg);
    }
}
.jkl-ai-phone-frame { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; }
.jkl-ai-phone-notch {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 16px; background: #000; border-radius: 12px; z-index: 2;
}
.jkl-ai-phone-video, .jkl-ai-phone-img { width: 100%; height: 100%; object-fit: cover; }
.jkl-ai-phone-img-poster { position: absolute; inset: 0; z-index: 1; transition: opacity .3s ease; }
.jkl-ai-phone.is-playing .jkl-ai-phone-img-poster { opacity: 0; pointer-events: none; }
/* Poster was only to defer the video load - once played it never returns (even on pause). */
.jkl-ai-phone.is-loaded .jkl-ai-phone-img-poster { opacity: 0; pointer-events: none; }
/* Speaker / mute toggle (głośniczek) - shown on the active reel */
.jkl-ai-phone-mute {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 38px; height: 38px; border-radius: 50%;
    display: none; place-items: center;
    background: rgba(0,0,0,.5); color: #fff;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    transition: background .15s ease, transform .15s ease;
}
.jkl-ai-phone.is-active .jkl-ai-phone-mute { display: grid; }
.jkl-ai-phone-mute:hover { background: rgba(0,0,0,.65); transform: scale(1.06); }
.jkl-ai-phone-mute svg { display: block; }
.jkl-ai-phones:not(.is-sound-on) .jkl-ai-phone-mute .jkl-vol-on  { display: none; }
.jkl-ai-phones.is-sound-on      .jkl-ai-phone-mute .jkl-vol-off { display: none; }
.jkl-ai-phone-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center; gap: 12px;
    background: linear-gradient(135deg, #1f2c3a 0%, #2a3a4c 100%);
    color: rgba(248,243,234,.6);
    font-size: .8125rem; text-align: center; padding: 16px;
}
.jkl-ai-phone-placeholder svg { color: var(--jkl-copper-2); }

.jkl-ai-phones-controls {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 12px;
}

/* Play/pause overlay on AI phone */
.jkl-ai-phone-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.5); color: var(--jkl-cream);
    border: 2px solid rgba(255,255,255,.06);
    z-index: 8; cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.jkl-ai-phone-play:hover { transform: translate(-50%, -50%) scale(1.05); background: rgba(0,0,0,.6); }
.jkl-ai-phone-play .jkl-pause-icon { display: none !important; }
.jkl-ai-phone-play .jkl-play-icon  { display: inline-block !important; }
.jkl-ai-phone.is-playing .jkl-ai-phone-play .jkl-play-icon { display: none !important; }
.jkl-ai-phone.is-playing .jkl-ai-phone-play .jkl-pause-icon { display: inline-block !important; }

/* force perfect centering of SVG icon inside the round button */
.jkl-ai-phone-play .jkl-ai-phone-play-icon { display: block; line-height: 0; }
.jkl-ai-phone-play svg { width: 22px; height: 22px; display: block; }

/* Hide overlay play when paused and not hovered */
.jkl-ai-phone-play { transition: opacity .12s ease, transform .12s ease; }
.jkl-ai-phone:not(.is-playing):not(:hover) .jkl-ai-phone-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.9); }

/* Make play/pause icons theme-green */
.jkl-ai-phone-play .jkl-icon,
.jkl-ai-phone-mini .jkl-icon {
    color: var(--jkl-copper);
}
.jkl-ai-phones-btn {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.08);
    color: var(--jkl-cream);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    transition: background var(--jkl-tr), border-color var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-ai-phones-btn:hover {
    background: var(--jkl-copper);
    color: var(--jkl-ink);
    border-color: var(--jkl-copper);
    transform: scale(1.06);
}
.jkl-ai-phones-dots { display: flex; gap: 6px; align-items: center; }
.jkl-ai-phones-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: background var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-ai-phones-dot.is-active { background: var(--jkl-copper); transform: scale(1.4); }

@media (max-width: 720px) {
    .jkl-ai-phones { padding-top: 0; }
}

.jkl-ai-socials {
    margin-top: 18px;
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.jkl-ai-social-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--jkl-r-pill);
    font-size: .85rem; font-weight: 600; color: var(--jkl-cream);
    backdrop-filter: blur(6px);
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.jkl-ai-social-pill:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.jkl-ai-social-pill svg { color: var(--jkl-copper-2); width: 20px; height: 20px; display: block; }

.jkl-ai-socials {
    margin-top: 18px;
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
/* Ensure inline SVG icons adopt text color for fills in AI social pills (but keep stroke allowed)
   Floating widget icons still force stroke:none to keep them solid */
.jkl-ai-social-pill svg * { fill: currentColor !important; }
.jkl-float .jkl-float-play svg *, .jkl-float .jkl-float-phone svg * { fill: currentColor !important; stroke: none !important; }
.jkl-social-svg.facebook svg * { /* facebook may have special layering, keep last-child transparent if present */ }

/* ============================== REEL (main shorts target) ============================== */
.jkl-reel { background: var(--jkl-cream); padding: var(--jkl-s6) 0; }
.jkl-reel-wrap { display: flex; justify-content: center; }
.jkl-reel-phone {
    position: relative;
    width: min(360px, 90vw);
    aspect-ratio: 9 / 16;
    background: #0b1118;
    border-radius: 36px;
    padding: 12px;
    box-shadow: var(--jkl-shadow-xl);
}
.jkl-reel-notch {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    width: 96px; height: 22px; background: #000; border-radius: 14px; z-index: 3;
}
.jkl-reel-player {
    position: relative; width: 100%; height: 100%;
    border-radius: 26px; overflow: hidden;
    background: #0b1118;
}
.jkl-reel-poster, .jkl-reel-video { width: 100%; height: 100%; object-fit: cover; }
.jkl-reel-video { display: none; }
.jkl-reel-player.is-playing .jkl-reel-video { display: block; }
.jkl-reel-player.is-playing .jkl-reel-poster { display: none; }
.jkl-reel-play {
    position: absolute; inset: 0; margin: auto;
    width: 80px; height: 80px;
    display: grid; place-items: center;
    background: rgba(38,38,42,.92);
    color: var(--jkl-cream);
    border-radius: 50%;
    transition: opacity var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-reel-play:hover { transform: scale(1.05); background: var(--jkl-copper); }
.jkl-reel-player.is-playing .jkl-reel-play { opacity: 0; pointer-events: none; }
.jkl-reel-play-icon { display: grid; place-items: center; padding-left: 4px; }

/* ============================== CITY EXPERTISE ============================== */
.jkl-city {
    position: relative;
    padding: var(--jkl-s7) 0;
    color: var(--jkl-cream);
    background-color: var(--jkl-ink);
    overflow: hidden;
    isolation: isolate;
}
.jkl-city-bg,
.jkl-city > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
.jkl-city-bg,
.jkl-city > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.jkl-city-overlay {
    position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(110deg, rgba(21,32,43,.95) 0%, rgba(21,32,43,.85) 50%, rgba(21,32,43,.7) 100%),
        radial-gradient(circle at 80% 50%, rgba(174,200,54,.18) 0%, transparent 60%);
}
.jkl-city-grain {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.jkl-city-inner { position: relative; z-index: 1; }
.jkl-city-content { max-width: 720px; }
.jkl-city-line { display: block; width: 60px; height: 2px; background: var(--jkl-copper-2); margin-bottom: 18px; }
.jkl-city-title {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--jkl-cream);
    margin: 0 0 var(--jkl-s2);
}
.jkl-city-title em {
    font-style: italic;
    color: var(--jkl-copper-2);
    background: linear-gradient(180deg, transparent 65%, rgba(174,200,54,.28) 0);
    padding: 0 .15em;
}
.jkl-city-text {
    font-size: 1.0625rem; line-height: 1.7;
    color: rgba(248,243,234,.85);
    margin-bottom: var(--jkl-s3);
    max-width: 640px;
}
.jkl-city-text strong { color: var(--jkl-cream); font-weight: 600; }

.jkl-city-areas {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: var(--jkl-s3);
}
.jkl-city-area {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--jkl-r-pill);
    font-size: .8125rem; font-weight: 500;
    color: var(--jkl-cream);
    backdrop-filter: blur(6px);
}
.jkl-city-area svg { color: var(--jkl-copper-2); }

/* ============================== ABOUT ============================== */
.jkl-about { background: var(--jkl-cream); padding: var(--jkl-s7) 0; }
.jkl-about-grid {
    display: grid; gap: var(--jkl-s5);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) { .jkl-about-grid { grid-template-columns: .9fr 1.1fr; gap: var(--jkl-s6); } }

.jkl-about-photo {
    position: relative;
    border-radius: var(--jkl-r-lg);
    overflow: visible;
    aspect-ratio: 4 / 5;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}
.jkl-about-photo img, .jkl-about-photo-ph {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center top;
    border-radius: var(--jkl-r-lg);
    background: linear-gradient(135deg, var(--jkl-ink-2) 0%, var(--jkl-ink-3) 100%);
}
.jkl-about-photo-frame {
    position: absolute; inset: -16px -16px 16px 16px;
    border: 2px solid var(--jkl-copper);
    border-radius: var(--jkl-r-lg);
    z-index: -1;
}
.jkl-about-quote {
    position: absolute; left: -10px; bottom: -50px;
    background: var(--jkl-paper);
    border-radius: var(--jkl-r-md);
    padding: 18px 22px;
    font-family: var(--jkl-serif);
    font-style: italic;
    font-size: .9375rem;
    color: var(--jkl-ink);
    box-shadow: var(--jkl-shadow-md);
    max-width: 280px;
}
.jkl-about-quote-mark {
    font-family: var(--jkl-serif);
    font-size: 2rem;
    color: var(--jkl-copper);
    line-height: 0; margin-right: 4px;
}
@media (max-width: 720px) { .jkl-about-quote { position: static; margin-top: 32px; max-width: 100%; } .jkl-about-photo-frame { display: none; } }

.jkl-about-lead { font-family: var(--jkl-serif); font-style: italic; font-size: 1.375rem; line-height: 1.5; color: var(--jkl-ink); margin: var(--jkl-s2) 0; }
.jkl-about-text { color: var(--jkl-text-soft); margin-bottom: var(--jkl-s3); }
.jkl-about-text p { margin-bottom: 14px; }
.jkl-about-text strong { color: var(--jkl-ink); font-weight: 600; }

.jkl-about-features { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: var(--jkl-s3); }
@media (min-width: 600px) { .jkl-about-features { grid-template-columns: 1fr 1fr; } }
.jkl-about-feature { display: flex; gap: 14px; align-items: flex-start; }
.jkl-about-feature-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--jkl-cream-2);
    color: var(--jkl-copper);
    border-radius: 10px;
}
.jkl-about-feature-title { font-family: var(--jkl-serif); font-weight: 500; font-size: 1.0625rem; color: var(--jkl-ink); margin-bottom: 4px; }
.jkl-about-feature-text  { font-size: .875rem; color: var(--jkl-text-soft); line-height: 1.55; }

/* ============================== PROCESS ============================== */
.jkl-process { background: var(--jkl-paper); padding: var(--jkl-s6) 0; }
.jkl-process-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--jkl-s4);
    /* default align-items: stretch - rail column spans full row height so
       sticky has somewhere to stick. */
}
@media (min-width: 1024px) {
    .jkl-process-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--jkl-s5);
    }
}

/* Sticky right rail */
.jkl-process-rail { position: relative; }
.jkl-process-rail-card {
    background: linear-gradient(180deg, var(--jkl-cream-2) 0%, var(--jkl-paper) 100%);
    border-radius: var(--jkl-r-lg);
    border: 1px solid var(--jkl-line);
    box-shadow: var(--jkl-shadow-md);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .jkl-process-rail-card {
        position: sticky;
        top: calc(var(--jkl-nav-h) + 24px);
    }
}
.jkl-process-rail-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--jkl-ink);
    overflow: hidden;
}
.jkl-process-rail-photo img,
.jkl-process-rail-photo-ph {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    background: linear-gradient(135deg, var(--jkl-ink-2) 0%, var(--jkl-ink-3) 100%);
}
.jkl-process-rail-body {
    padding: 22px 22px 24px;
    display: flex; flex-direction: column;
    gap: 10px;
}
.jkl-process-rail-name {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--jkl-ink);
    line-height: 1.1;
}
.jkl-process-rail-role {
    font-size: .75rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--jkl-copper-3); font-weight: 600;
    margin-top: -6px; margin-bottom: 8px;
}
.jkl-process-rail-title {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: 1.0625rem;
    color: var(--jkl-ink);
    line-height: 1.35;
    margin-top: 4px;
}
.jkl-process-rail-text {
    font-size: .875rem;
    color: var(--jkl-text-soft);
    line-height: 1.55;
    margin-bottom: 6px;
}
.jkl-process-rail-cta {
    margin-top: 6px;
    padding: 14px 20px;
    font-size: .9375rem;
}
.jkl-process-rail-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.jkl-process-rail-mini {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 12px;
    background: var(--jkl-paper);
    border: 1px solid var(--jkl-line);
    border-radius: var(--jkl-r-pill);
    font-size: .8125rem; font-weight: 500;
    color: var(--jkl-ink);
    transition: border-color var(--jkl-tr), color var(--jkl-tr), background var(--jkl-tr);
}
.jkl-process-rail-mini:hover {
    color: var(--jkl-copper-3);
    border-color: var(--jkl-copper);
    background: rgba(174,200,54,.06);
}
.jkl-process-rail-mini svg { color: var(--jkl-copper-3); }
.jkl-process-rail-mail {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px;
    margin-top: 6px;
    border: 1px solid var(--jkl-line);
    background: var(--jkl-paper);
    border-radius: var(--jkl-r-pill);
    font-size: .8125rem; font-weight: 500;
    color: var(--jkl-ink);
    word-break: break-word;
    transition: border-color var(--jkl-tr), background var(--jkl-tr), color var(--jkl-tr);
}
.jkl-process-rail-mail:hover {
    border-color: var(--jkl-copper);
    background: rgba(174,200,54,.06);
    color: var(--jkl-copper-3);
}
.jkl-process-rail-mail svg { color: var(--jkl-copper-3); flex-shrink: 0; }
.jkl-process-rail-foot {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--jkl-line);
    display: flex; align-items: center; gap: 6px;
    font-size: .75rem; color: var(--jkl-text-mute);
    letter-spacing: .02em;
}
.jkl-process-rail-foot svg { color: var(--jkl-copper-3); }

.jkl-process-list { max-width: 820px; display: flex; flex-direction: column; }
@media (min-width: 1024px) {
    .jkl-process-list { max-width: none; }
}
.jkl-process-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--jkl-line);
    position: relative;
}
.jkl-process-step:last-child { border-bottom: 0; }
.jkl-process-step-num {
    font-family: var(--jkl-serif); font-style: italic; font-weight: 500;
    font-size: 2.5rem;
    color: var(--jkl-copper);
    line-height: 1;
}
.jkl-process-step-title { font-family: var(--jkl-serif); font-weight: 500; font-size: 1.5rem; color: var(--jkl-ink); margin-bottom: 8px; }
.jkl-process-step-text  { color: var(--jkl-text-soft); font-size: .9375rem; }

.jkl-process-step.jkl-process-step--has-image {
    grid-template-columns: 140px 80px 1fr;
    align-items: center;
}
.jkl-process-step-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--jkl-line);
}
.jkl-process-step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 1023px) {
    .jkl-process-step.jkl-process-step--has-image { grid-template-columns: 110px 60px 1fr; gap: 16px; }
}
@media (max-width: 767px) {
    .jkl-process-step.jkl-process-step--has-image { grid-template-columns: 1fr; gap: 12px; }
    .jkl-process-step.jkl-process-step--has-image .jkl-process-step-image { aspect-ratio: 16 / 9; }
}

/* ============================== TESTIMONIALS ============================== */
.jkl-testimonials { background: var(--jkl-cream-2); padding: var(--jkl-s6) 0; }

/* Google rating badge */
.jkl-google-badge {
    display: inline-flex; align-items: center; gap: 18px;
    margin: var(--jkl-s2) auto 0;
    padding: 14px 22px;
    background: var(--jkl-paper);
    border: 1px solid var(--jkl-line);
    border-radius: var(--jkl-r-pill);
    box-shadow: var(--jkl-shadow-md);
    text-align: left;
}
.jkl-google-logo {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--jkl-cream-2);
    border-radius: 50%;
}
.jkl-google-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.jkl-google-row  { display: flex; align-items: center; gap: 10px; }
.jkl-google-rating {
    font-family: var(--jkl-serif); font-weight: 600;
    font-size: 1.625rem; color: var(--jkl-ink); line-height: 1;
}
.jkl-google-stars { display: inline-flex; gap: 1px; color: #fbbc04; }
.jkl-google-meta {
    font-size: .8125rem; color: var(--jkl-text-soft);
    letter-spacing: .01em;
}
.jkl-google-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 6px;
    padding: 8px 14px;
    border: 1px solid var(--jkl-line);
    border-radius: var(--jkl-r-pill);
    font-size: .8125rem; font-weight: 600;
    color: var(--jkl-ink);
    transition: border-color var(--jkl-tr), color var(--jkl-tr), gap var(--jkl-tr);
}
.jkl-google-link:hover { border-color: var(--jkl-copper); color: var(--jkl-copper-3); gap: 10px; }
@media (max-width: 540px) {
    .jkl-google-badge { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .jkl-google-link { width: 100%; justify-content: center; margin-left: 0; }
}
.jkl-testimonials-grid {
    display: grid; gap: var(--jkl-s2);
    grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .jkl-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jkl-testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.jkl-testimonial {
    background: var(--jkl-paper);
    border-radius: var(--jkl-r-lg);
    padding: 28px 26px;
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: var(--jkl-shadow-sm);
    display: flex; flex-direction: column;
}
.jkl-testimonial-stars { display: flex; gap: 2px; color: var(--jkl-accent-amber); margin-bottom: 14px; }
.jkl-testimonial-text { color: var(--jkl-text); font-size: .9375rem; line-height: 1.65; flex: 1; }
.jkl-testimonial-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--jkl-line); }
.jkl-testimonial-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--jkl-copper); color: var(--jkl-ink);
    font-family: var(--jkl-serif); font-weight: 500;
}
.jkl-testimonial-name { font-weight: 600; color: var(--jkl-ink); font-size: .9375rem; }

/* ============================== FAQ ============================== */
.jkl-faq { background: var(--jkl-paper); padding: var(--jkl-s6) 0; }
.jkl-faq-narrow { max-width: 820px; }
.jkl-faq-list { display: flex; flex-direction: column; gap: 8px; }
.jkl-faq-item {
    background: var(--jkl-cream);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--jkl-r-md);
    transition: background var(--jkl-tr);
}
.jkl-faq-item[open] { background: var(--jkl-paper); border-color: var(--jkl-copper); box-shadow: var(--jkl-shadow-sm); }
.jkl-faq-q {
    list-style: none; cursor: pointer;
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--jkl-ink);
}
.jkl-faq-q::-webkit-details-marker { display: none; }
.jkl-faq-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--jkl-paper); border: 1px solid var(--jkl-line);
    color: var(--jkl-copper);
    border-radius: 50%;
}
.jkl-faq-item[open] .jkl-faq-plus { display: none; }
.jkl-faq-item:not([open]) .jkl-faq-minus { display: none; }
.jkl-faq-a { padding: 0 22px 22px; color: var(--jkl-text-soft); }
.jkl-faq-a strong { color: var(--jkl-ink); }

/* ============================== CONTACT ============================== */
.jkl-contact { background: var(--jkl-cream-2); padding: var(--jkl-s6) 0; }
.jkl-contact-grid {
    display: grid; gap: var(--jkl-s4);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) { .jkl-contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--jkl-s5); } }

.jkl-contact-info { display: flex; flex-direction: column; gap: 14px; }
.jkl-contact-card {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px;
    background: var(--jkl-paper);
    border-radius: var(--jkl-r-md);
    border: 1px solid rgba(0,0,0,.04);
}
.jkl-contact-avatar {
    width: 46px; height: 46px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--jkl-cream-2);
    color: var(--jkl-copper);
    border-radius: 12px;
}
.jkl-contact-card-label { display: block; font-size: .75rem; color: var(--jkl-text-mute); margin-bottom: 2px; }
.jkl-contact-card-value { font-weight: 600; color: var(--jkl-ink); font-size: 1rem; }
a.jkl-contact-card-value:hover { color: var(--jkl-copper); }

.jkl-contact-form {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(174,200,54,.10) 0%, transparent 34%),
        linear-gradient(180deg, #fff 0%, #f7f4ee 100%);
    padding: 36px;
    border-radius: var(--jkl-r-lg);
    border: 1px solid rgba(174,200,54,.12);
    box-shadow: 0 20px 60px rgba(18,25,32,.08);
    align-self: start;
    height: auto;
}

/* Formularz jedzie ze scrollem i zatrzymuje się pod navbarem, dopóki lewa
   kolumna (dane kontaktowe + zdjęcie) się nie skończy.

   Efekt widać tylko wtedy, gdy lewa kolumna jest WYŻSZA od formularza - inaczej
   wiersz siatki ma wysokość formularza i nie ma po czym jechać. Bez ustawionego
   zdjęcia w sekcji kontaktu kolumna z kartami jest niższa i formularz stoi tak
   jak dotąd; przykleja się, gdy zdjęcie zostanie dodane.

   Warunek min-height pilnuje, żeby nie przykleić formularza wyższego niż okno -
   przyklejony wystawałby poza ekran razem z przyciskiem wysyłki, a tego
   użytkownik nie mógłby już doscrollować. */
@media (min-width: 1024px) and (min-height: 780px) {
    .jkl-contact-form {
        position: sticky;
        top: calc(var(--jkl-nav-h) + 24px);
    }
}
.jkl-contact-form-title { font-family: var(--jkl-serif); font-weight: 500; font-size: 1.5rem; color: var(--jkl-ink); margin-bottom: 6px; }
.jkl-contact-form-sub   { color: var(--jkl-text-soft); margin-bottom: 24px; font-size: .9375rem; }

.jkl-form { display: flex; flex-direction: column; gap: 16px; }
.jkl-form-row { display: flex; flex-direction: column; gap: 6px; }
.jkl-form-row span { font-size: .8125rem; font-weight: 600; color: var(--jkl-ink); letter-spacing: .02em; }
.jkl-form-row em { font-weight: 400; color: var(--jkl-text-mute); font-style: normal; }
.jkl-form-row input, .jkl-form-row textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(38,38,42,.12);
    background: rgba(255,255,255,.9);
    border-radius: 16px;
    color: var(--jkl-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: border-color var(--jkl-tr), background var(--jkl-tr), box-shadow var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-form-row textarea { min-height: 140px; resize: vertical; }
.jkl-form-row input::placeholder, .jkl-form-row textarea::placeholder { color: var(--jkl-text-mute); }
.jkl-form-row input:focus, .jkl-form-row textarea:focus {
    outline: none;
    border-color: var(--jkl-copper);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(174,200,54,.14);
    transform: translateY(-1px);
}
.jkl-form-check {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 16px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(38,38,42,.08);
    border-radius: 16px;
    font-size: .8125rem; color: var(--jkl-text-soft);
}
.jkl-form-check input {
    margin-top: 4px;
    width: 18px; height: 18px;
    accent-color: var(--jkl-copper);
    flex-shrink: 0;
}
.jkl-contact-form .jkl-btn-full { width: 100%; justify-content: center; }

.jkl-contact-form .wpcf7-form,
.jkl-contact-form .wpcf7 form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.jkl-contact-form .wpcf7 p { margin: 0; }
.jkl-contact-form .wpcf7 br { display: none; }
.jkl-contact-form .wpcf7-form-control-wrap { display: block; }
.jkl-contact-form .wpcf7-text,
.jkl-contact-form .wpcf7-email,
.jkl-contact-form .wpcf7-tel,
.jkl-contact-form .wpcf7-number,
.jkl-contact-form .wpcf7-textarea,
.jkl-contact-form .wpcf7-select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(38,38,42,.12);
    background: rgba(255,255,255,.9);
    border-radius: 16px;
    color: var(--jkl-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: border-color var(--jkl-tr), background var(--jkl-tr), box-shadow var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-contact-form .wpcf7-textarea { min-height: 140px; resize: vertical; }
.jkl-contact-form .wpcf7-text:focus,
.jkl-contact-form .wpcf7-email:focus,
.jkl-contact-form .wpcf7-tel:focus,
.jkl-contact-form .wpcf7-number:focus,
.jkl-contact-form .wpcf7-textarea:focus,
.jkl-contact-form .wpcf7-select:focus {
    outline: none;
    border-color: var(--jkl-copper);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(174,200,54,.14);
    transform: translateY(-1px);
}

/* CF7 acceptance / checkbox / radio - flat (no input-style box). */
.jkl-contact-form .wpcf7-acceptance,
.jkl-contact-form .wpcf7-checkbox,
.jkl-contact-form .wpcf7-radio {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.jkl-contact-form .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(38,38,42,.08);
    border-radius: 14px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--jkl-text-soft);
}
.jkl-contact-form .wpcf7-list-item + .wpcf7-list-item { margin-top: 8px; }
.jkl-contact-form .wpcf7-list-item input[type="checkbox"],
.jkl-contact-form .wpcf7-list-item input[type="radio"] {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin: 2px 0 0;
    accent-color: var(--jkl-copper);
    cursor: pointer;
}
.jkl-contact-form .wpcf7-list-item-label {
    flex: 1;
    display: inline-block;
}

/* Consent / checkbox - force checkbox LEFT, text RIGHT.
   CF7 wraps <input> + <span class="wpcf7-list-item-label"> inside a <label>.
   The span is inline-block, so a long consent text can't sit next to the
   checkbox and drops to the next line ("box above text"). Fix: make the
   <label> itself the flex container -> checkbox and text are always side by
   side. Covers both [checkbox] (name="rodo[]") and [acceptance]. */
.wpcf7-checkbox .wpcf7-list-item > label,
.wpcf7-acceptance .wpcf7-list-item > label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
}
.wpcf7-checkbox input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--jkl-copper);
    cursor: pointer;
}
.wpcf7-checkbox .wpcf7-list-item-label,
.wpcf7-acceptance .wpcf7-list-item-label {
    flex: 1 1 auto;
    display: block;
}

/* Honeypot (anti-spam) - out of flow so it adds NO visible gap, and stays in
   the DOM (NOT display:none, which bots detect and skip). Standard
   visually-hidden pattern; CF7-Honeypot plugin adds tabindex/autocomplete. */
.wpcf7-honeypot,
.wpcf7-form-control-wrap[data-name^="honeypot"],
.wpcf7-form-control-wrap:has(> .wpcf7-honeypot),
.form-row:has(.wpcf7-honeypot),
.jkl-form-row:has(.wpcf7-honeypot),
p:has(> .wpcf7-form-control-wrap > .wpcf7-honeypot),
.wpcf7-form-control-wrap[data-cf7apps-honeypot],
.wpcf7-form-control-wrap[class*="honeypot-"],
.hp-message {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* CF7 6.x wraps hidden fields (_wpcf7, _wpcf7_version, ...) in a <fieldset> -
   unstyled, the browser's default fieldset border renders as an empty bar
   above the visible fields. */
.wpcf7-form .hidden-fields-container {
    border: 0;
    margin: 0;
    padding: 0;
}

.jkl-contact-form .wpcf7-submit,
.jkl-contact-form .wpcf7 .wpcf7-submit {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--jkl-copper);
    color: var(--jkl-ink);
    font-weight: 700;
    letter-spacing: .02em;
    transition: transform var(--jkl-tr), background var(--jkl-tr), box-shadow var(--jkl-tr);
}
.jkl-contact-form .wpcf7-submit:hover,
.jkl-contact-form .wpcf7 .wpcf7-submit:hover {
    background: var(--jkl-copper-3);
    color: var(--jkl-cream);
    transform: translateY(-2px);
    box-shadow: var(--jkl-shadow-md);
}
.jkl-contact-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: .75rem;
    font-weight: 500;
    color: #b45309;
}
.jkl-contact-form .wpcf7-form-control.wpcf7-not-valid {
    border-color: rgba(180,83,9,.5) !important;
    background: rgba(254,243,199,.4);
}
.jkl-contact-form .wpcf7-response-output:empty {
    display: none;
}
.jkl-contact-form .wpcf7-response-output {
    margin: 8px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(38,38,42,.12);
    border-radius: 14px;
    background: #fff;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--jkl-ink);
    box-shadow: 0 6px 18px rgba(18,25,32,.06);
}
.jkl-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.jkl-contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.jkl-contact-form .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: rgba(180,83,9,.35);
    background: #fffbeb;
    color: #92400e;
}
.jkl-contact-form .wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(174,200,54,.5);
    background: #f7fbe6;
    color: #3f5e07;
}
.jkl-contact-form .wpcf7-spinner {
    display: inline-block;
    width: 22px; height: 22px;
    margin: 0 0 0 12px;
    background: transparent;
    border: 2px solid rgba(21,32,43,.18);
    border-top-color: var(--jkl-copper-3);
    border-radius: 50%;
    visibility: hidden;
    animation: jkl-spin .7s linear infinite;
    vertical-align: middle;
}
.jkl-contact-form .wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }
@keyframes jkl-spin { to { transform: rotate(360deg); } }

/* ============================== FOOTER ============================== */
.jkl-footer { background: var(--jkl-ink); color: var(--jkl-cream); padding: var(--jkl-s5) 0 var(--jkl-s2); }
.jkl-footer-grid {
    display: grid; gap: var(--jkl-s3);
    grid-template-columns: 1fr;
}
@media (min-width: 720px) { .jkl-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.jkl-footer-logo strong { display: block; font-family: var(--jkl-serif); font-size: 1.25rem; }
.jkl-footer-logo em { font-size: .75rem; opacity: .7; letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.jkl-footer-about { color: rgba(248,243,234,.7); font-size: .9375rem; margin: 16px 0; }
.jkl-footer-about strong { color: var(--jkl-cream); }
.jkl-footer-h { font-family: var(--jkl-serif); font-size: 1rem; margin-bottom: 14px; color: var(--jkl-cream); }
.jkl-footer-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jkl-footer-list a, .jkl-footer-list li { color: rgba(248,243,234,.65); font-size: .875rem; }
.jkl-footer-list a:hover { color: var(--jkl-copper-2); }
.jkl-footer-contact {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 14px;
}
.jkl-footer-contact li { display: flex; align-items: flex-start; gap: 12px; color: rgba(248,243,234,.85); font-size: .875rem; }
.jkl-footer-c-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: rgba(174,200,54,.12);
    color: var(--jkl-copper-2);
    border-radius: 8px;
    margin-top: 2px;
}
.jkl-footer-c-body { display: flex; flex-direction: column; line-height: 1.35; }
.jkl-footer-c-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(248,243,234,.78);
    margin-bottom: 2px;
}
.jkl-footer-c-body a { color: var(--jkl-cream); font-weight: 500; }
.jkl-footer-c-body a:hover { color: var(--jkl-copper-2); }

.jkl-footer-bar {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: var(--jkl-s4);
    padding-top: var(--jkl-s2);
    color: rgba(248,243,234,.5); font-size: .8125rem;
}
.jkl-footer-bar-right { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.jkl-footer-link:hover, .jkl-footer-credit:hover { color: var(--jkl-copper-2); }
.jkl-footer-credit {
    color: rgba(248,243,234,.7);
    font-weight: 500;
    letter-spacing: .04em;
}
.jkl-footer-credit:hover { color: var(--jkl-copper); }

/* ============================== FLOATING WIDGET ============================== */
.jkl-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 990;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    transition: opacity var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-float-ready { animation: jkl-float-in .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes jkl-float-in { from { opacity: 0; transform: translate(40px, 40px); } to { opacity: 1; transform: none; } }

.jkl-float-bubble {
    position: absolute; right: 110px; bottom: 135px; z-index: 5;
    background: var(--jkl-paper);
    color: var(--jkl-ink);
    padding: 8px 14px;
    border-radius: 16px 16px 4px 16px;
    font-size: .8125rem; font-weight: 500;
    box-shadow: var(--jkl-shadow-md);
    white-space: nowrap;
    opacity: 0; transform: translateX(20px) scale(.9);
    transition: opacity var(--jkl-tr), transform var(--jkl-tr);
    pointer-events: none;
}
.jkl-float-bubble.is-visible { opacity: 1; transform: translateX(0) scale(1); }

.jkl-float-close {
    position: absolute; top: -8px; right: -8px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--jkl-paper); color: var(--jkl-ink);
    border-radius: 50%;
    box-shadow: var(--jkl-shadow-md);
    z-index: 4;
    transition: background var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-float-close:hover { background: var(--jkl-copper); color: var(--jkl-cream); transform: rotate(90deg); }

.jkl-float-phone {
    position: absolute; top: -10px; left: -8px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--jkl-copper); color: var(--jkl-ink);
    border-radius: 50%;
    box-shadow: var(--jkl-shadow-md);
    z-index: 4;
    animation: jkl-float-ring 2.4s ease-in-out infinite;
}
@keyframes jkl-float-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(174,200,54,.6), var(--jkl-shadow-md); }
    50%      { box-shadow: 0 0 0 12px rgba(174,200,54,0), var(--jkl-shadow-md); }
}
.jkl-float-phone:hover { transform: scale(1.08); }

/* Druga droga kontaktu z widgetu: skok do przyklejonego formularza. */
.jkl-float-write {
    position: absolute; bottom: -8px; left: -8px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--jkl-paper); color: var(--jkl-copper-3);
    border: 1px solid var(--jkl-line);
    border-radius: 50%;
    box-shadow: var(--jkl-shadow-md);
    z-index: 4;
    transition: background var(--jkl-tr), color var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-float-write:hover { background: var(--jkl-copper); color: var(--jkl-ink); transform: scale(1.08); }
.jkl-float-write svg { display: block; }

.jkl-float-link { display: block; }
.jkl-float-frame {
    position: relative; display: block;
    width: 120px; height: 213px;
    background: #0b1118;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--jkl-shadow-xl);
    border: 2px solid rgba(255,255,255,.1);
    transition: transform var(--jkl-tr);
}
.jkl-float-link:hover .jkl-float-frame { transform: scale(1.04); }
.jkl-float-notch {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 10px; background: #000; border-radius: 8px; z-index: 2;
}
.jkl-float-video { width: 100%; height: 100%; object-fit: cover; }
.jkl-float-play {
    position: absolute; inset: 0; margin: auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(38,38,42,.92); color: var(--jkl-cream);
    border-radius: 50%;
    pointer-events: none;
    transition: opacity var(--jkl-tr);
}

@media (max-width: 540px) {
    .jkl-float { right: 12px; bottom: 12px; }
    .jkl-float-write { width: 34px; height: 34px; }
    .jkl-float-frame { width: 96px; height: 170px; }
    .jkl-float-bubble { right: 110px; bottom: 60px; font-size: .75rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .jkl-reveal { opacity: 1; transform: none; }
}

/* ============================== TV-STYLE SECTION ============================== */
.jkl-tv {
    position: relative;
    background:
        radial-gradient(circle at 50% 30%, rgba(174,200,54,.10) 0%, transparent 60%),
        var(--jkl-ink);
    color: var(--jkl-cream);
    padding: var(--jkl-s7) 0 var(--jkl-s6);
    overflow: hidden;
    isolation: isolate;
}
.jkl-tv-bg-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jkl-tv-glow {
    position: absolute; left: 50%; top: 60%;
    width: 120%; height: 60%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(174,200,54,.18) 0%, transparent 70%);
    filter: blur(40px);
}

.jkl-tv-lead {
    max-width: 760px;
    margin: 0 auto var(--jkl-s4);
    text-align: center;
    color: rgba(255,255,255,.78);
    font-size: 1.0625rem;
    line-height: 1.7;
}
.jkl-tv-lead strong { color: var(--jkl-cream); font-weight: 600; }

/* Screen / TV body */
.jkl-tv-screen-wrap {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}
.jkl-tv-screen {
    position: relative;
    background: linear-gradient(180deg, #0d0d10 0%, #16161a 100%);
    border-radius: 24px;
    padding: 16px;
    box-shadow:
        0 40px 80px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 0 0 1px rgba(255,255,255,.04);
}
.jkl-tv-bezel-top, .jkl-tv-bezel-bot {
    position: absolute; left: 50%; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
    border-radius: 999px;
}
.jkl-tv-bezel-top { top: 22px; width: 60px; height: 6px; }
.jkl-tv-bezel-bot { bottom: 22px; width: 80px; height: 4px; background: linear-gradient(90deg, transparent 0%, rgba(174,200,54,.5) 50%, transparent 100%); }

.jkl-tv-display {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.jkl-tv-video, .jkl-tv-poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.jkl-tv-video { z-index: 1; }
.jkl-tv-poster { z-index: 2; transition: opacity .4s ease; }
.jkl-tv-screen.is-playing .jkl-tv-poster { opacity: 0; pointer-events: none; }

.jkl-tv-play {
    position: absolute; inset: 0; margin: auto;
    z-index: 3;
    width: 88px; height: 88px;
    display: grid; place-items: center;
    background: rgba(174,200,54,.95);
    color: var(--jkl-ink);
    border-radius: 50%;
    box-shadow: 0 12px 32px rgba(174,200,54,.35);
    transition: transform var(--jkl-tr), opacity var(--jkl-tr), background var(--jkl-tr);
}
.jkl-tv-play:hover { transform: scale(1.08); background: var(--jkl-copper-2); }
.jkl-tv-screen.is-playing .jkl-tv-play { opacity: 0; pointer-events: none; }
.jkl-tv-play-icon { display: grid; place-items: center; padding-left: 4px; }

.jkl-tv-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 4;
    padding: 24px 28px;
    background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
    transform: translateY(0);
    transition: transform var(--jkl-tr), opacity var(--jkl-tr);
}
.jkl-tv-screen.is-playing .jkl-tv-caption { transform: translateY(100%); opacity: 0; }
.jkl-tv-caption-title { font-family: var(--jkl-serif); font-weight: 500; font-size: 1.5rem; color: var(--jkl-cream); margin-bottom: 4px; }
.jkl-tv-caption-desc { font-size: .9375rem; color: rgba(255,255,255,.78); }

/* Stand */
.jkl-tv-stand { display: flex; flex-direction: column; align-items: center; }
.jkl-tv-stand-neck { width: 6px; height: 18px; background: linear-gradient(180deg, #16161a 0%, #0d0d10 100%); }
.jkl-tv-stand-base {
    width: 200px; height: 8px;
    background: linear-gradient(180deg, #16161a 0%, #0d0d10 100%);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* Thumbnails strip */
.jkl-tv-thumbs {
    margin-top: var(--jkl-s4);
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.jkl-tv-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #16161a;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--jkl-tr), border-color var(--jkl-tr), box-shadow var(--jkl-tr);
    padding: 0;
}
.jkl-tv-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--jkl-tr), filter var(--jkl-tr);
    filter: brightness(.6) saturate(.85);
}
.jkl-tv-thumb-ph {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: rgba(255,255,255,.4);
    background: linear-gradient(135deg, #1f2c3a 0%, #2a3a4c 100%);
}
.jkl-tv-thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 60%);
}
.jkl-tv-thumb-num {
    position: absolute; top: 10px; left: 10px;
    font-family: var(--jkl-serif); font-style: italic;
    font-size: .75rem; font-weight: 600;
    color: var(--jkl-copper);
    background: rgba(0,0,0,.5);
    padding: 3px 8px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.jkl-tv-thumb-title {
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    font-size: .8125rem; font-weight: 500;
    color: var(--jkl-cream);
    text-align: left;
    line-height: 1.3;
}
.jkl-tv-thumb:hover {
    transform: translateY(-3px);
    border-color: rgba(174,200,54,.4);
}
.jkl-tv-thumb:hover img { filter: brightness(.8) saturate(1); }
.jkl-tv-thumb.is-active {
    border-color: var(--jkl-copper);
    box-shadow: 0 0 0 4px rgba(174,200,54,.15), 0 8px 24px rgba(0,0,0,.4);
}
.jkl-tv-thumb.is-active img { filter: brightness(1) saturate(1); }

@media (max-width: 540px) {
    .jkl-tv { padding: var(--jkl-s5) 0; }
    .jkl-tv-screen-wrap { max-width: 100%; }
    .jkl-tv-screen { padding: 6px; border-radius: 14px; }
    .jkl-tv-bezel-top, .jkl-tv-bezel-bot { display: none; }
    .jkl-tv-display { aspect-ratio: 18 / 9; }
    .jkl-tv-play { width: 56px; height: 56px; }
    .jkl-tv-caption { padding: 14px; }
    .jkl-tv-caption-title { font-size: 1rem; }
    .jkl-tv-caption-desc { font-size: .8125rem; }
    .jkl-tv-stand { display: none; }
    .jkl-tv-thumbs { grid-template-columns: 1fr; gap: 10px; }
    .jkl-tv-thumb { aspect-ratio: 16 / 8.6; }
}

/* ============================== HERO - improved ============================== */
.jkl-hero-shell {
    position: relative; z-index: 2;
    display: grid; gap: var(--jkl-s4);
    grid-template-columns: 1fr;
    align-items: end;
}
@media (min-width: 1024px) {
    .jkl-hero-shell {
        grid-template-columns: minmax(0, 1.4fr) 360px;
        gap: var(--jkl-s5);
        align-items: end;
    }
}
.jkl-hero-text { max-width: 760px; }
.jkl-hero-grid-deco {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(0deg, transparent 95%, rgba(174,200,54,.10) 95%),
        linear-gradient(90deg, transparent 95%, rgba(255,255,255,.04) 95%);
    background-size: 80px 80px;
    opacity: .4;
}

/* Hero agent card */
.jkl-hero-agent { width: 100%; }
.jkl-hero-agent-card {
    position: relative;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--jkl-r-lg);
    padding: 18px;
    display: grid; gap: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    overflow: hidden;
}
.jkl-hero-agent-card {
    position: relative;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--jkl-r-lg);
    padding: 18px;
    display: grid; gap: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    overflow: hidden;
    /* Mobile-first: stack photo, info, call button vertically */
    grid-template-columns: 1fr;
    grid-template-areas:
        "photo"
        "info"
        "call";
    align-items: start;
}
.jkl-hero-agent-photo {
    grid-area: photo;
    aspect-ratio: 2 / 3;
    width: 100%;
    min-height: 340px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--jkl-ink);
}
.jkl-hero-agent-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.jkl-hero-agent-photo-mono {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--jkl-copper) 0%, var(--jkl-copper-3) 100%);
    color: var(--jkl-ink);
    font-family: var(--jkl-serif); font-size: 6rem; font-weight: 600;
}
.jkl-hero-agent-shine {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 35%);
    pointer-events: none;
}
.jkl-hero-agent-info { display: flex; flex-direction: column; gap: 2px; }
.jkl-hero-agent-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--jkl-copper-2); margin-bottom: 6px;
}
.jkl-hero-agent-status-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--jkl-copper-2);
    box-shadow: 0 0 8px var(--jkl-copper-2);
    animation: jkl-pulse 2s ease infinite;
}
.jkl-hero-agent-name {
    font-family: var(--jkl-serif); font-weight: 500; font-size: 1.25rem;
    color: var(--jkl-cream); line-height: 1.1;
}
.jkl-hero-agent-role {
    font-size: .75rem; color: rgba(255,255,255,.7);
    letter-spacing: .12em; text-transform: uppercase; font-style: normal;
}
.jkl-hero-agent-call {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 18px;
    background: var(--jkl-copper);
    color: var(--jkl-ink);
    border-radius: var(--jkl-r-pill);
    font-size: .875rem; font-weight: 600;
    transition: background var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-hero-agent-call:hover { background: var(--jkl-copper-3); color: var(--jkl-cream); transform: translateY(-2px); }
@media (max-width: 1023px) {
    /* Make mobile match desktop: allow full-width large portrait with info below */
    .jkl-hero-agent { max-width: none; margin-top: 16px; }
    .jkl-hero-agent-card { grid-template-columns: 1fr; grid-template-areas: "photo" "info" "call"; }
}

/* ============================== BEFORE / AFTER ============================== */
.jkl-ba {
    background: var(--jkl-paper);
    padding: var(--jkl-s6) 0;
}
.jkl-ba-grid {
    display: grid; gap: var(--jkl-s4);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 1024px) {
    .jkl-ba-grid { grid-template-columns: .9fr 1.1fr; gap: var(--jkl-s5); }
}
.jkl-ba-content .jkl-section-title { margin-bottom: var(--jkl-s2); }
.jkl-ba-text {
    color: var(--jkl-text-soft);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: var(--jkl-s3);
}
.jkl-ba-text strong { color: var(--jkl-ink); }

.jkl-ba-carousel {
    position: relative;
    border-radius: var(--jkl-r-lg);
    background: var(--jkl-cream-2);
    padding: 5px;
    border: 2px solid var(--jkl-copper);
    box-shadow: var(--jkl-shadow-md);
}
.jkl-ba-track {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: calc(var(--jkl-r-lg) - 4px);
    overflow: hidden;
}
.jkl-ba-slide {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
}
.jkl-ba-slide.is-active { opacity: 1; pointer-events: auto; }

.jkl-ba-slider { position: relative; width: 100%; height: 100%; user-select: none; cursor: ew-resize; }
.jkl-ba-img { position: absolute; inset: 0; }
.jkl-ba-img img { width: 100%; height: 100%; object-fit: cover; }
.jkl-ba-after { z-index: 1; }
.jkl-ba-before {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    transition: clip-path .08s linear;
    will-change: clip-path;
}
.jkl-ba-handle { transition: left .08s linear; }
.jkl-ba-slider.is-dragging .jkl-ba-before,
.jkl-ba-slider.is-dragging .jkl-ba-handle { transition: none; }
.jkl-ba-label {
    position: absolute; top: 16px;
    padding: 6px 14px;
    background: var(--jkl-ink); color: var(--jkl-cream);
    font-size: .75rem; font-weight: 600; letter-spacing: .14em;
    border-radius: 4px;
    z-index: 5;
}
.jkl-ba-label-before { left: 16px; }
.jkl-ba-label-after  { right: 16px; }

.jkl-ba-handle {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 4px; transform: translateX(-50%);
    background: var(--jkl-copper);
    z-index: 6; pointer-events: none;
}
.jkl-ba-handle-line { display: none; }
.jkl-ba-handle-grip {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--jkl-copper); color: var(--jkl-ink);
    border: 4px solid var(--jkl-cream);
    border-radius: 50%;
    box-shadow: var(--jkl-shadow-md);
    pointer-events: auto;
    cursor: ew-resize;
}
.jkl-ba-tip {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    padding: 6px 16px;
    background: rgba(0,0,0,.6); color: var(--jkl-cream);
    font-size: .75rem; font-weight: 500;
    border-radius: var(--jkl-r-pill);
    backdrop-filter: blur(4px);
    z-index: 5; pointer-events: none;
    white-space: nowrap;
}

.jkl-ba-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 7;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--jkl-cream); color: var(--jkl-ink);
    border: 1px solid var(--jkl-line);
    border-radius: 50%;
    box-shadow: var(--jkl-shadow-md);
    transition: background var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-ba-nav:hover { background: var(--jkl-copper); transform: translateY(-50%) scale(1.05); }
.jkl-ba-nav-prev { left: -10px; }
.jkl-ba-nav-next { right: -10px; }

.jkl-ba-dots {
    position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px;
}
.jkl-ba-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--jkl-line);
    transition: background var(--jkl-tr), transform var(--jkl-tr);
    padding: 0;
}
.jkl-ba-dot.is-active { background: var(--jkl-copper); transform: scale(1.3); }

/* ============================== SOLD-OUT (sticky stack) ============================== */
.jkl-sold {
    background: var(--jkl-cream);
    position: relative;
}

.jkl-sold-stack { /* sticky scroll narrative */ }
.jkl-sold-pane {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}
.jkl-sold-pane-bg,
.jkl-sold-pane > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.jkl-sold-pane-bg,
.jkl-sold-pane > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.jkl-sold-overlay {
    position: absolute; inset: 0;
    z-index: 0;
    background:
        linear-gradient(0deg,   rgba(21,32,43,.92) 0%, rgba(21,32,43,.45) 35%, rgba(21,32,43,.10) 65%, transparent 100%);
}

/* Layout - counter+badge top-left, body bottom-left, all on top of overlay */
.jkl-sold-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: calc(var(--jkl-nav-h) + 24px);
    padding-bottom: var(--jkl-s4);
    color: var(--jkl-cream);
}

.jkl-sold-top {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
}
.jkl-sold-counter {
    font-family: var(--jkl-serif);
    font-style: italic;
    font-size: 1.0625rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.75);
}
.jkl-sold-badge {
    display: inline-block;
    padding: 7px 16px;
    background: var(--jkl-copper);
    color: var(--jkl-ink);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(174,200,54,.35);
}

.jkl-sold-body {
    max-width: 720px;
    display: flex; flex-direction: column;
    gap: 18px;
}
/* "Sprzedane w {duration}" - zielony pill nad nazwą ulicy z ikoną wykresu
   ze strzałką w górę. Czysto i czytelnie: solidny zielony, prosta ikonka
   po lewej, prefix małymi caps, wartość bold. Bez cieni-świecidełek. */
.jkl-sold-duration-hero {
    display: inline-flex; align-items: center; gap: 10px;
    align-self: flex-start;
    padding: 12px 22px;
    background: #10b981;
    color: #fff;
    border-radius: var(--jkl-r-pill);
    font-family: var(--jkl-sans);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.1;
    box-shadow: 0 6px 20px rgba(16,185,129,.30);
    margin-bottom: -2px;
}
.jkl-sold-duration-hero-icon {
    display: inline-flex;
    color: #fff;
    flex-shrink: 0;
}
.jkl-sold-duration-hero-prefix {
    font-weight: 500;
    font-size: .68em;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .92;
}
.jkl-sold-duration-hero-text {
    white-space: nowrap;
    font-weight: 700;
}

.jkl-sold-title {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: clamp(1.875rem, 5vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--jkl-cream);
    text-shadow: 0 4px 24px rgba(0,0,0,.45);
    margin: 0;
}
.jkl-sold-meta {
    display: flex; flex-wrap: wrap; gap: 18px;
    color: rgba(255,255,255,.85);
}
.jkl-sold-meta-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--jkl-r-pill);
    font-size: .875rem; font-weight: 500;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.jkl-sold-meta-item svg { color: var(--jkl-copper-2); flex-shrink: 0; }

.jkl-sold-cta {
    display: inline-flex; align-items: center; gap: 10px;
    align-self: flex-start;
    padding: 14px 24px;
    background: var(--jkl-cream);
    color: var(--jkl-ink);
    font-weight: 600;
    font-size: .9375rem;
    border-radius: var(--jkl-r-pill);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    transition: background var(--jkl-tr), color var(--jkl-tr), transform var(--jkl-tr), gap var(--jkl-tr);
}
.jkl-sold-cta:hover {
    background: var(--jkl-copper);
    color: var(--jkl-ink);
    transform: translateY(-2px);
    gap: 14px;
}

@media (max-width: 720px) {
    .jkl-sold-pane {
        top: var(--jkl-nav-h);
        height: calc(100svh - var(--jkl-nav-h));
        min-height: 460px;
    }
    .jkl-sold-content {
        padding-top: clamp(56px, 12vh, 120px);
        padding-bottom: clamp(56px, 12vh, 120px);
    }
    .jkl-sold-body { gap: 14px; }
    .jkl-sold-meta { gap: 8px; }
    .jkl-sold-meta-item { font-size: .8125rem; padding: 6px 12px; }
    .jkl-sold-cta { width: 100%; justify-content: center; }
    .jkl-sold-duration-hero {
        font-size: 1.15rem;
        padding: 9px 16px;
        gap: 8px;
    }
    .jkl-sold-duration-hero-prefix { font-size: .65em; letter-spacing: .08em; }
}
@media (max-width: 420px) {
    .jkl-sold-content {
        padding-top: clamp(64px, 14vh, 130px);
        padding-bottom: clamp(64px, 14vh, 130px);
    }
    .jkl-sold-counter { font-size: .9375rem; }
    .jkl-sold-badge { font-size: .625rem; padding: 6px 12px; }
}

/* ============================== CONTACT PHOTO ============================== */
.jkl-contact-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--jkl-r-lg);
    overflow: hidden;
    box-shadow: var(--jkl-shadow-md);
    margin-bottom: 8px;
}
.jkl-contact-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.jkl-contact-photo-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 20px 16px;
    background: linear-gradient(0deg, rgba(38,38,42,.92) 0%, rgba(38,38,42,0) 100%);
    color: var(--jkl-cream);
    display: flex; flex-direction: column;
}
.jkl-contact-photo-overlay strong {
    font-family: var(--jkl-serif); font-weight: 500; font-size: 1.125rem; line-height: 1.1;
}
.jkl-contact-photo-overlay em {
    font-style: normal; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--jkl-copper-2); margin-top: 4px;
}

/* ============================== SECTION TRANSITIONS - pair-aware ==============================
   Use adjacent-sibling combinators to apply real bg-color gradients only where a
   dark↔light boundary actually exists. The overlay sits OUTSIDE the dark section
   (negative top/bottom + matching translucent gradient of the section's own dark
   color), so the light section appears to bleed into the dark - no hard cut. */

.jkl-hero,
.jkl-tv,
.jkl-stats,
.jkl-city,
.jkl-sold,
.jkl-cta-banner,
.jkl-footer {
    position: relative;
    isolation: isolate;
}

/* Reset any old fade pseudo-elements on dark sections - we redo them per pair. */
.jkl-tv::before, .jkl-stats::before,
.jkl-city::before, .jkl-sold::before, .jkl-cta-banner::before,
.jkl-tv::after,  .jkl-stats::after,
.jkl-city::after, .jkl-sold::after, .jkl-cta-banner::after { content: none; }

/* ----- LIGHT → DARK : add a soft 60px gradient at the BOTTOM of the light
   section, fading from transparent to the dark section's bg color. The dark
   section then begins flush with no perceptible cut. ----- */
.jkl-path,
.jkl-reel,
.jkl-process,
.jkl-contact {
    position: relative;
}
.jkl-reel:has(+ .jkl-stats)::after,
.jkl-contact:has(+ .jkl-footer)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent 0%, var(--jkl-ink) 100%);
    pointer-events: none;
    z-index: 1;
}

/* path → TV: premium hand-off - deeper fade, cinematic feel.
   The light section's bottom subtly gradients to dark over a long distance,
   AND the dark section's TOP gets a soft cream halo so the boundary feels
   like the rooms blend rather than meet. Plus a centered copper spotlight
   anchors the eye at the seam. */
.jkl-path:has(+ .jkl-tv) {
    padding-bottom: calc(var(--jkl-s6) + 40px);
}

.jkl-tv:has(.jkl-path + &)::before,
.jkl-path + .jkl-tv::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 120px;
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(238,240,246,.10) 0%, transparent 70%),
        linear-gradient(180deg, rgba(238,240,246,.05) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Tiny copper spotlight at the seam to lock the two sections together. */
.jkl-path:has(+ .jkl-tv) .jkl-container {
    position: relative;
}
.jkl-path:has(+ .jkl-tv) .jkl-container::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -56px;
    transform: translateX(-50%);
    width: 1px; height: 56px;
    background: linear-gradient(180deg, transparent 0%, var(--jkl-copper) 100%);
    z-index: 2;
    pointer-events: none;
}

/* ----- DARK → LIGHT : same trick on the dark section's BOTTOM, fading from
   transparent to the next light section's bg color. ----- */
.jkl-tv:has(+ .jkl-reel)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent 0%, var(--jkl-cream) 100%);
    pointer-events: none; z-index: 1;
}
.jkl-sold:has(+ .jkl-testimonials)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent 0%, var(--jkl-cream-2) 100%);
    pointer-events: none; z-index: 1;
}

/* Keep section content above the fade overlays. */
.jkl-tv > *:not(.jkl-city-overlay):not(.jkl-city-grain):not(.jkl-city-bg):not(picture),
.jkl-stats > *:not(.jkl-city-overlay):not(.jkl-city-grain):not(.jkl-city-bg):not(picture),
.jkl-city > *:not(.jkl-city-overlay):not(.jkl-city-grain):not(.jkl-city-bg):not(picture),
.jkl-sold > *:not(.jkl-city-overlay):not(.jkl-city-grain):not(.jkl-city-bg):not(picture),
.jkl-cta-banner > *:not(.jkl-city-overlay):not(.jkl-city-grain):not(.jkl-city-bg):not(picture) { position: relative; z-index: 2; }

/* ----- Fallback for browsers without :has() support ----- */
@supports not selector(:has(+ *)) {
    .jkl-path, .jkl-reel, .jkl-process, .jkl-contact,
    .jkl-tv, .jkl-city, .jkl-sold, .jkl-hero { position: relative; }
    .jkl-path::after,
    .jkl-reel::after,
    .jkl-process::after,
    .jkl-contact::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0;
        height: 80px;
        background: linear-gradient(180deg, transparent, var(--jkl-ink));
        pointer-events: none; z-index: 1; opacity: .35;
    }
}

/* Subtle copper accent on light sections that follow dark ones - brand tie. */
.jkl-reel:not(:has(+ .jkl-stats))::before,
.jkl-about::before,
.jkl-testimonials::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 18vw, 240px);
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--jkl-copper) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: .55;
    border-radius: 999px;
}

/* ============================== FOOTER - bigger, like main theme ============================== */
.jkl-footer { padding: 0 0 var(--jkl-s2); }

.jkl-footer-band {
    background:
        radial-gradient(circle at 30% 50%, rgba(174,200,54,.20) 0%, transparent 50%),
        radial-gradient(circle at 90% 30%, rgba(174,200,54,.10) 0%, transparent 50%),
        var(--jkl-ink-2);
    padding: var(--jkl-s4) 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
}
.jkl-footer-band::before {
    content: '';
    position: absolute; inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--jkl-copper) 50%, transparent 100%);
    opacity: .4;
}
.jkl-footer-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.jkl-footer-band-eyebrow {
    display: block;
    font-size: .75rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--jkl-copper-2);
    margin-bottom: 6px;
}
.jkl-footer-band-title {
    display: block;
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--jkl-cream);
    line-height: 1.15;
}
.jkl-footer-band-cta { padding: 16px 28px; }
@media (max-width: 720px) {
    .jkl-ba { padding: var(--jkl-s5) 0; }
    .jkl-ba-grid { gap: var(--jkl-s3); }
    .jkl-ba-content .jkl-section-title { margin-bottom: 12px; }
    .jkl-ba-text { font-size: .95rem; line-height: 1.6; margin-bottom: 18px; }
    .jkl-ba-carousel { padding: 4px; }
    .jkl-ba-track { aspect-ratio: 4 / 5; }
    .jkl-ba-label {
        top: 12px;
        font-size: .68rem;
        padding: 5px 10px;
    }
    .jkl-ba-label-before { left: 12px; }
    .jkl-ba-label-after  { right: 12px; }
    .jkl-ba-handle { width: 3px; }
    .jkl-ba-handle-grip { width: 34px; height: 34px; border-width: 3px; }
    .jkl-ba-tip {
        bottom: 12px;
        padding: 5px 10px;
        font-size: .68rem;
        line-height: 1.25;
        white-space: normal;
        max-width: calc(100% - 24px);
        text-align: center;
    }
    .jkl-ba-nav {
        width: 34px; height: 34px;
    }
    .jkl-ba-nav-prev { left: -6px; }
    .jkl-ba-nav-next { right: -6px; }

    .jkl-tv { padding: var(--jkl-s5) 0; }
    .jkl-footer-band-cta { width: 100%; }
}

.jkl-footer .jkl-container > .jkl-footer-grid { padding: var(--jkl-s6) 0 var(--jkl-s5); }
.jkl-footer { padding-bottom: var(--jkl-s3); }
.jkl-footer-grid {
    display: grid; gap: var(--jkl-s4);
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .jkl-footer-grid { grid-template-columns: 1fr 1fr; }
    .jkl-footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .jkl-footer-grid { grid-template-columns: 1.5fr 1fr 1.15fr 1.15fr 1fr; }
    .jkl-footer-brand { grid-column: auto; }
}
.jkl-footer-list a[aria-current="page"] { color: var(--jkl-copper-2); }

.jkl-footer-logo {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.jkl-footer-logo img,
.jkl-footer-logo picture,
.jkl-footer-logo-img { max-height: 96px; width: auto; height: auto; display: block; }
.jkl-footer-logo picture img { max-height: 100%; width: auto; height: auto; }
@media (max-width: 540px) {
    .jkl-footer-logo img,
    .jkl-footer-logo picture,
    .jkl-footer-logo-img { max-height: 72px; }
}

/* Big circular social tiles + label below - mirrors main Joanna theme */
.jkl-footer-socials {
    display: flex; flex-wrap: wrap; gap: 22px;
    margin-top: 8px;
}
.jkl-social-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.jkl-social-link {
    width: 84px; height: 84px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06);
    color: var(--jkl-cream);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    transition: background var(--jkl-tr), border-color var(--jkl-tr), transform var(--jkl-tr), color var(--jkl-tr), box-shadow var(--jkl-tr);
}
.jkl-social-link svg { color: var(--jkl-copper-2); transition: color var(--jkl-tr); }
.jkl-social-link:hover {
    background: var(--jkl-copper);
    color: var(--jkl-ink);
    border-color: var(--jkl-copper);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(174,200,54,.35);
}
.jkl-social-link:hover svg { color: var(--jkl-ink); }

/* Brand SVGs (Instagram, Facebook, TikTok) - keep brand colors at rest,
   tint to ink on hover so the lime hover bg stays readable. */
.jkl-social-svg { display: grid; place-items: center; width: 44px; height: 44px; }
.jkl-social-svg svg { width: 100%; height: 100%; display: block; transition: filter var(--jkl-tr); }
/* Lime SVGs flip to dark ink on hover so they stay readable when the lime tile bg appears. */
.jkl-social-link:not(.jkl-social-facebook):hover .jkl-social-svg svg {
    filter: brightness(0) saturate(100%);
}
.jkl-social-facebook:hover .jkl-social-svg svg {
    filter: none;
}
.jkl-social-name {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(255,255,255,.65);
    transition: color var(--jkl-tr);
}
.jkl-social-item:hover .jkl-social-name { color: var(--jkl-cream); }

.jkl-footer-hours { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.jkl-footer-hours li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    color: rgba(255,255,255,.7); font-size: .875rem;
}
.jkl-footer-hours li strong { color: var(--jkl-cream); font-weight: 500; }
.jkl-footer-mini-cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--jkl-copper-2); font-size: .8125rem; font-weight: 600;
    transition: gap var(--jkl-tr), color var(--jkl-tr);
}
.jkl-footer-mini-cta:hover { color: var(--jkl-cream); gap: 12px; }

/* ============================== MID-PAGE CTA BANNER ============================== */
.jkl-cta-banner {
    position: relative;
    padding: var(--jkl-s4) 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(174,200,54,.20) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(174,200,54,.10) 0%, transparent 50%),
        var(--jkl-ink);
    color: var(--jkl-cream);
    overflow: hidden;
    isolation: isolate;
}
.jkl-cta-banner::before, .jkl-cta-banner::after {
    content: '';
    position: absolute; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--jkl-copper) 50%, transparent 100%);
    opacity: .35; pointer-events: none;
}
.jkl-cta-banner::before { top: 0; }
.jkl-cta-banner::after  { bottom: 0; }
.jkl-cta-banner-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.jkl-cta-banner-text { display: flex; flex-direction: column; }
.jkl-cta-banner-eyebrow {
    font-size: .75rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--jkl-copper-2); margin-bottom: 8px;
}
.jkl-cta-banner-title {
    font-family: var(--jkl-serif); font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    color: var(--jkl-cream);
}
.jkl-cta-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
    .jkl-cta-banner-inner { flex-direction: column; align-items: flex-start; }
    .jkl-cta-banner-actions { width: 100%; }
    .jkl-cta-banner-actions .jkl-btn { width: 100%; }
}

/* ============================== MOBILE TUNING ============================== */
@media (max-width: 767px) {
    :root {
        --jkl-s4: 36px;
        --jkl-s5: 56px;
        --jkl-s6: 72px;
        --jkl-s7: 96px;
    }

    .jkl-container { padding: 0 16px; }
    .jkl-section-head { margin-bottom: var(--jkl-s3); }
    .jkl-section-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .jkl-section-sub { font-size: .9375rem; line-height: 1.55; }

    .jkl-hero {
        height: auto;
        min-height: calc(100svh - var(--jkl-nav-h));
        max-height: none;
        padding: calc(var(--jkl-nav-h) + 12px) 0 28px;
    }
    .jkl-hero-shell { gap: 18px; }
    .jkl-hero-text { max-width: none; }
    .jkl-hero-tag {
        font-size: .625rem;
        letter-spacing: .12em;
        padding: 6px 10px;
        margin-bottom: 12px;
    }
    .jkl-hero-title {
        font-size: clamp(1.75rem, 9vw, 2.6rem);
        line-height: 1;
        margin-bottom: 12px;
    }
    .jkl-hero-title-top { font-size: .52em; margin-bottom: 8px; }
    .jkl-hero-subtitle { max-width: none; margin-bottom: 14px; font-size: 1.35rem; line-height: 1.25; }
    .jkl-hero-cta { margin-bottom: 14px; }
    .jkl-hero-highlights {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 12px;
        margin-bottom: 12px;
    }
    .jkl-hero-highlight { flex-direction: row; align-items: baseline; gap: 8px; }
    .jkl-hero-highlight-value { font-size: 1.1rem; min-width: 54px; }
    .jkl-hero-highlight-label { font-size: .72rem; }
    .jkl-hero-meta { display: none; }
    .jkl-hero-agent { max-width: 100%; }
    .jkl-hero-agent-card {
        padding: 12px;
        gap: 10px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "info"
            "call";
        align-items: start;
    }
    .jkl-hero-agent-photo {
        grid-area: photo;
        aspect-ratio: 3 / 4;
        width: 100%;
        border-radius: 14px;
    }
    .jkl-hero-agent-info { grid-area: info; gap: 0; }
    .jkl-hero-agent-photo-mono { font-size: 3.25rem; }
    .jkl-hero-agent-name { font-size: 1.1rem; }
    .jkl-hero-agent-role { font-size: .68rem; line-height: 1.2; }
    .jkl-hero-agent-call { grid-area: call; width: 100%; padding: 12px 16px; font-size: .875rem; }
    .jkl-hero-scroll { display: none; }

    .jkl-testimonials-grid,
    .jkl-contact-grid,
    .jkl-about-grid,
    .jkl-process-layout,
    .jkl-ba-grid { grid-template-columns: 1fr; }

    .jkl-stats-grid-bare { grid-template-columns: 1fr; gap: 14px; }
    .jkl-stats-grid-bare .jkl-stats-item,
    .jkl-testimonial,
    .jkl-contact-form,
    .jkl-faq-q { padding: 20px 18px; }

    .jkl-ai-phones { padding-top: 0; }
    .jkl-ai-phones-viewport { min-height: 330px; padding-top: 12px; }
    .jkl-ai-phones-track { gap: 14px; }
    .jkl-ai-phone { width: 170px; flex-basis: 170px; height: 302px; }
    .jkl-ai-phones-controls { gap: 12px; flex-wrap: wrap; }

    .jkl-tv { padding: var(--jkl-s6) 0 var(--jkl-s5); }
    .jkl-tv-lead { font-size: .9375rem; margin-bottom: var(--jkl-s3); }
    .jkl-tv-screen { padding: 10px; border-radius: 18px; }
    .jkl-tv-screen-wrap { max-width: 100%; }
    .jkl-tv-display { aspect-ratio: 4 / 5; }
    .jkl-tv-stand-base { width: 120px; }
    .jkl-tv-thumbs { grid-template-columns: 1fr; }
    .jkl-tv-thumb-title { font-size: .875rem; }

    .jkl-ba { padding: var(--jkl-s5) 0; }
    .jkl-ba-grid { gap: var(--jkl-s3); }
    .jkl-ba-carousel { padding: 4px; }
    .jkl-ba-track { aspect-ratio: 3 / 4; }
    .jkl-ba-label { top: 12px; }
    .jkl-ba-tip { bottom: 12px; white-space: normal; text-align: center; }
    .jkl-ba-nav { width: 36px; height: 36px; }
    .jkl-ba-nav-prev { left: -6px; }
    .jkl-ba-nav-next { right: -6px; }

    .jkl-about { padding: var(--jkl-s6) 0; }
    /* Quote drops into normal flow below the photo on mobile. A fixed aspect-ratio
       on the container kept its box height frozen, so the quote overflowed and
       overlapped the heading below. Let the box grow; the image keeps its own ratio. */
    .jkl-about-photo { max-width: 100%; aspect-ratio: auto; }
    .jkl-about-photo img, .jkl-about-photo-ph,
    .jkl-about-photo-img, picture.jkl-about-photo-img { aspect-ratio: 3 / 4; height: auto; }
    .jkl-about-quote { position: static; max-width: 100%; margin-top: 24px; }
    .jkl-about-features { grid-template-columns: 1fr; }

    .jkl-process-step {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 22px 0;
    }
    .jkl-process-step-num { font-size: 2rem; }

    .jkl-contact { padding: var(--jkl-s6) 0; }
    .jkl-contact-info { gap: 12px; }
    .jkl-contact-card { padding: 16px 18px; }
    .jkl-contact-form { padding: 22px 18px; }
    .jkl-form-row textarea,
    .jkl-contact-form .wpcf7-textarea { min-height: 120px; }

    .jkl-footer { padding: var(--jkl-s4) 0 var(--jkl-s2); }
    .jkl-footer .jkl-container > .jkl-footer-grid { padding: var(--jkl-s5) 0 var(--jkl-s4); }
    .jkl-footer-grid { gap: var(--jkl-s3); text-align: center; }
    .jkl-footer-brand,
    .jkl-footer-col { display: flex; flex-direction: column; align-items: center; }
    .jkl-footer-logo { justify-content: center; }
    .jkl-footer-contact { width: 100%; }
    .jkl-footer-contact li { justify-content: center; }
    .jkl-footer-socials { gap: 14px; justify-content: center; }
    .jkl-footer-bar { justify-content: center; text-align: center; }
    .jkl-footer-bar-right { width: 100%; justify-content: center; }
    .jkl-social-link { width: 68px; height: 68px; }
    .jkl-social-svg { width: 36px; height: 36px; }
    .jkl-footer-bar { margin-top: var(--jkl-s3); }
    .jkl-footer-bar-right { width: 100%; gap: 10px; }
    .jkl-footer-bar-right a { width: 100%; }

    .jkl-float { right: 10px; bottom: 10px; }
    .jkl-float-frame { width: 88px; height: 156px; }
    .jkl-float-bubble { right: 98px; bottom: 54px; }
}

@media (max-width: 420px) {
    .jkl-hero { padding-top: calc(var(--jkl-nav-h) + 8px); }
    .jkl-hero-title { font-size: clamp(1.55rem, 8.8vw, 2.25rem); }
    .jkl-hero-agent-card { grid-template-columns: 1fr; grid-template-areas: "photo" "info" "call"; }
    .jkl-hero-agent-name { font-size: 1rem; }
    .jkl-hero-agent-call { padding: 12px 16px; }
    .jkl-footer-socials { justify-content: space-between; }
    .jkl-social-item { flex: 1 1 calc(33.333% - 10px); }
    .jkl-footer-contact li { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
    .jkl-footer-c-body { align-items: center; }
}

/* ============================== FINAL RESPONSIVE POLISH ============================== */

/* Tablet (≤960) - make tight 2-col grids stack so nothing overflows */
@media (max-width: 960px) {
    .jkl-about-grid,
    .jkl-process-layout,
    .jkl-contact-grid {
        grid-template-columns: 1fr !important;
        gap: var(--jkl-s4);
    }
    .jkl-process-rail-card { position: static !important; top: auto; }
    .jkl-hero-shell { grid-template-columns: 1fr !important; gap: 32px; }
    .jkl-hero-agent { max-width: 320px; }
    .jkl-tv-thumbs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    /* Whenever the about grid stacks, the quote flows under the photo instead of
       floating absolutely over the heading - and the photo box grows to fit it. */
    .jkl-about-photo { aspect-ratio: auto; }
    .jkl-about-photo img, .jkl-about-photo-ph,
    .jkl-about-photo-img, picture.jkl-about-photo-img { aspect-ratio: 3 / 4; height: auto; }
    .jkl-about-quote { position: static; left: auto; bottom: auto; max-width: 100%; margin-top: 24px; }
}

/* Small mobile (≤540) - tighten typography, padding, controls */
@media (max-width: 540px) {
    .jkl-section-title { font-size: clamp(1.625rem, 6vw, 2.125rem); }
    .jkl-section-sub { font-size: .9375rem; }
    .jkl-eyebrow { font-size: .6875rem; letter-spacing: .14em; }

    .jkl-testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    .jkl-process-step { grid-template-columns: 56px 1fr; gap: 14px; padding: 22px 0; }
    .jkl-process-step-num { font-size: 1.875rem; }
    .jkl-process-step-title { font-size: 1.25rem; }

    .jkl-footer-grid { grid-template-columns: 1fr !important; }
    .jkl-footer-socials { gap: 14px; }
    .jkl-social-link { width: 64px; height: 64px; }
    .jkl-social-svg { width: 32px; height: 32px; }

    .jkl-cta-banner-actions .jkl-btn { width: 100%; }

    .jkl-tv-thumbs { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* Make sure absolute floating widget never covers a CTA at the bottom */
    .jkl-float { right: 12px; bottom: 12px; }
}

/* Tiny mobile (≤380) */
@media (max-width: 380px) {
    .jkl-container { padding: 0 16px; }
    .jkl-btn { padding: 12px 18px; font-size: .875rem; }
    .jkl-btn-lg { padding: 14px 22px; font-size: .9375rem; }
}

/* Word-wrap safety for very long words in any heading/body - no horizontal scroll */
.jkl-section-title,
.jkl-hero-title,
.jkl-sold-title,
.jkl-stats-num,
.jkl-footer-c-body a,
.jkl-contact-card-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================== CONTACT FORM 7 - match theme ============================== */
/* Tame default WPCF7 wrappers and tighten layout */
.wpcf7 { max-width: 100%; }
.wpcf7-form p { margin: 0; }
.wpcf7-form .screen-reader-response { display: none !important; }
.wpcf7-form-control-wrap { display: block; }

.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.form-row > label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--jkl-ink);
    letter-spacing: .01em;
}

/* Inputs */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 13px 16px;
    font-size: .9375rem;
    color: var(--jkl-ink);
    background: var(--jkl-cream);
    border: 1px solid var(--jkl-line);
    border-radius: var(--jkl-r-sm);
    line-height: 1.4;
    transition: border-color var(--jkl-tr), background var(--jkl-tr), box-shadow var(--jkl-tr);
    font-family: inherit;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--jkl-text-mute); }

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    background: var(--jkl-paper);
    border-color: var(--jkl-copper);
    box-shadow: 0 0 0 4px rgba(174,200,54,.15);
}

.form-row textarea { resize: vertical; min-height: 120px; }

/* Consent checkbox row */
.form-row.form-consent {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
}
.form-row.form-consent .wpcf7-form-control-wrap { flex: 1; }
.form-row.form-consent .wpcf7-list-item {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0 !important;
}
.form-row.form-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--jkl-copper);
    cursor: pointer;
}
.form-row.form-consent .wpcf7-list-item-label {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--jkl-text-soft);
}
.form-row.form-consent .wpcf7-list-item-label::before { display: none; }

/* Submit button */
.form-row.form-submit {
    margin-top: 8px;
}
.form-row.form-submit input[type="submit"] {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 100%;
    padding: 16px 28px;
    background: var(--jkl-copper);
    color: var(--jkl-ink);
    border: 0;
    border-radius: var(--jkl-r-pill);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background var(--jkl-tr), color var(--jkl-tr), transform var(--jkl-tr), box-shadow var(--jkl-tr);
    font-family: inherit;
}
.form-row.form-submit input[type="submit"]:hover:not(:disabled) {
    background: var(--jkl-copper-3);
    color: var(--jkl-cream);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(174,200,54,.35);
}
.form-row.form-submit input[type="submit"]:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

/* AJAX loader spinner inline with submit button */
.form-row.form-submit .wpcf7-spinner {
    margin-left: 12px;
    background-color: var(--jkl-copper);
}

/* Validation states */
.form-row .wpcf7-not-valid {
    border-color: #d9534f !important;
    background: #fff5f5 !important;
}
.form-row .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: #d9534f;
    font-weight: 500;
}

/* Response messages (success / error / validation) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #d9534f;
    background: #fff5f5;
    color: #842029;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--jkl-copper-3);
    background: rgba(174,200,54,.10);
    color: var(--jkl-ink);
}
.wpcf7-response-output {
    margin: 16px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: var(--jkl-r-md) !important;
    border-width: 1px !important;
    font-size: .875rem;
    font-weight: 500;
}

/* =========================================================================
   Imagify <picture> wrapper integration
   Imagify wraps every <img> in <picture> and moves the class up. CSS that
   relied on the class being on <img> stops working unless duplicated here.
   ========================================================================= */

/* A2 - block + cover (full-bleed bg images filling positioned wrappers) */
picture.jkl-hero-img,
picture.jkl-sold-pane-bg,
picture.jkl-city-bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
picture.jkl-hero-img img,
picture.jkl-sold-pane-bg img,
picture.jkl-city-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* A2 - cards/panels with aspect-ratio constrained wrappers (cover) */
picture.jkl-process-step-img,
picture.jkl-ba-pair-img,
picture.jkl-tv-thumb-img,
picture.jkl-tv-poster,
picture.jkl-ai-phone-img,
picture.jkl-reel-poster,
picture.jkl-hero-agent-photo-img,
picture.jkl-about-photo-img,
picture.jkl-contact-photo-img,
picture.jkl-process-rail-photo-img { display: block; width: 100%; height: 100%; }
picture.jkl-process-step-img img,
picture.jkl-ba-pair-img img,
picture.jkl-tv-thumb-img img,
picture.jkl-tv-poster img,
picture.jkl-ai-phone-img img,
picture.jkl-reel-poster img,
picture.jkl-tmv-poster img,
picture.jkl-tmv-switch-img img,
picture.jkl-vsl-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
picture.jkl-hero-agent-photo-img img,
picture.jkl-about-photo-img img,
picture.jkl-contact-photo-img img,
picture.jkl-process-rail-photo-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* C - inline logos (height set, width auto) */
picture.jkl-logo-img,
picture.jkl-footer-logo-img { display: inline-block; width: auto; height: auto; }
picture.jkl-logo-img img,
picture.jkl-footer-logo-img img { display: block; width: auto; height: 100%; max-height: inherit; }

/* Aspect-ratio safety net (works whether wrapped or not) */
.jkl-about-photo-img,    picture.jkl-about-photo-img    { aspect-ratio: 3 / 4; }
.jkl-contact-photo-img,  picture.jkl-contact-photo-img  { aspect-ratio: 3 / 4; }
.jkl-process-rail-photo-img, picture.jkl-process-rail-photo-img { aspect-ratio: 3 / 4; }
.jkl-process-step-img,   picture.jkl-process-step-img   { aspect-ratio: 4 / 3; }
.jkl-ba-pair-img,        picture.jkl-ba-pair-img        { aspect-ratio: 16 / 11; }
.jkl-tv-thumb-img,       picture.jkl-tv-thumb-img       { aspect-ratio: 16 / 9; }

/* ============================== VSL (wideo pod hero) ============================== */
.jkl-vsl { background: var(--jkl-cream); padding: var(--jkl-s6) 0; }
.jkl-vsl-stage { max-width: 980px; margin: var(--jkl-s4) auto 0; }
.jkl-vsl-player {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--jkl-r-lg); overflow: hidden;
    background: linear-gradient(135deg, var(--jkl-ink-2), var(--jkl-ink-3));
    box-shadow: var(--jkl-shadow-md);
}
.jkl-vsl-poster, .jkl-vsl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jkl-vsl-video { z-index: 1; display: none; }
.jkl-vsl-player.is-playing .jkl-vsl-video,
.jkl-vsl-player.is-loaded  .jkl-vsl-video { display: block; }
.jkl-vsl-poster { z-index: 2; transition: opacity .3s ease; }
/* Poster only speeds up the initial load - once played, keep the paused frame. */
.jkl-vsl-player.is-playing .jkl-vsl-poster,
.jkl-vsl-player.is-loaded  .jkl-vsl-poster { opacity: 0; pointer-events: none; }
.jkl-vsl-play {
    position: absolute; inset: 0; margin: auto; z-index: 3;
    width: 84px; height: 84px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(174,200,54,.95); color: var(--jkl-ink);
    box-shadow: 0 12px 32px rgba(174,200,54,.35);
    transition: transform var(--jkl-tr), opacity var(--jkl-tr), background var(--jkl-tr);
}
.jkl-vsl-play:hover { transform: scale(1.08); background: var(--jkl-copper-2); }
.jkl-vsl-player.is-playing .jkl-vsl-play { opacity: 0; pointer-events: none; }
.jkl-vsl-play-icon { display: grid; place-items: center; padding-left: 4px; }
@media (max-width: 540px) { .jkl-vsl-play { width: 64px; height: 64px; } }

/* ============================== Opinie - marquee tekstowy ============================== */
.jkl-tm-marquee { position: relative; margin-top: var(--jkl-s4); }
.jkl-tm-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.jkl-tm-track { display: flex; gap: var(--jkl-s2); width: max-content; will-change: transform; }
.jkl-tm-card {
    flex: 0 0 340px; max-width: 340px;
    background: var(--jkl-paper); border-radius: var(--jkl-r-lg);
    padding: 26px 24px; border: 1px solid rgba(0,0,0,.04);
    box-shadow: var(--jkl-shadow-sm);
    display: flex; flex-direction: column;
}
@media (max-width: 540px) { .jkl-tm-card { flex-basis: 82vw; max-width: 82vw; } }
.jkl-tm-controls { display: flex; justify-content: center; gap: 12px; margin-top: var(--jkl-s3); }
.jkl-tm-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--jkl-paper); color: var(--jkl-ink);
    border: 1px solid var(--jkl-line); box-shadow: var(--jkl-shadow-sm);
    transition: border-color var(--jkl-tr), color var(--jkl-tr), transform var(--jkl-tr);
}
.jkl-tm-arrow:hover { border-color: var(--jkl-copper); color: var(--jkl-copper-3); transform: scale(1.06); }

/* ============================== Opinie - kreska + telefony wideo ============================== */
.jkl-tm-divider {
    position: relative; height: 1px; max-width: 680px;
    margin: var(--jkl-s2) auto var(--jkl-s2);
    background: linear-gradient(90deg, transparent, var(--jkl-line), transparent);
}
.jkl-tm-divider-dot {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--jkl-copper); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 6px var(--jkl-cream-2);
}
.jkl-tmv-title {
    text-align: center; font-family: var(--jkl-serif); font-weight: 500;
    font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--jkl-ink);
    margin-bottom: var(--jkl-s4);
}
.jkl-tmv-title em { font-style: italic; color: var(--jkl-copper-3); }
.jkl-tmv-track {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--jkl-s5);
}
.jkl-tmv-phone { flex: 0 1 300px; max-width: 300px; display: flex; flex-direction: column; align-items: center; }
.jkl-tmv-frame {
    position: relative; width: 100%; aspect-ratio: 9 / 16;
    border-radius: 26px; overflow: hidden; cursor: pointer;
    background: linear-gradient(135deg, var(--jkl-ink-2), var(--jkl-ink-3));
    border: 3px solid var(--jkl-ink-3); box-shadow: var(--jkl-shadow-md);
}
.jkl-tmv-notch {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 84px; height: 18px; border-radius: 0 0 12px 12px;
    background: var(--jkl-ink-3); z-index: 4;
}
.jkl-tmv-video, .jkl-tmv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jkl-tmv-video { z-index: 1; }
.jkl-tmv-poster { z-index: 2; transition: opacity .3s ease; }
.jkl-tmv-phone.is-playing .jkl-tmv-poster { opacity: 0; pointer-events: none; }
/* Once played, keep the paused frame (no poster comeback) - like the AI reels. */
.jkl-tmv-phone.is-loaded .jkl-tmv-poster { opacity: 0; pointer-events: none; }
.jkl-tmv-ph {
    position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
    color: var(--jkl-copper-2);
}
.jkl-tmv-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0,0,0,.5); color: #fff;
    transition: opacity .12s ease, transform .12s ease, background .12s ease;
}
.jkl-tmv-play:hover { background: rgba(0,0,0,.65); transform: translate(-50%, -50%) scale(1.05); }
.jkl-tmv-play-icon { line-height: 0; display: block; }
.jkl-tmv-play .jkl-pause-icon { display: none; }
.jkl-tmv-phone.is-playing .jkl-tmv-play { opacity: 0; }
.jkl-tmv-phone.is-playing:hover .jkl-tmv-play { opacity: 1; }
.jkl-tmv-phone.is-playing .jkl-tmv-play .jkl-play-icon { display: none; }
.jkl-tmv-phone.is-playing .jkl-tmv-play .jkl-pause-icon { display: block; }
.jkl-tmv-meta { margin-top: 14px; text-align: center; }
.jkl-tmv-name { display: block; font-weight: 600; color: var(--jkl-ink); font-size: .95rem; }
.jkl-tmv-role { display: block; font-size: .8125rem; color: var(--jkl-text-soft); }

/* Dwa klipy w telefonie (wypowiedź ↔ pełny wywiad) - pokazuj tylko aktywny */
.jkl-tmv-video[data-clip="full"], .jkl-tmv-poster[data-clip="full"] { display: none; }
.jkl-tmv-phone.show-full .jkl-tmv-video[data-clip="short"],
.jkl-tmv-phone.show-full .jkl-tmv-poster[data-clip="short"] { display: none; }
.jkl-tmv-phone.show-full .jkl-tmv-video[data-clip="full"]  { display: block; }
.jkl-tmv-phone.show-full .jkl-tmv-poster[data-clip="full"] { display: block; }

/* Przełącznik = mini-telefon + podpis „Zobacz pełny wywiad" w rogu kadru */
.jkl-tmv-switch {
    position: absolute; bottom: 12px; right: 12px; z-index: 6;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 5px; border-radius: 999px;
    background: rgba(0,0,0,.55); color: #fff;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    cursor: pointer; max-width: calc(100% - 24px);
    transition: background .15s ease, transform .15s ease;
}
.jkl-tmv-switch:hover { background: rgba(0,0,0,.72); transform: translateY(-1px); }
.jkl-tmv-phone:first-child .jkl-tmv-switch { right: auto; left: 12px; }
.jkl-tmv-switch-thumb {
    flex: 0 0 auto; width: 26px; height: 42px; border-radius: 7px; overflow: hidden;
    background: var(--jkl-ink-3); border: 1.5px solid rgba(255,255,255,.55);
}
.jkl-tmv-switch-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jkl-tmv-switch-label { font-size: .72rem; font-weight: 600; line-height: 1.15; }

/* Telefony-opinie → slider na mobile (natywny swipe + snap) */
@media (max-width: 720px) {
    .jkl-tmv-track {
        display: flex; grid-template-columns: none; gap: var(--jkl-s3);
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 4px 14px; scrollbar-width: none;
    }
    .jkl-tmv-track::-webkit-scrollbar { display: none; }
    .jkl-tmv-phone { flex: 0 0 64%; max-width: 64%; scroll-snap-align: center; }
}
@media (max-width: 480px) { .jkl-tmv-phone { flex-basis: 76%; max-width: 76%; } }

/* =========================================================================
   PODSTRONY TEKSTOWE (page.php) - polityka prywatności, RODO, regulamin.
   Granatowa belka z tytułem, przyklejony spis treści, kolumna tekstu
   o czytelnej szerokości (~68 znaków w wierszu).
   ========================================================================= */
.jkl-page { background: var(--jkl-cream); }

.jkl-page-head {
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: var(--jkl-cream);
    background:
        radial-gradient(ellipse 80% 90% at 78% 20%, rgba(174,200,54,.22) 0%, transparent 60%),
        linear-gradient(158deg, #34343a 0%, #26262a 48%, #1a1a1e 100%);
    padding: calc(var(--jkl-nav-h) + 64px) 0 64px;
}
/* Delikatna złota linia na styku belki z treścią. */
.jkl-page-head::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(174,200,54,.6) 35%, rgba(174,200,54,.6) 65%, transparent 100%);
}
.jkl-page-head-decor {
    position: absolute; z-index: -1;
    width: 420px; height: 420px; border-radius: 50%;
    background: var(--jkl-copper);
    filter: blur(90px); opacity: .16;
    top: -160px; right: -120px;
}

.jkl-page-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .8125rem;
    color: rgba(248,243,234,.6);
    margin-bottom: 18px;
}
.jkl-page-crumbs a { color: var(--jkl-copper-2); }
.jkl-page-crumbs a:hover { color: var(--jkl-cream); }
.jkl-page-crumbs-current { color: rgba(248,243,234,.85); }

.jkl-page-title {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 20ch;
}
.jkl-page-meta {
    margin-top: 16px;
    font-size: .8125rem;
    color: rgba(248,243,234,.6);
}

/* ---------- Układ: spis treści + tekst ---------- */
.jkl-page-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--jkl-s4);
    padding-top: var(--jkl-s5);
    padding-bottom: var(--jkl-s5);
    align-items: start;
}
@media (min-width: 1024px) {
    .jkl-page-body { grid-template-columns: 264px minmax(0, 1fr); gap: var(--jkl-s6); }
    .jkl-page-body--solo { grid-template-columns: minmax(0, 1fr); }
}

.jkl-page-toc {
    background: var(--jkl-cream-2);
    border: 1px solid rgba(174,200,54,.18);
    border-radius: var(--jkl-r-lg);
    padding: 22px 24px;
}
@media (min-width: 1024px) and (min-height: 700px) {
    .jkl-page-toc { position: sticky; top: calc(var(--jkl-nav-h) + 24px); max-height: calc(100vh - var(--jkl-nav-h) - 48px); overflow-y: auto; }
}
.jkl-page-toc-h {
    font-size: .6875rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--jkl-copper-3);
    margin-bottom: 14px;
}
.jkl-page-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.jkl-page-toc-list li { counter-increment: toc; }
.jkl-page-toc-list li + li { margin-top: 2px; }
.jkl-page-toc-list a {
    display: flex; gap: 10px;
    padding: 7px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    font-size: .8125rem; line-height: 1.45;
    color: var(--jkl-text-soft);
    transition: background var(--jkl-tr-fast), color var(--jkl-tr-fast);
}
.jkl-page-toc-list a::before {
    content: counter(toc);
    flex-shrink: 0;
    min-width: 1.25em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--jkl-copper);
}
.jkl-page-toc-list a:hover { background: rgba(174,200,54,.12); color: var(--jkl-ink); }

/* ---------- Typografia treści ---------- */
.jkl-page-content {
    max-width: 68ch;
    color: var(--jkl-text);
    font-size: 1.0625rem;
    line-height: 1.75;
}
.jkl-page-content > * + * { margin-top: 1.1em; }

.jkl-page-content h2 {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    line-height: 1.25;
    color: var(--jkl-ink);
    /* scroll-margin: kotwica ze spisu treści nie może wjechać pod navbar */
    scroll-margin-top: calc(var(--jkl-nav-h) + 20px);
    margin-top: 2.2em;
    padding-top: 1.4em;
    border-top: 1px solid var(--jkl-line);
}
.jkl-page-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.jkl-page-content h3 {
    font-family: var(--jkl-serif);
    font-weight: 500;
    font-size: 1.1875rem;
    color: var(--jkl-ink);
    margin-top: 1.8em;
    scroll-margin-top: calc(var(--jkl-nav-h) + 20px);
}
.jkl-page-content h4 {
    font-size: .9375rem; font-weight: 700;
    letter-spacing: .02em; color: var(--jkl-ink);
    margin-top: 1.6em;
}
.jkl-page-content p { margin: 0; }
.jkl-page-content strong { color: var(--jkl-ink); font-weight: 700; }

.jkl-page-content a {
    color: var(--jkl-copper-3);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(174,200,54,.5);
}
.jkl-page-content a:hover { color: var(--jkl-ink); text-decoration-color: var(--jkl-ink); }

.jkl-page-content ul,
.jkl-page-content ol { padding-left: 0; margin-left: 0; list-style: none; }
.jkl-page-content li { position: relative; padding-left: 26px; }
.jkl-page-content li + li { margin-top: 8px; }
.jkl-page-content ul > li::before {
    content: '';
    position: absolute; left: 6px; top: .72em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--jkl-copper);
}
.jkl-page-content ol { counter-reset: jklol; }
.jkl-page-content ol > li { counter-increment: jklol; }
.jkl-page-content ol > li::before {
    content: counter(jklol) '.';
    position: absolute; left: 0; top: 0;
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--jkl-copper);
}
/* Listy zagnieżdżone - mniejszy krok wcięcia, marker w odcieniu tła. */
.jkl-page-content li > ul,
.jkl-page-content li > ol { margin-top: 8px; }
.jkl-page-content li li::before { background: var(--jkl-text-mute); }

.jkl-page-content blockquote {
    border-left: 3px solid var(--jkl-copper);
    padding: 4px 0 4px 20px;
    color: var(--jkl-text-soft);
    font-style: italic;
}
.jkl-page-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.jkl-page-content th,
.jkl-page-content td {
    border: 1px solid var(--jkl-line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.jkl-page-content th { background: var(--jkl-cream-2); font-weight: 700; color: var(--jkl-ink); }
/* Szeroka tabela przewija się wewnątrz siebie, strona nie jedzie w bok. */
.jkl-page-content .wp-block-table,
.jkl-page-content figure.wp-block-table { overflow-x: auto; }
.jkl-page-content img { border-radius: var(--jkl-r-md); }
.jkl-page-content hr { border: 0; border-top: 1px solid var(--jkl-line); margin: 2.2em 0; }
.jkl-page-content code {
    background: var(--jkl-cream-2);
    padding: 2px 6px; border-radius: 6px;
    font-size: .875em;
}

/* ---------- Karta kontaktowa na końcu ---------- */
.jkl-page-cta {
    display: flex; flex-wrap: wrap; gap: var(--jkl-s2);
    align-items: center; justify-content: space-between;
    margin-bottom: var(--jkl-s6);
    padding: 28px 32px;
    border-radius: var(--jkl-r-lg);
    color: var(--jkl-cream);
    background:
        radial-gradient(ellipse 70% 120% at 85% 50%, rgba(174,200,54,.20) 0%, transparent 62%),
        linear-gradient(140deg, #34343a 0%, #26262a 100%);
    box-shadow: var(--jkl-shadow-lg);
}
.jkl-page-cta-text { display: flex; flex-direction: column; gap: 4px; }
.jkl-page-cta-text strong { font-family: var(--jkl-serif); font-weight: 500; font-size: 1.25rem; }
.jkl-page-cta-text span { font-size: .8125rem; color: rgba(248,243,234,.65); }
.jkl-page-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
    .jkl-page-cta { padding: 24px; }
    .jkl-page-cta-actions { width: 100%; }
    .jkl-page-cta-actions .jkl-btn { width: 100%; justify-content: center; }
}

.jkl-page-pages { margin-top: var(--jkl-s3); font-size: .875rem; }

/* content-visibility: przeglądarka nie liczy układu sekcji spoza ekranu przy
   pierwszym malowaniu (opóźnienie renderu LCP). Hero i VSL zostają - na telefonie
   są w pierwszym ekranie. .jkl-cv-off włącza main.js na czas przewijania do
   kotwicy, inaczej cel liczony z wysokości zastępczych ucieka.
   _STANDARD/12-WYDAJNOSC.md 5.9. */
.jkl-main > section:not(.jkl-hero):not(.jkl-vsl) {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}
.jkl-cv-off .jkl-main > section { content-visibility: visible; }