/* Cache-busted at 1785682820 so browsers load the current redesign styles. */
.homepage-redesign {
    --home-ink: rgb(36, 41, 46);
    --home-line: rgb(222, 223, 225);
    --home-paper: rgb(255, 255, 255);
    /* One red (the navbar's) and three corner radii for the whole page: the
       user asked to unify the slightly different reds and radii (2026-10-14). */
    --home-red: rgb(230, 0, 0);
    --home-red-hover: rgb(204, 0, 0);
    /* Buttons and form fields: 4px like slack.com's buttons, which the user
       preferred to 8px (2026-10-15). */
    --home-radius-small: 4px;
    --home-radius-card: 14px;
    --home-radius-photo: 24px;
    color: var(--home-ink);
    overflow: hidden;
}

.homepage-redesign *,
.homepage-redesign *::before,
.homepage-redesign *::after {
    box-sizing: border-box;
}

/* Normal (SDR) brightness only, on the whole page and in the embedded
   videos. iPhones show HDR images, HDR video and filter results brighter
   than the page's white, which then looks grey next to them; this tells the
   browser to keep everything at normal white, as on the Mac (the user,
   2026-10-15). */
:root,
img,
video,
iframe {
    dynamic-range-limit: standard;
}

/* The contact section's dark continues into the footer (site-footer.css),
   so the page ends on one colour instead of dark and then grey; a thin line
   separates them. The footer's content keeps the page's edges: base.html
   gives it .home-shell. */
.home-redesign-body .site-footer {
    margin-top: 0;
}

.home-redesign-body .site-footer-shell {
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid rgba(248, 248, 248, 0.22);
}

.home-shell {
    width: min(100% - 56px, 1380px);
    margin: 0 auto;
}

.home-hero {
    /* Hero spacing (the user, 2026-10-14/15). From 701px up: about 48px of
       visible space above the headline, airy like slack.com, and about 44px
       under it, then an even 36px between the reviews, logos and button.
       Phones (see the 700px rules): about 32px around the headline and
       between all hero blocks. The space under the headline is never larger
       than over it. The CSS values differ from these gaps because line boxes
       and the review rail's padding add invisible space; they were set by
       measuring screenshots at 320 to 1920px. */
    padding: 41px 0 54px;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(400px, 0.82fr);
    gap: clamp(34px, 4vw, 64px);
    align-items: start;
}

.home-hero-copy {
    min-width: 0;
}

.home-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--home-ink);
    /* Headlines use Inter, the site's own font: the user preferred it to
       Roboto (2026-10-14). */
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-stretch: 100%;
    font-kerning: auto;
    font-feature-settings: normal;
    /* letter-spacing: -0.055em; */
    /* -0.045em made the letters touch: the browser already picks the tighter
       Inter Display cut at this size. With -0.03em and tight lines the three
       lines read as one block, like the headlines the user compared it with
       (Slack, Obsidian, HEY; 2026-10-14). */
    letter-spacing: -0.03em;
    word-spacing: 0;
    line-height: 1.05;
}

.home-hero h1 span {
    display: block;
    white-space: nowrap;
}

.home-reviews {
    margin-top: 32px;
}

.home-review-stage {
    position: relative;
}

.home-reviews-caption {
    margin: 0;
    color: rgb(102, 106, 111);
    font-size: 0.82rem;
    font-weight: 520;
    letter-spacing: 0;
    line-height: 1.3;
}

.home-reviews-caption a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.home-reviews-caption a:hover {
    color: var(--home-ink);
}

.home-reviews-caption-star {
    color: rgb(240, 180, 0);
}

.home-training-catalog-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin-top: 34px;
    padding: 0 40px;
    border-radius: var(--home-radius-small);
    background: var(--home-red);
    color: white !important;
    /* Sentence case instead of letter-spaced capitals, like the buttons on
       the sites the user compares the page with (2026-10-14). */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.home-training-catalog-button:hover {
    background: var(--home-red-hover);
    color: white !important;
    text-decoration: none;
}

.home-review-controls {
    /* Half outside the rail, so the arrows never cover a review's first star or letter. */
    position: absolute;
    inset: 0 -18px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    pointer-events: none;
}

.home-review-controls button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--home-line);
    border-radius: 50%;
    background: var(--home-paper);
    color: var(--home-ink);
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 3px 12px rgba(28, 34, 39, 0.13);
    pointer-events: auto;
}

.home-review-controls button:disabled {
    cursor: default;
    visibility: hidden;
    opacity: 0;
}

.home-review-rail {
    display: flex;
    gap: 12px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.home-review-card {
    flex: 0 0 270px;
    min-height: 159.5px;
    /* 2px less on every side than the earlier 17px, because the cards took too
       much room (the user, 2026-10-14). Width and heights shrink by the same
       4px, so the text area stays as it was. */
    padding: 15px;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-card);
    background: var(--home-paper);
    scroll-snap-align: start;
}

.home-review-card:not(.home-review-card--placeholder) {
    /* Sized for about 2.5 visible comment lines under the stars: 3.5 still
       took too much room, especially on phones (the user, 2026-10-14). */
    display: flex;
    flex-direction: column;
    height: 159.5px;
}

.home-review-card--placeholder {
    opacity: 0.62;
}

.home-review-person {
    display: flex;
    align-items: center;
    gap: 11px;
}

.home-review-photo {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: rgb(226, 228, 230);
    object-fit: cover;
}

.home-review-photo--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(91, 96, 101);
    font-size: 1rem;
    font-weight: 700;
}

.home-review-person-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.home-review-person-copy strong {
    overflow: hidden;
    color: var(--home-ink);
    font-size: 0.9rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-review-person-copy > span {
    color: rgb(116, 121, 126);
    font-size: 0.72rem;
}

.home-review-person-lines {
    display: grid;
    flex: 1;
    gap: 7px;
}

.home-review-person-lines span,
.home-review-line {
    display: block;
    height: 7px;
    border-radius: 20px;
    background: rgb(226, 228, 230);
}

.home-review-person-lines span:first-child {
    width: 58%;
}

.home-review-person-lines span:last-child {
    width: 38%;
}

.home-review-stars {
    /* The visible gap from the stars to the comment's first line copies Google Maps (13.7px, measured 2026-10-14). */
    margin: 0 0 3.5px;
    color: rgb(240, 180, 0);
    font-size: 0.92rem;
    letter-spacing: 0.08em;
}

.home-review-stars span {
    color: rgb(215, 217, 219);
}

.home-review-body {
    /* Stars and comment scroll as one area, so a swipe anywhere under the name
       scrolls the review, not only one over its few visible lines (the user,
       2026-10-14). The gap above the stars went from 14px to 8px to make the
       cards shorter. Vertical scrolling must not trap horizontal review-rail
       gestures. */
    min-height: 0;
    flex: 1;
    margin-top: 8px;
    padding-right: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-color: rgb(191, 195, 199) transparent;
    scrollbar-width: thin;
}

.home-review-comment {
    margin: 0;
    color: rgb(54, 59, 64);
    font-size: 0.82rem;
    line-height: 1.45;
}

.home-review-body--scrollable:not(.home-review-body--at-end) {
    /* The fade makes longer reviews visibly scrollable without adding UI chrome. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        black calc(100% - 22px),
        transparent
    );
    mask-image: linear-gradient(
        to bottom,
        black calc(100% - 22px),
        transparent
    );
}

.home-review-line {
    width: 79%;
    margin-top: 8px;
}

.home-review-line--long {
    width: 96%;
}

.home-review-line--short {
    width: 52%;
}

.home-clients {
    margin-top: 32px;
}

.home-logo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-logo-item {
    min-width: 0;
    text-align: center;
}

.home-logo-card {
    display: block;
    /* Trimmed from 600 / 433 so the logo row takes less height. The padding
       gives the brands their prestige, so the tightest card (the Chery group)
       still keeps about three quarters of it. */
    aspect-ratio: 600 / 385;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--home-radius-card);
    background: black;
    overflow: hidden;
}

.home-logo-card--light {
    background: rgb(238, 238, 238);
}

.home-logo-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Daimler uses black lettering on white, with the previous logo's 50/600 side margins. */
.home-logo-card--daimler {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The same frame as the Google review cards (the user, 2026-10-15). */
    border-color: var(--home-line);
    background: white;
}

.home-logo-card--daimler img {
    width: 83.333333%;
    height: auto;
    object-fit: contain;
    /* No contrast(2): it pushes the logo's white above normal white, and
       iPhones show that as HDR, so the logo's box glowed brighter than the
       tile and made the white cards around it look grey. Screenshots clip
       it, only a camera photo showed it (the user, 2026-10-15). The file is
       already dark lettering on white. */
    filter: grayscale(1);
}

.home-reference-link {
    display: inline-block;
    margin-top: 7px;
    color: var(--home-ink) !important;
    font-size: 0.66rem;
    font-weight: 620;
    letter-spacing: 0.07em;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-awards {
    padding: 0 0 54px;
}

.home-stats {
    padding: 0 0 54px;
}

.home-videos > .home-shell,
.home-stats > .home-shell,
.home-awards > .home-shell,
.home-contact > .home-shell {
    padding-top: 40px;
    border-top: 1px solid var(--home-line);
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-stat {
    padding: 38px clamp(18px, 3vw, 48px) 42px;
    text-align: center;
}

.home-stat-value {
    margin: 0;
    color: var(--home-ink);
    font-family: "Inter", sans-serif;
    /* About 1.1x the headline: the earlier 6vw made the numbers almost twice
       its size, so they competed with it for attention. */
    font-size: clamp(3rem, 4vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.9;
}

.home-stat-value sup {
    position: relative;
    top: 0.08em;
    margin-left: 0.04em;
    font-size: 0.46em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 0;
    vertical-align: top;
}

.home-stat-description {
    max-width: 300px;
    margin: 24px auto 0;
    color: var(--home-ink);
    font-family: "Inter", sans-serif;
    font-size: clamp(1rem, 1.35vw, 1.24rem);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
}

.home-stat-description span {
    /* "(na infolinii technicznej)" gets its own line instead of breaking after "(na". */
    display: block;
    margin-top: 2px;
    color: rgb(102, 106, 111);
    font-size: 0.85em;
}

.home-awards h2 {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
    font-weight: 800;
    font-stretch: 100%;
    font-kerning: auto;
    font-feature-settings: normal;
    /* Section headings share the hero headline's tracking. */
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.home-awards-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 2px 2px 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.home-award-card {
    display: flex;
    width: 150px;
    height: 174px;
    flex: 0 0 150px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    scroll-snap-align: start;
}

.home-award-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-contact {
    padding: 0 0 64px;
    background: rgb(36, 41, 46);
    color: rgb(248, 248, 248);
}

.home-contact > .home-shell {
    border-top: 0;
}

.home-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
}

.home-contact-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.home-contact h2 {
    margin: 0 0 22px;
    color: rgb(248, 248, 248);
    font-family: "Inter", sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.home-contact-call a {
    align-self: center;
    color: rgb(248, 248, 248);
    font-family: "Inter", sans-serif;
    font-size: clamp(2.5rem, 4.4vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.home-contact-call a:hover {
    color: var(--home-red);
    text-decoration: none;
}

.home-contact-call p {
    margin: 18px 0 0;
    color: rgba(248, 248, 248, 0.68);
    font-size: 1rem;
    font-weight: 550;
}

.home-contact-or {
    position: relative;
    display: grid;
    width: min(100%, 720px);
    min-height: 24px;
    margin: 0 auto;
    place-items: center;
}

.home-contact-or::before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(248, 248, 248, 0.22);
    content: "";
}

.home-contact-or span {
    position: relative;
    padding: 0 12px;
    background: rgb(36, 41, 46);
    color: rgba(248, 248, 248, 0.68);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.home-contact-write form {
    margin: 0;
}

.home-contact-write {
    width: min(100%, 720px);
    margin: 0 auto;
}

.home-contact-write h2 {
    text-align: center;
}

.home-contact-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.home-contact-field {
    min-width: 0;
}

.home-contact-field label {
    display: block;
    margin: 0 0 7px;
    color: rgb(248, 248, 248);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
}

.home-contact-field input,
.home-contact-field textarea {
    display: block;
    width: 100%;
    border: 1px solid rgb(194, 196, 199);
    border-radius: var(--home-radius-small);
    background: white;
    color: var(--home-ink);
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

.home-contact-field input {
    height: 50px;
    padding: 0 14px;
}

.home-contact-field textarea {
    min-height: 140px;
    padding: 13px 14px;
    resize: vertical;
}

.home-contact-field input:focus,
.home-contact-field textarea:focus {
    border-color: rgb(112, 116, 121);
    box-shadow: 0 0 0 3px rgba(36, 41, 46, 0.1);
    outline: none;
}

.home-contact-question {
    max-width: 700px;
    margin: 0 0 9px;
    color: rgba(248, 248, 248, 0.82);
    font-size: 0.9rem;
    font-weight: 450;
    line-height: 1.45;
}

.home-contact-error,
.home-contact-form-errors {
    margin: 7px 0 0;
    /* A light red: the errors sit on the dark contact background, where dark
       red was barely readable. */
    color: rgb(255, 138, 128);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.home-contact-form-errors {
    margin: 0 0 16px;
}

.home-contact-form-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.home-contact-write button {
    display: flex;
    /* Full width like the fields above it, so the centred form ends on a
       symmetric block instead of a button stuck to the left edge. */
    width: 100%;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 0 40px;
    border: 0;
    border-radius: var(--home-radius-small);
    background: var(--home-red);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.home-contact-write button:hover {
    background: var(--home-red-hover);
}

.home-videos {
    padding: 0 0 54px;
}

.home-videos-heading,
.home-awards-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.home-videos h2 {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
    font-weight: 800;
    font-stretch: 100%;
    font-kerning: auto;
    font-feature-settings: normal;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.home-video-controls,
.home-awards-controls {
    display: flex;
    gap: 8px;
}

.home-video-controls button,
.home-awards-controls button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--home-line);
    border-radius: 50%;
    background: var(--home-paper);
    color: var(--home-ink);
    font-size: 1.05rem;
    line-height: 1;
}

.home-video-controls button:disabled,
.home-awards-controls button:disabled {
    cursor: default;
    color: rgb(145, 148, 151);
    opacity: 0.45;
}

.home-video-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    padding: 2px 2px 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.home-review-rail::-webkit-scrollbar,
.home-logo-grid::-webkit-scrollbar,
.home-video-rail::-webkit-scrollbar,
.home-awards-rail::-webkit-scrollbar {
    display: none;
}

.home-video-slide {
    flex: 0 0 calc((100% - 18px) / 2);
    aspect-ratio: 16 / 9;
    border-radius: var(--home-radius-card);
    background: rgb(18, 19, 20);
    overflow: hidden;
    scroll-snap-align: start;
}

.home-video-slide iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-hero-visual {
    position: relative;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--home-radius-photo);
    background: rgb(222, 224, 223);
    box-shadow: 0 20px 55px rgba(28, 34, 39, 0.13);
    overflow: hidden;
}

.home-hero-visual picture {
    display: block;
    width: 100%;
    height: 100%;
}

.home-hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
}

.homepage-redesign a:focus-visible,
.homepage-redesign button:focus-visible {
    outline: 3px solid rgba(32, 94, 166, 0.45);
    outline-offset: 3px;
}

@media (min-width: 701px) {
    /* The navbar's edges follow .home-shell, so the logo lines up with the
       headline and the last navbar item with the content's right edge. Phones
       keep the navbar's own padding: the logo, phone number, mail icon and
       menu button barely fit side by side at 320px. */
    .home-redesign-body .navbar {
        padding-right: max(28px, (100% - 1380px) / 2);
        padding-left: max(28px, (100% - 1380px) / 2);
    }

    /* The hamburger's lines, not its padded button, end on that edge: 12px
       padding, a 1px border and 4px of empty icon margin sit right of them. */
    .home-redesign-body .navbar-toggler {
        margin-right: -17px;
    }
}

@media (min-width: 481px) and (max-width: 700px) {
    .home-redesign-body .navbar {
        padding-right: 18px;
        padding-left: 16px;
    }

    .home-redesign-body .navbar-toggler {
        margin-right: -17px;
    }
}

@media (max-width: 480px) {
    /* Phones: the logo's letters start on the content's 18px edge like the
       headline (the image has 2.5px of empty margin) and the hamburger's
       lines end on the right edge. The brand's right margin goes so the row
       still fits at 360px; below that the logo is 28px tall instead of 30px
       (the user, 2026-10-14). */
    .home-redesign-body .navbar {
        padding-right: 6px;
        padding-left: 16px;
    }

    .home-redesign-body .navbar-brand {
        margin-right: 0;
    }
}

@media (max-width: 359px) {
    .home-redesign-body .navbar {
        padding-right: 9px;
    }

    .home-redesign-body .navbar-brand img {
        width: auto;
        height: 28px;
    }
}

@media (min-width: 1041px) {
    /* Two-column hero: the whole left column, Katalog szkoleń included, fits
       the first screen of the user's Mac window (about 1495x844). */
    .home-hero {
        padding-top: 48px;
    }

    .home-hero h1 {
        /* The line box has about 0.13em of empty space above the capitals and
           as much below the last baseline; pulling both in puts the capitals'
           tops on the photo's top edge and keeps the gaps around the headline
           even. */
        margin: -0.13em 0;
        font-size: clamp(1.84rem, 3.6vw, 3.6rem);
    }

    .home-reviews {
        margin-top: 40px;
    }

    /* The photo is exactly as tall as the left column, so its top and bottom
       line up with the headline and the Katalog szkoleń button at every
       desktop width. The absolutely placed picture adds no height of its own. */
    .home-hero-grid {
        align-items: stretch;
    }

    .home-hero-visual {
        aspect-ratio: auto;
    }

    .home-hero-visual picture {
        position: absolute;
        inset: 0;
    }
}

@media (max-width: 1040px) {
    .home-shell {
        width: min(100% - 44px, 920px);
    }

    .home-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-hero-visual {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .home-hero-visual img {
        object-position: center 57%;
    }

}

@media (min-width: 701px) and (max-width: 1040px) {
    /* The hero uses the same 920px shell as the sections below it, so all
       left edges line up (its narrower 720px column started 100px further
       right at 1024px). */
    .home-hero h1 {
        font-size: clamp(3rem, 6vw, 3.7rem);
    }

    .home-redesign-body .navbar {
        padding-right: max(22px, (100% - 920px) / 2);
        padding-left: max(22px, (100% - 920px) / 2);
    }
}

@media (max-width: 900px) {
    .home-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .home-contact-or {
        min-height: 24px;
    }

    .home-contact-or::before {
        width: 100%;
        height: 1px;
    }

    .home-contact-or span {
        padding: 0 12px;
    }
}

@media (max-width: 700px) {
    .home-shell {
        width: calc(100% - 36px);
    }

    .home-hero {
        /* With the photo under the headline, phones need less air around it:
           about 32px over and under the headline, the same as between the
           other hero blocks (the user, 2026-10-15). */
        padding: 27px 0 36px;
    }

    .home-hero-grid {
        /* Phones: headline, the training photo right under it, button, then
           the reviews and logos. Headline, photo and button fill the first
           screen, so the headline no longer gets lost among the reviews and
           logos (the user, 2026-10-14/15). The copy column dissolves into
           this one column so the photo can sit between its parts; desktop
           keeps the button at the bottom of the column and the photo on the
           right, which is also the page's reading order. */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .home-hero-copy {
        display: contents;
    }

    .home-hero-visual {
        order: 1;
        margin-top: 25px;
        /* Right above the full-width button, the photo takes the button's
           corners; 24px next to 4px looked off (the user, 2026-10-15). */
        border-radius: var(--home-radius-small);
    }

    .home-reviews {
        order: 3;
        margin-top: 30px;
    }

    .home-clients {
        order: 4;
        margin-top: 28px;
    }

    .home-hero h1 {
        /* Phones get three balanced lines, like slack.com's mobile headline
           (the user, 2026-10-14): "Szkolenia dla warsztatów / niezależnych
           i serwisów / autoryzowanych". Its longest line has 24 characters;
           the desktop's breaks would need 25 ("i serwisów autoryzowanych",
           the "i" may not end a line), which kept the font too small. The
           leading follows Slack's (1.12); weight and tracking stay the
           desktop's (800, -0.03em), which the user preferred. The size
           grows with the width (about 30px on a 390px phone) and stays just
           under the largest size that keeps three lines, measured from 300 to
           700px. Five lines took almost half of the screen. */
        font-size: min(2.6rem, (100vw - 36px) * 0.09 - 1.9px);
        line-height: 1.1;
        /* Left-aligned: the user tried it centred like slack.com's and kept
           it on the left (2026-10-15). */
        text-wrap: balance;
    }

    .home-hero h1 span {
        display: inline;
        white-space: normal;
    }

    .home-training-catalog-button {
        /* Full width on phones, like slack.com's main button (the user,
           2026-10-14). */
        display: flex;
        order: 2;
        margin-top: 32px;
    }

    .home-review-card {
        flex-basis: min(82vw, 310px);
    }

    .home-logo-grid {
        /* One logo and 0.6 of the next show, the rest scrolls sideways:
           three side by side were far too small next to the review cards
           (the user, 2026-10-14). */
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .home-logo-item {
        flex: 0 0 min((100% - 12px) / 1.6, 260px);
        scroll-snap-align: start;
    }

    .home-review-controls button {
        width: 32px;
        height: 32px;
    }

    .home-awards {
        padding-bottom: 36px;
    }

    .home-stats {
        padding-bottom: 36px;
    }

    .home-contact {
        padding-bottom: 48px;
    }

    .home-videos > .home-shell,
    .home-stats > .home-shell,
    .home-awards > .home-shell,
    .home-contact > .home-shell {
        padding-top: 32px;
    }

    .home-stats-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px 0;
    }

    .home-stat {
        padding: 26px 12px;
    }

    .home-stat-value {
        font-size: clamp(2.6rem, 12vw, 3.4rem);
    }

    .home-stat-description {
        margin-top: 14px;
        font-size: 1rem;
    }

    .home-award-card {
        width: 132px;
        height: 148px;
        flex-basis: 132px;
    }

    .home-contact-call a {
        font-size: clamp(2.4rem, 13vw, 3.4rem);
    }

    .home-videos {
        padding-bottom: 36px;
    }

    .home-video-slide {
        flex-basis: 86%;
    }

    .home-hero-visual {
        aspect-ratio: 4 / 3;
    }

    .home-hero-visual img {
        object-position: 52% center;
    }
}

@media (max-width: 360px) {
    .home-review-rail {
        gap: 10px;
    }

    .home-review-card {
        flex-basis: min(65.6vw, 248px);
        min-height: 147.4px;
        padding: 12px;
    }

    .home-review-card:not(.home-review-card--placeholder) {
        height: 147.4px;
    }

    .home-review-body {
        margin-top: 6px;
    }

    .home-review-person {
        gap: 9px;
    }

    .home-review-photo {
        width: 32px;
        height: 32px;
    }

    .home-review-person-lines {
        gap: 6px;
    }

    .home-review-person-lines span,
    .home-review-line {
        height: 6px;
    }

    .home-review-stars {
        margin: 0 0 3.75px;
        font-size: 0.74rem;
    }

    .home-review-line {
        margin-top: 6px;
    }

    .home-review-controls button {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-redesign *,
    .homepage-redesign *::before,
    .homepage-redesign *::after {
        scroll-behavior: auto !important;
    }
}