/* Hero variant 6 — the front as „scene 0” of the tour under it (same wash, same type scale, same 1280 px grid), so the
 * page reads as one design from the first screen (Marcin 13.10, 37:35: „ten pierwszy slajd […] odklejone od tej całej
 * reszty”). Standalone: every rule the front needs is here (h6-*); the tour links its own tour.css.
 * Three fronts share this file: .hero-v6--a (the processes are the H1), --b and --c (a rail of the processes).
 *
 * Desktop/landscape: one screen, the picture full-bleed, the copy left over a wash. Portrait and phones: the copy, then
 * the picture as a band, then the processes as a list. Theme tokens used: --eu-banner-h, --nav-h, --red, --red-dark,
 * --red-glow, --ease, --ease-spring. */

.hero-v6 {
    --ink: #15171a;
    --ink-2: #33363c;
    --ink-3: #50545c;
    /* the H1's inactive words while the film runs: ≥ 3:1 on the wash (large text, WCAG 1.4.3) */
    --ink-mute: #7a8089;
    /* small red text: #BF2026 is too light on this grey; these keep ≥ 4.5:1 */
    --red-text: #9b1b21;
    --h6-bg: #eef1f6;
    --h6-seg: 3s; /* one process on screen (Łukasz 14.10: faster); the loop video is cut to the same length */
    position: relative;
    height: max(100vh, 620px);
    overflow: hidden;
    isolation: isolate;
    background: var(--h6-bg);
    color: var(--ink);
}

/* ---------- the picture ---------- */
.h6-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.h6-still {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s var(--ease, ease);
}
.h6-still.is-on {
    opacity: 1;
}
.h6-still img,
.h6-film {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* the subject sits right of centre in every frame: keep it when a 16:10 window crops the sides */
    object-position: 70% 50%;
}
/* the stills breathe while they are on (the film moves by itself) */
.hero-v6.is-cycling:not(.is-film) .h6-still.is-on img {
    animation: h6-push calc(var(--h6-seg) + 1.2s) linear both;
    transform-origin: 70% 50%;
}
@keyframes h6-push {
    from { transform: scale(1); }
    to { transform: scale(1.045); }
}
.h6-film {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s var(--ease, ease);
}
.hero-v6.is-film .h6-film {
    opacity: 1;
}
/* the copy side stays calm: the tour's own wash, so the front and the scenes are one surface */
.h6-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Łukasz 14.10, after ?wash=0: „nałóż tę nakładkę, ale 50% mocy” */
    opacity: .5;
    background:
        linear-gradient(180deg, rgba(238, 241, 246, .82) 0, rgba(238, 241, 246, 0) 150px),
        linear-gradient(0deg, rgba(238, 241, 246, .7) 0, rgba(238, 241, 246, 0) 130px),
        /* a little longer than the tour's: the front's H1 is wider (up to ~50 %) and the lamination frame is red from ~35 % */
        linear-gradient(90deg, rgba(238, 241, 246, .97) 0%, rgba(238, 241, 246, .95) 36%, rgba(238, 241, 246, .88) 45%, rgba(238, 241, 246, .55) 53%, rgba(238, 241, 246, 0) 63%);
    pointer-events: none;
}

/* ---------- the copy ---------- */
.h6-copy {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: calc(var(--eu-banner-h, 0px) + var(--nav-h, 72px) + clamp(24px, 7.5vh, 104px)) 32px 0;
    pointer-events: none;
}
.h6-copy > * {
    max-width: min(640px, 46vw);
}
.h6-copy a {
    pointer-events: auto;
}
.h6-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 clamp(14px, 2.2vh, 24px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red-text);
}
.h6-eyebrow::before {
    content: "";
    width: 32px;
    height: 1.5px;
    background: currentColor;
}
.h6-title {
    margin: 0;
    font-size: clamp(38px, min(6.4vh, 4.2vw), 68px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.032em;
    color: var(--ink);
    text-wrap: balance;
}
.h6-title em {
    display: block;
    font-style: normal;
    color: var(--red);
}
/* a: the slogan is the processes, one per line, as big as the live site's H1 */
.hero-v6--a .h6-title {
    font-size: clamp(40px, min(7.6vh, 4.9vw), 82px);
    line-height: 1;
    letter-spacing: -.036em;
}
/* 02.11: the red line is no longer a fourth item in the list („Pod Twoją marką.” read like „Pod Twoją obronę”, AIB staff
   28.10) but a statement about all three, „Wszystkie trzy dla Twojej marki”: twice as long, so half the size of the
   processes, a tagline under them rather than another line of the same weight. One line: at half size it is narrower
   than the longest process („Kompandowanie” ≈ 8.5 em of the H1, the PL line ≈ 7.8; EN/DE shorter), but the H1's box
   (640 px) is narrower than that word at 1920, so without nowrap the line broke there. */
.hero-v6--a .h6-title em {
    margin-top: .32em;
    font-size: max(.5em, 17px);
    line-height: 1.15;
    letter-spacing: -.022em;
    white-space: nowrap;
}
.h6-w {
    position: relative;
    display: block;
    width: fit-content;
    transition: color .6s var(--ease, ease);
}
/* while the film runs, its process is the word in ink and the other two step back; a red line under the word fills
   for as long as that process is on screen */
.hero-v6--a.is-cycling .h6-w {
    color: var(--ink-mute);
}
.hero-v6--a.is-cycling[data-step="0"] .h6-w[data-step="0"],
.hero-v6--a.is-cycling[data-step="1"] .h6-w[data-step="1"],
.hero-v6--a.is-cycling[data-step="2"] .h6-w[data-step="2"] {
    color: var(--ink);
}
.h6-w::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .02em;
    width: 100%;
    height: max(3px, .055em);
    background: var(--red);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.hero-v6--a.is-tick[data-step="0"] .h6-w[data-step="0"]::after,
.hero-v6--a.is-tick[data-step="1"] .h6-w[data-step="1"]::after,
.hero-v6--a.is-tick[data-step="2"] .h6-w[data-step="2"]::after {
    animation: h6-fill var(--h6-seg) linear forwards;
}
@keyframes h6-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.h6-lead {
    margin: clamp(18px, 2.8vh, 30px) 0 clamp(22px, 3.4vh, 36px);
    font-size: clamp(16px, 1.95vh, 19.5px);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
}
.hero-v6--a .h6-lead {
    max-width: min(560px, 42vw);
}
.h6-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 14px;
}
.h6-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.h6-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none;
    transition: background .25s var(--ease, ease), box-shadow .25s var(--ease, ease), transform .2s var(--ease-spring, ease);
}
.h6-btn--primary {
    background: var(--red);
    color: #fff;
    box-shadow: 0 10px 30px -12px var(--red-glow, rgba(191, 32, 38, .5));
}
.h6-btn--primary:hover {
    background: var(--red-dark, #9f1a1f);
    color: #fff;
}
.h6-btn--ghost {
    padding: 14px 26px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 0, 0, .14);
    color: var(--ink);
    backdrop-filter: blur(10px);
}
.h6-btn--ghost:hover {
    background: #fff;
    color: var(--ink);
}
.h6-btn:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}
.h6-note {
    font-size: 12.5px;
    color: var(--ink-3);
}

/* ---------- the foot: the processes (b, c), the way down, the pause ---------- */
.h6-foot {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 24px;
    max-width: 1280px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 32px clamp(20px, 3.6vh, 40px);
}
.h6-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 190px));
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.h6-rail li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    padding-top: 14px;
}
/* a track above each process; the one on screen fills in red for as long as it shows */
.h6-rail i {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: rgba(21, 23, 26, .14);
    overflow: hidden;
}
.h6-rail i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.hero-v6.is-tick[data-step="0"] .h6-rail li[data-step="0"] i::after,
.hero-v6.is-tick[data-step="1"] .h6-rail li[data-step="1"] i::after,
.hero-v6.is-tick[data-step="2"] .h6-rail li[data-step="2"] i::after {
    animation: h6-fill var(--h6-seg) linear forwards;
}
.h6-rail b {
    grid-row: span 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.9;
    color: var(--red-text);
}
.h6-rail strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    transition: color .6s var(--ease, ease);
}
.h6-rail span {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-3);
}
.hero-v6.is-cycling .h6-rail strong {
    color: var(--ink-3);
}
.hero-v6.is-cycling[data-step="0"] .h6-rail li[data-step="0"] strong,
.hero-v6.is-cycling[data-step="1"] .h6-rail li[data-step="1"] strong,
.hero-v6.is-cycling[data-step="2"] .h6-rail li[data-step="2"] strong {
    color: var(--ink);
}
.h6-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 24px -14px rgba(21, 23, 26, .45);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.h6-next svg {
    color: var(--red);
    animation: h6-nudge 2.4s var(--ease, ease) infinite;
}
@keyframes h6-nudge {
    0%, 60%, 100% { transform: none; }
    30% { transform: translateY(3px); }
}
.h6-next:hover {
    background: #fff;
}
.h6-next:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}
/* WCAG 2.2.2: anything that moves for more than 5 s can be paused */
.h6-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    color: #1a1a1a;
    backdrop-filter: blur(10px);
    cursor: pointer;
}
.h6-toggle[hidden] {
    display: none;
}
.h6-toggle:hover {
    background: #fff;
}
.h6-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}
.h6-pause {
    width: 10px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
.h6-toggle[aria-pressed="true"] .h6-pause {
    width: 0;
    height: 0;
    margin-left: 3px;
    border: 0;
    border-left: 11px solid currentColor;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.h6-toggle .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.hero-v6.is-paused .h6-still img,
.hero-v6.is-paused .h6-w::after,
.hero-v6.is-paused .h6-rail i::after {
    animation-play-state: paused;
}

/* ---------- short landscape windows: tighter type, the same order ---------- */
@media (min-aspect-ratio: 49/50) and (max-height: 800px) {
    .h6-copy {
        padding-top: calc(var(--eu-banner-h, 0px) + var(--nav-h, 72px) + clamp(16px, 4vh, 40px));
    }
    .h6-lead {
        margin: 14px 0 20px;
        font-size: 16px;
    }
    .h6-btn {
        padding: 13px 22px;
    }
    .h6-btn--ghost {
        padding: 12px 20px;
    }
}
/* narrow landscape (tablets, small laptops): the copy may take more of the width; the wash follows it */
@media (min-aspect-ratio: 49/50) and (max-width: 1100px) {
    .h6-copy > * {
        max-width: min(560px, 54vw);
    }
    .h6-media::after {
        background:
            linear-gradient(180deg, rgba(238, 241, 246, .82) 0, rgba(238, 241, 246, 0) 150px),
            linear-gradient(0deg, rgba(238, 241, 246, .75) 0, rgba(238, 241, 246, 0) 140px),
            linear-gradient(90deg, rgba(238, 241, 246, .97) 0%, rgba(238, 241, 246, .94) 44%, rgba(238, 241, 246, .6) 58%, rgba(238, 241, 246, 0) 70%);
    }
    .h6-rail {
        /* equal columns, as wide as the longest name: at 150 px „01 Kompaundowanie” ran into „02” (Łukasz 20.10, 1050 × 841) */
        grid-template-columns: repeat(3, minmax(150px, 1fr));
        gap: 0 18px;
    }
    .h6-rail span {
        display: none;
    }
}

/* ---------- portrait tablets and phones: the copy, the picture, the processes ---------- */
/* 15.10: stacked below the tour's split threshold (0.98), not at any portrait window — a near-square window
   (Łukasz's ~1260 × 1276) got the stacked front over a split tour */
@media (max-aspect-ratio: 979/1000), (max-width: 767px) {
    .hero-v6 {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .h6-copy {
        order: 1;
        width: 100%;
        padding: calc(var(--eu-banner-h, 0px) + var(--nav-h, 72px) + 36px) 32px 28px;
    }
    .h6-copy > *,
    .hero-v6--a .h6-lead {
        max-width: 38em;
    }
    .h6-title {
        font-size: clamp(32px, 6.6vw, 52px);
    }
    .hero-v6--a .h6-title {
        font-size: clamp(36px, 8.4vw, 64px);
    }
    .h6-media {
        order: 2;
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 16 / 10;
    }
    .h6-media::after {
        background: linear-gradient(180deg, var(--h6-bg) 0, rgba(238, 241, 246, 0) 22%);
    }
    .h6-still img {
        object-position: 72% 50%;
    }
    .h6-foot {
        order: 3;
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        width: 100%;
        padding: 22px 32px 30px;
    }
    .h6-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 16px;
    }
    .h6-next {
        align-self: flex-start;
        margin-left: 0;
    }
    .h6-toggle {
        display: none;
    }
}
@media (max-width: 767px) {
    .h6-copy {
        padding: calc(var(--eu-banner-h, 0px) + var(--nav-h, 64px) + 26px) 20px 24px;
    }
    .h6-title {
        font-size: clamp(30px, 8.2vw, 40px);
    }
    /* „Kompaundowanie.” was the longest line: ≈ 9.4 em wide, so 9 vw keeps it inside 20 px gutters down to 360 px
       („Kompandowanie” since 02.11 is shorter) */
    .hero-v6--a .h6-title {
        font-size: clamp(30px, 9vw, 46px);
    }
    .h6-lead {
        margin: 14px 0 22px;
        font-size: 16px;
    }
    .h6-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .h6-btn {
        justify-content: center;
    }
    .h6-media {
        aspect-ratio: 4 / 3;
    }
    .h6-foot {
        padding: 18px 20px 26px;
    }
    .h6-rail {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .h6-rail span {
        display: inline;
    }
    .h6-rail li {
        grid-template-columns: 28px auto 1fr;
        align-items: baseline;
        padding-top: 12px;
    }
    .h6-rail b {
        grid-row: auto;
    }
    .h6-rail span::before {
        content: "· ";
    }
}

@media (prefers-reduced-motion: reduce) {
    .h6-still,
    .h6-film,
    .h6-w,
    .h6-rail strong {
        transition: none;
    }
    .h6-still img,
    .h6-next svg {
        animation: none !important;
    }
}

.hv3-marquee {
    --tick-h: 44px;
}
/* ---------- the red strip after the tour (v6, 14.10): v3iii's, verbatim — the theme's marquee, flowing ----------
 * Keeps the theme's look (.marquee-strip / .marquee-item) and only changes the track: one line, two
 * copies of the list, translateX(-50%) in a loop, as on the NMA site. Hover, focus and the pause
 * button stop it. */
.hv3-marquee.marquee-strip {
    display: flex;
    height: var(--tick-h);
    padding: 0;
    box-sizing: border-box;
    color: #fff;
}
.hv3-marquee-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.hv3-marquee .marquee-track.hv3-belt {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: hv3-belt var(--belt-s, 120s) linear infinite;
}
.hv3-marquee:hover .hv3-belt,
.hv3-marquee:focus-within .hv3-belt,
.hv3-marquee.is-paused .hv3-belt {
    animation-play-state: paused;
}
@keyframes hv3-belt {
    to { transform: translateX(-50%); }
}
.hv3-belt-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hv3-marquee .marquee-item {
    font-size: 11px;
    padding: 0 20px;
    gap: 20px;
}
.hv3-motion {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--tick-h);
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
    background: rgba(0, 0, 0, .1);
    color: #fff;
    cursor: pointer;
}
.hv3-motion:hover {
    background: rgba(0, 0, 0, .2);
}
.hv3-motion:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}
.hv3-motion .i-play,
.hv3-motion[aria-pressed="true"] .i-pause {
    display: none;
}
.hv3-motion[aria-pressed="true"] .i-play {
    display: block;
}
.hv3-motion .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .hv3-belt {
        animation: none !important;
    }
    .hv3-belt-list[aria-hidden="true"] {
        display: none;
    }
    .hv3-marquee-viewport {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .hv3-motion {
        display: none;
    }
}

/* ---------- phones (14.10): the front as one screen, the picture first ----------
 * Łukasz 14.10: on Android it looked fine, on the iPhone (Safari's bars leave ~550–660 px) the front „się rozsypuje”:
 * the first screen was all text and the picture started below the fold. Now, like the tour's tall scenes: picture on
 * top (flexible, it takes what the copy leaves), the three processes as segments under it, then eyebrow, H1, CTA row.
 * 100svh = the height with Safari's bars shown, so the CTA is always on the first screen. If the picture would get under
 * 36 % of the screen, the lead goes (.is-tight, hero.php). */
.h6-segs {
    display: none;
}
@media (max-width: 767px) and (orientation: portrait) {
    .hero-v6 {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        padding-top: calc(var(--eu-banner-h, 0px) + var(--nav-h, 64px));
        box-sizing: border-box;
    }
    .h6-media {
        order: 1;
        position: relative;
        inset: auto;
        flex: 1 1 auto;
        min-height: 26svh;
        width: 100%;
        aspect-ratio: auto;
    }
    .h6-media::after {
        background: linear-gradient(0deg, rgba(238, 241, 246, .55) 0, rgba(238, 241, 246, 0) 18%);
    }
    .h6-still img,
    .h6-film {
        /* 21.10 (#3): 64 → 90 %, so the extrusion's cut end (it lands at ~94 % of the frame) stays in view; the kneader
           and the nip frame well there too */
        object-position: 90% 50%;
    }
    .h6-segs {
        order: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 4px;
    }
    /* b, c: the line runs inside the copy's gutters, so the names line up with the text under them */
    .hero-v6:not(.hero-v6--a) .h6-segs {
        grid-template-columns: 1.3fr 1fr 1fr; /* „Kompaundowanie” is the longest name */
        padding: 0 20px;
    }
    .hero-v6:not(.hero-v6--a) .h6-segs span:first-child {
        padding-left: 0;
    }
    .h6-segs span {
        position: relative;
        padding: 9px 6px 0 0;
    }
    .h6-segs span:first-child {
        padding-left: 20px;
    }
    .h6-segs i {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: rgba(21, 23, 26, .12);
        overflow: hidden;
    }
    .h6-segs i::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--red);
        transform: scaleX(0);
        transform-origin: 0 50%;
    }
    .hero-v6.is-tick[data-step="0"] .h6-segs [data-step="0"] i::after,
    .hero-v6.is-tick[data-step="1"] .h6-segs [data-step="1"] i::after,
    .hero-v6.is-tick[data-step="2"] .h6-segs [data-step="2"] i::after {
        animation: h6-fill var(--h6-seg) linear forwards;
    }
    /* without motion: the first segment stays full, nothing pretends to move */
    .hero-v6:not(.is-cycling) .h6-segs [data-step="0"] i::after {
        transform: none;
    }
    .h6-segs b {
        display: block;
        overflow: hidden;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: -.005em;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--ink-3);
        transition: color .4s var(--ease, ease);
    }
    .hero-v6[data-step="0"] .h6-segs [data-step="0"] b,
    .hero-v6[data-step="1"] .h6-segs [data-step="1"] b,
    .hero-v6[data-step="2"] .h6-segs [data-step="2"] b {
        color: var(--ink);
    }
    /* front a: the H1 already names the three, the segments are just the line */
    .hero-v6--a .h6-segs b {
        display: none;
    }
    .hero-v6--a .h6-segs span {
        padding-top: 0;
    }
    .h6-copy {
        order: 3;
        flex: none;
        width: 100%;
        padding: 16px 20px 20px;
    }
    .h6-copy > *,
    .hero-v6--a .h6-lead {
        max-width: 36rem;
    }
    .h6-eyebrow {
        gap: 10px;
        margin-bottom: 10px;
        font-size: 11px;
        letter-spacing: .15em;
    }
    .h6-eyebrow::before {
        width: 20px;
    }
    .h6-title {
        font-size: clamp(26px, min(7.4vw, 4.6svh), 40px);
    }
    .hero-v6--a .h6-title {
        font-size: clamp(28px, min(8.8vw, 5.3svh), 44px);
    }
    .h6-lead {
        margin: 10px 0 0;
        font-size: 15.5px;
        line-height: 1.5;
    }
    .hero-v6.is-tight .h6-lead {
        display: none;
    }
    .h6-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 8px;
        margin-top: 16px;
    }
    .h6-cta {
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
    }
    .h6-btn {
        justify-content: center;
        padding: 14px 16px;
        font-size: 15px;
    }
    .h6-btn--primary {
        width: 100%;
        box-sizing: border-box;
    }
    .h6-btn--ghost {
        flex: none;
        padding: 13px 14px;
    }
    .h6-note {
        font-size: 12px;
    }
    /* the foot: no rail (the segments say it) and no „Z czym przychodzą klienci” (the next flick is the tour); the pause
       button sits on the picture's top-right corner */
    .h6-foot {
        position: absolute;
        top: calc(var(--eu-banner-h, 0px) + var(--nav-h, 64px) + 12px);
        right: 12px;
        left: auto;
        bottom: auto;
        width: auto;
        padding: 0;
        flex-direction: row;
    }
    .h6-rail,
    .h6-next {
        display: none;
    }
    .h6-toggle {
        display: grid;
        width: 36px;
        height: 36px;
    }
    .h6-toggle[hidden] {
        display: none;
    }
}
/* narrow phones: „Sklepy” without „online”, the CTA without its arrow, so both buttons stay on one line */
@media (max-width: 400px) and (orientation: portrait) {
    .h6-long {
        display: none;
    }
}
/* phones: the two buttons on one line, the CTA's label on one line (it wrapped next to „Sklepy” at 375–430 px) */
@media (max-width: 767px) and (orientation: portrait) {
    .h6-btn {
        white-space: nowrap;
    }
    .h6-btn--primary {
        padding: 14px 12px;
        font-size: 14.5px;
    }
    .h6-btn--primary svg {
        display: none;
    }
    .h6-btn--ghost {
        padding: 13px 12px;
        font-size: 14.5px;
        gap: 8px;
    }
}
/* preview only: ?wash=0 (hero.php) — the picture without the light wash under the copy */
.hero-v6.is-nowash .h6-media::after {
    display: none;
}
/* wide and split screens (the tour's layouts, tour.php: width/100vh ≥ 0.98, not a landscape phone): the tour's rail is
   fixed at the bottom from the first screen (Łukasz 14.10), so the front's foot sits above it and the pill „Z czym
   przychodzą klienci” goes — the rail is the way in now */
@media (min-aspect-ratio: 49/50) and (min-height: 520px) {
    .h6-foot {
        padding-bottom: calc(56px + clamp(14px, 2.4vh, 28px));
    }
    .h6-next {
        display: none;
    }
    .h6-toggle {
        margin-left: auto;
    }
}

/* 16.10, front → first scene as a sheet (Marcin 16.10 05:47: „dla spójności ja bym po prostu zrobił ten sam efekt”;
   02:41 asked for one between the front and the first scene). The front stays put while the tour slides up over it from
   below, the same direction as the tour's own scene changes (v4-in-down); scroll-driven, so it never runs by itself. */
.h6-stack {
    position: relative;
}
/* where the front is exactly one screen (wide/split: 100vh, phones: 100svh; not portrait tablets or landscape phones):
   the front stays put and the tour, pulled up over it in CSS (so nothing moves at load: CLS 0), pins after 12 % of the
   window. .is-sheet is set by an inline script before the first paint, so without JS the page simply scrolls. */
@media (min-aspect-ratio: 49/50) and (min-height: 520px), (max-width: 767px) and (orientation: portrait) {
    .h6-stack.is-sheet > .hero-v6 {
        position: sticky;
        top: 0;
        z-index: 0;
    }
    .h6-stack.is-sheet > .v4-tour {
        z-index: 1;
        margin-top: -88vh;
    }
}
@media (max-width: 767px) and (orientation: portrait) {
    .h6-stack.is-sheet > .v4-tour {
        margin-top: -88svh;
    }
}