/* fonts.css */
/* Self-hosted Google Fonts (latin + latin-ext only; Polish needs latin-ext).
   Downloaded from fonts.googleapis.com; files in src/fonts/. */

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/raleway-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/raleway-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* main.css */
:root {
    margin: 0;
    padding: 0;

    --clr-base-hue: 177;
    --clr-base-saturation: 99%;
    --clr-base-luminosity: 28%;
    --clr-base: hsl(var(--clr-base-hue) var(--clr-base-saturation) var(--clr-base-luminosity) / 100);

    --clr-text: #000000;
    --clr-text-inverse: #ffffff;
    --clr-dark: #444444;
    --clr-bg: #eeeeee;
    --clr-overlay: #00000080;

    --font-regular: Raleway, sans-serif;
    --line-height-normal: 1.15;
    --line-height-tight: 1;

    --base-font-size: 16px;
    --font-size-small: calc(.75 * var(--font-size-normal));
    --font-size-normal: 1rem;
    --font-size-mid: calc(1.5 * var(--font-size-normal));
    --font-size-double: calc(2 * var(--font-size-normal));

    --size-quarter: calc(.25 * var(--size-normal));
    --size-half: calc(.5 * var(--size-normal));
    --size-normal: 1rem;
    --size-double: calc(2 * var(--size-normal));

    --space-quarter: .25rem;
    --space-half: .5rem;
    --space-normal: 1rem;
    --space-double: 2rem;

    --border-radius-quarter: var(--space-quarter);
    --border-radius-half: var(--space-half);
    --border-radius-normal: var(--space-normal);
    --border-radius-double: var(--space-double);
    --border-radius-circle: var(50%);

    --index-video: 300;
    --index-topbar: 400;
    --index-overlay: 500;
    --index-navigation: 600;
    --index-modal: 800;

    --content-width: 80rem;
}

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

body {
    margin: 0;
    padding: 0;
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
    font-family: var(--font-regular);
    line-height: var(--line-height-normal);
    font-weight: 300;
    font-size: var(--font-size-normal);
    color: var(--clr-text);
    background-color: var(--clr-bg);
}

a {
    color: var(--clr-text);
}

b,
strong {
    font-weight: 700;
    font-family: var(--font-regular);
}

i,
em {
    font-weight: 300;
    font-family: var(--font-regular);
    font-style: italic;
}

b i,
strong i,
b em,
strong em,
i b,
i strong,
em b,
em strong {
    font-weight: 700;
    font-family: var(--font-regular);
    font-style: italic;
}

@keyframes topbar-bg {
    to {
        background-color: hsl(from var(--clr-base) h s l / 80%);
    }
}

/* the sticky breadcrumb (bcrumb.css) sits exactly under the top bar: both use this height */
:root {
    --topbar-height: 80px;

    @media screen and (max-width: 37.5rem) {
        --topbar-height: 48px;
    }
}

.topbar {
    box-sizing: border-box;
    height: var(--topbar-height);
    display: flex;
    gap: var(--space-normal);
    background-color: hsl(from var(--clr-text) h s l / 20%);
    backdrop-filter: blur(5px);
    padding: var(--space-half);
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: var(--index-topbar);
    animation-name: topbar-bg;
    animation-timeline: scroll();
    animation-range: 280px 400px;
    animation-fill-mode: both;
    transition: all .15s ease-out;

    @media screen and (max-width: 37.5rem) {
        padding: var(--space-quarter);

        svg {
            width: 120px;
            height: 30px;
        }
    }

    .apps-link {
        margin-inline-start: auto;
        margin-inline-end: calc(-1 * var(--space-normal) + var(--space-quarter));
        display: grid;
        place-items: center;
        padding: var(--space-small);
        color: var(--clr-text-inverse);
        border-radius: var(--border-radius-small);

        svg {
            width: calc(1.5 * var(--size-normal));
            height: calc(1.5 * var(--size-normal));
        }

        &:hover {
            background-color: hsl(from var(--clr-text-inverse) h s l / 15%);
        }

        &:focus-visible {
            outline: 1px solid var(--clr-text-inverse);
        }

        /* the mobile bottom bar has its own "Mini aplikacje" */
        @media screen and (max-width: 37.5rem) {
            display: none;
        }
    }

    .apps-link + .phone-link {
        margin-inline-start: 0;

        @media screen and (max-width: 37.5rem) {
            margin-inline-start: auto;
        }
    }

    .phone-link {
        margin-inline-start: auto;
        white-space: nowrap;
        color: var(--clr-text-inverse);
        text-decoration: none;
        display: inline-flex;
        padding: var(--space-small);

        &:hover {
            text-decoration: underline;
        }

        &:focus {
            background-color: var(--clr-text-inverse);
            color: var(--clr-base);
            border-radius: var(--border-radius-small);
            outline: 1px solid var(--clr-text-inverse);
        }
    }

    .search-link {
        display: grid;
        place-items: center;
        padding: var(--space-small);
        color: var(--clr-text-inverse);

        /* the mobile bottom bar has its own "Szukaj" */
        @media screen and (max-width: 37.5rem) {
            display: none;
        }

        /* icon on a pseudo-element, so the focus outline isn't masked away */
        &:before {
            content: '';
            display: block;
            aspect-ratio: 1/1;
            width: calc(1.5 * var(--size-normal));
            background-color: currentColor;
            mask: var(--icon-search) center / contain no-repeat;
        }
    }

    .menu-button {
        appearance: none;
        background-color: transparent;
        color: var(--clr-text-inverse);
        border: none;
        aspect-ratio: 1/1;
        /* width: var(--size-double); */
        position: relative;
        z-index: var(--index-modal);
        cursor: pointer;
        font-size: var(--font-size-double);

        &:before {
            content: '\2630';
            display: block;
            position: relative;
            inset: 0;
            color: var(--clr-text-inverse);
        }
    }
}

.navigation-overlay {
    width: 100%;
    height: 100svh;
    background-color: var(--clr-overlay);
    position: fixed;
    right: -100%;
    transition: right .15s ease-out;
    z-index: var(--index-overlay);

    &.open {
        right: 0;
        backdrop-filter: blur(5px);
        cursor: pointer;
    }
}

.navigation-panel {
    --size: calc(23 * var(--size-normal));
    width: var(--size);
    height: 100vh;
    background-color: var(--clr-base);
    position: fixed;
    right: calc(-1 * var(--size));
    transition: right .25s ease-out;
    z-index: var(--index-navigation);

    &.open {
        right: 0;
    }
}

.calltoaction {
    background-color: var(--clr-base);
    padding-inline: var(--space-normal);
    padding-block: var(--space-double);

    >div {
        width: 100%;
        max-width: var(--content-width);
        margin-inline: auto;
        display: flex;
        gap: var(--space-normal);
        justify-content: space-around;
        align-content: center;

        @media screen and (max-width: 37.5rem) {
            flex-direction: column;
        }

        a {
            color: var(--clr-text-inverse);
            text-decoration: none;
            text-transform: uppercase;
            font-size: var(--font-size-mid);
            font-weight: 700;
            display: inline-flex;
            justify-content: center;
            text-align: center;
            border: var(--size-quarter) solid currentColor;
            padding-block: var(--space-half);
            padding-inline: var(--space-double);
            border-radius: var(--border-radius-double);

            &:hover {
                background-color: hsl(from var(--clr-text-inverse) h s l / 15%);
            }
        }
    }
}

.footer_content {
    background-color: var(--clr-dark);
    padding-inline: var(--space-normal);
    padding-block: var(--space-double);
    color: var(--clr-text-inverse);

    >div {
        width: 100%;
        max-width: var(--content-width);
        margin-inline: auto;
        display: flex;
        gap: var(--space-normal);
        justify-content: flex-start;
        align-content: center;
        line-height: var(--line-height-tight);

        a {
            color: var(--clr-text-inverse);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

}

.footer_content {
    .footer_links {
        list-style: none;
        margin: var(--space-half) 0;
        padding: 0;

        li {
            list-style: none;
            display: flex;
            align-items: center;
            gap: .6em;
            padding-block: .2em;

            &::before {
                content: "";
                flex: none;
                width: .9em;
                height: .9em;
                background-color: #fff;
                mask: url(/media/arrow-right-solid-full.svg) center / contain no-repeat;
                -webkit-mask: url(/media/arrow-right-solid-full.svg) center / contain no-repeat;
            }

            &:has(> [hidden]) {
                display: none;
            }
        }
    }

    .footer_links .cookie-settings-link {
        text-decoration: none;
        color: var(--clr-text-inverse);

        &:hover {
            text-decoration: underline;
        }
    }

    .footer_more summary {
        font-size: 1.11em;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: .6em;
        list-style: none;
        padding-block: .2em;

        &::-webkit-details-marker {
            display: none;
        }

        &::before {
            content: "";
            flex: none;
            width: .9em;
            height: .9em;
            background-color: #fff;
            mask: url(/media/arrow-right-solid-full.svg) center / contain no-repeat;
            -webkit-mask: url(/media/arrow-right-solid-full.svg) center / contain no-repeat;
            transition: transform .2s;
        }

        &:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }
    }

    .footer_more[open] summary::before {
        transform: rotate(90deg);
    }

    .footer_more .footer_links {
        margin-left: 1.5em;
    }
}

.header_video_wrapper {
    position: relative;
    width: 100%;
    display: block;
    color: #ffffff;
    overflow: hidden;
    min-height: 85vh;
    z-index: var(--index-video);

    .header_video {
        width: 100%;
        height: 100%;
        inset: 0;
        position: absolute;
        z-index: 1;

        video {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        .header_video_overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            background-color: #000000;
            opacity: .5;
            z-index: 2;
            backdrop-filter: blur(5px);
        }

        .header_video_text_buttons {
            position: absolute;
            z-index: 3;
            left: 0;
            bottom: 0;
            color: #ffffff;
            padding: 30px;
        }

        .header_video_text_buttons div.buttons {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-normal);
            margin-block-end: var(--space-double);
        }

        .header_video_text_buttons p {
            color: var(--clr-text-inverse);
            margin-block-end: 0;

            a {
                color: currentColor;
            }
        }

        .header_video_text_buttons h1 {
            color: var(--clr-text-inverse);
            max-width: 40ch;
            font-size: var(--font-size-double);
        }
    }
}

.btn a {
    padding-inline: var(--space-double);
    padding-block: var(--space-normal);
    background-color: var(--clr-text-inverse);
    color: var(--clr-base);
    text-align: center;
    border-radius: var(--border-radius-double);
    display: flex;
    align-items: center;
    line-height: var(--line-height-tight);
    text-decoration: none;
    font-weight: 700;
}

.btn__booksy a:before {
    content: '';
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTguOTY5IiBoZWlnaHQ9IjExNS4zOTMiIHZpZXdCb3g9IjAgMCAxNTguOTY5IDExNS4zOTMiPgogIDxwYXRoIGlkPSJTaGFwZSIgZD0iTTExNy4xLDI4My43YTM1Ljg4NCwzNS44ODQsMCwwLDEsMTkuOC01LjJjMTQuNi42LDI2LjIsNy4yLDMzLjksMTkuOSw0LjUsNy41LDYuMSwxNS43LDYsMjQuNS0uMSw5LjgtMi45LDE4LjYtOS4zLDI2LjEtOCw5LjQtMTguMywxNC0zMC43LDE1LTE4LjMsMS41LTMzLjEtNS45LTQ3LjEtMTYuMy02LjktNS4xLTEzLjgtMTAuMS0yMS4xLTE0LjdhMzUuMDgzLDM1LjA4MywwLDAsMC0xMC4zLTQuNSwxOC4wNjMsMTguMDYzLDAsMCwwLTIwLjYsOC4yLDEyLjgxLDEyLjgxLDAsMCwwLTEuMSwyLDQuNDMsNC40MywwLDAsMS00LjcsMi44Yy0zLjMtLjEtNi42LDAtMTAsMC0zLjktLjEtNC45LTEuNS0zLjQtNS4xLDUuMi0xMi4xLDE0LjQtMTkuOCwyNy4zLTIyLjcsMTItMi43LDIzLS4zLDMyLjksNi45LDUuOCw0LjMsMTEuNSw4LjcsMTcuNCwxMi45LDgsNS42LDE2LjIsMTEuMSwyNS44LDEzLjcsMTAuMSwyLjgsMjAsMi40LDI4LjktNCw1LjItMy44LDguNy04LjcsOS43LTE1LjEsMS4zLTguNS40LTE2LjctNS0yMy45YTIzLjcsMjMuNywwLDAsMC0zOS4zLDEuNGMtMi42LDQuMS00LjMsOC41LTQsMTMuNWE0NC4xNzMsNDQuMTczLDAsMCwxLS4xLDYuM2MtLjIsMi40LTEuNywzLjQtMy43LDIuM2E2NS41NDMsNjUuNTQzLDAsMCwxLTEwLjUtNi45Yy0xLjctMS4zLTEuNC0zLjItMS40LTV2LTYyYzAtNC43LjMtNSw1LjItNWg0LjVjNS4xLjEsNS45LjgsNS45LDYuMVYyODFDMTEyLjQsMjg2LjQsMTEyLjQsMjg2LjQsMTE3LjEsMjgzLjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcuODM1IC0yNDguOCkiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTguOTY5IiBoZWlnaHQ9IjExNS4zOTMiIHZpZXdCb3g9IjAgMCAxNTguOTY5IDExNS4zOTMiPgogIDxwYXRoIGlkPSJTaGFwZSIgZD0iTTExNy4xLDI4My43YTM1Ljg4NCwzNS44ODQsMCwwLDEsMTkuOC01LjJjMTQuNi42LDI2LjIsNy4yLDMzLjksMTkuOSw0LjUsNy41LDYuMSwxNS43LDYsMjQuNS0uMSw5LjgtMi45LDE4LjYtOS4zLDI2LjEtOCw5LjQtMTguMywxNC0zMC43LDE1LTE4LjMsMS41LTMzLjEtNS45LTQ3LjEtMTYuMy02LjktNS4xLTEzLjgtMTAuMS0yMS4xLTE0LjdhMzUuMDgzLDM1LjA4MywwLDAsMC0xMC4zLTQuNSwxOC4wNjMsMTguMDYzLDAsMCwwLTIwLjYsOC4yLDEyLjgxLDEyLjgxLDAsMCwwLTEuMSwyLDQuNDMsNC40MywwLDAsMS00LjcsMi44Yy0zLjMtLjEtNi42LDAtMTAsMC0zLjktLjEtNC45LTEuNS0zLjQtNS4xLDUuMi0xMi4xLDE0LjQtMTkuOCwyNy4zLTIyLjcsMTItMi43LDIzLS4zLDMyLjksNi45LDUuOCw0LjMsMTEuNSw4LjcsMTcuNCwxMi45LDgsNS42LDE2LjIsMTEuMSwyNS44LDEzLjcsMTAuMSwyLjgsMjAsMi40LDI4LjktNCw1LjItMy44LDguNy04LjcsOS43LTE1LjEsMS4zLTguNS40LTE2LjctNS0yMy45YTIzLjcsMjMuNywwLDAsMC0zOS4zLDEuNGMtMi42LDQuMS00LjMsOC41LTQsMTMuNWE0NC4xNzMsNDQuMTczLDAsMCwxLS4xLDYuM2MtLjIsMi40LTEuNywzLjQtMy43LDIuM2E2NS41NDMsNjUuNTQzLDAsMCwxLTEwLjUtNi45Yy0xLjctMS4zLTEuNC0zLjItMS40LTV2LTYyYzAtNC43LjMtNSw1LjItNWg0LjVjNS4xLjEsNS45LjgsNS45LDYuMVYyODFDMTEyLjQsMjg2LjQsMTEyLjQsMjg2LjQsMTE3LjEsMjgzLjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcuODM1IC0yNDguOCkiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: block;
    justify-content: center;
    align-items: center;
    width: calc(1.5 * var(--size-normal));
    aspect-ratio: 1.5/1;
    margin-inline-end: var(--space-half);
    background-color: currentcolor
}

.btn__phone a:before {
    content: '';
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy43NSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEzLjc1IDIwIj4KICA8cGF0aCBkPSJNMjcuMjUsMEgxOC41QTIuNSwyLjUsMCwwLDAsMTYsMi41djE1QTIuNSwyLjUsMCwwLDAsMTguNSwyMGg4Ljc1YTIuNSwyLjUsMCwwLDAsMi41LTIuNVYyLjVBMi41LDIuNSwwLDAsMCwyNy4yNSwwWk0yMi44NzUsMTguNzVhMS4yNSwxLjI1LDAsMSwxLDEuMjUtMS4yNUExLjI0NiwxLjI0NiwwLDAsMSwyMi44NzUsMTguNzVaTTI3LjI1LDIuNVYxNUgxOC41VjIuNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNikiLz4KPC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy43NSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEzLjc1IDIwIj4KICA8cGF0aCBkPSJNMjcuMjUsMEgxOC41QTIuNSwyLjUsMCwwLDAsMTYsMi41djE1QTIuNSwyLjUsMCwwLDAsMTguNSwyMGg4Ljc1YTIuNSwyLjUsMCwwLDAsMi41LTIuNVYyLjVBMi41LDIuNSwwLDAsMCwyNy4yNSwwWk0yMi44NzUsMTguNzVhMS4yNSwxLjI1LDAsMSwxLDEuMjUtMS4yNUExLjI0NiwxLjI0NiwwLDAsMSwyMi44NzUsMTguNzVaTTI3LjI1LDIuNVYxNUgxOC41VjIuNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNikiLz4KPC9zdmc+);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: block;
    justify-content: center;
    align-items: center;
    width: var(--size-normal);
    aspect-ratio: 1/1;
    margin-inline-end: var(--space-half);
    background-color: currentcolor
}

.btn__about a:before {
    content: '';
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzM2IDBoLTI4OGMtMjYuNTEgMC00OCAyMS40OS00OCA0OHY0MTZDMCA0OTAuNSAyMS40OSA1MTIgNDggNTEyaDI4OGMyNi41MSAwIDQ4LTIxLjQ5IDQ4LTQ4di00MTZDMzg0IDIxLjQ5IDM2Mi41IDAgMzM2IDB6TTE5MiAxMjhjMzUuMzUgMCA2NCAyOC42NSA2NCA2NHMtMjguNjUgNjQtNjQgNjRTMTI4IDIyNy4zIDEyOCAxOTJTMTU2LjcgMTI4IDE5MiAxMjh6TTI4OCAzODRIOTZjLTguODM2IDAtMTYtNy4xNjQtMTYtMTZDODAgMzIzLjggMTE1LjggMjg4IDE2MCAyODhoNjRjNDQuMTggMCA4MCAzNS44MiA4MCA4MEMzMDQgMzc2LjggMjk2LjggMzg0IDI4OCAzODR6Ii8+PC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzM2IDBoLTI4OGMtMjYuNTEgMC00OCAyMS40OS00OCA0OHY0MTZDMCA0OTAuNSAyMS40OSA1MTIgNDggNTEyaDI4OGMyNi41MSAwIDQ4LTIxLjQ5IDQ4LTQ4di00MTZDMzg0IDIxLjQ5IDM2Mi41IDAgMzM2IDB6TTE5MiAxMjhjMzUuMzUgMCA2NCAyOC42NSA2NCA2NHMtMjguNjUgNjQtNjQgNjRTMTI4IDIyNy4zIDEyOCAxOTJTMTU2LjcgMTI4IDE5MiAxMjh6TTI4OCAzODRIOTZjLTguODM2IDAtMTYtNy4xNjQtMTYtMTZDODAgMzIzLjggMTE1LjggMjg4IDE2MCAyODhoNjRjNDQuMTggMCA4MCAzNS44MiA4MCA4MEMzMDQgMzc2LjggMjk2LjggMzg0IDI4OCAzODR6Ii8+PC9zdmc+);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: block;
    justify-content: center;
    align-items: center;
    width: var(--size-normal);
    aspect-ratio: 1/1;
    margin-inline-end: var(--space-half);
    background-color: currentcolor
}

.btn a:HOVER {
    background-color: var(--clr-base);
    color: var(--clr-text-inverse);
    text-decoration: none
}

.page-content {
    --padding: var(--space-normal);
    max-width: calc(2 * var(--padding) + var(--content-width));
    margin-inline: auto;
    padding: var(--padding);

    ul {
        margin: 0;
        margin-inline-start: var(--space-double);

        li {
            list-style-image: url(/media/arrow-right-solid-full.svg);
        }
    }
}

/* Remaining plain bullet lists (policy pages, price list, specialist bios, intro text on the mini apps and
   newsletter pages, the article summary box) get the same brand-colour arrow as article text, services and
   problem pages. list-style-image can't be sized, so the arrow is a positioned ::before (1.1em).
   Lists with a class and lists inside nav keep their own markers. */
:is(.page-content > ul, .member-single ul, .newsletter-intro-text ul, .article-summary ul):not([class]) {
    list-style: none;
    padding-inline-start: 0;

    > li:not([class]) {
        position: relative;
        list-style: none;
        padding-inline-start: 1.7em;
        margin-block-end: var(--space-half);

        &::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: .3em; /* fallback */
            inset-block-start: calc((1lh - 1.1em) / 2 - .06em); /* centred on the first line */
            width: 1.1em;
            height: 1.1em;
            background: var(--clr-base);
            mask: url(/media/arrow-right-solid-full.svg) center / contain no-repeat;
        }
    }
}

p,
p.section,
ul,
ol,
li,
th,
td {
    font-family: var(--font-regular);
    font-weight: 400;
    font-size: var(--font-size-paragraph);
    line-height: var(--font-size-h4);
    margin: 0;
    padding: 0;
}

p+p {
    margin-block-start: var(--space-normal);
}

/* Netlify badge injected on free-tier sites */
#nl-badge-frame {
    display: none !important;
}


/* page-header.css */
:root {
    --color-bg1: #3FA299;
    --color-bg2: #3F8378;
    --color1: 18, 113, 255;
    --color2: 221, 74, 255;
    --color3: 100, 220, 255;
    --color4: 200, 50, 50;
    --color5: 180, 180, 50;
    --circle-size: 80%;
    --blending: hard-light;
}

@keyframes moveInCircle {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes moveVertical {
    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(50%);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes moveHorizontal {
    0% {
        transform: translateX(-50%) translateY(-10%);
    }

    50% {
        transform: translateX(50%) translateY(10%);
    }

    100% {
        transform: translateX(-50%) translateY(-10%);
    }
}

.gradient-bg {
    width: 100vw;
    min-height: 40vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
    top: 0;
    left: 0;

    .header_image_box_title
    {
        font-family: var(--font-regular);
        font-weight: 500;
        line-height: 1.3;
        text-transform: uppercase;
        color: #ffffff;
        text-align: center;
        font-size: var(--font-size-h2);
        padding: 10px 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
    }

    .gradients-container {
        filter: blur(40px);
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        
        .g1 {
            position: absolute;
            background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
            mix-blend-mode: var(--blending);
            width: var(--circle-size);
            height: var(--circle-size);
            top: calc(50% - var(--circle-size) / 2);
            left: calc(50% - var(--circle-size) / 2);
            transform-origin: center center;
            animation: moveVertical 30s ease infinite;
            opacity: 1;
        }
        
        .g2 {
            position: absolute;
            background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
            mix-blend-mode: var(--blending);
            width: var(--circle-size);
            height: var(--circle-size);
            top: calc(50% - var(--circle-size) / 2);
            left: calc(50% - var(--circle-size) / 2);
            transform-origin: calc(50% - 400px);
            animation: moveInCircle 20s reverse infinite;
            opacity: 1;
        }
        
        .g3 {
            position: absolute;
            background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
            mix-blend-mode: var(--blending);
            width: var(--circle-size);
            height: var(--circle-size);
            top: calc(50% - var(--circle-size) / 2 + 200px);
            left: calc(50% - var(--circle-size) / 2 - 500px);
            transform-origin: calc(50% + 400px);
            animation: moveInCircle 40s linear infinite;
            opacity: 1;
        }
        
        .g4 {
            position: absolute;
            background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
            mix-blend-mode: var(--blending);
            width: var(--circle-size);
            height: var(--circle-size);
            top: calc(50% - var(--circle-size) / 2);
            left: calc(50% - var(--circle-size) / 2);
            transform-origin: calc(50% - 200px);
            animation: moveHorizontal 40s ease infinite;
            opacity: 0.7;
        }
        
        .g5 {
            position: absolute;
            background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
            mix-blend-mode: var(--blending);
            width: calc(var(--circle-size) * 2);
            height: calc(var(--circle-size) * 2);
            top: calc(50% - var(--circle-size));
            left: calc(50% - var(--circle-size));
            transform-origin: calc(50% - 800px) calc(50% + 200px);
            animation: moveInCircle 20s ease infinite;
            opacity: 1;
        }
    }
}



/* mobile-nav-bottom.css */
.mobile_nav {
    background-color: hsl(from var(--clr-text) h s 30% / 80%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-inline: var(--space-half);
    padding-block-start: var(--space-half);
    padding-block-end: var(--space-normal);
    position: fixed;
    z-index: var(--index-modal);
    box-shadow: 0 0 10px hsl(from var(--clr-text) h s l / 20%);
    backdrop-filter: blur(5px);
    bottom: -200%;
    width: 100%;
    left: 0%;
    transition: all 1s ease-out;

    @media screen and (max-width: 37.5rem) {
        bottom: 0;
    }

    a {
        font-size: var(--font-size-small);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-quarter);
        /* aspect-ratio: 3/2;
        width: calc(3.75 * var(--size-normal)); */
        color: #ffffff;

        &:before {
            content: '';
            display: block;
            aspect-ratio: 1/1;
            background-color: #fff;
            width: var(--size-normal);
            mask-position: center;
            mask-size: contain;
            mask-image: var(--icon);
            mask-repeat: no-repeat;
            background-color: currentColor;
        }

        &.start:before {
            --icon: var(--icon-star);
        }

        &.team:before {
            --icon: var(--icon-team);
        }

        &.booksy:before {
            --icon: var(--icon-booksy);
        }

        &.apps:before {
            --icon: var(--icon-apps);
        }

        &.marker:before {
            --icon: var(--icon-marker);
        }

        &.search:before {
            --icon: var(--icon-search);
        }
    }
}
/* The bar is fixed over the page: keep the end of the footer clear of it */
@media screen and (max-width: 37.5rem) {
    footer {
        padding-block-end: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }
}


/* typographies.css */
:root {

    --step--2: clamp(0.64rem, 0.6088rem + 0.1561vi, 0.72rem);
    --step--1: clamp(0.8rem, 0.761rem + 0.1951vi, 0.9rem);
    --font-size-paragraph: clamp(1rem, 0.9512rem + 0.2439vi, 1.125rem);
    --font-size-h5: clamp(1.25rem, 1.189rem + 0.3049vi, 1.4063rem);
    --font-size-h4: clamp(1.5625rem, 1.4863rem + 0.3811vi, 1.7578rem);
    --font-size-h3: clamp(1.9531rem, 1.8579rem + 0.4764vi, 2.1973rem);
    --font-size-h2: clamp(2.4414rem, 2.3223rem + 0.5955vi, 2.7466rem);
    --font-size-h1: clamp(3.0518rem, 2.9029rem + 0.7443vi, 3.4332rem);
}

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.3;
    /*margin: unset;*/
    padding: unset;
    margin-block-end: var(--step--1);
}

h1 {
    font-weight: 500;
    font-size: var(--font-size-h1);
    margin-block-end: var(--step--1)
}

h2 {
    font-weight: 400;
    font-size: var(--font-size-h2);
}

h3 {
    font-weight: 400;
    font-size: var(--font-size-h3);
}

h4 {
    font-weight: 400;
    font-size: var(--font-size-h4);
}

h5 {
    font-weight: 700;
    font-size: var(--font-size-h5);
}

p,
p.section,
ul,
ol,
li,
th,
td {
    font-weight: 400;
    font-size: var(--font-size-paragraph);
    line-height: var(--font-size-h4);
}

ul,
ol {
    list-style-position: outside;
    margin-inline-start: var(--list-indent, 2rem)
}

.page-content>*+*,
:where(ul, ol)>*+* {
    margin-top: var(--flow-space, 1em);
}

/* bcrumb.css */
nav.bcrumb {
    background-color: hsl(from var(--clr-text-inverse) h s l / 80%);
    position: sticky;
    top: var(--topbar-height); /* main.css */
    z-index: 5;
    backdrop-filter: blur(5px);

    >div {
        --padding: var(--space-normal);
        max-width: calc(2 * var(--padding) + var(--content-width));
        margin-inline: auto;
        padding-inline: var(--padding);
        padding-block: calc(.25 * var(--padding));

        ul.breadcrumb {
            padding: 0;
            margin: 0;
            display: inline-flex;
            flex-wrap: wrap;
            gap: var(--space-quarter) var(--space-half);

            li {
                list-style: none;
                margin-block-start: 0;
                font-size: 0.8rem;
                font-weight: 700;

                &:not(:last-child):after {
                    content: '»';
                    content: "/";
                    margin-inline-start: var(--space-half);
                }

                a {
                    color: var(--clr-base);
                    text-decoration: none;
                }
            }
        }
    }
}

/* nav.css */
nav.navigation-panel {
    height: 100vh;
    overflow-y: auto;
    padding-block-end: var(--space-double);

    &>div {
        display: flex;
        /* padding-inline: var(--space-normal); */
        padding-block-start: var(--space-normal);

        .menu-close {
            margin-inline-start: auto;
            appearance: none;
            background-color: transparent;
            color: var(--clr-text-inverse);
            border: none;
            aspect-ratio: 1/1;
            cursor: pointer;
            font-size: var(--font-size-double);

            &:before {
                content: '\00D7';
                display: block;
                position: relative;
                inset: 0;
                color: var(--clr-text-inverse);
            }
        }
    }

    ul.main-nav {
        display: grid;
        gap: var(--space-quarter);
        transition: all 1s ease-in-out;
        margin: 0;
        padding: 0;

        li {
            display: block;
            margin: 0;
            /* padding-block: var(--space-half); */
            list-style: none;

            color: var(--clr-text-inverse);
            text-transform: uppercase;
            font-weight: 700;

            li {
                .wrapper {
                    padding-inline-start: var(--space-double);
                }

                /* third level: topics under Artykuły */
                li .wrapper {
                    padding-inline-start: calc(var(--space-double) + var(--space-normal));
                }
            }

            .wrapper {
                position: relative;
                display: flex;
                gap: var(--space-quarter);
                padding-block: var(--space-quarter);
                padding-inline: var(--space-normal);

                a {
                    text-decoration: none;
                    display: block;
                    width: 100%;
                    color: inherit;
                    text-decoration: none;
                    cursor: pointer;
                    background-color: transparent;

                    span {
                        color: currentColor;
                        display: flex;
                        align-items: center;
                        width: 100%;

                        button {
                            font-size: var(--font-size-h6);
                            margin-inline-start: auto;
                            appearance: none;
                            color: currentColor;
                            background: none;
                            border: none;
                            rotate: 90deg;
                            cursor: pointer;
                            transition: rotate .15s ease-out;
                        }
                    }
                }
            }

            >div:last-child {
                display: grid;
                grid-template-rows: 0fr;
                transition: all .3s ease-out;

                ul {
                    overflow: hidden;
                    margin: 0;
                    display: grid;
                    gap: 1px;
                }
            }

            &[level="1"][active],
            [level="2"][active],
            [level="3"][active] {

                >div:last-child {
                    grid-template-rows: 1fr;

                    /* 1px between an open item and the first row of its sub-menu */
                    >ul {
                        padding-block-start: 1px;
                    }
                }

                >.wrapper {
                    background-color: hsl(from var(--clr-text-inverse) h s l / 20%);
                }

                .wrapper a span button {
                    rotate: -90deg;
                }
            }
        }

    }
}

/* services.css */
ul.services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-double);
    margin: 0;
    padding: 0;
    margin-block: calc(3 * var(--space-double));

    li {
        list-style: none;

        .service {
            width: 100%;
            aspect-ratio: 1/1;
            background-color: #ffffff;
            color: #333333;
            text-decoration: none;
            font-size: var(--font-size-h5);
            font-weight: 700;
            display: flex;
            text-align: center;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-double);
            box-shadow: var(--space-double) var(--space-double) var(--space-double) #cacaca, -2rem -2rem 6rem #ffffff;
            transition: all .3s ease;
            position: relative;
            z-index: 1;


            .icon {
                display: block;
                flex: none; /* the card is a flex column: don't let it squash the icon */
                width: 110px;
                max-width: 100%;
                height: auto; /* overrides the height="380" attribute in the SVG */
                aspect-ratio: 1/1;
                margin-block-start: var(--space-double)
            }

            &:HOVER {
                text-decoration: none;
                background-color: var(--clr-base);
                color: #ffffff;
                scale: 1.1;
                z-index: 2;

                .icon {
                    mix-blend-mode: multiply
                }
            }


        }

        @media screen and (max-width: 37.5rem) {
            .service {
                aspect-ratio: unset
            }
        }
    }
}

.panel {
    display: flex;
    margin-inline: auto;
    width: 100%;
    max-width: 1310px;
    padding-inline: 30px;
    padding-block: 30px;
    margin-block: 4rem;
    background-color: #ffffff;
    box-shadow: 2rem 2rem 6rem #cacaca, -2rem -2rem 6rem #ffffff;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    z-index: 4;

    .content {
        position: relative;
        z-index: 10;
        margin-inline-end: auto;
    }

    picture {
        float: right;
        margin-inline-start: 1rem;
        margin-block-start: 2rem;
        margin-block-end: 1rem;
        width: 100%;
        max-width: 300px;
        aspect-ratio: 1/1;
        flex-shrink: 0;

        img.panel-image {
            box-shadow: 2rem 2rem 6rem #cacaca, -2rem -2rem 6rem #ffffff;
            object-fit: cover;
            aspect-ratio: 1/1;
            width: 100%;
            max-height: 300px;
            border-radius: 32% 68% 34% 66% / 50% 36% 64% 50%;
            transition: all .3s ease;
            display: block;
        }
    }

    @media screen and (max-width: 37.5rem) {
        flex-direction: column;
    }
}

.panel .content {
    position: relative;
    z-index: 10
}

.panel:HOVER img.panel-image {
    border-radius: 30% 70% 70% 30% / 70% 70% 30% 30%
}


/* Service pages: bullet lists in the panels get the same brand-colour arrow as article text
   (see .article-single in articles.css). Plain <ul> only; positioned arrow so nested content flows normally. */
.panel .content ul:not([class]) {
    list-style: none;
    padding-inline-start: 0;
    margin-inline-start: 0;

    li:not([class]),
    li.list-psyche {
        position: relative;
        list-style: none;
        padding-inline-start: 1.7em;
        margin-block-end: var(--space-half);

        &::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: .3em; /* fallback */
            inset-block-start: calc((1lh - 1.1em) / 2 - .06em); /* centred on the first line */
            width: 1.1em;
            height: 1.1em;
            background: var(--clr-base);
            mask: url(/media/arrow-right-solid-full.svg) center / contain no-repeat;
        }
    }
}


/* icons.css */
:root {
    --icon-star: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBkPSJNMzQxLjUgNDUuMUMzMzcuNCAzNy4xIDMyOS4xIDMyIDMyMC4xIDMyQzMxMS4xIDMyIDMwMi44IDM3LjEgMjk4LjcgNDUuMUwyMjUuMSAxODkuM0w2NS4yIDIxNC43QzU2LjMgMjE2LjEgNDguOSAyMjIuNCA0Ni4xIDIzMUM0My4zIDIzOS42IDQ1LjYgMjQ5IDUxLjkgMjU1LjRMMTY2LjMgMzY5LjlMMTQxLjEgNTI5LjhDMTM5LjcgNTM4LjcgMTQzLjQgNTQ3LjcgMTUwLjcgNTUzQzE1OCA1NTguMyAxNjcuNiA1NTkuMSAxNzUuNyA1NTVMMzIwLjEgNDgxLjZMNDY0LjQgNTU1QzQ3Mi40IDU1OS4xIDQ4Mi4xIDU1OC4zIDQ4OS40IDU1M0M0OTYuNyA1NDcuNyA1MDAuNCA1MzguOCA0OTkgNTI5LjhMNDczLjcgMzY5LjlMNTg4LjEgMjU1LjRDNTk0LjUgMjQ5IDU5Ni43IDIzOS42IDU5My45IDIzMUM1OTEuMSAyMjIuNCA1ODMuOCAyMTYuMSA1NzQuOCAyMTQuN0w0MTUgMTg5LjNMMzQxLjUgNDUuMXoiLz48L3N2Zz4=");
    --icon-team: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBkPSJNMzIwIDY0QzM1NS4zIDY0IDM4NCA5Mi43IDM4NCAxMjhDMzg0IDE2My4zIDM1NS4zIDE5MiAzMjAgMTkyQzI4NC43IDE5MiAyNTYgMTYzLjMgMjU2IDEyOEMyNTYgOTIuNyAyODQuNyA2NCAzMjAgNjR6TTQxNiAzNzZDNDE2IDQwMSA0MDMuMyA0MjMgMzg0IDQzNS45TDM4NCA1MjhDMzg0IDU1NC41IDM2Mi41IDU3NiAzMzYgNTc2TDMwNCA1NzZDMjc3LjUgNTc2IDI1NiA1NTQuNSAyNTYgNTI4TDI1NiA0MzUuOUMyMzYuNyA0MjMgMjI0IDQwMSAyMjQgMzc2TDIyNCAzMzZDMjI0IDI4MyAyNjcgMjQwIDMyMCAyNDBDMzczIDI0MCA0MTYgMjgzIDQxNiAzMzZMNDE2IDM3NnpNMTYwIDk2QzE5MC45IDk2IDIxNiAxMjEuMSAyMTYgMTUyQzIxNiAxODIuOSAxOTAuOSAyMDggMTYwIDIwOEMxMjkuMSAyMDggMTA0IDE4Mi45IDEwNCAxNTJDMTA0IDEyMS4xIDEyOS4xIDk2IDE2MCA5NnpNMTc2IDMzNkwxNzYgMzY4QzE3NiA0MDAuNSAxODguMSA0MzAuMSAyMDggNDUyLjdMMjA4IDUyOEMyMDggNTI5LjIgMjA4IDUzMC41IDIwOC4xIDUzMS43QzE5OS42IDUzOS4zIDE4OC40IDU0NCAxNzYgNTQ0TDE0NCA1NDRDMTE3LjUgNTQ0IDk2IDUyMi41IDk2IDQ5Nkw5NiA0MzkuNEM3Ni45IDQyOC40IDY0IDQwNy43IDY0IDM4NEw2NCAzNTJDNjQgMjk5IDEwNyAyNTYgMTYwIDI1NkMxNzIuNyAyNTYgMTg0LjggMjU4LjUgMTk1LjkgMjYyLjlDMTgzLjMgMjg0LjMgMTc2IDMwOS4zIDE3NiAzMzZ6TTQzMiA1MjhMNDMyIDQ1Mi43QzQ1MS45IDQzMC4yIDQ2NCA0MDAuNSA0NjQgMzY4TDQ2NCAzMzZDNDY0IDMwOS4zIDQ1Ni43IDI4NC40IDQ0NC4xIDI2Mi45QzQ1NS4yIDI1OC40IDQ2Ny4zIDI1NiA0ODAgMjU2QzUzMyAyNTYgNTc2IDI5OSA1NzYgMzUyTDU3NiAzODRDNTc2IDQwNy43IDU2My4xIDQyOC40IDU0NCA0MzkuNEw1NDQgNDk2QzU0NCA1MjIuNSA1MjIuNSA1NDQgNDk2IDU0NEw0NjQgNTQ0QzQ1MS43IDU0NCA0NDAuNCA1MzkuNCA0MzEuOSA1MzEuN0M0MzEuOSA1MzAuNSA0MzIgNTI5LjIgNDMyIDUyOHpNNDgwIDk2QzUxMC45IDk2IDUzNiAxMjEuMSA1MzYgMTUyQzUzNiAxODIuOSA1MTAuOSAyMDggNDgwIDIwOEM0NDkuMSAyMDggNDI0IDE4Mi45IDQyNCAxNTJDNDI0IDEyMS4xIDQ0OS4xIDk2IDQ4MCA5NnoiLz48L3N2Zz4=");
    --icon-booksy: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTguOTY5IiBoZWlnaHQ9IjExNS4zOTMiIHZpZXdCb3g9IjAgMCAxNTguOTY5IDExNS4zOTMiPgogIDxwYXRoIGlkPSJTaGFwZSIgZD0iTTExNy4xLDI4My43YTM1Ljg4NCwzNS44ODQsMCwwLDEsMTkuOC01LjJjMTQuNi42LDI2LjIsNy4yLDMzLjksMTkuOSw0LjUsNy41LDYuMSwxNS43LDYsMjQuNS0uMSw5LjgtMi45LDE4LjYtOS4zLDI2LjEtOCw5LjQtMTguMywxNC0zMC43LDE1LTE4LjMsMS41LTMzLjEtNS45LTQ3LjEtMTYuMy02LjktNS4xLTEzLjgtMTAuMS0yMS4xLTE0LjdhMzUuMDgzLDM1LjA4MywwLDAsMC0xMC4zLTQuNSwxOC4wNjMsMTguMDYzLDAsMCwwLTIwLjYsOC4yLDEyLjgxLDEyLjgxLDAsMCwwLTEuMSwyLDQuNDMsNC40MywwLDAsMS00LjcsMi44Yy0zLjMtLjEtNi42LDAtMTAsMC0zLjktLjEtNC45LTEuNS0zLjQtNS4xLDUuMi0xMi4xLDE0LjQtMTkuOCwyNy4zLTIyLjcsMTItMi43LDIzLS4zLDMyLjksNi45LDUuOCw0LjMsMTEuNSw4LjcsMTcuNCwxMi45LDgsNS42LDE2LjIsMTEuMSwyNS44LDEzLjcsMTAuMSwyLjgsMjAsMi40LDI4LjktNCw1LjItMy44LDguNy04LjcsOS43LTE1LjEsMS4zLTguNS40LTE2LjctNS0yMy45YTIzLjcsMjMuNywwLDAsMC0zOS4zLDEuNGMtMi42LDQuMS00LjMsOC41LTQsMTMuNWE0NC4xNzMsNDQuMTczLDAsMCwxLS4xLDYuM2MtLjIsMi40LTEuNywzLjQtMy43LDIuM2E2NS41NDMsNjUuNTQzLDAsMCwxLTEwLjUtNi45Yy0xLjctMS4zLTEuNC0zLjItMS40LTV2LTYyYzAtNC43LjMtNSw1LjItNWg0LjVjNS4xLjEsNS45LjgsNS45LDYuMVYyODFDMTEyLjQsMjg2LjQsMTEyLjQsMjg2LjQsMTE3LjEsMjgzLjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcuODM1IC0yNDguOCkiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+");
    --icon-phone: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBkPSJNMjA4IDY0QzE3Mi43IDY0IDE0NCA5Mi43IDE0NCAxMjhMMTQ0IDUxMkMxNDQgNTQ3LjMgMTcyLjcgNTc2IDIwOCA1NzZMNDMyIDU3NkM0NjcuMyA1NzYgNDk2IDU0Ny4zIDQ5NiA1MTJMNDk2IDEyOEM0OTYgOTIuNyA0NjcuMyA2NCA0MzIgNjRMMjA4IDY0ek0zMjAgNTI4QzMwMi4zIDUyOCAyODggNTEzLjcgMjg4IDQ5NkMyODggNDc4LjMgMzAyLjMgNDY0IDMyMCA0NjRDMzM3LjcgNDY0IDM1MiA0NzguMyAzNTIgNDk2QzM1MiA1MTMuNyAzMzcuNyA1MjggMzIwIDUyOHoiLz48L3N2Zz4=");
    --icon-marker: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBkPSJNMTI4IDI1Mi42QzEyOCAxNDguNCAyMTQgNjQgMzIwIDY0QzQyNiA2NCA1MTIgMTQ4LjQgNTEyIDI1Mi42QzUxMiAzNzEuOSAzOTEuOCA1MTQuOSAzNDEuNiA1NjkuNEMzMjkuOCA1ODIuMiAzMTAuMSA1ODIuMiAyOTguMyA1NjkuNEMyNDguMSA1MTQuOSAxMjcuOSAzNzEuOSAxMjcuOSAyNTIuNnpNMzIwIDMyMEMzNTUuMyAzMjAgMzg0IDI5MS4zIDM4NCAyNTZDMzg0IDIyMC43IDM1NS4zIDE5MiAzMjAgMTkyQzI4NC43IDE5MiAyNTYgMjIwLjcgMjU2IDI1NkMyNTYgMjkxLjMgMjg0LjcgMzIwIDMyMCAzMjB6Ii8+PC9zdmc+");
    --icon-apps: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNzYiIGhlaWdodD0iMTc2IiByeD0iNTIiLz48cmVjdCB4PSIyNzIiIHk9IjY0IiB3aWR0aD0iMTc2IiBoZWlnaHQ9IjE3NiIgcng9IjUyIi8+PHJlY3QgeD0iNjQiIHk9IjI3MiIgd2lkdGg9IjE3NiIgaGVpZ2h0PSIxNzYiIHJ4PSI1MiIvPjxyZWN0IHg9IjI3MiIgeT0iMjcyIiB3aWR0aD0iMTc2IiBoZWlnaHQ9IjE3NiIgcng9IjUyIi8+PC9zdmc+");
    --icon-search: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBkPSJNNDgwIDI3MkM0ODAgMzE3LjkgNDY1LjEgMzYwLjMgNDQwIDM5NC43TDU2Ni42IDUyMS40QzU3OS4xIDUzMy45IDU3OS4xIDU1NC4yIDU2Ni42IDU2Ni43QzU1NC4xIDU3OS4yIDUzMy44IDU3OS4yIDUyMS4zIDU2Ni43TDM5NC43IDQ0MEMzNjAuMyA0NjUuMSAzMTcuOSA0ODAgMjcyIDQ4MEMxNTcuMSA0ODAgNjQgMzg2LjkgNjQgMjcyQzY0IDE1Ny4xIDE1Ny4xIDY0IDI3MiA2NEMzODYuOSA2NCA0ODAgMTU3LjEgNDgwIDI3MnpNMjcyIDQxNkMzNTEuNSA0MTYgNDE2IDM1MS41IDQxNiAyNzJDNDE2IDE5Mi41IDM1MS41IDEyOCAyNzIgMTI4QzE5Mi41IDEyOCAxMjggMTkyLjUgMTI4IDI3MkMxMjggMzUxLjUgMTkyLjUgNDE2IDI3MiA0MTZ6Ii8+PC9zdmc+");
}

/* tables.css */
.table {
    --padding-inline: var(--space-half);
    --padding-block: var(--space-half);
    --highlight: var(--clr-base);
    --border-color: var(--clr-base);
    --border-width: 1px;
    --heading-font-size: var(--font-size-paragraph);
    --cell-font-size: var(--font-size-paragraph);
    --font-family: var(--font-regular);
    width: 100%;
    border-collapse: collapse;

    thead {
        th {
            padding-inline: var(--padding-inline);
            padding-block: var(--padding-block);
            text-align: left;
            border-block-end-width: var(--border-width);
            border-block-end-color: var(--border-color);
            border-block-end-style: solid;
            font-size: var(--heading-font-size);
            font-weight: 700;
            vertical-align: center;
            background-color: var(--clr-base);
            color: var(--clr-text-inverse);
        }
    }

    tbody {
        td {
            padding-inline: var(--padding-inline);
            padding-block: var(--padding-block);
            text-align: left;
            font-size: var(--cell-font-size);
            font-family: var(--font-family);
            line-height: var(--as-line-height-tight);
            border-block-end-width: var(--border-width);
            border-block-end-color: var(--border-color);
            border-block-end-style: solid;
            transition: all var(--as-time-xs) ease-out;
            vertical-align: top;

            * {
                /*font-size: inherit;*/
                line-height: inherit;
            }
        }
    }

    &.prices {
        :is(td,th) {
            width: 10%;

            &:first-of-type {
                width: 70%;
                font-weight: 700;
            }

            &.right {
                text-align: right;
            }
        }
    }


    @media screen and (max-width: 37.5rem) {
        min-width: unset;

        thead {
            display: none;
        }

        tr {
            display: flex;
            flex-direction: column;
            gap: var(--as-space-xxs);
            
            td {
                width: 100% !important;
            }

            td:not(:last-child) {
                border: unset;
            }
        }
    }

}


/* newsletter.css */
/* Newsletter signup page (/newsletter/, script/newsletter.js) */

.newsletter-form {
    display: grid;
    gap: var(--space-normal);
    max-width: 40rem;
    margin-block: var(--space-double);
    font-family: var(--font-regular);

    label {
        font-weight: var(--font-weight-ui);
        color: var(--clr-text-2);
    }

    > div {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-half);
    }

    input[type="email"] {
        flex: 1;
        min-width: min(100%, 14rem);
        padding: .75rem 1rem;
        font: inherit;
        color: var(--clr-text);
        background-color: var(--clr-surface-raised);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-card);
    }

    /* same look as the emphasised hero button (.btn__booksy) */
    button[type="submit"] {
        appearance: none;
        padding-block: .875rem;
        padding-inline: 1.5rem;
        border: 0;
        border-radius: var(--radius-pill);
        background-color: var(--btn-emph-bg);
        color: var(--btn-emph-fg);
        font: inherit;
        font-weight: var(--font-weight-ui);
        line-height: var(--line-height-tight);
        cursor: pointer;
        transition: background-color var(--duration-fast) var(--ease-out),
                    color var(--duration-fast) var(--ease-out);

        &:hover {
            background-color: var(--btn-emph-hover-bg);
            color: var(--btn-emph-hover-fg);
        }

        &:disabled {
            opacity: .6;
            cursor: progress;
        }
    }

    input:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 3px;
    }

    .newsletter-consent {
        display: flex;
        gap: var(--space-half);
        align-items: flex-start;
        font-family: var(--font-text);
        font-weight: var(--font-weight-body);
        font-size: var(--font-size-small);
        color: var(--clr-text-muted);

        /* custom box in the input's language: raised white, hairline border; checked = the button's coral with a dark tick */
        input[type="checkbox"] {
            appearance: none;
            flex: none;
            width: 1.375rem;
            height: 1.375rem;
            margin: 0;
            margin-block-start: .05rem;
            border: 1px solid var(--clr-border);
            border-radius: .4rem;
            background: var(--clr-surface-raised) center / 85% no-repeat;
            cursor: pointer;
            transition: background-color var(--duration-fast) var(--ease-out),
                        border-color var(--duration-fast) var(--ease-out);

            &:hover {
                border-color: var(--btn-emph-bg);
            }

            &:checked {
                border-color: var(--btn-emph-bg);
                background-color: var(--btn-emph-bg);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2312302E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
            }
        }
    }

    .newsletter-status {
        min-height: 1.5em;
        margin: 0;
        color: var(--clr-base-strong);
    }
}

/* the confirmation that replaces the form after a successful signup */
.newsletter-done {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--font-size-paragraph);
    color: var(--clr-base-strong);

    &:focus {
        outline: none;
    }
}

/* Footer: a second column next to the contact details, compact, on the dark footer */
.footer_content > div {
    flex-wrap: wrap;
    gap: var(--space-double) var(--space-triple);
}

.footer_content > div > div:first-child {
    flex: 1 1 22rem;
}

.footer_newsletter {
    flex: 0 1 26rem;
    min-width: min(100%, 18rem);

    p {
        margin-block: 0 var(--space-normal);
        font-family: var(--font-text);
        font-size: var(--font-size-small);
        color: var(--clr-text-inverse);
    }
}

/* Phones: the two footer columns are plain stacked blocks */
@media screen and (max-width: 37.5rem) {
    .footer_content > div {
        display: block;
    }

    .footer_newsletter {
        max-width: none;
        margin-block-start: var(--space-double);
    }
}

.newsletter-form--footer {
    max-width: none;
    margin-block: 0;
    gap: var(--space-half);

    /* the placeholder says it; keep the label for screen readers */
    .newsletter-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .newsletter-label,
    .newsletter-consent {
        color: var(--clr-text-inverse);
    }

    .newsletter-consent {
        line-height: 1.5;

        a {
            color: inherit;
            text-decoration: underline;
        }
    }

    .newsletter-status {
        min-height: 0;
        font-size: var(--font-size-small);
        color: var(--clr-footer-link);
    }

    input:focus-visible,
    button:focus-visible {
        outline-color: var(--clr-focus-on-dark);
    }

    .newsletter-done {
        padding-inline-start: var(--space-normal);
        border-inline-start: 3px solid var(--clr-accent);
        font-size: var(--font-size-small);
        color: var(--clr-text-inverse);
    }
}

/* archive of sent issues (/trzy-minuty-dla-umyslu/) */
.newsletter-archive time {
    margin-inline-start: var(--space-half);
    font-size: var(--font-size-small);
    color: var(--clr-text-muted);
}

/* same look as the emphasised hero button (.btn__booksy) */
.newsletter-button {
    display: inline-block;
    padding-block: .875rem;
    padding-inline: 1.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--btn-emph-bg);
    color: var(--btn-emph-fg);
    font-family: var(--font-regular);
    font-weight: var(--font-weight-ui);
    line-height: var(--line-height-tight);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);

    &:hover {
        background-color: var(--btn-emph-hover-bg);
        color: var(--btn-emph-hover-fg);
    }

    &:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 3px;
    }
}

.newsletter-note {
    font-size: var(--font-size-small);
    color: var(--clr-text-muted);
}

.newsletter-member {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-normal);
    align-items: start;

    & img {
        width: 100%;
        height: auto;
        border-radius: var(--radius, 0.25rem);
    }

    & h3 {
        margin-block-start: 0;
    }

    @media (max-width: 36rem) {
        grid-template-columns: 1fr;

        & img {
            max-width: 10rem;
        }
    }
}

/* Internal issue generator (/narzedzia/newsletter/, script/newsletter-generator.js) */
.nl-gen {
    display: grid;
    gap: var(--space-normal);
    max-width: 52rem;
    margin-block: var(--space-double) var(--space-section);
    font-family: var(--font-regular);

    &[hidden] {
        display: none;
    }

    h2 {
        margin-block: 0 var(--space-half);
        font-size: var(--font-size-h4);
    }

    label {
        font-weight: var(--font-weight-ui);
        color: var(--clr-text-2);
    }

    input[type="text"],
    input[type="number"],
    textarea {
        flex: 1;
        min-width: 0;
        padding: .75rem 1rem;
        font: inherit;
        color: var(--clr-text);
        background-color: var(--clr-surface-raised);
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-card);
    }

    input[type="number"] {
        flex: none;
        width: 6rem;
        margin-inline-start: var(--space-half);
    }

    input[readonly] {
        color: var(--clr-text-muted);
    }

    button {
        appearance: none;
        padding: .6rem 1.1rem;
        border: 0;
        border-radius: var(--radius-pill);
        background-color: var(--btn-emph-bg);
        color: var(--btn-emph-fg);
        font: inherit;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-ui);
        white-space: nowrap;
        cursor: pointer;

        &:hover {
            background-color: var(--btn-emph-hover-bg);
        }
    }

    input:focus-visible,
    textarea:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 2px;
    }
}

.nl-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-half) var(--space-normal);
}

.nl-card {
    padding: var(--space-normal);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    background-color: var(--clr-surface-raised);
    box-shadow: var(--shadow-1);
}

.nl-field {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-half);
    margin-block-start: var(--space-half);

    > label {
        flex-basis: 100%;
    }
}

.nl-meta {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--clr-text-muted);
}

.nl-article {
    margin-block: 0;
    font-weight: var(--font-weight-card);
}

.nl-sentences {
    display: grid;
    gap: var(--space-half);
    margin: var(--space-half) 0 0;
    padding: 0;
    list-style: none;

    li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-quarter) var(--space-half);
        padding-block-end: var(--space-half);
        border-bottom: 1px solid var(--clr-border);
    }

    li > span {
        flex: 1 1 24rem;
        font-family: var(--font-text);
    }
}

/* Invitation under articles and on /kontakt/ (partials/newsletter-promo.njk): a box with the two blobs of the newsletter header */
.newsletter-promo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-block: var(--space-double);
    padding: var(--space-double);
    background-color: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);

    &::before,
    &::after {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        pointer-events: none;
    }

    /* teal, top right */
    &::before {
        inline-size: 16rem;
        block-size: 16rem;
        inset-block-start: -6rem;
        inset-inline-end: -5rem;
        background-color: var(--clr-base);
        opacity: .12;
    }

    /* coral, bottom left */
    &::after {
        inline-size: 10.5rem;
        block-size: 10.5rem;
        inset-block-end: -4.5rem;
        inset-inline-start: -4rem;
        background-color: var(--clr-accent);
        opacity: .22;
    }

    /* text left, form right; one column once the box is too narrow for two */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-double);
    align-items: center;

    .newsletter-promo-kicker {
        margin-block: 0;
        font-family: var(--font-regular);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-ui);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--clr-base-strong);
    }

    h2 {
        margin-block: var(--space-half);
        text-align: start;
    }

    .newsletter-promo-links {
        font-size: var(--font-size-small);
    }

    .newsletter-form {
        margin-block: 0;
    }
}

/* Newsletter page: text left, app screen right; the screen drops below the text on narrow screens */
.newsletter-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-double);
    align-items: start;
}

.newsletter-intro-text {
    min-width: 0;
}

.newsletter-app {
    margin: 0;
    justify-self: center;
    max-inline-size: 16rem;
    text-align: center;

    img {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }

    figcaption {
        font-family: var(--font-text);
        font-size: var(--font-size-small);
        color: var(--clr-text-muted);
    }
}

@media screen and (min-width: 48rem) {
    .newsletter-intro {
        grid-template-columns: minmax(0, 1fr) 16rem;
    }
}

.nl-member {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-normal);
    align-items: start;

    & img {
        width: 100%;
        height: auto;
    }

    @media (max-width: 36rem) {
        grid-template-columns: 1fr;
    }
}

/* Mini apps: box under articles (partials/app-promo.njk) and the list on /mini-aplikacje/ */
.app-promo {
    margin-block: var(--space-double);
    padding: var(--space-normal) var(--space-double);
    background-color: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
}

.app-promo-kicker {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--clr-text-muted);
}

.app-promo-note {
    margin-block-end: 0;
    font-size: var(--font-size-small);
    color: var(--clr-text-muted);
}

.page-content ul.app-promo-list,
.page-content ul.app-list {
    list-style: none;
    padding: 0;
    margin-inline: 0;
    display: grid;
    gap: var(--space-normal);

    & li {
        display: grid;
        gap: .15rem;
        padding: 0;
    }

    & li::before {
        content: none;
    }
}

/* Homepage teaser (partials/app-teaser.njk) */
.app-teaser {
    margin-block: var(--space-double);
}

.page-content ul.app-teaser-icons {
    list-style: none;
    padding: 0;
    margin: var(--space-normal) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-normal);

    & li {
        padding: 0;
        list-style: none;
    }

    & li::before {
        content: none;
    }

    & a {
        display: grid;
        justify-items: center;
        gap: .35rem;
        inline-size: 5rem;
        text-align: center;
        text-decoration: none;
        font-size: var(--font-size-small);
        color: inherit;
    }

    & a:hover span {
        text-decoration: underline;
    }

    & img {
        inline-size: 4rem;
        block-size: 4rem;
        border-radius: 1rem;
        box-shadow: 0 1px 4px rgba(18, 48, 46, .2);
    }
}

/* /mini-aplikacje/: wide picture on top, taller promo picture beside the intro */
.app-hero {
    margin: 0 0 var(--space-double);

    & img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        max-block-size: 28rem;
        object-fit: cover;
        object-position: 30% 40%;
        border-radius: var(--radius-card);
    }
}

@media screen and (min-width: 48rem) {
    .newsletter-intro--apps {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }

    .newsletter-intro--apps .newsletter-app {
        max-inline-size: 22rem;
    }
}


/* tokens.blend.css */
/* Fonts (Fraunces, Instrument Sans, Newsreader) load from sitelayout.njk */
/* Direction C — Blend. Refine's teal system + Fraunces headings,
   Newsreader paragraphs, Instrument Sans navigation & UI + coral, teal's complementary colour,
   reserved for the booking actions, the article band and focus. */

:root {

    /* Colour */
    --clr-base: #007A74;
    --clr-base-strong: #0B5E59;
    --clr-brand: #018E87;
    --clr-accent: #E8836B;
    --clr-text: #1B2B2A;
    --clr-text-2: #3A4948;
    --clr-text-muted: #5C6B6A;
    --clr-text-inverse: #FFFFFF;
    --clr-bg: #F2F5F4;
    --clr-surface: #F2F5F4;
    --clr-surface-raised: #FFFFFF;
    --clr-border: #D9E2E1;
    --clr-tint: #FBEDE6;
    --clr-on-tint: #0B5E59;
    --clr-dark: #12302E;
    --clr-footer-bg: #12302E;
    --clr-footer-link: #F6B39F;
    --clr-focus: #B34A36;
    --clr-overlay: #12302EB3;
    --hero-scrim: linear-gradient(180deg, rgb(18 48 46 / .15) 0%, rgb(18 48 46 / .35) 45%, rgb(18 48 46 / .85) 100%);
    --clr-accent-soft: #F6B39F;
    --clr-accent-strong: #B34A36;
    --clr-focus-on-dark: #F6B39F;

    /* Type */
    --font-regular: "Instrument Sans", system-ui, sans-serif;
    --font-display: Fraunces, Georgia, serif;
    --font-text: Newsreader, Georgia, serif;
    --text-size-adjust: 0.5;
    --display-variation: "SOFT" 100, "WONK" 0;
    --numerals: lining-nums;
    --font-weight-body: 400;
    --font-weight-h1: 500;
    --font-weight-h2: 400;
    --font-weight-card: 500;
    --font-weight-ui: 600;
    --font-size-small: 0.875rem;
    --font-size-paragraph: clamp(1rem, .95rem + .25vi, 1.125rem);
    --font-size-h5: clamp(1.125rem, 1.08rem + .2vi, 1.25rem);
    --font-size-h4: clamp(1.25rem, 1.17rem + .35vi, 1.5rem);
    --font-size-h3: clamp(1.5rem, 1.38rem + .5vi, 1.875rem);
    --font-size-h2: clamp(1.875rem, 1.6rem + 1.2vi, 2.625rem);
    --font-size-h1: clamp(2.375rem, 1.9rem + 2vi, 3.5rem);
    --font-size-h6: 1rem;  /* was undefined */
    --line-height-body: 1.6;
    --line-height-heading: 1.15;
    --tracking-heading: -0.015em;
    --measure: 66ch;

    /* Space */
    --space-quarter: 0.25rem;
    --space-small: 0.5rem;  /* was undefined */
    --space-half: 0.5rem;
    --space-normal: 1rem;
    --space-double: 2rem;
    --space-triple: 3rem;
    --space-section: clamp(3rem, 2rem + 4vi, 6rem);

    /* Shape */
    --border-radius-small: 0.5rem;  /* was undefined */
    --border-radius-circle: 50%;  /* was undefined */
    --radius-card: 1rem;
    --radius-panel: 1.5rem;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgb(18 48 46 / .06), 0 4px 16px rgb(18 48 46 / .06);
    --shadow-2: 0 2px 4px rgb(18 48 46 / .08), 0 14px 32px rgb(18 48 46 / .12);

    /* Motion */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    /* Navigation */
    --nav-left: var(--nav-gap);
    --nav-right: auto;
    --nav-gap: clamp(1.25rem, 3vw, 1.5rem);
    --nav-width: 400px;
    --nav-pad: .5rem;
    --nav-radius: 1.25rem;
    --nav-bg: rgb(38 42 46 / .72);
    --nav-backdrop: blur(18px) saturate(140%);
    --nav-border: rgb(255 255 255 / .12);
    --nav-shadow: 0 24px 60px rgb(0 0 0 / .28);
    --nav-hidden-x: calc(-100% - 2 * var(--nav-gap));
    --nav-duration: 350ms;
    --nav-z: 850;
    --nav-overlay-z: 840;
    --nav-overlay-bg: rgb(20 24 27 / .28);
    --nav-weight: 600;
    --nav-tracking: .06em;
    --nav-size: .9375rem;
    --nav-sub-case: none;
    --nav-sub-weight: 500;
    --nav-close-size: 2.25rem;
    --nav-close-inset: .75rem;
    --nav-close-top: 1rem;
    --mnav-gap: var(--nav-gap);
    --mnav-radius: var(--nav-radius);
    --mnav-bg: var(--nav-bg);
    --mnav-backdrop: var(--nav-backdrop);
    --mnav-border: var(--nav-border);
    --mnav-shadow: var(--nav-shadow);
    --mnav-pad-block: .375rem;
    --mnav-pad-inline: .375rem;
    --nav-item-radius: .75rem;
    --nav-avatar-display: block;
    --nav-avatar-size: 2rem;
    --nav-avatar-pad: .375rem;
    --nav-avatar-row-radius: 999px;
    --nav-avatar-fallback: rgb(255 255 255 / .12);
    --nav-avatar-ring: rgb(255 255 255 / .16);
    --nav-avatar-ring-hover: var(--clr-accent-soft);
    --nav-item-hover: rgb(255 255 255 / .08);

    /* Page header */
    --color-bg1: #0B5E59;
    --color-bg2: #12302E;
    --color1: 1, 142, 135;
    --color2: 232, 131, 107;
    --color3: 121, 168, 87;
    --color4: 246, 179, 159;
    --color5: 104, 161, 202;
    --blending: screen;
    --ph-height: clamp(10rem, 24vh, 15rem);
    --ph-title-offset: 1.5rem;
    --ph-title-size: .8125rem;
    --ph-title-tracking: .18em;
    --ph-title-weight: 600;

    /* Layout */
    --index-bcrumb: 390;
    --content-width: 80rem;
    --bp-small: 37.5rem;

    /* Component */
    --btn-emph-bg: var(--clr-accent);
    --btn-emph-fg: #12302E;
    --btn-emph-hover-bg: var(--clr-accent-soft);
    --btn-emph-hover-fg: #12302E;
    --cta-emph-bg: var(--clr-accent);
    --cta-emph-fg: #12302E;
    --cta-emph-border: var(--clr-accent);
    --cta-emph-fill: var(--clr-accent-soft);
    --cta-emph-hover-bg: var(--clr-accent);
    --cta-hover-bg: transparent;
    --card-hover-border: var(--clr-accent);
    --card-hover-bg: var(--clr-surface-raised);
    --card-hover-fg: #12302E;
    --card-hover-scale: 1.1;
    --card-hover-transform: none;
    --panel-rail-gap: clamp(2rem, 4vw, 4rem);
    --faq-pad-block: 1.125rem;
    --faq-pad-inline: 1.25rem;
    --card-fill-mask: none;
    --card-fill-final: var(--clr-accent);
    --card-fill-dx: 0;
    --card-fill-w: 100%;
    --card-fill-h: 100%;
    --card-fill-entry: 100%;
    --card-fill-exit: -100%;
    --card-fill-travel: -100%;
    --card-fill-duration: 400ms;
    --member-name-gap: 0.5rem;
    --member-name-pad: 0.75rem;
    --location-scrim: linear-gradient(180deg, rgb(18 48 46 / 0) 35%, rgb(18 48 46 / .78) 100%);
    --table-head-bg: var(--clr-surface);
    --table-row-hover: var(--clr-tint);
    --member-reveal: 350ms;
    --member-ring: var(--clr-accent);
    --member-pill-bg: var(--nav-bg);
    --member-pill-backdrop: var(--nav-backdrop);
    --filter-hover-scale: 1.05;
    --filter-pad-block: 1rem;
    --filter-pad-inline: 1.25rem;
    --filter-bar-offset: .375rem;
    --aud-display: block;
    --card-pad-bottom: 3.75rem;
    --card-icon-offset: .75rem;
    --aud-bottom: 1rem;
    --aud-size: 0.75rem;
    --aud-bar-w: 3.5rem;
    --aud-key-w: 1.5rem;
    --aud-key-h: 6px;
    --aud-pill-neutral: var(--clr-surface);
    --aud-bar-h: 4px;
    --card-icon-blend: multiply;
    --card-hover-icon-blend: multiply;

    /* Tertiary */
    --clr-ochre-soft: #FCF3E3;
    --clr-ochre-base: #CE8F22;
    --clr-ochre-strong: #885E16;
    --clr-sage-soft: #EFF6E9;
    --clr-sage-base: #79A857;
    --clr-sage-strong: #4D6C37;
    --clr-berry-soft: #F8E8F0;
    --clr-berry-base: #CD84AB;
    --clr-berry-strong: #9C4071;
    --clr-sky-soft: #E7F1F9;
    --clr-sky-base: #68A1CA;
    --clr-sky-strong: #31668C;
    --clr-cat-kids: var(--clr-ochre-base);
    --clr-cat-youth: var(--clr-sky-base);
    --clr-cat-adult: var(--clr-berry-base);
    --clr-cat-kids-tint: color-mix(in oklab, var(--clr-cat-kids) 40%, white);
    --clr-cat-youth-tint: color-mix(in oklab, var(--clr-cat-youth) 40%, white);
    --clr-cat-adult-tint: color-mix(in oklab, var(--clr-cat-adult) 40%, white);
    --clr-cat-online-tint: color-mix(in oklab, var(--clr-cat-online) 40%, white);
    --clr-cat-online: var(--clr-sage-base);
}

/* Alternative card fill: diagonal sweep. Add data-card-fill="sweep" to <html>,
   or copy these values into :root above to make it the default. */
:root[data-card-fill="sweep"] {
    --card-fill-mask: linear-gradient(135deg, transparent 33.333%, #000 33.333% 66.667%, transparent 66.667%);
    --card-fill-dx: 1;
    --card-fill-w: 300%;
    --card-fill-h: auto;
    --card-fill-entry: 0%;
    --card-fill-exit: -66.667%;
    --card-fill-travel: -33.333%;
    --card-fill-duration: 500ms;
}

/* ------------------------------------------------------------------
   Component layer — restyles existing selectors through tokens only.
   Load AFTER the site's own CSS. No HTML changes required.
   ------------------------------------------------------------------ */

body {
    background-color: var(--clr-surface);
    color: var(--clr-text);
    font-family: var(--font-regular);
    font-weight: var(--font-weight-body);
    font-variant-numeric: var(--numerals);
}

/* Body copy: real line-height instead of borrowing --font-size-h4 */
p, p.section, ul, ol, li, th, td {
    line-height: var(--line-height-body);
}

.page-content > p {
    max-inline-size: var(--measure);
    color: var(--clr-text-2);
}

/* Running text (paragraphs + prose lists) uses --font-text; navigation and UI stay
   on --font-regular. font-size-adjust evens out the x-height of a swapped-in serif. */
.page-content :is(p, :is(ul:not(.team, .services, .locations, .breadcrumb), ol) > li) {
    font-family: var(--font-text);
    font-size-adjust: var(--text-size-adjust);
}

/* main.css pins b/strong/i/em to --font-regular; let them follow the text font */
.page-content :is(p, :is(ul:not(.team, .services, .locations, .breadcrumb), ol) > li) :is(b, strong, i, em) {
    font-family: inherit;
}

/* Bold words inside headings stay in the heading face (main.css pins b/strong) */
:is(h1, h2, h3, h4, h5) :is(b, strong) {
    font-family: inherit;
    font-variation-settings: inherit;
    font-weight: 600;
}

/* Intro copy is wrapped in <strong> in the CMS — neutralise it in CSS */
.page-content > p > strong:only-child {
    font-weight: inherit;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-variation-settings: var(--display-variation);
    line-height: var(--line-height-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
}

h1 { font-weight: var(--font-weight-h1); }
h2 { font-weight: var(--font-weight-h2); color: var(--clr-text); }

.page-content > h2 {
    margin-block-start: var(--space-section);
}

/* Heading rhythm below h2: the global reset zeroes margins, and the
   .page-content flow rule scales with each heading's own font size.
   Give h3/h4 fixed steps, also inside cards (.article, .panel) where
   "h3 { margin-block: 0 }" would otherwise win. */
.page-content > h3,
:is(.article, .article-single, .panel) > h3:not(:first-child) {
    margin-block-start: var(--space-double);
}

.page-content > h4,
:is(.article, .article-single, .panel) > h4:not(:first-child) {
    margin-block-start: var(--space-normal);
}

/* ---------- Navigation drawer
   A & B: full-height panel on the right, as today (tokens reproduce it).
   C: detached, rounded, frosted anthracite drawer floating on the left. */
.navigation-overlay {
    right: 0;
    background-color: var(--nav-overlay-bg);
    z-index: var(--nav-overlay-z);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out),
                visibility 0s linear var(--duration-base);

    &.open {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--duration-base) var(--ease-out), visibility 0s;
    }
}

nav.navigation-panel {
    top: var(--nav-gap);
    bottom: var(--nav-gap);
    left: var(--nav-left);
    right: var(--nav-right);
    width: min(var(--nav-width), calc(100vw - 2 * var(--nav-gap)));
    z-index: var(--nav-z);
    height: auto;
    padding-inline: var(--nav-pad);
    border-radius: var(--nav-radius);
    border: 1px solid var(--nav-border);
    background-color: var(--nav-bg);
    -webkit-backdrop-filter: var(--nav-backdrop);
    backdrop-filter: var(--nav-backdrop);
    box-shadow: var(--nav-shadow);
    font-family: var(--font-regular);
    overscroll-behavior: contain;
    translate: var(--nav-hidden-x) 0;
    visibility: hidden;
    transition: translate var(--nav-duration) var(--ease-out),
                visibility 0s linear var(--nav-duration);
}

nav.navigation-panel.open {
    left: var(--nav-left);
    right: var(--nav-right);
    translate: 0 0;
    visibility: visible;
    transition: translate var(--nav-duration) var(--ease-out), visibility 0s;
}

nav.navigation-panel ul.main-nav li {
    font-weight: var(--nav-weight);
    letter-spacing: var(--nav-tracking);
    font-size: var(--nav-size);
}

nav.navigation-panel ul.main-nav li li {
    text-transform: var(--nav-sub-case);
    font-weight: var(--nav-sub-weight);
    letter-spacing: 0;
}

nav.navigation-panel ul.main-nav li .wrapper {
    border-radius: var(--nav-item-radius);
    transition: background-color var(--duration-fast) var(--ease-out);
}

nav.navigation-panel ul.main-nav li .wrapper:hover {
    background-color: var(--nav-item-hover);
}

/* Every row is as tall as a Zespół member row (avatar + its padding) */
nav.navigation-panel ul.main-nav li .wrapper {
    align-items: center;
    align-content: center;
    border-radius: var(--nav-avatar-row-radius);
    min-block-size: calc(var(--nav-avatar-size) + 2 * var(--nav-avatar-pad));
}

/* Specialist avatars in the Zespół sub-menu (C). Each profile link gets --avatar
   from generated rules (avatars.json → build.py), scoped to the OPEN drawer so
   the photos are only fetched once someone opens the menu. */
nav.navigation-panel a[href^="/zespół/"]:not([href="/zespół/"]) > span::before {
    content: "";
    display: var(--nav-avatar-display);
    flex: none;
    width: var(--nav-avatar-size);
    aspect-ratio: 1;
    margin-inline-end: .75rem;
    border-radius: 50%;
    background: var(--avatar, none) center / cover no-repeat, var(--nav-avatar-fallback);
    box-shadow: 0 0 0 2px var(--nav-avatar-ring);
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

/* Member rows: pad around the avatar and use a pill hover, so the hover shape is
   concentric with the avatar (pill radius = avatar radius + padding). The sub-menu
   indent moves from padding to margin so the left inset matches too. */
nav.navigation-panel ul.main-nav li li .wrapper:has(> a[href^="/zespół/"]:not([href="/zespół/"])) {
    margin-inline-start: calc(var(--space-double) - var(--nav-avatar-pad));
    padding-block: var(--nav-avatar-pad);
    padding-inline-start: var(--nav-avatar-pad);
    border-radius: var(--nav-avatar-row-radius);
}

/* Service icons in the Oferta sub-menu: same row geometry as the avatars */
nav.navigation-panel .nav-service-icon {
    flex: none;
    width: var(--nav-avatar-size);
    height: var(--nav-avatar-size);
    margin-inline-end: .75rem;
    object-fit: contain;
}

nav.navigation-panel ul.main-nav li li .wrapper:has(> a[href^="/oferta/"]:not([href="/oferta/"])) {
    margin-inline-start: calc(var(--space-double) - var(--nav-avatar-pad));
    padding-block: var(--nav-avatar-pad);
    padding-inline-start: var(--nav-avatar-pad);
    border-radius: var(--nav-avatar-row-radius);
}

nav.navigation-panel a[href^="/oferta/"]:not([href="/oferta/"]) > span {
    display: flex;
    align-items: center;
}

nav.navigation-panel .wrapper:hover a[href^="/zespół/"] > span::before,
nav.navigation-panel a[href^="/zespół/"]:focus-visible > span::before {
    box-shadow: 0 0 0 2px var(--nav-avatar-ring-hover);
}

/* Close button: a proper square box centred on the same vertical line as the
   sub-menu arrows (≈ 38px in from the drawer's right edge), round hover like the items */
nav.navigation-panel > div:first-child {
    padding-block: var(--nav-close-top) .25rem;
    padding-inline-end: var(--nav-close-inset);
}

nav.navigation-panel > div:first-child .menu-close {
    display: grid;
    place-items: center;
    width: var(--nav-close-size);
    height: var(--nav-close-size);
    padding: 0;
    aspect-ratio: auto;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color var(--duration-fast) var(--ease-out);

    &::before {
        line-height: 1;
    }

    &:hover {
        background-color: var(--nav-item-hover);
    }
}

nav.navigation-panel :is(a, button):focus-visible {
    outline: 2px solid var(--clr-focus-on-dark);
    outline-offset: 2px;
    border-radius: var(--nav-item-radius);
}

/* ---------- Layer order
   top bar (400) > breadcrumb (390) > all page content; above them only the mobile
   bottom bar (800), the menu dimmer (840) and the drawer (850).
   The content areas are isolated, so their internal z-indexes (panel text,
   hovered cards, the header title) never compete with
   the top bar or the breadcrumb. */
.page-content,
.gradient-bg {
    isolation: isolate;
}

nav.bcrumb {
    z-index: var(--index-bcrumb);
}

/* ---------- Top bar */
@keyframes topbar-bg {
    to { background-color: hsl(from var(--clr-base-strong) h s l / 92%); }
}

.topbar .phone-link:focus-visible,
.topbar .search-link:focus-visible,
.topbar .menu-button:focus-visible {
    outline: 2px solid var(--clr-text-inverse);
    outline-offset: 2px;
    border-radius: var(--border-radius-small);
}

/* ---------- Hero */
.header_video_wrapper .header_video .header_video_overlay {
    background: var(--hero-scrim);
    opacity: 1;
    backdrop-filter: none;
}

.header_video_wrapper .header_video .header_video_text_buttons {
    padding: clamp(1.25rem, 4vi, 3rem);
    max-width: calc(var(--content-width) + 2 * var(--space-normal));
}

/* Title is the largest thing on the page again (was 2rem, below h2) */
.header_video_wrapper .header_video .header_video_text_buttons h1 {
    font-size: clamp(1.75rem, 1.2rem + 3vi, var(--font-size-h1));
    max-width: 20ch;
    margin-block-end: var(--space-double);
}

.header_video_wrapper .header_video .header_video_text_buttons p {
    color: hsl(from var(--clr-text-inverse) h s l / 88%);
    font-size: var(--font-size-small);
    line-height: 1.6;
}

/* ---------- Buttons */
.btn a {
    font-weight: var(--font-weight-ui);
    color: var(--clr-base);
    background-color: var(--clr-surface-raised);
    border-radius: var(--radius-pill);
    padding-block: .875rem;
    padding-inline: 1.5rem;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.btn a:hover {
    background-color: var(--clr-base-strong);
    color: var(--clr-text-inverse);
}

/* Specialist and service pages: the booking button, sized to its label and centred */
.booksy-cta {
    width: fit-content;
    margin-block: var(--space-double);
    margin-inline: auto;
}

/* Booking is the one emphasised action (C uses teal's complementary coral) */
.btn__booksy a {
    background-color: var(--btn-emph-bg);
    color: var(--btn-emph-fg);
}

.btn__booksy a:hover {
    background-color: var(--btn-emph-hover-bg);
    color: var(--btn-emph-hover-fg);
}

.btn a:focus-visible,
.calltoaction > div a:focus-visible {
    outline: 3px solid var(--clr-focus-on-dark);
    outline-offset: 3px;
}

ul.services li .service:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 3px;
}

/* ---------- Service cards */
ul.services {
    margin-block: var(--space-double) var(--space-section);
}

ul.services li .service {
    border-radius: var(--radius-card);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-1);
    color: var(--clr-text);
    font-family: var(--font-regular);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-card);
    line-height: 1.3;
    overflow: hidden; /* clips the fill layer to the rounded corners */
    transition: transform var(--duration-base) var(--ease-out),
                scale var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

/* Fill layer (C): a coral plane that travels THROUGH the card: in at the entry
   edge, rests covering the card, and on leave keeps going and exits the far edge.
   Position = translate (P) + transform (T), both in % of the plane itself:
     rest  P = exit  (parked past the far edge)    T = 0
     hover P = entry (parked before the near edge) T = travel (entry → covering)
   On hover P snaps (0s) while the plane is out of view, T animates in.
   On leave P and T animate together; their sum only ever moves forward. */
div.filters :is(button, a)::before,
.calltoaction > div a::before {
    content: "";
    position: absolute;
    z-index: -1; /* above the card ground, below text and icon */
    left: 0;
    top: 0;
    width: var(--card-fill-w);
    height: var(--card-fill-h);
    aspect-ratio: 1; /* used by the sweep plane (height: auto) */
    /* colour resolves per element (override --card-fill-final locally);
       the shape (solid / diagonal stripe) comes from the mask */
    background-color: var(--card-fill-final);
    -webkit-mask-image: var(--card-fill-mask);
    mask-image: var(--card-fill-mask);
    translate: calc(var(--card-fill-dx) * var(--card-fill-exit)) var(--card-fill-exit);
    transform: translate(0, 0);
    transition: translate var(--card-fill-duration) var(--ease-in-out),
                transform var(--card-fill-duration) var(--ease-in-out);
    pointer-events: none;
}

div.filters :is(button, a):not(.active):is(:hover, :focus-visible)::before,
.calltoaction > div a:is(:hover, :focus-visible)::before {
    translate: calc(var(--card-fill-dx) * var(--card-fill-entry)) var(--card-fill-entry);
    transform: translate(calc(var(--card-fill-dx) * var(--card-fill-travel)), var(--card-fill-travel));
    transition: translate 0s,
                transform var(--card-fill-duration) var(--ease-in-out);
}

/* Hover / keyboard focus: the card lifts (shadow) and pops out (scale); no colour fill */
ul.services li .service:hover,
ul.services li .service:focus-visible {
    background-color: var(--card-hover-bg);
    color: var(--card-hover-fg);
    box-shadow: var(--shadow-2);
    scale: var(--card-hover-scale);
    transform: var(--card-hover-transform);
    z-index: 2;
}

/* Audience label + segmented bar (C): who the service is for, in text AND colour,
   echoing the team page's bars. Per-card --aud-label / --aud-bar are generated
   from audiences.json (build.py), matched on each card's href. */
ul.services li .service {
    padding-block-end: var(--card-pad-bottom);
}

/* Give back the height the label takes, so 3-line titles don't crowd it */
ul.services li .service .icon {
    margin-block-start: var(--card-icon-offset);
}

ul.services li .service::after {
    content: var(--aud-label, "");
    display: var(--aud-display);
    position: absolute;
    inset-inline: 0;
    bottom: var(--aud-bottom);
    padding-block-end: calc(var(--aud-bar-h) + .5rem + 2px);
    font-family: var(--font-regular);
    font-size: var(--aud-size);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--clr-text-muted);
    background: var(--aud-bar, none) 50% calc(100% - 2px) / var(--aud-bar-w) var(--aud-bar-h) no-repeat;
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-out);
}

/* On the coral fill, seat the bar on a white track so the segments stay distinct */
ul.services li .service:is(:hover, :focus-visible)::after {
    color: var(--card-hover-fg);
    background:
        var(--aud-bar, none) 50% calc(100% - 2px) / var(--aud-bar-w) var(--aud-bar-h) no-repeat,
        linear-gradient(var(--clr-surface-raised), var(--clr-surface-raised)) 50% 100% / calc(var(--aud-bar-w) + 6px) calc(var(--aud-bar-h) + 4px) no-repeat;
}

/* Audience label as a pill — two presets, chosen with data-aud-style on <html>:
   "pill"     : the colour code IS the pill ground (single tint, or a soft blend)
   "pill-bar" : neutral pill with a small segmented colour key at its start
   (no attribute = plain label + bar, above) */
:root[data-aud-style] ul.services li .service::after {
    inset-inline: auto;
    left: 50%;
    translate: -50% 0;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: .3125rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: .01em;
}

:root[data-aud-style="pill"] ul.services li .service::after,
:root[data-aud-style="pill"] ul.services li .service:is(:hover, :focus-visible)::after {
    background: var(--aud-pill, none);
    color: var(--clr-text);
}

:root[data-aud-style="pill-bar"] ul.services li .service::after,
:root[data-aud-style="pill-bar"] ul.services li .service:is(:hover, :focus-visible)::after {
    padding-inline-start: calc(.75rem + var(--aud-key-w) + .4375rem);
    background:
        var(--aud-bar, none) .75rem 50% / var(--aud-key-w) var(--aud-key-h) no-repeat,
        var(--aud-pill-neutral);
    color: var(--clr-text-2);
}

:root[data-aud-style="pill-bar"] ul.services li .service:is(:hover, :focus-visible)::after {
    background:
        var(--aud-bar, none) .75rem 50% / var(--aud-key-w) var(--aud-key-h) no-repeat,
        var(--clr-surface-raised);
    color: var(--clr-text);
}

/* Icons sit on white JPEG/WebP grounds; multiply lets the fill show through.
   In C it stays on at rest too, so the exiting fill never reveals a white box. */
ul.services li .service .icon {
    mix-blend-mode: var(--card-icon-blend);
}

ul.services li .service:hover .icon,
ul.services li .service:focus-visible .icon {
    mix-blend-mode: var(--card-hover-icon-blend);
}

/* ---------- Knowledge base */
.knowledge-base {
    background-color: var(--clr-tint);
    padding-block: var(--space-section);
}

.knowledge-base h2 {
    color: var(--clr-on-tint);
    font-weight: var(--font-weight-h2);
    margin-block: 0 var(--space-double);
}

:is(.knowledge-base, .service-articles) ol.article-list {
    background-color: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-1);
    overflow: hidden; /* clips the row hover to the rounded corners */
}

:is(.knowledge-base, .service-articles) ol.article-list li + li {
    border-block-start: 1px solid var(--clr-border);
}

:is(.knowledge-base, .service-articles) ol.article-list a {
    color: var(--clr-text);
    font-family: var(--font-regular);
    transition: background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

:is(.knowledge-base, .service-articles) ol.article-list time {
    color: var(--clr-text-muted);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:is(.knowledge-base, .service-articles) ol.article-list span {
    font-weight: 500;
    line-height: 1.4;
    transition: color var(--duration-fast) var(--ease-out);
}

/* Hover / keyboard focus: tinted row with a coral edge, title in teal */
:is(.knowledge-base, .service-articles) ol.article-list a:is(:hover, :focus-visible) {
    background-color: var(--clr-tint);
    box-shadow: inset 4px 0 0 var(--clr-accent);
}

:is(.knowledge-base, .service-articles) ol.article-list a:is(:hover, :focus-visible) span {
    color: var(--clr-base-strong);
}

:is(.knowledge-base, .service-articles) ol.article-list a:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: -3px;
}

:is(.knowledge-base, .service-articles) .article-list-more {
    font-family: var(--font-regular);
    font-weight: var(--font-weight-ui);
    color: var(--clr-on-tint);
    text-underline-offset: .25em;

    &::after {
        content: " →";
    }

    &:hover {
        color: var(--clr-accent-strong);
    }

    &:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 3px;
        border-radius: var(--border-radius-small);
    }
}

/* Artykuły list: date above the lead */
.article time {
    color: var(--clr-text-muted);
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
}

/* ---------- CTA bar */
.calltoaction {
    background-color: var(--clr-base-strong);
}

.calltoaction > div a {
    position: relative;
    overflow: hidden;
    z-index: 0; /* own stacking context for the fill plane */
    border-width: 2px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-ui);
    letter-spacing: .06em;
    padding-block: .75rem;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                scale var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

/* Same hover as cards, filters and chips: the shared fill plane passes through,
   label turns ink, coral outline, pop-out */
.calltoaction > div a:is(:hover, :focus-visible) {
    z-index: 1;
    background-color: var(--cta-hover-bg); /* C: transparent — the fill supplies the colour */
    color: var(--card-hover-fg);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-2);
    scale: var(--filter-hover-scale);
    transform: var(--card-hover-transform);
}

/* the booking link is already coral: its fill is the soft coral instead */
.calltoaction > div a[href*="booksy"] {
    --card-fill-final: var(--cta-emph-fill);
}

.calltoaction > div a[href*="booksy"] {
    background-color: var(--cta-emph-bg);
    color: var(--cta-emph-fg);
    border-color: var(--cta-emph-border);
}

.calltoaction > div a[href*="booksy"]:is(:hover, :focus-visible) {
    background-color: var(--cta-emph-hover-bg); /* C: stays coral under the soft-coral fill */
}

/* ---------- Footer */
.footer_content {
    background-color: var(--clr-footer-bg);
}

.footer_content > div {
    line-height: 1.6;
}

.footer_content h5 {
    font-family: var(--font-regular);
    font-variation-settings: normal;
    font-weight: var(--font-weight-ui);
    letter-spacing: 0;
}

.footer_content a {
    color: var(--clr-footer-link);
}

/* ---------- Team filters (sub-page): tertiary palette instead of named colours */
.filters :is(button, a)[data-category="kids"]   { --clr: var(--clr-cat-kids); }
.filters :is(button, a)[data-category="youth"]  { --clr: var(--clr-cat-youth); }
.filters :is(button, a)[data-category="adult"]  { --clr: var(--clr-cat-adult); }
.filters :is(button, a)[data-category="online"] { --clr: var(--clr-cat-online); }

/* ---------- Filter buttons (Zespół page + homepage services — same markup)
   Replaces the neumorphic pills with the card language: raised white pill,
   hairline, category key as a short bar, active = brand fill. */
/* One line sized by the labels: a button is never narrower than its text (labels never
   break) and buttons grow to fill the row when there is room. When there is not, the row
   scrolls sideways instead of wrapping onto more lines. The padding (pulled back by the
   negative margin) leaves room for the hover pop-out, shadow and focus ring, which an
   overflow container would otherwise clip. */
div.filters {
    --filters-bleed-x: 1rem; /* = the page gutter, so the row never widens the page */
    --filters-bleed-y: 1.5rem; /* room for the resting shadow, which reaches ~20px below a button */
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-half);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: var(--filters-bleed-y) var(--filters-bleed-x);
    margin-block: calc(var(--space-double) - var(--filters-bleed-y)) calc(var(--space-double) - var(--filters-bleed-y)); /* roomy gap before the cards */
    margin-inline: calc(-1 * var(--filters-bleed-x));
    /* take the page's width, never the buttons' total: a nowrap row would otherwise
       stretch its parent (and the whole page) to the full length of the row */
    width: 0;
    min-width: calc(100% + 2 * var(--filters-bleed-x));
}

div.filters :is(button, a) {
    /* equal block padding around the text; the category bar lives inside
       the bottom padding, so it never pushes the label off-centre */
    padding-block: var(--filter-pad-block);
    padding-inline: var(--filter-pad-inline);
    line-height: 1.2;
    white-space: nowrap;
    flex: 1 0 auto;
    width: auto;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    background: var(--clr-surface-raised);
    box-shadow: var(--shadow-1);
    color: var(--clr-base-strong);
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-ui);
    letter-spacing: .05em;
    z-index: 0; /* own stacking context, so the fill layer sits under the label */
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                scale var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);

    /* Same hover as the service cards: the shared fill plane (::before, see the
       service-card rules) passes through, label turns ink, coral outline, pop-out.
       The active button keeps its state. */
    &:not(.active):is(:hover, :focus-visible) {
        z-index: 1;
        background: var(--card-hover-bg);
        color: var(--card-hover-fg);
        border-color: var(--card-hover-border);
        box-shadow: var(--shadow-2);
        scale: var(--filter-hover-scale);
        transform: var(--card-hover-transform);
    }

    &.active::before {
        display: none;
    }

    /* on the coral fill, seat the category bar on a white track (as on the cards) */
    &:not(.active):is(:hover, :focus-visible)::after {
        box-shadow: 0 0 0 2px var(--clr-surface-raised);
    }

    &:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 3px;
    }

    /* category key: a short centred bar instead of a full-width underline */
    &::after {
        width: var(--aud-bar-w, 3.5rem);
        height: var(--aud-bar-h, 4px);
        left: 50%;
        bottom: var(--filter-bar-offset);
        translate: -50% 0;
        border-radius: 2px;
    }

    &.active,
    &.active:hover {
        background: var(--clr-base);
        border-color: var(--clr-base);
        color: var(--clr-text-inverse);
    }
}

/* Filter options that are links (Zespół and Oferta pages): same pill as the buttons */
div.filters a.filter-btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Specialisation row on /zespół/: the same pills as the age row (same height), just
   sized to their labels instead of stretching */
/* a little air between the age row and the specialisation row (the padding of both
   rows adds 2 x the vertical bleed to the visible gap, so take it off the margin) */
div.filters[data-for="team"] {
    margin-block-end: calc(var(--space-normal) + var(--space-half) - 2 * var(--filters-bleed-y));
}

div.filters.filters--spec {
    margin-block-start: 0;
}

div.filters.filters--spec :is(button, a) {
    flex: 0 0 auto;
}

/* Nothing would be left to show: dimmed, not clickable (no href, so not focusable either) */
div.filters :is(button, a)[aria-disabled="true"] {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Screen-reader status for the service filter ("Pokazano 8 usług") */
.filter-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Filter animation (View Transitions): team.css sets .75s; respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ---------- FAQ accordions (service pages; markup from build_faq.py)
   Native <details>/<summary>; items share a name → one open at a time.
   Reading content, so no pop-out/fill: subtle hover, teal open state, +/− icon. */
section.faq {
    margin-block: var(--space-section);
}

section.faq > h2 {
    margin-block-end: var(--space-double);
}

.faq-list {
    display: grid;
    gap: var(--space-half);
}

details.faq-item {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    background-color: var(--clr-surface-raised);
    box-shadow: var(--shadow-1);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);

    &:hover {
        border-color: var(--card-hover-border);
        box-shadow: var(--shadow-2);
    }

    &[open] {
        border-color: var(--clr-base);
    }

    > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-normal);
        padding: var(--faq-pad-block) var(--faq-pad-inline);
        list-style: none;
        cursor: pointer;
        border-radius: inherit;
        font-family: var(--font-regular);
        font-size: var(--font-size-h5);
        font-weight: var(--font-weight-ui);
        line-height: 1.35;
        color: var(--clr-text);
        text-wrap: balance;

        &::-webkit-details-marker {
            display: none;
        }

        /* +/− icon in a soft circle */
        &::after {
            content: "";
            flex: none;
            width: 2rem;
            aspect-ratio: 1;
            border-radius: 50%;
            background:
                linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
                linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
                var(--clr-tint);
            color: var(--clr-base-strong);
            transition: background-size var(--duration-base) var(--ease-out),
                        rotate var(--duration-base) var(--ease-out);
        }

        &:focus-visible {
            outline: 3px solid var(--clr-focus);
            outline-offset: 3px;
        }
    }

    &[open] > summary {
        color: var(--clr-base-strong);

        &::after {
            background-size: 12px 2px, 2px 0, auto;
            rotate: 180deg;
        }
    }

    .faq-answer {
        padding: 0 var(--faq-pad-inline) var(--faq-pad-block);

        > p {
            max-inline-size: var(--measure);
            color: var(--clr-text-2);
        }

        > p + p {
            margin-block-start: var(--space-half);
        }

        .faq-sources {
            margin-block-start: var(--space-normal);
            font-family: var(--font-regular);
            font-size: var(--font-size-small);
            color: var(--clr-text-muted);

            a {
                color: inherit;
                text-underline-offset: 2px;
            }
        }
    }
}

/* Smooth open/close where supported (Chromium 131+); instant elsewhere */
@supports selector(::details-content) {
    :root {
        interpolate-size: allow-keywords;
    }

    details.faq-item::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size var(--duration-base) var(--ease-out),
                    content-visibility var(--duration-base) allow-discrete;
    }

    details.faq-item[open]::details-content {
        block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    details.faq-item::details-content,
    details.faq-item > summary::after {
        transition: none;
    }
}

/* ---------- Sub-page header (page-header.css): tokens recolour the aurora blobs;
   in C the band is lower and its title is an eyebrow label */
.gradient-bg {
    min-height: var(--ph-height);

    .header_image_box_title {
        font-family: var(--font-regular);
        font-size: var(--ph-title-size);
        font-weight: var(--ph-title-weight);
        letter-spacing: var(--ph-title-tracking);
        text-shadow: none;
        /* long service names wrap onto balanced lines instead of being cut off;
           the explicit width is needed because the title is centred with left: 50% */
        width: calc(100% - 2rem);
        text-wrap: balance;
        margin-block-start: var(--ph-title-offset);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gradient-bg .gradients-container > * {
        animation: none;
    }
}

/* ---------- Service sub-pages (/oferta/<slug>/) */

/* Team cards (service pages + Zespół): card language + the shared hover.
   Audience colours come from the tertiary palette; the bar itself is generated
   per attribute combination (equal segments — see build.py, --member-bar). */
.member[kids]   { --clr-kids: var(--clr-cat-kids); }
.member[youth]  { --clr-youth: var(--clr-cat-youth); }
.member[adult]  { --clr-adult: var(--clr-cat-adult); }
.member[online] { --clr-online: var(--clr-cat-online); }

.member {
    transition: scale var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);

    .bg {
        z-index: 0; /* own stacking context for the fill plane */
        border-radius: var(--radius-card);
        border: 1px solid var(--clr-border);
        background-color: var(--clr-surface-raised);
        box-shadow: var(--shadow-1);
        transition: box-shadow var(--duration-base) var(--ease-out),
                    border-color var(--duration-fast) var(--ease-out),
                    background-color var(--duration-base) var(--ease-out);

        /* audience bar: short, centred, equal segments */
        &::after {
            width: var(--aud-bar-w);
            height: var(--aud-bar-h);
            left: 50%;
            bottom: .875rem;
            translate: -50% 0;
            border-radius: 2px;
            background-image: var(--member-bar, none);
        }
    }

    /* Height-driven so the reveal animates: aspect-ratio can't transition, height can.
       The member box is 2:3, the photo 90% wide → circle = 60% tall, 2:3 portrait = 90%. */
    img {
        aspect-ratio: auto;
        height: 60%;
        border: 3px solid var(--clr-surface-raised);
        box-shadow: var(--shadow-1);
        transition: height var(--member-reveal) var(--ease-in-out),
                    border-radius var(--member-reveal) var(--ease-in-out),
                    border-color var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-base) var(--ease-out);
    }

    .name {
        font-family: var(--font-regular);
        font-variation-settings: normal;
        font-weight: var(--font-weight-ui);
        letter-spacing: .04em;
        color: var(--clr-base-strong);
        /* keep ≥ 20px between the text and the card edge; long names wrap, balanced */
        max-width: calc(80% - 2 * var(--member-name-gap));
        padding-inline: var(--member-name-pad);
        text-wrap: balance;
        border: 1px solid transparent;
        transition: bottom var(--member-reveal) var(--ease-in-out),
                    color var(--duration-fast) var(--ease-out),
                    background-color var(--duration-base) var(--ease-out),
                    border-color var(--duration-base) var(--ease-out);

        /* the audience bar travels into the name pill on hover */
        &::after {
            content: "";
            display: block;
            width: var(--aud-bar-w);
            height: 0;
            margin-inline: auto;
            border-radius: 2px;
            background-image: var(--member-bar, none);
            opacity: 0;
            transition: opacity var(--duration-base) var(--ease-out),
                        height var(--duration-base) var(--ease-out),
                        margin var(--duration-base) var(--ease-out);
        }
    }
}

/* Location cards: photo cards — full-strength photo, bottom scrim, address
   bottom-left (street in the heading face via ::first-line, city smaller);
   hover like the team cards: pop-out, coral ring, slow photo zoom */
ul.locations {
    gap: var(--space-normal);
    margin-block: var(--space-double) var(--space-section);
}

ul.locations li .location {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-double);
    overflow: hidden;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    background-color: var(--clr-text);
    box-shadow: var(--shadow-1);
    color: var(--clr-text-inverse);
    font-family: var(--font-regular);
    font-variation-settings: normal;
    font-size: var(--font-size-paragraph);
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    line-height: 1.35;
    transition: scale var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);

    > div:first-child {
        z-index: 3;
    }

    > div:first-child::first-line {
        font-family: var(--font-display);
        font-variation-settings: var(--display-variation);
        font-size: var(--font-size-h4);
        font-weight: 500;
        letter-spacing: -.01em;
    }

    .cover {
        opacity: 1;
        mix-blend-mode: normal;
        transition: scale var(--member-reveal) var(--ease-out);
    }

    /* legibility scrim over the photo, under the text */
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: var(--location-scrim);
        transition: opacity var(--duration-base) var(--ease-out);
    }

    &:is(:hover, :focus-visible) {
        z-index: 2;
        scale: var(--filter-hover-scale);
        background-color: var(--clr-text);
        color: var(--clr-text-inverse);
        box-shadow: 0 0 0 3px var(--member-ring), var(--shadow-2);

        .cover {
            opacity: 1;
            mix-blend-mode: normal;
            scale: 1.06;
        }
    }

    &:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 5px;
    }
}

/* Price table: a quiet card — light header labels, hairline rows, tabular prices */
.table.prices {
    --padding-inline: 1.25rem;
    --padding-block: .875rem;
    --border-color: var(--clr-border);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    background-color: var(--clr-surface-raised);
    box-shadow: var(--shadow-1);
    font-variant-numeric: tabular-nums lining-nums;
    margin-block-end: var(--space-section);

    thead th {
        white-space: nowrap;
        background-color: var(--table-head-bg);
        color: var(--clr-text-muted);
        font-family: var(--font-regular);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-ui);
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    tbody td {
        font-family: var(--font-regular);
        color: var(--clr-text-2);
        line-height: 1.4;
        vertical-align: middle;
        transition: background-color var(--duration-fast) var(--ease-out);

        &:first-of-type {
            font-weight: 500;
            color: var(--clr-text);
        }

        &.right {
            font-weight: var(--font-weight-ui);
            color: var(--clr-text);
            white-space: nowrap;
        }
    }

    tbody tr:last-child td {
        border-block-end: 0;
    }

    tbody tr:hover td {
        background-color: var(--table-row-hover);
    }

    @media screen and (max-width: 37.5rem) {
        tbody tr {
            padding-block: var(--space-half);
            border-block-end: 1px solid var(--clr-border);
            gap: 0;
        }

        tbody tr:last-child {
            border-block-end: 0;
        }

        tbody td {
            padding-block: .25rem;
            border: 0;
        }

        tbody td.right {
            text-align: left;
        }
    }
}

/* Hover / focus: the full-photo reveal, updated — the circle grows into a rounded
   2:3 portrait with a coral ring, the name moves into a frosted pill over the photo
   (drawer glass) carrying the audience bar. Pop-out as elsewhere. */
.member:is(:hover, :focus, :focus-visible) {
    z-index: 2;
    scale: var(--filter-hover-scale);
    transform: var(--card-hover-transform);

    .bg {
        box-shadow: var(--shadow-2);
    }

    img {
        aspect-ratio: auto;
        height: 90%;
        border-radius: var(--radius-card);
        border-color: var(--member-ring);
        box-shadow: var(--shadow-2);
    }

    .name {
        bottom: 15%;
        color: var(--clr-text-inverse);
        background-color: var(--member-pill-bg);
        -webkit-backdrop-filter: var(--member-pill-backdrop);
        backdrop-filter: var(--member-pill-backdrop);
        border-color: var(--nav-border);

        &::after {
            height: var(--aud-bar-h);
            margin-block-start: .375rem;
            opacity: 1;
        }
    }
}

.member:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 4px;
    border-radius: var(--radius-card);
}

/* Comfortable line length for panel text */
.panel .content > :is(p, ul, ol, h2, h3) {
    max-inline-size: var(--measure);
}

/* Text-only panels: editorial two columns so the card is filled by design —
   headings in a left rail, reading text in a right column at the comfortable
   measure. Each heading shares a row with the start of its section; panels
   without a heading put their text in the right column too, so body copy keeps
   one left edge down the page. Single column below 56rem. */
@media (min-width: 56rem) {
    .panel:not(:has(picture)) .content {
        display: grid;
        grid-template-columns: minmax(12rem, 1fr) minmax(0, var(--measure));
        column-gap: var(--panel-rail-gap);
        align-items: start;
        width: 100%;

        > * {
            grid-column: 2;
            margin-block-start: 0;
        }

        > * + * {
            margin-block-start: var(--space-normal);
        }

        > :is(h2, h3) {
            grid-column: 1;
            font-size: var(--font-size-h3);
            margin-block: 0;
            text-wrap: balance;
        }

        /* CMS leaves empty <p></p>s; they'd take the cell beside a heading */
        > p:empty {
            display: none;
        }

        /* text beside a heading starts level with it */
        > :is(h2, h3) + *,
        > :is(h2, h3) + :empty + * {
            margin-block-start: 0;
        }

        /* a new section (and the text beside it) gets breathing room */
        > :is(h2, h3):not(:first-child),
        > :is(h2, h3):not(:first-child) + *,
        > :is(h2, h3):not(:first-child) + :empty + * {
            margin-block-start: var(--space-double);
        }
    }
}

/* ---------- Shared cards used on sub-pages (same CSS files) */
.panel,
:is(.article, .article-single) {
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-panel);
}

/* Mobile bottom bar — C: detached, rounded, frosted anthracite like the drawer.
   A & B: full-width bar (tokens reproduce it). Only shown ≤ 37.5rem (site CSS). */
.mobile_nav {
    width: auto;
    left: var(--mnav-gap);
    right: var(--mnav-gap);
    padding-block: var(--mnav-pad-block);
    padding-inline: var(--mnav-pad-inline);
    border: 1px solid var(--mnav-border);
    border-radius: var(--mnav-radius);
    background-color: var(--mnav-bg);
    -webkit-backdrop-filter: var(--mnav-backdrop);
    backdrop-filter: var(--mnav-backdrop);
    box-shadow: var(--mnav-shadow);
    font-family: var(--font-regular);

    @media screen and (max-width: 37.5rem) {
        bottom: calc(var(--mnav-gap) + env(safe-area-inset-bottom, 0px));
    }

    a {
        padding: .375rem .25rem; /* five labels must fit 320px-wide phones */
        border-radius: var(--nav-item-radius);
        transition: background-color var(--duration-fast) var(--ease-out);

        &:hover {
            background-color: var(--nav-item-hover);
        }

        &:focus-visible {
            outline: 2px solid var(--clr-focus-on-dark);
            outline-offset: 2px;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    ul.services li .service,
    ul.services li .service::before,
    div.filters :is(button, a),
    div.filters :is(button, a)::before,
    :is(.knowledge-base, .service-articles) ol.article-list a,
    .calltoaction > div a,
    .calltoaction > div a::before,
    ul.locations li .location,
    ul.locations li .location .cover,
    .member,
    .member img,
    .member .name,
    .member .name::after,
    nav.navigation-panel,
    .navigation-overlay {
        transition: none;  /* the fill still appears, just without the movement */
    }

    ul.services li .service:hover,
    ul.services li .service:focus-visible,
    div.filters :is(button, a):hover,
    div.filters :is(button, a):focus-visible,
    .calltoaction > div a:is(:hover, :focus-visible),
    .member:is(:hover, :focus, :focus-visible),
    ul.locations li .location:is(:hover, :focus-visible),
    ul.locations li .location:is(:hover, :focus-visible) .cover,
    .member:is(:hover, :focus, :focus-visible) img {
        transform: none;
        scale: none;
    }
}

/* Generated — team-card audience bar, equal segments for each attribute combination */
.member[kids]:not([youth]):not([adult]):not([online]) { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 100%); }
.member[youth]:not([kids]):not([adult]):not([online]) { --member-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 100%); }
.member[adult]:not([kids]):not([youth]):not([online]) { --member-bar: linear-gradient(90deg, var(--clr-cat-adult) 0 100%); }
.member[online]:not([kids]):not([youth]):not([adult]) { --member-bar: linear-gradient(90deg, var(--clr-cat-online) 0 100%); }
.member[kids][youth]:not([adult]):not([online]) { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-youth) calc((100% - 3px) / 2 * 1 + 3px) 100%); }
.member[kids][adult]:not([youth]):not([online]) { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-adult) calc((100% - 3px) / 2 * 1 + 3px) 100%); }
.member[kids][online]:not([youth]):not([adult]) { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-online) calc((100% - 3px) / 2 * 1 + 3px) 100%); }
.member[youth][adult]:not([kids]):not([online]) { --member-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-adult) calc((100% - 3px) / 2 * 1 + 3px) 100%); }
.member[youth][online]:not([kids]):not([adult]) { --member-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-online) calc((100% - 3px) / 2 * 1 + 3px) 100%); }
.member[adult][online]:not([kids]):not([youth]) { --member-bar: linear-gradient(90deg, var(--clr-cat-adult) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-online) calc((100% - 3px) / 2 * 1 + 3px) 100%); }
.member[kids][youth][adult]:not([online]) { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); }
.member[kids][youth][online]:not([adult]) { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-online) calc((100% - 6px) / 3 * 2 + 6px) 100%); }
.member[kids][adult][online]:not([youth]) { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-online) calc((100% - 6px) / 3 * 2 + 6px) 100%); }
.member[youth][adult][online]:not([kids]) { --member-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-online) calc((100% - 6px) / 3 * 2 + 6px) 100%); }
.member[kids][youth][adult][online] { --member-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 9px) / 4 * 1 + 0px), transparent calc((100% - 9px) / 4 * 1 + 0px) calc((100% - 9px) / 4 * 1 + 3px), var(--clr-cat-youth) calc((100% - 9px) / 4 * 1 + 3px) calc((100% - 9px) / 4 * 2 + 3px), transparent calc((100% - 9px) / 4 * 2 + 3px) calc((100% - 9px) / 4 * 2 + 6px), var(--clr-cat-adult) calc((100% - 9px) / 4 * 2 + 6px) calc((100% - 9px) / 4 * 3 + 6px), transparent calc((100% - 9px) / 4 * 3 + 6px) calc((100% - 9px) / 4 * 3 + 9px), var(--clr-cat-online) calc((100% - 9px) / 4 * 3 + 9px) 100%); }

/* Generated from avatars.json — one rule per specialist profile link */
nav.navigation-panel.open a[href="/zespół/paulina-armatys/"] { --avatar: url("/media/avatars/paulina-armatys.jpg"); }
nav.navigation-panel.open a[href="/zespół/krystyna-garncarz/"] { --avatar: url("/media/avatars/krystyna-garncarz.jpg"); }
nav.navigation-panel.open a[href="/zespół/karolina-ulatowska-stajszczyk/"] { --avatar: url("/media/avatars/karolina-ulatowska-stajszczyk.jpg"); }
nav.navigation-panel.open a[href="/zespół/jurij-romaniuk/"] { --avatar: url("/media/avatars/jurij-romaniuk.jpg"); }
nav.navigation-panel.open a[href="/zespół/barbara-czuchta/"] { --avatar: url("/media/avatars/barbara-czuchta.jpg"); }
nav.navigation-panel.open a[href="/zespół/natalia-orlowska-prosniak/"] { --avatar: url("/media/avatars/natalia-orlowska-prosniak.jpg"); }
nav.navigation-panel.open a[href="/zespół/magdalena-andrzejewska/"] { --avatar: url("/media/avatars/magdalena-andrzejewska.jpg"); }
nav.navigation-panel.open a[href="/zespół/krystyna-andrunewczyn/"] { --avatar: url("/media/avatars/krystyna-andrunewczyn.jpg"); }
nav.navigation-panel.open a[href="/zespół/michalina-frosztega/"] { --avatar: url("/media/avatars/michalina-frosztega.jpg"); }
nav.navigation-panel.open a[href="/zespół/ewa-korpak/"] { --avatar: url("/media/avatars/ewa-korpak.jpg"); }
nav.navigation-panel.open a[href="/zespół/ewa-srodka/"] { --avatar: url("/media/avatars/ewa-srodka.jpg"); }
nav.navigation-panel.open a[href="/zespół/sylwia-machelska/"] { --avatar: url("/media/avatars/sylwia-machelska.jpg"); }
nav.navigation-panel.open a[href="/zespół/paulina-stacherska/"] { --avatar: url("/media/avatars/paulina-stacherska.jpg"); }
nav.navigation-panel.open a[href="/zespół/monika-machowska/"] { --avatar: url("/media/avatars/monika-machowska.jpg"); }
nav.navigation-panel.open a[href="/zespół/maja-chojnacka/"] { --avatar: url("/media/avatars/maja-chojnacka.jpg"); }
nav.navigation-panel.open a[href="/zespół/weronika-grzebieluch/"] { --avatar: url("/media/avatars/weronika-grzebieluch.jpg"); }
nav.navigation-panel.open a[href="/zespół/anna-michalska/"] { --avatar: url("/media/avatars/anna-michalska.jpg"); }
nav.navigation-panel.open a[href="/zespół/zuzanna-soberka/"] { --avatar: url("/media/avatars/zuzanna-soberka.jpg"); }
nav.navigation-panel.open a[href="/zespół/dorota-rycak/"] { --avatar: url("/media/avatars/dorota-rycak.jpg"); }

/* Generated from audiences.json — audience label + bar per service card */
ul.services a.service[href="/oferta/psycholog-wroclaw/"] { --aud-label: "młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-adult) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-youth-tint) 0 calc(.75rem + 4.5798em), var(--clr-cat-adult-tint) calc(.75rem + 4.5798em) 100%); }
ul.services a.service[href="/oferta/psychoterapeuta-wroclaw/"] { --aud-label: "młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-adult) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-youth-tint) 0 calc(.75rem + 4.5798em), var(--clr-cat-adult-tint) calc(.75rem + 4.5798em) 100%); }
ul.services a.service[href="/oferta/psycholog-dzieciecy-wroclaw/"] { --aud-label: "dzieci · młodzież"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-youth) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) 100%); }
ul.services a.service[href="/oferta/psycholog-dla-mlodziezy-wroclaw/"] { --aud-label: "młodzież"; --aud-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 100%); --aud-pill: var(--clr-cat-youth-tint); }
ul.services a.service[href="/oferta/terapia-par-wroclaw/"] { --aud-label: "dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-adult) 0 100%); --aud-pill: var(--clr-cat-adult-tint); }
ul.services a.service[href="/oferta/terapia-rodzin-psychoterapia-rodzinna-wroclaw/"] { --aud-label: "dzieci · młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) calc(.75rem + 7.8965em), var(--clr-cat-adult-tint) calc(.75rem + 7.8965em) 100%); }
ul.services a.service[href="/oferta/sesje-wsparcia-dla-rodzicow-wroclaw/"] { --aud-label: "dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-adult) 0 100%); --aud-pill: var(--clr-cat-adult-tint); }
ul.services a.service[href="/oferta/logopeda-ze-specjalnoscia-kliniczna-wroclaw/"] { --aud-label: "dzieci · młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) calc(.75rem + 7.8965em), var(--clr-cat-adult-tint) calc(.75rem + 7.8965em) 100%); }
ul.services a.service[href="/oferta/psychodietetyk-wroclaw/"] { --aud-label: "młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-adult) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-youth-tint) 0 calc(.75rem + 4.5798em), var(--clr-cat-adult-tint) calc(.75rem + 4.5798em) 100%); }
ul.services a.service[href="/oferta/konsultacje-psychologiczne-on-line-wroclaw/"] { --aud-label: "młodzież · dorośli · on-line"; --aud-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-adult) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-youth-tint) 0 calc(.75rem + 4.5798em), var(--clr-cat-adult-tint) calc(.75rem + 4.5798em) calc(.75rem + 8.3548em), var(--clr-cat-online-tint) calc(.75rem + 8.3548em) 100%); }
ul.services a.service[href="/oferta/qeeg-wroclaw/"] { --aud-label: "dzieci · młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) calc(.75rem + 7.8965em), var(--clr-cat-adult-tint) calc(.75rem + 7.8965em) 100%); }
ul.services a.service[href="/oferta/eeg-biofeedback-wroclaw/"] { --aud-label: "dzieci · młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) calc(.75rem + 7.8965em), var(--clr-cat-adult-tint) calc(.75rem + 7.8965em) 100%); }
ul.services a.service[href="/oferta/eeg-biofeedback-z-coachingiem-wroclaw/"] { --aud-label: "młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-youth) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-adult) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-youth-tint) 0 calc(.75rem + 4.5798em), var(--clr-cat-adult-tint) calc(.75rem + 4.5798em) 100%); }
ul.services a.service[href="/oferta/terapia-metoda-warnkego-wroclaw/"] { --aud-label: "dzieci · młodzież"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-youth) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) 100%); }
ul.services a.service[href="/oferta/terapia-dysleksji-i-afazji-wroclaw/"] { --aud-label: "dzieci · młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) calc(.75rem + 7.8965em), var(--clr-cat-adult-tint) calc(.75rem + 7.8965em) 100%); }
ul.services a.service[href="/oferta/diagnoza-autyzmu-ados-2-wroclaw/"] { --aud-label: "dzieci · młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) calc(.75rem + 7.8965em), var(--clr-cat-adult-tint) calc(.75rem + 7.8965em) 100%); }
ul.services a.service[href="/oferta/terapia-czaszkowo-krzyzowa-cst-wroclaw/"] { --aud-label: "dzieci · młodzież · dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 6px) / 3 * 1 + 0px), transparent calc((100% - 6px) / 3 * 1 + 0px) calc((100% - 6px) / 3 * 1 + 3px), var(--clr-cat-youth) calc((100% - 6px) / 3 * 1 + 3px) calc((100% - 6px) / 3 * 2 + 3px), transparent calc((100% - 6px) / 3 * 2 + 3px) calc((100% - 6px) / 3 * 2 + 6px), var(--clr-cat-adult) calc((100% - 6px) / 3 * 2 + 6px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) calc(.75rem + 7.8965em), var(--clr-cat-adult-tint) calc(.75rem + 7.8965em) 100%); }
ul.services a.service[href="/oferta/kompleksowa-diagnoza-rozwoju-dziecka-korp-koze-wroclaw/"] { --aud-label: "dzieci"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 100%); --aud-pill: var(--clr-cat-kids-tint); }
ul.services a.service[href="/oferta/diagnoza-adhd-u-dzieci-wroclaw/"] { --aud-label: "dzieci · młodzież"; --aud-bar: linear-gradient(90deg, var(--clr-cat-kids) 0 calc((100% - 3px) / 2 * 1 + 0px), transparent calc((100% - 3px) / 2 * 1 + 0px) calc((100% - 3px) / 2 * 1 + 3px), var(--clr-cat-youth) calc((100% - 3px) / 2 * 1 + 3px) 100%); --aud-pill: linear-gradient(90deg, var(--clr-cat-kids-tint) 0 calc(.75rem + 3.043em), var(--clr-cat-youth-tint) calc(.75rem + 3.043em) 100%); }
ul.services a.service[href="/oferta/mmpi-2-test-oceny-osobowosci-wroclaw/"] { --aud-label: "dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-adult) 0 100%); --aud-pill: var(--clr-cat-adult-tint); }
ul.services a.service[href="/oferta/diva-5-diagnoza-adhd-u-doroslych-wroclaw/"] { --aud-label: "dorośli"; --aud-bar: linear-gradient(90deg, var(--clr-cat-adult) 0 100%); --aud-pill: var(--clr-cat-adult-tint); }


/* faq.css */
/* FAQ index page (/najczestsze-pytania/) and the links around the service-page FAQ.
   Uses the tokens from tokens.blend.css. */

/* Jump list: one chip per service, with its question count */
.faq-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-half);
    margin: var(--space-double) 0 0;
    padding: 0;
    list-style: none;
}

/* main.css gives every .page-content li an arrow image marker */
.faq-toc ul li {
    list-style: none;
}

.faq-toc a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-pill);
    background-color: var(--clr-surface-raised);
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-ui);
    color: var(--clr-base-strong);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);

    &:hover {
        border-color: var(--card-hover-border);
        box-shadow: var(--shadow-1);
    }

    &:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 2px;
    }

    .count {
        min-inline-size: 1.5rem;
        padding: .0625rem .375rem;
        border-radius: var(--radius-pill);
        background-color: var(--clr-tint);
        font-size: .75rem;
        text-align: center;
        color: var(--clr-text-2);
    }
}

/* Sections and questions linked by anchor: keep them clear of the fixed top bar + breadcrumb */
section.faq[id],
details.faq-item[id] {
    scroll-margin-top: 8.5rem;
}

section.faq > h2:has(+ .faq-service-link) {
    margin-block-end: var(--space-quarter);
}

/* the long selectors outrank the prose rule in tokens.blend.css, which sets
   every .page-content paragraph in the serif text face */
.page-content section.faq p.faq-service-link,
.page-content section.faq p.faq-all-link {
    font-family: var(--font-regular);
    font-size: var(--font-size-small);

    a {
        color: var(--clr-base-strong);
        text-underline-offset: 3px;
    }
}

.faq-service-link {
    margin-block-end: var(--space-normal);
}

.faq-all-link {
    margin-block-start: var(--space-normal);
}

/* "Odpowiedzi sprawdzone przez" line under each service's questions */
.page-content section.faq p.faq-reviewed {
    margin-block-start: var(--space-normal);
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
    color: var(--clr-text-muted);

    a {
        color: var(--clr-base-strong);
        text-underline-offset: 3px;
    }
}


/* szkolenia.css */
/* Szkolenia: pieces that psyche.wroclaw.pl does not have. Tokens from tokens.blend.css only. */

/* Anchor jumps (#terminy, #zapisy, #pytania, #kontakt) land below the fixed top bar
   (--topbar-height: 80px, 48px on phones) and the sticky breadcrumb (~28px), plus a small gap */
html { scroll-padding-top: calc(var(--topbar-height, 80px) + 2.75rem); }

.newsletter-button--ghost {
    background: transparent;
    color: var(--clr-base-strong);
    border: 2px solid var(--clr-base);
    margin-left: var(--space-half);
}
.newsletter-button--ghost:hover,
.newsletter-button--ghost:focus-visible {
    background: var(--clr-base);
    color: var(--clr-text-inverse);
}

/* Four steps: numbered cards in a row, stacked on phones */
.page-content ol.course-steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-normal);
    margin: var(--space-double) 0;
    padding: 0;
    list-style: none;
}
.page-content ol.course-steps li {
    counter-increment: step;
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
    padding: var(--space-normal) var(--space-normal) var(--space-double);
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    list-style: none;
}
.page-content ol.course-steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--clr-base);
    color: var(--clr-text-inverse);
    font-family: var(--font-regular);
    font-weight: var(--font-weight-ui);
}
.page-content ol.course-steps strong {
    font-family: var(--font-display);
    font-weight: var(--font-weight-card);
    font-size: var(--font-size-h5);
    color: var(--clr-text);
}
.page-content ol.course-steps span { color: var(--clr-text-2); }

/* W skrócie panel */
.summary-panel {
    margin: var(--space-double) 0;
    padding: var(--space-double);
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-1);
}
.summary-panel h2 { margin-top: 0; }
.summary-panel dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-normal) var(--space-double);
    margin: 0 0 var(--space-normal);
}
.summary-panel dt {
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-ui);
    color: var(--clr-text-muted);
}
.summary-panel dd { margin: 0; color: var(--clr-text); font-family: var(--font-text); font-size: var(--font-size-paragraph); }

/* Terms */
.terms { margin: var(--space-double) 0; }
.page-content ul.term-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-normal); }
.page-content ul.term-list li.term {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--space-half) var(--space-double);
    padding: var(--space-normal) var(--space-double);
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-left: 6px solid var(--clr-accent);
    border-radius: var(--radius-card);
    list-style: none;
}
.term-date { font-family: var(--font-display); font-size: var(--font-size-h4); color: var(--clr-text); }
.term-meta { display: flex; flex-wrap: wrap; gap: var(--space-quarter) var(--space-normal); color: var(--clr-text-2); }
.term-meta strong { flex-basis: 100%; }
.terms-empty {
    padding: var(--space-normal) var(--space-double);
    background: var(--clr-tint);
    color: var(--clr-on-tint);
    border-radius: var(--radius-card);
}
@media (min-width: 48em) {
    .page-content ul.term-list li.term { grid-template-columns: 1fr 2fr auto; }
    .term-meta strong { flex-basis: auto; }
}

/* Contact box */
.course-contact {
    margin: var(--space-section) 0 var(--space-double);
    padding: var(--space-double);
    background: var(--clr-dark);
    color: var(--clr-text-inverse);
    border-radius: var(--radius-panel);
}
.course-contact h2, .course-contact p { color: var(--clr-text-inverse); }
@media (max-width: 37.5rem) {
    .course-contact .newsletter-button { display: block; margin: 0 0 var(--space-half); text-align: center; overflow-wrap: anywhere; }
}
.course-contact .newsletter-button--ghost { color: var(--clr-text-inverse); border-color: var(--clr-accent-soft); }
.course-contact .newsletter-button--ghost:hover { background: var(--clr-accent-soft); color: var(--clr-dark); }

.page-content ul.trainer-list { list-style: none; padding: 0; display: grid; gap: var(--space-normal); }
.page-content ul.trainer-list li { list-style: none; }
.trainer-list span { display: block; color: var(--clr-text-muted); }
.course-note { margin-top: var(--space-double); font-size: var(--font-size-small); color: var(--clr-text-muted); }

/* Registration form */
.register { margin: var(--space-section) 0 var(--space-double); }
.register-form {
    margin-top: var(--space-double);
    display: grid;
    gap: var(--space-normal);
    max-width: 40rem;
    padding: var(--space-double);
    background: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-1);
}
.register-trap { position: absolute; left: -9999px; }
.register-form .field { display: grid; gap: var(--space-quarter); }
.register-form .field label {
    font-family: var(--font-regular);
    font-weight: var(--font-weight-ui);
    font-size: var(--font-size-small);
    color: var(--clr-text);
}
.register-form .field label span { font-weight: var(--font-weight-body); color: var(--clr-text-muted); }
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="tel"],
.register-form select,
.register-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: .625rem 1rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    background-color: var(--clr-surface);
    font: inherit;
    font-family: var(--font-text);
    color: var(--clr-text);
}
.register-form textarea { resize: vertical; }
.register-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23455' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    background-size: 1rem;
    cursor: pointer;
}
.register-form input:focus-visible,
.register-form select:focus-visible,
.register-form textarea:focus-visible { outline: 3px solid var(--clr-focus); outline-offset: 2px; }
.register-form .consent { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--font-size-small); color: var(--clr-text-muted); }
.register-form .consent input[type="checkbox"] {
    appearance: none;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: .05rem 0 0;
    border: 1px solid var(--clr-border);
    border-radius: .4rem;
    background: var(--clr-surface-raised) center / 85% no-repeat;
    cursor: pointer;
}
.register-form .consent input[type="checkbox"]:checked {
    border-color: var(--btn-emph-bg);
    background-color: var(--btn-emph-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2312302E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
.register-form button { cursor: pointer; border: 0; }