/* 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%);
    }
}

.topbar {
    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;
        }
    }

    .phone-link {
        margin-inline-start: auto;
        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;
            }
        }
    }

}

.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);
        }
    }
}

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);
        }

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

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

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

/* 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: 80px;
    z-index: 5;
    backdrop-filter: blur(5px);

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

    >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);
                }
            }

            .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;
                }
            }

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

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

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

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

    }
}

/* team.css */
.filters {
    button {
        position: relative;
        overflow: hidden;

        &[data-category="kids"] {
            --clr: orange;
        }

        &[data-category="youth"] {
            --clr: blue;
        }

        &[data-category="adult"] {
            --clr: red;
        }

        &[data-category="online"] {
            --clr: green;
        }

        &:after {
            content: '';
            display: block;
            width: 100%;
            height: calc(.5 * var(--size-half));
            position: absolute;
            bottom: 0;
            left: 0%;
            background-color: var(--clr, transparent);
        }

        &.active:after {
            display: none;
        }

        @media screen and (max-width: 37.5rem) {
            &:first-of-type {
                grid-column: 1/-1;
            }
        }

    }

}

ul.team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 25%, 280px), 1fr));
    gap: var(--space-normal);
    padding: 0;
    margin: 0;

    li {
        list-style: none;
        margin: 0;
        padding: 0;
        aspect-ratio: 2/3;
        /* transition: blur .15s ease-out; */
    }

    /* &:is(:HOVER, :FOCUS) {

        li {
            filter: blur(5px) grayscale(100%);
            opacity: .7;

            &:HOVER {
                filter: blur(0);
                opacity: 1;
            }
        }
    } */


}

.member {
    display: block;
    text-decoration: none;
    width: 100%;
    aspect-ratio: 2/3;
    position: relative;

    &[kids] {
        --clr-kids: orange;
    }

    &[youth] {
        --clr-youth: blue;
    }

    &[adult] {
        --clr-adult: red;
    }

    &[online] {
        --clr-online: green;
    }

    .bg {
        border-radius: var(--border-radius-double);
        box-shadow: 20px 20px 60px #cacaca,
            -20px -20px 60px #ffffff;
        width: 80%;
        height: 50%;
        overflow: hidden;
        position: absolute;
        bottom: 15%;
        left: 10%;
        padding-block-start: 100%;
        box-sizing: border-box;
        background-color: var(--clr-text-inverse);
        overflow: hidden;

        &:after {
            content: '';
            display: block;
            width: 80%;
            height: var(--size-half);
            position: absolute;
            bottom: 0;
            left: 10%;
            background-image: linear-gradient(90deg, var(--clr-kids, transparent), var(--clr-kids, transparent) 25%, var(--clr-youth, transparent) 25%, var(--clr-youth, transparent) 50%, var(--clr-adult, transparent) 50%, var(--clr-adult, transparent) 75%, var(--clr-online, transparent) 75%);
        }

    }

    img {
        background-color: var(--clr-text-inverse);
        aspect-ratio: 1/1;
        width: 90%;
        height: auto;
        display: block;
        border-radius: 100%;
        object-fit: cover;
        object-position: top center;
        box-shadow: rgb(204, 204, 204) 0px 0px 30px 0px;
        position: absolute;
        top: 0;
        left: 5%;
        transition: all .25s ease;
        /* transition-delay: .15s; */
    }

    .name {
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
        max-width: 80%;
        position: absolute;
        bottom: 18%;
        left: 50%;
        transform: translateX(-50%);
        color: var(--clr-base);
        transition: all .15s ease-out;
        transition-delay: .15s;
        padding-inline: var(--space-half);
        padding-block: var(--space-half);
        border-radius: var(--border-radius-double);

        @media screen and (max-width: 37.5rem) {
            font-size: var(--step--1);
        }
    }

    &:is(:HOVER, :FOCUS) {
        img {
            aspect-ratio: 2/3;
            border-radius: 0;
        }

        .name {
            bottom: 15%;
            color: var(--clr-text-inverse);
            background: hsl(from var(--clr-text) h s l / 50%);
            backdrop-filter: blur(5px);
        }

    }
}


div.member-single {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-double);

    div:first-child {
        grid-column: 2/-1;
    }

    div.spec {
        text-align: center;
        font-weight: 500;
        max-width: 75%;
        margin-inline: auto;

    }

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

        div:first-child {
            grid-column: 1/-1;
        }
    }
}

.booksy-btn {
    display: block;
    width: 100%;
    padding: var(--space-double);
    margin-block: var(--space-double);
    border-radius: 50px;
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
    position: relative;
    transition: all 300ms ease 0ms;
    text-align: center;
    text-transform: uppercase;
    color: var(--clr-base);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--font-size-h5);

    &:HOVER {
        border-radius: 50px;
        background: #ffffff;
        box-shadow: -20px -20px 60px #d9d9d9, 20px 20px 60px #ffffff;
        z-index: 3;
        cursor: pointer;
        text-decoration: none
    }
}

div.filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20%, 220px), 1fr));
    margin-block: var(--space-double);
    gap: var(--space-normal);

    button {
        border: none;
        display: block;
        width: 100%;
        padding: var(--space-normal);
        /* margin-block: var(--space-double); */
        border-radius: 50px;
        background: linear-gradient(145deg, #e6e6e6, #ffffff);
        box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
        position: relative;
        transition: all 300ms ease 0ms;
        text-align: center;
        text-transform: uppercase;
        color: var(--clr-base);
        text-decoration: none;
        font-weight: 700;
        font-size: var(--font-size-paragraph);

        &:HOVER {
            border-radius: 50px;
            background: #ffffff;
            box-shadow: -20px -20px 60px #d9d9d9, 20px 20px 60px #ffffff;
            z-index: 3;
            cursor: pointer;
            text-decoration: none
        }

        &.active {
            background: var(--clr-base);
            color: #ffffff;
        }

    }
}

::view-transition-group(root) {
    animation-duration: .75s;
    mix-blend-mode: none;
}

::view-transition-group(old) {
    animation-duration: .75s;
}

::view-transition-group(new) {
    animation-duration: .75s;
}

/* 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 {
                aspect-ratio: 1/1;
                width: 100%;
                max-width: 100px;
                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%
}

.panel.action {
    background-color: var(--clr-base);
    display: flex;
    justify-content: center;

    a {
        text-align: left;
        color: #ffffff;
        font-size: var(--font-size-h4);
        text-transform: uppercase;
        line-height: 1.5;
        display: flex;
        align-items: center;
        gap: 1rem;
        text-decoration: none;
        font-weight: 700;

        &:before {
            content: '';
            mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTguOTY5IiBoZWlnaHQ9IjExNS4zOTMiIHZpZXdCb3g9IjAgMCAxNTguOTY5IDExNS4zOTMiPgogIDxwYXRoIGlkPSJTaGFwZSIgZD0iTTExNy4xLDI4My43YTM1Ljg4NCwzNS44ODQsMCwwLDEsMTkuOC01LjJjMTQuNi42LDI2LjIsNy4yLDMzLjksMTkuOSw0LjUsNy41LDYuMSwxNS43LDYsMjQuNS0uMSw5LjgtMi45LDE4LjYtOS4zLDI2LjEtOCw5LjQtMTguMywxNC0zMC43LDE1LTE4LjMsMS41LTMzLjEtNS45LTQ3LjEtMTYuMy02LjktNS4xLTEzLjgtMTAuMS0yMS4xLTE0LjdhMzUuMDgzLDM1LjA4MywwLDAsMC0xMC4zLTQuNSwxOC4wNjMsMTguMDYzLDAsMCwwLTIwLjYsOC4yLDEyLjgxLDEyLjgxLDAsMCwwLTEuMSwyLDQuNDMsNC40MywwLDAsMS00LjcsMi44Yy0zLjMtLjEtNi42LDAtMTAsMC0zLjktLjEtNC45LTEuNS0zLjQtNS4xLDUuMi0xMi4xLDE0LjQtMTkuOCwyNy4zLTIyLjcsMTItMi43LDIzLS4zLDMyLjksNi45LDUuOCw0LjMsMTEuNSw4LjcsMTcuNCwxMi45LDgsNS42LDE2LjIsMTEuMSwyNS44LDEzLjcsMTAuMSwyLjgsMjAsMi40LDI4LjktNCw1LjItMy44LDguNy04LjcsOS43LTE1LjEsMS4zLTguNS40LTE2LjctNS0yMy45YTIzLjcsMjMuNywwLDAsMC0zOS4zLDEuNGMtMi42LDQuMS00LjMsOC41LTQsMTMuNWE0NC4xNzMsNDQuMTczLDAsMCwxLS4xLDYuM2MtLjIsMi40LTEuNywzLjQtMy43LDIuM2E2NS41NDMsNjUuNTQzLDAsMCwxLTEwLjUtNi45Yy0xLjctMS4zLTEuNC0zLjItMS40LTV2LTYyYzAtNC43LjMtNSw1LjItNWg0LjVjNS4xLjEsNS45LjgsNS45LDYuMVYyODFDMTEyLjQsMjg2LjQsMTEyLjQsMjg2LjQsMTE3LjEsMjgzLjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcuODM1IC0yNDguOCkiIGZpbGw9IiMxNjE3MTgiLz4KPC9zdmc+);
            mask-size: contain;
            mask-repeat: no-repeat;
            display: block;
            width: 6rem;
            aspect-ratio: 6/4.5;
            background-color: currentcolor
        }
    }
}

/* articles.css */
:is(.article, .article-single) {
    display: block;

    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;

    h3 {
        margin-block: 0;
        margin-block-end: var(--space-normal);
    }

    a {
        text-decoration: none;
    }
}

nav.pagination {
    width: fit-content;
    margin-inline: auto;
    margin-block-end: var(--space-double);

    ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-half);

        li {
            list-style: none;

            display: block;
            padding-inline: var(--space-half);

            background-color: var(--clr-text-inverse);
            border-radius: var(--border-radius-quarter);

            &:has(>:not(a)),
            &:is(:HOVER, :FOCUS, :FOCUS),
            &:has(a:FOCUS) {
                color: var(--clr-text-inverse);
                background-color: var(--clr-base);

                a {
                    color: currentColor;
                }
            }

            a {
                text-decoration: none
            }
        }
    }
}

.knowledge-base {
    background-color: hsl(from var(--clr-base) h 50% 60%);
    padding-block: var(--space-double);

    h2 {
        width: fit-content;
        margin-inline: auto;
        margin-block: var(--space-double);
        color: var(--clr-text-inverse);
        font-weight: 700;
    }

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

/* Homepage: the newest articles, one per row — date, then title */
ol.article-list {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        margin: 0;
    }

    a {
        display: grid;
        grid-template-columns: 11rem 1fr;
        gap: var(--space-normal);
        align-items: baseline;
        padding-block: var(--space-normal);
        padding-inline: var(--space-double);
        text-decoration: none;

        @media screen and (max-width: 37.5rem) {
            grid-template-columns: 1fr;
            gap: var(--space-quarter);
            padding-inline: var(--space-normal);
        }
    }
}

.article-list-more {
    display: block;
    width: fit-content;
    margin-block-start: var(--space-double);
    margin-inline: auto;
}

/* Artykuły list: the date sits between the title and the lead */
.article time {
    display: block;
    margin-block-end: var(--space-half);
}

/* Article pages: the related services under the text (partials/services.njk) */
.article-services {
    margin-block: var(--space-double);

    h2 {
        text-align: center;
    }
}

/* Article pages: publication date under the title */
.article-date {
    margin-block: calc(-1 * var(--space-half)) var(--space-double);
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
    color: var(--clr-text-muted);
}


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

    @media screen and (max-width: 37.5rem) {
        & {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
    }

    li {
        list-style: none;

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

            z-index: 1;

            >div:first-child {
                position: relative;
                z-index: 2
            }

            &:HOVER {
                text-decoration: none;
                background-color: var(--clr-base);
                color: var(--clr-text-inverse);

                scale: 1.05;

                .cover {
                    opacity: .4;
                    mix-blend-mode: overlay
                }
            }

            .cover {
                position: absolute;
                z-index: 1;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: .2;
                transition: all .2s ease
            }
        }


    }
}

/* 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-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;
            }
        }
    }

}


/* 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;
    --action-panel-bg: var(--clr-accent);
    --action-panel-fg: #12302E;
    --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);
}

/* ---------- 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);
}

/* 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);
}

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);
}

/* 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. */
ul.services li .service::before,
div.filters button::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;
}

ul.services li .service:hover::before,
ul.services li .service:focus-visible::before,
div.filters button: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: A & B lift the card; C pops it out and fills it */
ul.services li .service:hover,
ul.services li .service:focus-visible {
    background-color: var(--card-hover-bg);
    color: var(--card-hover-fg);
    border-color: var(--card-hover-border);
    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 button[data-category="kids"]   { --clr: var(--clr-cat-kids); }
.filters button[data-category="youth"]  { --clr: var(--clr-cat-youth); }
.filters button[data-category="adult"]  { --clr: var(--clr-cat-adult); }
.filters button[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. */
/* Wrapping row sized by the labels: a button is never narrower than its text
   (labels never break), and buttons grow to fill each line evenly */
div.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-half);
    margin-block: var(--space-double) var(--space-normal);
}

div.filters button {
    /* 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);
    }
}

/* 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);
        }
    }
}

/* Booking panel follows the booking colour (C: coral) */
.panel.action {
    background-color: var(--action-panel-bg);

    a {
        color: var(--action-panel-fg);
    }
}

/* ---------- 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 button,
    div.filters button::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 button:hover,
    div.filters button: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ół/karolina-debska/"] { --avatar: url("/media/avatars/karolina-debska.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/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;
    }
}


/* search.css */
/* Site-wide search: the Pagefind UI on /szukaj/ and the search form on the Artykuły page */

/* Pagefind UI themed with the design tokens */
.site-search {
    --pagefind-ui-scale: 0.9;
    --pagefind-ui-primary: var(--clr-base);
    --pagefind-ui-text: var(--clr-text);
    --pagefind-ui-background: var(--clr-surface-raised);
    --pagefind-ui-border: var(--clr-border);
    --pagefind-ui-tag: var(--clr-tint);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: var(--radius-card);
    --pagefind-ui-font: var(--font-regular);

    margin-block: var(--space-double) var(--space-section);

    .pagefind-ui__result-link {
        color: var(--clr-base-strong);
    }

    .pagefind-ui__result-excerpt mark {
        background-color: var(--clr-tint);
        color: var(--clr-text);
    }

    .pagefind-ui__search-input:focus-visible {
        outline: 3px solid var(--clr-focus);
        outline-offset: 2px;
    }
}

/* Artykuły: a query box that opens /szukaj/ filtered to articles */
.search-form {
    display: grid;
    gap: var(--space-half);
    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;
        gap: var(--space-half);
    }

    input {
        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);
    }

    button {
        padding: .75rem 1.5rem;
        font: inherit;
        font-weight: var(--font-weight-ui);
        color: var(--clr-text-inverse);
        background-color: var(--clr-base);
        border: none;
        border-radius: var(--radius-card);
        cursor: pointer;
        transition: background-color var(--duration-fast) var(--ease-out);

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

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


/* reviews.css */
/* Google reviews (partials/reviews.njk): specialist pages, service pages and /opinie/ */

ul.reviews {
    list-style: none;
    margin: var(--space-double) 0 0;
    padding: 0;
    columns: 20rem;
    column-gap: var(--space-normal);
}

/* as specific as main.css's ".page-content ul li" arrow bullet, and loaded later */
ul.reviews > li {
    list-style: none;
}

.review {
    break-inside: avoid;
    margin: 0 0 var(--space-normal);
    padding: var(--space-normal) 1.25rem;
    background-color: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);

    blockquote {
        margin: var(--space-half) 0;
        font-family: var(--font-text);
        line-height: var(--line-height-body);
        color: var(--clr-text);

        p {
            margin-block: 0 var(--space-half);
        }
    }
}

.review-stars {
    margin: 0;
    color: var(--clr-accent);
    letter-spacing: .1em;

    .off {
        color: var(--clr-border);
    }
}

.review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-quarter) var(--space-half);
    margin: 0;
    font-family: var(--font-regular);
    font-size: var(--font-size-small);
    color: var(--clr-text-muted);

    .review-author {
        font-weight: var(--font-weight-ui);
        color: var(--clr-text-2);
    }

    .review-about {
        flex-basis: 100%;
    }

    a {
        color: var(--clr-base-strong);
    }
}

/* Average rating (partials/rating-summary.njk): homepage and /opinie/ */
.rating-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-half) var(--space-double);
    width: fit-content;
    max-width: 100%;
    margin-block: var(--space-double);
    margin-inline: auto;
    padding: var(--space-normal) var(--space-double);
    background-color: var(--clr-surface-raised);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-1);
    font-family: var(--font-regular);

    p {
        margin: 0;
    }

    .rating-score {
        display: flex;
        align-items: baseline;
        gap: var(--space-half);

        strong {
            font-family: var(--font-display);
            font-size: var(--font-size-h2);
            font-weight: var(--font-weight-h1);
            line-height: 1;
            color: var(--clr-text);
        }

        .review-stars {
            font-size: var(--font-size-h4);
        }
    }

    .rating-count {
        color: var(--clr-text-2);
    }
}

.reviews-more {
    font-family: var(--font-regular);
    font-weight: var(--font-weight-ui);
}

:is(.reviews-more a, a.reviews-more) {
    color: var(--clr-base-strong);

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


/* node_modules/vanilla-cookieconsent/dist/cookieconsent.css */
#cc-main{background:transparent;color:var(--cc-primary-color);font-family:var(--cc-font-family);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.15;position:relative;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;position:fixed;z-index:var(--cc-z-index)}#cc-main :after,#cc-main :before,#cc-main a,#cc-main button,#cc-main div,#cc-main h2,#cc-main input,#cc-main p,#cc-main span{all:unset;box-sizing:border-box}#cc-main .pm__badge,#cc-main button{all:initial;box-sizing:border-box;color:unset;visibility:unset}#cc-main .pm__badge,#cc-main a,#cc-main button,#cc-main input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}#cc-main table,#cc-main tbody,#cc-main td,#cc-main th,#cc-main thead,#cc-main tr{all:revert;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}:root{--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--cc-modal-border-radius:.5rem;--cc-btn-border-radius:.4rem;--cc-modal-transition-duration:.25s;--cc-link-color:var(--cc-btn-primary-bg);--cc-modal-margin:1rem;--cc-z-index:2147483647;--cc-bg:#fff;--cc-primary-color:#2c2f31;--cc-secondary-color:#5e6266;--cc-btn-primary-bg:#30363c;--cc-btn-primary-color:#fff;--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#000;--cc-btn-primary-hover-color:#fff;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#eaeff2;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#d4dae0;--cc-btn-secondary-hover-color:#000;--cc-btn-secondary-hover-border-color:#d4dae0;--cc-separator-border-color:#f0f4f7;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#667481;--cc-toggle-on-knob-bg:#fff;--cc-toggle-off-knob-bg:var(--cc-toggle-on-knob-bg);--cc-toggle-enabled-icon-color:var(--cc-bg);--cc-toggle-disabled-icon-color:var(--cc-bg);--cc-toggle-readonly-bg:#d5dee2;--cc-toggle-readonly-knob-bg:#fff;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:var(--cc-cookie-category-block-bg);--cc-cookie-category-block-bg:#f0f4f7;--cc-cookie-category-block-border:#f0f4f7;--cc-cookie-category-block-hover-bg:#e9eff4;--cc-cookie-category-block-hover-border:#e9eff4;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:#dee4e9;--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:var(--cc-btn-secondary-bg);--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#e4eaed;--cc-pm-toggle-border-radius:4em}#cc-main.cc--rtl{direction:rtl}#cc-main .cm__title,#cc-main a,#cc-main b,#cc-main em,#cc-main strong{font-weight:600}#cc-main button>span{pointer-events:none}#cc-main .cc__link,#cc-main a{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;font-weight:600;position:relative;transition:background-size .25s,color .25s ease}#cc-main .cc__link:hover,#cc-main a:hover{background-size:100% 1px;color:var(--cc-primary-color)}#cc-main .cc__link{color:var(--cc-link-color)}#cc-main .cm__desc,#cc-main .pm__body{overscroll-behavior:auto contain;scrollbar-width:thin}@media screen and (min-width:640px){#cc-main ::-webkit-scrollbar,#cc-main ::-webkit-scrollbar-thumb,#cc-main ::-webkit-scrollbar-track{all:revert}#cc-main ::-webkit-scrollbar-thumb{-webkit-background-clip:padding-box;background-clip:padding-box;background:var(--cc-toggle-readonly-bg);border:.25rem solid var(--cc-bg);border-radius:1rem}#cc-main ::-webkit-scrollbar-thumb:hover{background:var(--cc-toggle-off-bg)}#cc-main ::-webkit-scrollbar{background:transparent;width:12px}}html.disable--interaction.show--consent,html.disable--interaction.show--consent body{height:auto!important;overflow:hidden!important}@media (prefers-reduced-motion){#cc-main{--cc-modal-transition-duration:0s}}.cc--darkmode{--cc-bg:#161a1c;--cc-primary-color:#ebf3f6;--cc-secondary-color:#aebbc5;--cc-btn-primary-bg:#c2d0e0;--cc-btn-primary-color:var(--cc-bg);--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#98a7b6;--cc-btn-primary-hover-color:#000;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#242c31;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#353d43;--cc-btn-secondary-hover-color:#fff;--cc-btn-secondary-hover-border-color:var(--cc-btn-secondary-hover-bg);--cc-separator-border-color:#222a30;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#525f6b;--cc-toggle-on-knob-bg:var(--cc-btn-primary-color);--cc-toggle-off-knob-bg:var(--cc-btn-primary-color);--cc-toggle-enabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-disabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-readonly-bg:#343e45;--cc-toggle-readonly-knob-bg:#5f6b72;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:#1e2428;--cc-cookie-category-block-bg:#1e2428;--cc-cookie-category-block-border:var(--cc-section-category-border);--cc-cookie-category-block-hover-bg:#242c31;--cc-cookie-category-block-hover-border:#232a2f;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:var(--cc-toggle-readonly-bg);--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:#0c0e0f;--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#060809}.cc--darkmode #cc-main{color-scheme:dark}#cc-main .cm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;max-width:24rem;opacity:0;overflow:hidden;position:fixed;transform:translateY(1.6em);visibility:hidden;z-index:1}#cc-main .cm--top{top:var(--cc-modal-margin)}#cc-main .cm--middle{top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .cm--bottom{bottom:var(--cc-modal-margin)}#cc-main .cm--center{left:var(--cc-modal-margin);margin:0 auto;right:var(--cc-modal-margin);width:unset}#cc-main .cm--left{left:var(--cc-modal-margin);margin-right:var(--cc-modal-margin)}#cc-main .cm--right{margin-left:var(--cc-modal-margin);right:var(--cc-modal-margin)}#cc-main .cm__body{display:flex;flex-direction:column;justify-content:space-between;position:relative}#cc-main .cm__btns,#cc-main .cm__links{padding:1rem 1.3rem;width:unset}#cc-main .cm__texts{display:flex;flex:1;flex-direction:column;justify-content:center;padding:1rem 0 0}#cc-main .cm__desc,#cc-main .cm__title{padding:0 1.3rem}#cc-main .cm__title{font-size:1.05em}#cc-main .cm__title+.cm__desc{margin-top:1.1em}#cc-main .cm__desc{color:var(--cc-secondary-color);font-size:.9em;line-height:1.5;max-height:40vh;overflow-x:visible;overflow-y:auto;padding-bottom:1em}#cc-main .cm__btns{border-top:1px solid var(--cc-separator-border-color);display:flex;flex-direction:column;justify-content:center}#cc-main .cm__btn-group{display:grid;grid-auto-columns:minmax(0,1fr)}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin-top:.375rem}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .cm--inline .cm__btn+.cm__btn{margin-left:.375rem;margin-top:0}#cc-main .cm--inline.cm--flip .cm__btn+.cm__btn{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--inline.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-right:0}#cc-main .cm--wide .cm__btn+.cm__btn,#cc-main .cm--wide .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--wide.cm--flip .cm__btn+.cm__btn,#cc-main .cm--wide.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-right:.375rem}#cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven,#cc-main .cm--wide .cm__btn-group--uneven{display:flex;flex:1;justify-content:space-between}#cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven,#cc-main .cm--wide.cm--flip .cm__btn-group--uneven{flex-direction:row-reverse}#cc-main .cm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);font-size:.82em;font-weight:600;min-height:42px;padding:.5em 1em;text-align:center}#cc-main .cm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .cm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close{border-radius:0;border-bottom-left-radius:var(--cc-btn-border-radius);border-right:none;border-top:none;display:none;font-size:1em;height:42px;min-width:auto!important;overflow:hidden;padding:0!important;position:absolute;right:0;top:0;width:42px}#cc-main .cm__btn--close svg{stroke:var(--cc-btn-primary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .cm__btn--close:hover svg{stroke:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--close.cm__btn--secondary svg{stroke:var(--cc-btn-secondary-color)}#cc-main .cm__btn--close.cm__btn--secondary:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close+.cm__texts .cm__title{padding-right:3rem}#cc-main .cm--inline .cm__btn-group{grid-auto-flow:column}#cc-main .cm__footer{background:var(--cc-footer-bg);border-top:1px solid var(--cc-footer-border-color);color:var(--cc-footer-color);padding:.4em 0 .5em}#cc-main .cm__links{display:flex;flex-direction:row;padding-bottom:0;padding-top:0}#cc-main .cm__link-group{display:flex;flex-direction:row;font-size:.8em;width:100%}#cc-main .cm__link-group>*+*{margin-left:1.3rem}#cc-main .cm--flip .cm__btn:last-child{grid-row:1}#cc-main .cm--inline.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--box .cm__btn--close{display:block}#cc-main .cm--box.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--box.cm--wide{max-width:36em}#cc-main .cm--box.cm--wide .cm__btns{flex-direction:row;justify-content:space-between}#cc-main .cm--box.cm--wide .cm__btn-group{grid-auto-flow:column}#cc-main .cm--box.cm--wide .cm__btn{min-width:120px;padding-left:1.8em;padding-right:1.8em}#cc-main .cm--box.cm--wide.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--cloud{max-width:54em;width:unset}#cc-main .cm--cloud .cm__body{flex-direction:row}#cc-main .cm--cloud .cm__texts{flex:1}#cc-main .cm--cloud .cm__desc{max-height:9.4em}#cc-main .cm--cloud .cm__btns{border-left:1px solid var(--cc-separator-border-color);border-top:none;max-width:23em}#cc-main .cm--cloud .cm__btn-group{flex-direction:column}#cc-main .cm--cloud .cm__btn{min-width:19em}#cc-main .cm--cloud.cm--flip .cm__btn-group,#cc-main .cm--cloud.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--cloud.cm--inline .cm__btn-group{flex-direction:row}#cc-main .cm--cloud.cm--inline .cm__btn{min-width:10em}#cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group{flex-direction:row-reverse}#cc-main .cm--bar{border-radius:0;left:0;margin:0;max-width:unset;opacity:1;right:0;transform:translateY(0);width:100vw;--cc-modal-transition-duration:.35s}#cc-main .cm--bar.cm--top{top:0;transform:translateY(-100%)}#cc-main .cm--bar.cm--bottom{bottom:0;transform:translateY(100%)}#cc-main .cm--bar .cm__body,#cc-main .cm--bar .cm__links{margin:0 auto;max-width:55em;width:100%}#cc-main .cm--bar .cm__body{padding:.5em 0 .9em}#cc-main .cm--bar .cm__btns{border-top:none;flex-direction:row;justify-content:space-between}#cc-main .cm--bar .cm__btn-group{grid-auto-flow:column}#cc-main .cm--bar:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--bar .cm__btn{min-width:120px;padding-left:2em;padding-right:2em}#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--bar.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--bar.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--bar.cm--inline .cm__body,#cc-main .cm--bar.cm--inline .cm__links{max-width:74em}#cc-main .cm--bar.cm--inline .cm__body{flex-direction:row;padding:0}#cc-main .cm--bar.cm--inline .cm__btns{flex-direction:column;justify-content:center;max-width:23em}#cc-main .cm--bar.cm--inline.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cc--anim .cm,#cc-main .cc--anim.cm-wrapper:before{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}#cc-main .cc--anim .cm__btn,#cc-main .cc--anim .cm__close{transition:background-color .15s ease,border-color .15s ease,color .15s ease}.disable--interaction #cc-main .cm-wrapper:before{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:0}.show--consent #cc-main .cc--anim .cm{opacity:1;transform:translateY(0);visibility:visible!important}.show--consent #cc-main .cc--anim .cm--middle{transform:translateY(-50%)}.show--consent #cc-main .cc--anim .cm--bar{transform:translateY(0)}.show--consent #cc-main .cc--anim.cm-wrapper:before{opacity:1;visibility:visible}#cc-main.cc--rtl .cm__btn--close{border-bottom-left-radius:unset;border-bottom-right-radius:var(--cc-btn-border-radius);left:0;right:unset}#cc-main.cc--rtl .cm__btn--close+.cm__texts .cm__title{padding-left:3rem!important;padding-right:1.3rem}#cc-main.cc--rtl .cm--inline .cm__btn+.cm__btn{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm--inline.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group+.cm__btn-group,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group+.cm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm__link-group>*+*{margin-left:0;margin-right:1.3rem}@media screen and (max-width:640px){#cc-main{--cc-modal-margin:.5em}#cc-main .cm{max-width:none!important;width:auto!important}#cc-main .cm__body{flex-direction:column!important;padding:0!important}#cc-main .cm__btns,#cc-main .cm__desc,#cc-main .cm__links,#cc-main .cm__title{padding-left:1.1rem!important;padding-right:1.1rem!important}#cc-main .cm__btns{border-left:none!important;border-top:1px solid var(--cc-separator-border-color)!important;flex-direction:column!important;max-width:none!important;min-width:auto!important}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin:.375rem 0 0!important}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .cm__btn-group{display:flex!important;flex-direction:column!important;min-width:auto!important}#cc-main .cm__btn{flex:auto!important}#cc-main .cm__link-group{justify-content:center!important}#cc-main .cm--flip .cm__btn-group,#cc-main .cm--flip .cm__btns{flex-direction:column-reverse!important}}#cc-main .pm-wrapper{position:relative;z-index:2}#cc-main .pm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;opacity:0;overflow:hidden;position:fixed;visibility:hidden;width:100%;width:unset;z-index:1}#cc-main svg{fill:none;width:100%}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:1em 1.4em}#cc-main .pm__header{align-items:center;border-bottom:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__title{align-items:center;display:flex;flex:1;font-weight:600;margin-right:2em}#cc-main .pm__close-btn{background:var(--cc-btn-secondary-bg);border:1px solid var(--cc-btn-secondary-border-color);border-radius:var(--cc-btn-border-radius);height:40px;position:relative;transition:all .15s ease;width:40px}#cc-main .pm__close-btn span{display:flex;height:100%;width:100%}#cc-main .pm__close-btn svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .pm__close-btn:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color)}#cc-main .pm__close-btn:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .pm__body{flex:1;overflow-y:auto;overflow-y:overlay}#cc-main .pm__section,#cc-main .pm__section--toggle{border-radius:var(--cc-btn-border-radius);display:flex;flex-direction:column;margin-bottom:.5em}#cc-main .pm__section--toggle .pm__section-desc-wrapper{border:1px solid var(--cc-cookie-category-block-border);border-radius:var(--cc-btn-border-radius);border-top:none;border-top-left-radius:0;border-top-right-radius:0;display:none;margin-top:0!important;overflow:hidden}#cc-main .pm__section{border:1px solid var(--cc-separator-border-color);padding:1em;transition:background-color .25s ease,border-color .25s ease}#cc-main .pm__section:first-child{border:none;margin-bottom:2em;margin-top:0;padding:0;transition:none}#cc-main .pm__section:not(:first-child):hover{background:var(--cc-cookie-category-block-bg);border-color:var(--cc-cookie-category-block-border)}#cc-main .pm__section-toggles+.pm__section{margin-top:2em}#cc-main .pm__section--toggle{background:var(--cc-cookie-category-block-bg);border-top:none;margin-bottom:.375rem}#cc-main .pm__section--toggle .pm__section-title{align-items:center;background:var(--cc-cookie-category-block-bg);border:1px solid var(--cc-cookie-category-block-border);display:flex;justify-content:space-between;min-height:58px;padding:1.1em 5.4em 1.1em 1.2em;position:relative;transition:background-color .25s ease,border-color .25s ease;width:100%}#cc-main .pm__section--toggle .pm__section-title:hover{background:var(--cc-cookie-category-block-hover-bg);border-color:var(--cc-cookie-category-block-hover-border)}#cc-main .pm__section--toggle .pm__section-desc{margin-top:0;padding:1em}#cc-main .pm__section--toggle.is-expanded{--cc-cookie-category-block-bg:var(--cc-cookie-category-expanded-block-bg);--cc-cookie-category-block-border:var(--cc-cookie-category-expanded-block-hover-bg)}#cc-main .pm__section--toggle.is-expanded .pm__section-title{border-bottom-left-radius:0;border-bottom-right-radius:0}#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg{transform:scale(.5) rotate(180deg)}#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper{display:flex}#cc-main .pm__section--expandable .pm__section-title{cursor:pointer;padding-left:3.4em}#cc-main .pm__section--expandable .pm__section-arrow{background:var(--cc-toggle-readonly-bg);border-radius:100%;display:flex;height:20px;justify-content:center;left:18px;pointer-events:none;position:absolute;width:20px}#cc-main .pm__section--expandable .pm__section-arrow svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5)}#cc-main .pm__section-title-wrapper{align-items:center;display:flex;position:relative}#cc-main .pm__section-title-wrapper+.pm__section-desc-wrapper{margin-top:.85em}#cc-main .pm__section-title{border-radius:var(--cc-btn-border-radius);font-size:.95em;font-weight:600}#cc-main .pm__badge{align-items:center;background:var(--cc-btn-secondary-bg);border-radius:5em;color:var(--cc-secondary-color);display:flex;flex:none;font-size:.8em;font-weight:600;height:23px;justify-content:center;margin-left:1em;min-width:23px;overflow:hidden;padding:0 .6em 1px;position:relative;text-align:center;white-space:nowrap;width:auto}#cc-main .pm__service-counter{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);padding:0;width:23px}#cc-main .pm__service-counter[data-counterlabel]{padding:0 .6em 1px;width:auto}#cc-main .section__toggle,#cc-main .section__toggle-wrapper,#cc-main .toggle__icon,#cc-main .toggle__label{border-radius:var(--cc-pm-toggle-border-radius);height:23px;transform:translateZ(0);width:50px}#cc-main .section__toggle-wrapper{cursor:pointer;position:absolute;right:18px;z-index:1}#cc-main .toggle-service{height:19px;position:relative;right:0;width:42px}#cc-main .toggle-service .section__toggle,#cc-main .toggle-service .toggle__icon,#cc-main .toggle-service .toggle__label{height:19px;width:42px}#cc-main .toggle-service .toggle__icon{position:relative}#cc-main .toggle-service .toggle__icon-circle{height:19px;width:19px}#cc-main .toggle-service .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(23px)}#cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after{display:none!important}#cc-main .section__toggle{border:0;cursor:pointer;display:block;left:0;margin:0;position:absolute;top:0}#cc-main .section__toggle:disabled{cursor:not-allowed}#cc-main .toggle__icon{background:var(--cc-toggle-off-bg);box-shadow:0 0 0 1px var(--cc-toggle-off-bg);display:flex;flex-direction:row;pointer-events:none;position:absolute;transition:all .25s ease}#cc-main .toggle__icon-circle{background:var(--cc-toggle-off-knob-bg);border:none;border-radius:var(--cc-pm-toggle-border-radius);box-shadow:0 1px 2px rgba(24,32,3,.36);display:block;height:23px;left:0;position:absolute;top:0;transition:transform .25s ease,background-color .25s ease;width:23px}#cc-main .toggle__icon-off,#cc-main .toggle__icon-on{height:100%;position:absolute;transition:opacity .15s ease;width:100%}#cc-main .toggle__icon-on{opacity:0;transform:rotate(45deg)}#cc-main .toggle__icon-on svg{stroke:var(--cc-toggle-on-bg);transform:scale(.55) rotate(-45deg)}#cc-main .toggle__icon-off{opacity:1}#cc-main .toggle__icon-off svg{stroke:var(--cc-toggle-off-bg);transform:scale(.55)}#cc-main .section__toggle:checked~.toggle__icon{background:var(--cc-toggle-on-bg);box-shadow:0 0 0 1px var(--cc-toggle-on-bg)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-circle{background-color:var(--cc-toggle-on-knob-bg);transform:translateX(27px)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-on{opacity:1}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-off{opacity:0}#cc-main .section__toggle:checked:disabled~.toggle__icon{background:var(--cc-toggle-readonly-bg);box-shadow:0 0 0 1px var(--cc-toggle-readonly-bg)}#cc-main .section__toggle:checked:disabled~.toggle__icon .toggle__icon-circle{background:var(--cc-toggle-readonly-knob-bg);box-shadow:none}#cc-main .section__toggle:checked:disabled~.toggle__icon svg{stroke:var(--cc-toggle-readonly-knob-icon-color)}#cc-main .toggle__label{opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;z-index:-1}#cc-main .pm__section-desc-wrapper{color:var(--cc-secondary-color);display:flex;flex-direction:column;font-size:.9em}#cc-main .pm__section-desc-wrapper>:not(:last-child){border-bottom:1px solid var(--cc-cookie-category-block-border)}#cc-main .pm__section-services{display:flex;flex-direction:column}#cc-main .pm__service{align-items:center;display:flex;justify-content:space-between;padding:.4em 1.2em;position:relative;transition:background-color .15s ease}#cc-main .pm__service:hover{background-color:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__service-header{align-items:center;display:flex;margin-right:1em;width:100%}#cc-main .pm__service-icon{border:2px solid;border-radius:100%;height:8px;margin-left:6px;margin-right:20px;margin-top:1px;min-width:8px}#cc-main .pm__service-title{font-size:.95em;width:100%;word-break:break-word}#cc-main .pm__section-desc{line-height:1.5em}#cc-main .pm__section-table{border-collapse:collapse;font-size:.9em;margin:0;overflow:hidden;padding:0;text-align:left;width:100%}#cc-main .pm__table-caption{text-align:left}#cc-main .pm__table-caption,#cc-main .pm__table-head>tr{border-bottom:1px dashed var(--cc-separator-border-color);color:var(--cc-primary-color);font-weight:600}#cc-main .pm__table-tr{transition:background-color .15s ease}#cc-main .pm__table-tr:hover{background:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th{padding:.625em .625em .625em 1.2em;vertical-align:top}#cc-main .pm__footer{border-top:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__btn-group{display:flex}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin-left:.375rem}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main .pm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);flex:auto;font-size:.82em;font-weight:600;min-height:42px;min-width:110px;padding:.5em 1.5em;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#cc-main .pm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .pm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .pm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .pm--box{height:calc(100% - 2em);left:var(--cc-modal-margin);margin:0 auto;max-height:37.5em;max-width:43em;right:var(--cc-modal-margin);top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .pm--box.pm--flip .pm__btn-group,#cc-main .pm--box.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm--bar{border-radius:0;bottom:0;height:100%;margin:0;max-height:none;max-width:29em;opacity:1;top:0;width:100%;--cc-modal-transition-duration:.35s}#cc-main .pm--bar .pm__section-table,#cc-main .pm--bar .pm__table-body,#cc-main .pm--bar .pm__table-td,#cc-main .pm--bar .pm__table-th,#cc-main .pm--bar .pm__table-tr{display:block}#cc-main .pm--bar .pm__table-head{display:none}#cc-main .pm--bar .pm__table-caption{display:block}#cc-main .pm--bar .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm--bar .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm--bar .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm--bar .pm__table-td>div{flex:3}#cc-main .pm--bar:not(.pm--wide) .pm__body,#cc-main .pm--bar:not(.pm--wide) .pm__footer,#cc-main .pm--bar:not(.pm--wide) .pm__header{padding:1em 1.3em}#cc-main .pm--bar:not(.pm--wide) .pm__btn-group,#cc-main .pm--bar:not(.pm--wide) .pm__footer{flex-direction:column}#cc-main .pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin:.375rem 0 0}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer{flex-direction:column-reverse}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .pm--bar:not(.pm--wide) .pm__badge{display:none}#cc-main .pm--bar.pm--left{left:0;transform:translateX(-100%)}#cc-main .pm--bar.pm--right{right:0;transform:translateX(100%)}#cc-main .pm--bar.pm--wide{max-width:35em}#cc-main .pm--bar.pm--wide .pm__body,#cc-main .pm--bar.pm--wide .pm__footer,#cc-main .pm--bar.pm--wide .pm__header{padding:1em 1.4em}#cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group,#cc-main .pm--bar.pm--wide.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm-overlay{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:1}#cc-main .cc--anim .pm,#cc-main .cc--anim .pm-overlay{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}.show--preferences #cc-main .cc--anim .pm{opacity:1;visibility:visible!important}.show--preferences #cc-main .cc--anim .pm--box{transform:translateY(-50%)}.show--preferences #cc-main .cc--anim .pm--bar{transform:translateX(0)}.show--preferences #cc-main .cc--anim .pm-overlay{opacity:1;visibility:visible}#cc-main.cc--rtl .pm__service-header{margin-left:1em;margin-right:0}#cc-main.cc--rtl .pm__section-arrow{left:unset;right:18px}#cc-main.cc--rtl .section__toggle-wrapper{left:18px;right:unset;transform-origin:left}#cc-main.cc--rtl .toggle-service{left:0}#cc-main.cc--rtl .pm__service-icon{margin-left:20px;margin-right:5px}#cc-main.cc--rtl .pm__section--toggle .pm__section-title{padding-left:5.4em;padding-right:1.2em}#cc-main.cc--rtl .pm__section--expandable .pm__section-title{padding-right:3.4em}#cc-main.cc--rtl .pm__badge{margin-left:unset;margin-right:1em}#cc-main.cc--rtl .toggle__icon-circle{transform:translateX(27px)}#cc-main.cc--rtl .toggle-service .toggle__icon-circle{transform:translateX(23px)}#cc-main.cc--rtl .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(0)}#cc-main.cc--rtl .pm__table-td,#cc-main.cc--rtl .pm__table-th{padding-left:unset;padding-right:1.2em;text-align:right}#cc-main.cc--rtl .pm__table-td{padding-left:unset;padding-right:1.2em}#cc-main.cc--rtl .pm__table-td:before{padding-left:2em;padding-right:unset}#cc-main.cc--rtl .pm__btn+.pm__btn,#cc-main.cc--rtl .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .pm--flip .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip .pm__btn-group+.pm__btn-group{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin-left:0}@media screen and (max-width:640px){#cc-main .pm{border-radius:0;bottom:0;height:auto;left:0;max-height:100%;max-width:none!important;right:0;top:0;transform:translateY(1.6em)}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:.9em!important}#cc-main .pm__badge{display:none}#cc-main .pm__section-table,#cc-main .pm__table-body,#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th,#cc-main .pm__table-tr{display:block}#cc-main .pm__table-head{display:none}#cc-main .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm__table-td>div{flex:3}#cc-main .pm__btn-group,#cc-main .pm__footer{flex-direction:column!important}#cc-main .pm__btn-group{display:flex!important}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin:.375rem 0 0!important}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .pm--flip .pm__btn-group,#cc-main .pm--flip .pm__footer{flex-direction:column-reverse!important}.show--preferences #cc-main .cc--anim .pm{transform:translateY(0)!important}}

/* consent.css */
/* Cookie banner (CookieConsent v3) in the site's colours and fonts, and the
   click-to-load Google Maps placeholder (script/consent.js) */

#cc-main {
    --cc-font-family: var(--font-regular);
    --cc-bg: var(--clr-surface-raised);
    --cc-primary-color: var(--clr-text);
    --cc-secondary-color: var(--clr-text-2);
    --cc-link-color: var(--clr-base-strong);
    --cc-modal-border-radius: var(--radius-panel);
    --cc-btn-border-radius: var(--radius-pill);
    /* both choices look the same weight: accepting is not the easier click */
    --cc-btn-primary-bg: var(--clr-base);
    --cc-btn-primary-border-color: var(--clr-base);
    --cc-btn-primary-color: var(--clr-text-inverse);
    --cc-btn-primary-hover-bg: var(--clr-base-strong);
    --cc-btn-primary-hover-border-color: var(--clr-base-strong);
    --cc-btn-primary-hover-color: var(--clr-text-inverse);
    --cc-btn-secondary-bg: var(--clr-bg);
    --cc-btn-secondary-border-color: var(--clr-border);
    --cc-btn-secondary-color: var(--clr-text);
    --cc-btn-secondary-hover-bg: var(--clr-tint);
    --cc-btn-secondary-hover-border-color: var(--clr-accent);
    --cc-btn-secondary-hover-color: var(--clr-text);
    --cc-toggle-on-bg: var(--clr-base);
    --cc-separator-border-color: var(--clr-border);
    --cc-cookie-category-block-bg: var(--clr-bg);
    --cc-cookie-category-block-border: var(--clr-border);
    --cc-cookie-category-block-hover-bg: var(--clr-tint);
    --cc-cookie-category-block-hover-border: var(--clr-border);
    --cc-footer-bg: var(--clr-bg);
    --cc-footer-border-color: var(--clr-border);
    --cc-overlay-bg: rgb(18 48 46 / .5);
}

/* --cc-btn-border-radius also rounds the category blocks in the settings; keep the
   pill for buttons only and give the blocks the card radius */
#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section-title {
    border-radius: var(--radius-card);
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* above the mobile bottom bar (z-index 800) */
#cc-main {
    z-index: 900;
}

.cookie-settings-link {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Kontakt: Google Maps loads only on click or after marketing consent */
.map-embed {
    display: grid;
    place-items: center;
    gap: var(--space-normal);
    min-height: 360px;
    padding: var(--space-double);
    text-align: center;
    background-color: var(--clr-tint);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-panel);
    font-family: var(--font-regular);

    p {
        margin: 0;
        max-width: 36rem;
        color: var(--clr-text-2);
    }

    &.loaded {
        display: block;
        padding: 0;
        overflow: hidden;
    }

    iframe {
        display: block;
        width: 100%;
        height: 600px;
        border: 0;
    }
}

.map-embed-load {
    padding: .75rem 1.5rem;
    font: inherit;
    font-weight: var(--font-weight-ui);
    color: var(--clr-text-inverse);
    background-color: var(--clr-base);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;

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

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