/*
 * Landingpage construction kit – shared base (loaded by every landingpage section).
 * Colours, fonts and buttons follow the existing site (Montserrat, gradient buttons,
 * page colour scheme via theme-* classes). Mobile first; breakpoints 40rem / 62rem.
 */
.pk-section {
    --pk-ink: #202126;
    --pk-on-ink: #fff;
    --pk-muted: #6c757d;
    --pk-light: #b5b5b7;
    --pk-border: #dee2e6;
    --pk-surface: #f5f5f7;
    --pk-dark: #202126;
    --pk-accent: #fd3367;
    --pk-gap: 1.5rem;
    --pk-radius: .25rem;
    --pk-section-space: 4rem;
    position: relative;
    color: var(--pk-ink);
    padding: var(--pk-section-space) 1rem;
    font-family: Montserrat-Regular, sans-serif;
}

@media (min-width: 62rem) {
    .pk-section {
        --pk-gap: 2rem;
        --pk-section-space: 6rem;
    }
}

/*
 * First section of a page: the site navigation is an absolutely positioned, transparent bar
 * (6rem, white text) designed for the dark cover element. Make room for it and give it the
 * existing dark background when the section itself is light.
 */
nav.sticky-top + .pk-section {
    padding-top: calc(6rem + var(--pk-section-space));
}

nav.sticky-top:has(+ .pk-section:not(.pk-bg-dark):not(.pk-bg-brand)),
nav.sticky-top:has(+ .pk-width-boxed) {
    background-color: rgba(0, 0, 0, .8);
}

/* Width */
.pk-container {
    max-width: 75rem;
    margin: 0 auto;
}

.pk-container--narrow {
    max-width: 50rem;
}

/* 100 % width: the content grows along with the background, which spans the full width by default */
.pk-width-full .pk-container,
.pk-width-full .pk-container--narrow {
    max-width: none;
}

@media (min-width: 62rem) {
    .pk-section.pk-width-full {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Content width including the background: the section itself becomes a box */
.pk-section.pk-width-boxed {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 75rem;
    margin: 2rem auto;
    border-radius: var(--pk-radius);
}

@media (min-width: 62rem) {
    .pk-section.pk-width-boxed {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Background variants (frame_class) */
.pk-bg-light {
    background: var(--pk-surface);
}

.pk-bg-dark,
.pk-bg-brand {
    --pk-ink: #fff;
    --pk-on-ink: #202126;
    --pk-muted: rgba(255, 255, 255, .8);
    --pk-border: rgba(255, 255, 255, .35);
    background-color: var(--pk-dark);
}

/* Spacing (space_before_class / space_after_class) */
.pk-space-before-extra-small { padding-top: 1rem; }
.pk-space-before-small { padding-top: 2rem; }
.pk-space-before-medium { padding-top: 4rem; }
.pk-space-before-large { padding-top: 6rem; }
.pk-space-before-extra-large { padding-top: 9rem; }
.pk-space-after-extra-small { padding-bottom: 1rem; }
.pk-space-after-small { padding-bottom: 2rem; }
.pk-space-after-medium { padding-bottom: 4rem; }
.pk-space-after-large { padding-bottom: 6rem; }
.pk-space-after-extra-large { padding-bottom: 9rem; }

/* Vertical rhythm for stacked content (core elements inside the areas) */
.pk-flow > * + * {
    margin-top: 1.25rem;
}

.pk-flow > .frame,
.pk-flow > .frame > * {
    margin-bottom: 0;
}

.pk-flow .frame + .frame {
    margin-top: 1.25rem;
}

/* Typography inside sections: reset the site's cover/section heading styles */
.pk-section :is(h1:where(:not(.pk-heading)),:where(.pk-h1)),
.pk-section :is(h2:where(:not(.pk-heading)),:where(.pk-h2)),
.pk-section :is(h3:where(:not(.pk-heading)),:where(.pk-h3)),
.pk-section :is(h4:where(:not(.pk-heading)),:where(.pk-h4)) {
    color: var(--pk-ink);
    text-align: inherit;
    text-transform: none;
    letter-spacing: .02em;
    margin: 0;
}

.pk-section :is(h1:where(:not(.pk-heading)),:where(.pk-h1)) {
    font-family: Montserrat-Black, sans-serif;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
    line-height: 1.1;
}

.pk-section :is(h2:where(:not(.pk-heading)),:where(.pk-h2)) {
    font-family: Montserrat-ExtraBold, sans-serif;
    font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
    line-height: 1.2;
}

.pk-section :is(h3:where(:not(.pk-heading)),:where(.pk-h3)) {
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: 1.25rem;
    line-height: 1.3;
}

.pk-section :is(h4:where(:not(.pk-heading)),:where(.pk-h4)) {
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: 1.0625rem;
}

.pk-section p,
.pk-section li {
    color: var(--pk-ink);
}

.pk-kicker {
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: .875rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--pk-muted);
    margin: 0 0 .5rem;
}

/* Subheader of core elements (header, text, textmedia ...) inside sections: kicker above the headline */
.pk-section .frame > header {
    display: flex;
    flex-direction: column;
}

.pk-section .frame > header > :nth-child(2) {
    order: -1;
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--pk-muted);
    margin: 0 0 .5rem;
}

.pk-intro {
    max-width: 50rem;
    margin-bottom: 2.5rem;
}

.pk-section a:not(.pk-button) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* Buttons: primary reuses .standard_button.theme-button (gradient per colour scheme) */
.pk-button {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-family: Montserrat-ExtraBold, sans-serif;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--pk-radius);
    cursor: pointer;
}

.pk-section .pk-button--primary {
    color: #fff;
    padding: 1.125rem 2rem;
}

.pk-button--secondary {
    color: var(--pk-ink);
    padding: .9rem 1.75rem;
    border: .2rem solid currentColor;
    background: transparent;
    transition: background-color .2s, color .2s;
}

.pk-button--secondary:hover {
    background: var(--pk-ink);
    border-color: var(--pk-ink);
    color: var(--pk-on-ink);
}

.pk-button--text {
    color: var(--pk-ink);
    padding: .25rem 0;
    letter-spacing: .08em;
    font-size: .9375rem;
    border-bottom: .125rem solid currentColor;
}

.pk-button:hover .pk-button__icon {
    transform: translateX(.2em);
}

.pk-button__icon {
    transition: transform .2s;
}

.pk-actions,
.pk-flow > .pk-button {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.pk-flow > .pk-button {
    display: inline-flex;
    margin-right: 1rem;
}

/* Icons (sprite, currentColor) */
.pk-icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: middle;
}

.pk-icon--flip {
    transform: scaleX(-1);
}

/* Media from core elements fill their column */
.pk-section img,
.pk-section video,
.pk-section iframe {
    max-width: 100%;
    height: auto;
}

.pk-section .ce-gallery,
.pk-section .ce-outer,
.pk-section .ce-inner,
.pk-section .ce-row,
.pk-section .ce-column,
.pk-section figure.image {
    float: none;
    width: 100%;
    margin: 0;
}

/* Image & text element inside a column: stacked instead of its own two columns */
.pk-section .image_and_text {
    padding: 0;
}

.pk-section .image_and_text .image_and_text_container {
    display: block;
}

.pk-section .image_and_text .image_and_text_container .image_and_text_image,
.pk-section .image_and_text .image_and_text_container .image_and_text_text {
    width: 100%;
}

.pk-section .image_and_text .image_and_text_container .image_and_text_image img {
    position: static;
    height: auto;
    padding-right: 0;
    margin-bottom: 1.25rem;
    border-radius: var(--pk-radius);
}

/* Accessibility */
.pk-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pk-section a:focus-visible,
.pk-section button:focus-visible,
.pk-section summary:focus-visible,
.pk-section [tabindex]:focus-visible {
    outline: 3px solid var(--pk-accent);
    outline-offset: 3px;
}

.pk-bg-dark :focus-visible,
.pk-bg-brand :focus-visible {
    outline-color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .pk-section *,
    .pk-section *::before,
    .pk-section *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}