@layer blocks {
    .block-text-body {
        max-width: 40rem;
    }

    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--space-unit) * 1.5);
    }

    .hero-media {
        min-width: 0;
    }

    .hero-slides {
        display: flex;
        gap: var(--space-unit);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }

    .hero-slide {
        flex: 0 0 88%;
        min-width: 0;
        scroll-snap-align: start;
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion='subtle'] .hero-slides {
            scroll-behavior: smooth;
        }
    }

    .hero-center .hero-content {
        max-width: 48rem;
        margin: 0 auto;
        text-align: center;
    }

    .hero-center .block-actions {
        justify-content: center;
    }

    .hero-subtitle {
        margin: 0;
        font-size: 1.25rem;
        color: var(--tone-muted);
    }

    .hero-eyebrow {
        margin-block-end: calc(var(--space-unit) * 0.5);
    }

    .hero-accent {
        font-style: normal;
        color: var(--tone-accent);
    }

    .hero-accent-field {
        margin: 0;
        color: var(--tone-accent);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .cta {
        padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);
    }

    .cta-text {
        max-width: 40rem;
        margin: 0;
    }

    .media-text {
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
        align-items: center;
    }

    .media-text-body {
        min-width: 0;
    }

    .media-text:has(> .media-text-badge) > .image,
    .media-text-badge {
        grid-row: 1;
        grid-column: 1;
    }

    .media-text-badge {
        z-index: 1;
        align-self: end;
        justify-self: start;
        max-width: calc(100% - var(--space-unit) * 2);
        margin: 0 0 calc(var(--space-unit) * 2.5) var(--space-unit);
        padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.75);
        border-radius: var(--radius-control);
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-ui);
        font-weight: 600;
        rotate: -3deg;
    }

    @container (min-width: 48rem) {
        .media-text {
            grid-template-columns: 1fr 1fr;
            gap: calc(var(--space-unit) * 2.5);
        }

        .media-text-end > .image {
            order: 2;
        }

        .media-text-end:has(> .media-text-badge) > .image,
        .media-text-end > .media-text-badge {
            grid-column: 2;
        }
    }

    .gallery {
        --block-grid-min: 14rem;
    }

    .gallery-item .image a {
        display: block;
    }

    .features,
    .contacts {
        align-items: start;
    }

    .feature > :last-child,
    .contact > :last-child {
        margin-bottom: 0;
    }

    .feature-title,
    .contact-name {
        margin: 0 0 calc(var(--space-unit) * 0.5);
    }

    .feature-text,
    .contact-role,
    .contact-note,
    .contact-phone,
    .contact-email,
    .contact-vcard {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .contact .image {
        max-width: 10rem;
        margin-bottom: var(--space-unit);
    }

    .feature > .image {
        margin-bottom: var(--space-unit);
    }

    .feature-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        margin-bottom: calc(var(--space-unit) * 0.5);
        color: var(--tone-accent);
    }

    .feature-icon .icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .feature-link {
        display: inline-block;
        margin-top: calc(var(--space-unit) * 0.5);
        color: var(--tone-link);
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .contact-avatar {
        display: grid;
        place-items: center;
        justify-self: start;
        inline-size: 4rem;
        block-size: 4rem;
        margin-bottom: var(--space-unit);
        border-radius: 50%;
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-heading);
        font-size: 1.5rem;
        font-weight: var(--heading-weight);
        line-height: 1;
    }

    .contact-role {
        color: var(--tone-muted);
    }

    .contact-vcard {
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .services-text {
        max-width: 48rem;
        margin: 0 0 var(--space-unit);
    }

    .services {
        --block-grid-min: 14rem;

        align-items: start;
    }

    .service > :last-child {
        margin-bottom: 0;
    }

    .service .image {
        margin-bottom: var(--space-unit);
    }

    .service-name,
    .service-description {
        margin: 0 0 calc(var(--space-unit) * 0.5);
    }

    .service-price {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        font-family: var(--font-ui);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .services-note,
    .opening-hours-note {
        max-width: 48rem;
        margin: var(--space-unit) 0 0;
        color: var(--tone-muted);
    }

    .opening-hours {
        max-width: 28rem;
        margin: 0;
    }

    .opening-hours-row {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--space-unit);
        padding-block: calc(var(--space-unit) * 0.5);
        border-bottom: 1px solid var(--tone-border);
    }

    .opening-hours-row > dt {
        font-weight: 600;
    }

    .opening-hours-row > dd {
        margin: 0;
        margin-inline-start: auto;
        text-align: end;
        font-variant-numeric: tabular-nums;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
        gap: calc(var(--space-unit) * 1.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .stat-value {
        margin: 0 0 calc(var(--space-unit) * 0.25);
        font-family: var(--font-heading);
        font-size: clamp(2rem, 1.25rem + 5cqi, 3.5rem);
        font-weight: var(--heading-weight);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .stat-label {
        margin: 0;
        color: var(--tone-muted);
    }

    .marquee {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
    }

    .marquee-viewport {
        overflow: hidden;
    }

    .marquee-track {
        display: block;
    }

    .marquee-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .marquee-item {
        display: flex;
        align-items: center;
        gap: calc(var(--space-unit) * 1.5);
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: var(--heading-weight);
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .marquee-item::after {
        content: '';
        flex: none;
        inline-size: 0.5em;
        block-size: 0.5em;
        background: currentColor;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }

    .marquee-item:last-child::after,
    .marquee-copy,
    .marquee-pause {
        display: none;
    }

    .marquee-pause-input {
        margin: 0;
        accent-color: var(--tone-accent);
    }

    .timeline {
        max-width: 48rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .timeline-item {
        position: relative;
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr);
        column-gap: var(--space-unit);
        padding-block-end: calc(var(--space-unit) * 1.5);
    }

    .timeline-item:last-child {
        padding-block-end: 0;
    }

    .timeline-item > * {
        grid-column: 2;
    }

    .timeline-item::before {
        content: '';
        position: relative;
        z-index: 1;
        grid-row: 1;
        grid-column: 1;
        box-sizing: border-box;
        inline-size: 1rem;
        block-size: 1rem;
        margin-block-start: 0.25rem;
        border: 0.1875rem solid var(--tone-accent);
        border-radius: 50%;
        background: var(--tone-bg);
    }

    /* the line runs into the next item down to the top of its dot */
    .timeline-item::after {
        content: '';
        position: absolute;
        inset-block: 1.25rem -0.25rem;
        inset-inline-start: 0.5rem;
        inline-size: 1px;
        translate: -50% 0;
        background: var(--tone-border);
    }

    .timeline-item:last-child::after {
        content: none;
    }

    .timeline-when {
        margin: 0;
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
    }

    .timeline-title {
        margin: 0;
        font-size: 1.125rem;
    }

    .timeline-text {
        margin: calc(var(--space-unit) * 0.25) 0 0;
        color: var(--tone-muted);
    }

    @keyframes cms-marquee-slide {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion='subtle'] .marquee-loop .marquee-track {
            display: flex;
            inline-size: max-content;
            animation: cms-marquee-slide 40s linear infinite;
        }

        html[data-motion='subtle'] .marquee-loop:has(.marquee-pause-input:checked) .marquee-track,
        html[data-motion='subtle'] .marquee-loop .marquee-viewport:hover .marquee-track,
        html[data-motion='subtle'] .marquee-loop:focus-within .marquee-track {
            animation-play-state: paused;
        }

        /* each list spans at least the block, so a short list leaves no hole in the loop;
           its end gap matches the gap between items, so the copy follows without a seam */
        html[data-motion='subtle'] .marquee-loop .marquee-list {
            flex: none;
            flex-wrap: nowrap;
            min-inline-size: 100cqi;
            padding-inline-end: calc(var(--space-unit) * 1.5);
        }

        html[data-motion='subtle'] .marquee-loop .marquee-item {
            white-space: nowrap;
        }

        html[data-motion='subtle'] .marquee-loop .marquee-item:last-child::after {
            display: block;
        }

        html[data-motion='subtle'] .marquee-loop .marquee-copy {
            display: flex;
        }

        html[data-motion='subtle'] .marquee-loop .marquee-pause {
            display: flex;
            align-items: center;
            justify-self: end;
            gap: calc(var(--space-unit) * 0.5);
            font-size: 0.875rem;
        }
    }

    .testimonials {
        --block-grid-min: 18rem;

        align-items: start;
    }

    .testimonial-figure {
        margin: 0;
    }

    .testimonial-quote {
        margin: 0 0 var(--space-unit);
    }

    .testimonial-quote > p {
        margin: 0;
    }

    .testimonial-author {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        column-gap: calc(var(--space-unit) * 0.75);
        align-items: center;
    }

    .testimonial-author:has(> .image) {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .testimonial-author:has(> .testimonial-detail) > .image {
        grid-row: 1 / span 2;
    }

    .testimonial-author > .image img {
        border-radius: 50%;
    }

    .testimonial-name,
    .testimonial-detail {
        grid-column: -2;
    }

    .testimonial-name {
        font-weight: 600;
    }

    .testimonial-detail {
        color: var(--tone-muted);
        font-size: 0.875rem;
    }

    .team-text {
        max-width: 48rem;
        margin: 0 0 var(--space-unit);
    }

    .team {
        --block-grid-min: 14rem;

        align-items: start;
    }

    .team-member > :last-child {
        margin-bottom: 0;
    }

    .team-member .image {
        margin-bottom: var(--space-unit);
    }

    .team-name {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .team-role {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        color: var(--tone-muted);
    }

    .team-member-text {
        margin: 0;
    }

    .logos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .logo {
        max-width: 10rem;
    }

    .logo .image img {
        width: auto;
        max-width: 100%;
        height: 3rem;
        border-radius: 0;
        object-fit: contain;
    }

    .faq {
        max-width: 48rem;
    }

    .faq-item {
        border-bottom: 1px solid var(--tone-border);
    }

    .faq-item summary {
        padding: calc(var(--space-unit) * 0.75) 0;
        font-family: var(--font-heading);
        font-size: 1.125rem;
        cursor: pointer;
    }

    .faq-item .rich-text {
        padding: 0 0 var(--space-unit);
    }

    .entry > .image,
    .entry-body > .image {
        margin-bottom: calc(var(--space-unit) * 2);
    }

    .entry-date,
    .entry-card-date {
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .entry-date {
        margin: 0 0 var(--space-unit);
    }

    .entry-terms {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.75);
        margin: 0 0 calc(var(--space-unit) * 1.5);
        padding: 0;
        list-style: none;
    }

    .entry-term {
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .entry-card {
        min-width: 0;
    }

    .entry-card-title,
    .post-list .entry-card-title {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .entry-card-date,
    .entry-card-perex {
        margin: 0 0 calc(var(--space-unit) * 0.25);
    }

    .listing {
        margin: 0 0 calc(var(--space-unit) * 2);
    }

    .listing-items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: calc(var(--space-unit) * 1.5);
        margin: calc(var(--space-unit) * 2) 0 0;
    }

    .entry:has(> .entry-with-subnav, > .entry-with-aside),
    .listing {
        container-type: inline-size;
    }

    .entry-layout-narrow,
    .entry-layout-cover {
        /* A grid item with auto margins is fit-content wide: without the width it grows when its photo loads. */
        width: 100%;
        max-width: 48rem;
        margin-inline: auto;
    }

    .entry-layout-plain,
    .entry-layout-sidenav,
    .entry-layout-sidebar,
    .listing-layout-cards,
    .listing-layout-featured,
    .listing-layout-list {
        max-width: 100%;
    }

    .entry-layout-plain {
        display: grid;
        grid-column: full;
        grid-template-columns: subgrid;
    }

    .entry-layout-plain > *,
    .entry-layout-plain > [data-canvas-root] > * {
        grid-column: content;
        min-width: 0;
    }

    .entry-layout-plain > .block[data-tone],
    .entry-layout-plain > [data-canvas-root] > .block[data-tone] {
        grid-column: full;
        padding-inline: max(var(--space-unit), (100% - var(--site-content-width)) / 2);
        border-radius: 0;
    }

    .entry-layout-plain > .block[data-tone]:has(+ .block[data-tone]),
    .entry-layout-plain > [data-canvas-root] > .block[data-tone]:has(+ .block[data-tone]) {
        margin-bottom: 0;
    }

    .entry-layout-plain > .block[data-width='wide'],
    .entry-layout-plain > [data-canvas-root] > .block[data-width='wide'] {
        grid-column: full;
    }

    /* Without .block: as heavy as the page gutter above, so the zero padding of the card and the band hero still wins by coming later. */
    .entry-layout-plain > [data-width='wide'][data-tone],
    .entry-layout-plain > [data-canvas-root] > [data-width='wide'][data-tone] {
        padding-inline: max(var(--space-unit), (100% - 90rem) / 2);
    }

    .entry-layout-plain > [data-width='narrow'][data-tone],
    .entry-layout-plain > [data-canvas-root] > [data-width='narrow'][data-tone] {
        max-width: none;
        padding-inline: max(var(--space-unit), (100% - 42rem) / 2);
    }

    /* The core keys these on `main >`, and the blocks of a plain page are children of the article. */
    :where(.entry-layout-plain > .block[data-width='wide']:not([data-tone]), .entry-layout-plain > [data-canvas-root] > .block[data-width='wide']:not([data-tone])) .image img {
        border-radius: 0;
    }

    :where(.entry-layout-plain > .block[data-width='wide']:not([data-tone]), .entry-layout-plain > [data-canvas-root] > .block[data-width='wide']:not([data-tone])) .image figcaption {
        margin-inline: clamp(0rem, (100% - 25cqi) * 100, var(--space-unit));
    }

    .block[data-width='narrow'] .block-text-body {
        max-width: none;
    }

    .entry-with-subnav,
    .entry-with-aside,
    .listing-with-aside {
        display: grid;
        gap: calc(var(--space-unit) * 2);
    }

    .entry-body,
    .listing-body {
        min-width: 0;
    }

    @container (min-width: 60rem) {
        .entry-with-subnav {
            grid-template-columns: 16rem minmax(0, 1fr);
            align-items: start;
        }

        .entry-with-aside,
        .listing-with-aside {
            grid-template-columns: minmax(0, 1fr) 18rem;
            align-items: start;
        }
    }

    .subnav {
        font-family: var(--font-ui);
    }

    .subnav ul {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.25) var(--space-unit);
        margin: 0;
        padding: 0 0 var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
        list-style: none;
    }

    .subnav a {
        color: var(--tone-link);
        text-decoration: none;
    }

    .subnav a:hover,
    .subnav a:focus-visible {
        text-decoration: underline;
    }

    .subnav [aria-current] {
        color: var(--tone-fg);
        font-weight: 600;
    }

    .subnav-root {
        flex-basis: 100%;
        font-weight: 600;
    }

    @container (min-width: 60rem) {
        .subnav ul {
            flex-direction: column;
            padding: 0 var(--space-unit) 0 0;
            border-right: 1px solid var(--tone-border);
            border-bottom: 0;
        }

        .subnav li:not(.subnav-root) {
            padding-left: calc(var(--space-unit) * 0.75);
        }
    }

    .post-aside {
        display: grid;
        gap: calc(var(--space-unit) * 1.5);
        padding: calc(var(--space-unit) * 1.25);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        font-family: var(--font-ui);
    }

    .post-aside-section {
        min-width: 0;
    }

    .post-aside-title {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        font-size: 1.125rem;
    }

    .post-aside-list {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .post-aside-list li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0 calc(var(--space-unit) * 0.5);
    }

    .post-aside-list time,
    .post-aside-count {
        color: var(--tone-muted);
        font-size: 0.875rem;
    }

    .post-aside [aria-current='page'] {
        color: var(--tone-fg);
        font-weight: 600;
    }

    .related {
        margin: calc(var(--space-unit) * 3) 0 0;
        padding: calc(var(--space-unit) * 2) 0 0;
        border-top: 1px solid var(--tone-border);
    }

    .related-title {
        margin: 0 0 calc(var(--space-unit) * 1.5);
    }

    .entry-card > .image {
        margin: 0 0 calc(var(--space-unit) * 0.75);
    }

    .entry-card > .image img {
        border-radius: var(--radius-surface);
    }

    .entry-card-featured {
        grid-column: 1 / -1;
    }

    .entry-card-featured .entry-card-title {
        font-size: 1.75rem;
    }

    .listing-layout-list .listing-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing-layout-list .entry-card {
        padding: 0 0 var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
    }

    .listing-empty {
        margin: calc(var(--space-unit) * 2) 0 0;
        color: var(--tone-muted);
    }

    .preview-notice {
        margin: 0 0 calc(var(--space-unit) * 1.5);
        padding: calc(var(--space-unit) * 0.75) var(--space-unit);
        border: 0.125rem solid var(--tone-accent);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        color: var(--tone-fg);
        font-family: var(--font-ui);
        font-weight: 600;
    }

    .block-cms-hero[data-variant='cover'] {
        position: relative;
        overflow: hidden;
    }

    .block-cms-hero[data-variant='cover'] .hero {
        min-height: calc(var(--space-unit) * 24);
        align-content: end;
    }

    .block-cms-hero[data-variant='cover'] .hero-media {
        position: absolute;
        inset: 0;
    }

    .block-cms-hero[data-variant='cover'] .hero-media > .image {
        height: 100%;
    }

    .block-cms-hero[data-variant='cover'] .hero-media img {
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        object-fit: cover;
    }

    .block-cms-hero[data-variant='cover'] .hero-media figcaption,
    .block-cms-hero[data-variant='card'] .hero-media figcaption,
    .block-cms-hero[data-variant='band'] .image figcaption {
        position: absolute;
        top: calc(var(--space-unit) * 0.5);
        right: calc(var(--space-unit) * 0.5);
        z-index: 1;
        margin: 0;
        padding: calc(var(--space-unit) * 0.125) calc(var(--space-unit) * 0.5);
        border-radius: var(--radius-surface);
        background: color-mix(in srgb, var(--tone-bg) 72%, transparent);
    }

    .block-cms-hero[data-variant='cover'] .hero-content {
        position: relative;
        z-index: 1;
        max-width: 44rem;
    }

    /* The veil follows the text, not the block: a block-wide veil failed the gallery's layout-shift check (0.061 at 1280 px). */
    .block-cms-hero[data-variant='cover'] .hero-content::before {
        content: '';
        position: absolute;
        inset: calc(var(--space-unit) * -8) calc(var(--space-unit) * -8) calc(var(--space-unit) * -2);
        z-index: -1;
        background: linear-gradient(to top, color-mix(in srgb, var(--tone-bg) 72%, transparent) calc(100% - var(--space-unit) * 8), transparent);
        mask-image: linear-gradient(to right, transparent, var(--tone-bg) calc(var(--space-unit) * 8) calc(100% - var(--space-unit) * 8), transparent);
        pointer-events: none;
    }

    .block-cms-hero {
        --hero-gutter: calc((100cqi - var(--site-content-width)) / 2);
    }

    .block-cms-hero[data-variant='card'] {
        overflow: clip;
        padding: 0;
    }

    .block-cms-hero[data-variant='card']:has(.hero-media) {
        background: none;
    }

    .block-cms-hero[data-variant='card'] .hero {
        gap: 0;
    }

    .block-cms-hero[data-variant='card'] .hero-media {
        position: relative;
    }

    .block-cms-hero[data-variant='card'] .hero-media > .image {
        position: relative;
        height: 100%;
    }

    .block-cms-hero[data-variant='card'] .hero-media img {
        height: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 0;
        object-fit: cover;
    }

    .block-cms-hero[data-variant='card'] .hero-content {
        position: relative;
        max-width: 34rem;
        padding: calc(var(--space-unit) * 2);
        border-radius: var(--radius-surface);
        box-shadow: 0 calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2) color-mix(in srgb, var(--tone-fg) 22%, transparent);
    }

    .block-cms-hero[data-variant='card'] .hero:has(> .hero-media) .hero-content {
        margin: calc(var(--space-unit) * -3) var(--space-unit) calc(var(--space-unit) * 2.5);
    }

    .block-cms-hero[data-variant='card'] .hero:not(:has(> .hero-media)) {
        padding: calc(var(--space-unit) * 2) max(calc(var(--space-unit) * 2), var(--hero-gutter));
    }

    .block-cms-hero[data-variant='card'] .hero-center .hero-content {
        max-width: min(34rem, 100% - var(--space-unit) * 2);
    }

    .block-cms-hero[data-variant='card'] .hero.hero-center:has(> .hero-media) .hero-content {
        margin-inline: auto;
    }

    .block-cms-hero[data-variant='headline'] .block-title {
        max-width: 16ch;
        font-size: clamp(2.5rem, 1.25rem + 6cqi, 5.75rem);
        line-height: 1.02;
        letter-spacing: -0.035em;
    }

    .block-cms-hero[data-variant='headline'] .hero-eyebrow {
        display: flex;
        align-items: center;
        gap: calc(var(--space-unit) * 0.75);
    }

    .block-cms-hero[data-variant='headline'] .hero-center .block-title {
        margin-inline: auto;
    }

    .block-cms-hero[data-variant='headline'] .hero-center .hero-eyebrow {
        justify-content: center;
    }

    .block-cms-hero[data-variant='headline'] .hero-eyebrow::before {
        content: '';
        flex: 0 0 2.5rem;
        width: auto;
        height: auto;
        margin-right: 0;
        border-top: 0.125rem solid currentcolor;
        border-radius: 0;
        background: none;
    }

    .block-cms-hero[data-variant='headline'] .hero-media img,
    .block-cms-hero[data-variant='headline'] .hero-slide img {
        aspect-ratio: 4 / 3;
    }

    .block-cms-hero[data-variant='band'] {
        overflow: clip;
        padding: 0;
    }

    .block-cms-hero[data-variant='band'] .hero {
        gap: 0;
    }

    .block-cms-hero[data-variant='band'] .hero-content {
        padding: calc(var(--space-unit) * 2) max(calc(var(--space-unit) * 1.5), var(--hero-gutter));
    }

    .block-cms-hero[data-variant='band'] .block-title {
        font-size: clamp(2.25rem, 1.25rem + 4cqi, 4.25rem);
    }

    .block-cms-hero[data-variant='band'] .image {
        position: relative;
    }

    .block-cms-hero[data-variant='band'] .hero-media img,
    .block-cms-hero[data-variant='band'] .hero-slide img {
        border-radius: 0;
    }

    .block-cms-hero[data-variant='band'] .hero-slides:focus-visible {
        outline-offset: -0.1875rem;
    }

    /* Ties with the page gutter of `.entry-layout-plain > .block[data-tone]` and wins by coming later, so the photo reaches the edge. */
    .entry-layout-plain > .block-cms-hero:is([data-variant='card'], [data-variant='band']),
    .entry-layout-plain > [data-canvas-root] > .block-cms-hero:is([data-variant='card'], [data-variant='band']) {
        padding-inline: 0;
    }

    /* The zero padding above drops the reading width of a toned narrow block, so these heroes keep it in their text. */
    .entry-layout-plain > .block-cms-hero[data-width='narrow'],
    .entry-layout-plain > [data-canvas-root] > .block-cms-hero[data-width='narrow'] {
        --hero-gutter: calc((100cqi - 42rem) / 2);
    }

    /* The core's transparent-header offset is block padding in @layer layout, which the zero padding above outranks. */
    html[data-header='transparent'] main > :first-child > .block-cms-hero[data-variant='band']:first-child[data-tone] .hero-content,
    html[data-header='transparent'] main > :first-child > .block-cms-hero[data-variant='card']:first-child[data-tone] .hero:not(:has(> .hero-media)) {
        padding-top: calc(var(--site-header-offset, var(--site-header-height)) + var(--space-unit) * 2);
    }

    html[data-header='transparent'] main > :first-child > .block-cms-hero[data-variant='cover']:first-child[data-tone] .hero-media figcaption,
    html[data-header='transparent'] main > :first-child > .block-cms-hero[data-variant='card']:first-child[data-tone] .hero-media figcaption {
        top: calc(var(--site-header-offset, var(--site-header-height)) + var(--space-unit) * 0.5);
    }

    .block-cms-features[data-variant='list'] .features,
    .block-cms-contacts[data-variant='list'] .contacts,
    .block-cms-team[data-variant='list'] .team,
    .block-cms-post_list[data-variant='list'] .post-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .block-cms-features[data-variant='list'] .feature,
    .block-cms-contacts[data-variant='list'] .contact,
    .block-cms-team[data-variant='list'] .team-member,
    .block-cms-post_list[data-variant='list'] .post-list > li {
        padding-block: var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
    }

    .block-cms-cta[data-variant='band'] .cta,
    .block-cms-post_list[data-variant='list'] .entry-card {
        padding: 0;
    }

    .block-cms-post_list[data-variant='featured'] .post-list > li:first-child {
        grid-column: 1 / -1;
    }

    .block-cms-services[data-variant='pricelist'] .services {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .block-cms-services[data-variant='pricelist'] .service {
        padding-block: var(--space-unit);
        border-bottom: 1px solid var(--tone-border);
    }

    .block-cms-stats[data-variant='cards'] .stat {
        text-align: center;
    }

    .block-cms-testimonials[data-variant='quote'] .testimonial:first-child {
        grid-column: 1 / -1;
    }

    .block-cms-testimonials[data-variant='quote'] .testimonial:first-child .testimonial-quote {
        max-width: 48rem;
        font-family: var(--font-heading);
        font-size: clamp(1.375rem, 1rem + 2cqi, 2rem);
        font-weight: var(--heading-weight);
        line-height: 1.3;
    }

    .block-cms-testimonials[data-variant='strip'] .testimonials {
        --block-grid-min: 15rem;

        gap: 0;
        align-items: stretch;
    }

    .block-cms-testimonials[data-variant='strip'] .testimonial {
        padding: var(--space-unit) calc(var(--space-unit) * 1.5);
        border-inline-start: 1px solid var(--tone-border);
    }

    .block-cms-testimonials[data-variant='strip'] .testimonial-quote {
        font-family: var(--font-heading);
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .block-cms-testimonials[data-variant='strip'] .testimonial-quote::before {
        content: '';
        display: block;
        inline-size: 2.5rem;
        block-size: 0.1875rem;
        margin-bottom: var(--space-unit);
        background: var(--tone-accent);
    }

    .block-cms-services[data-variant='tiles'] .services {
        --block-grid-min: 13rem;

        align-items: stretch;
    }

    .block-cms-services[data-variant='tiles'] .service {
        display: flex;
        flex-direction: column;
        min-height: 13rem;
        padding: calc(var(--space-unit) * 1.25);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        color: var(--tone-fg);
    }

    .block-cms-services[data-variant='tiles'] .service > .block-actions {
        margin-top: auto;
    }

    .block-cms-services[data-variant='tiles'] .service-price {
        margin: auto 0 0;
        padding-top: calc(var(--space-unit) * 0.75);
        border-top: 1px solid var(--tone-accent);
        font-size: 1.25rem;
    }

    .block-cms-services[data-variant='tiles'] .block-actions + .service-price {
        margin-top: var(--space-unit);
    }

    .block-cms-faq[data-variant='exclusive'] .faq {
        max-width: none;
    }

    .block-cms-faq[data-variant='exclusive'] .faq-item summary {
        display: flex;
        justify-content: space-between;
        gap: var(--space-unit);
        font-size: 1.25rem;
        list-style: none;
    }

    .block-cms-faq[data-variant='exclusive'] .faq-item summary::-webkit-details-marker {
        display: none;
    }

    .block-cms-faq[data-variant='exclusive'] .faq-item summary::after {
        content: '+';
        content: '+' / '';
        color: var(--tone-accent);
    }

    .block-cms-faq[data-variant='exclusive'] .faq-item[open] summary::after {
        content: '−';
        content: '−' / '';
    }

    .block-cms-cta[data-variant='frame'] .cta {
        padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
        border: 1px solid var(--tone-fg);
        outline: 1px solid var(--tone-border);
        outline-offset: -0.75rem;
        text-align: center;
    }

    .block-cms-cta[data-variant='frame'] .block-title {
        font-size: clamp(1.75rem, 1.25rem + 2.5cqi, 3rem);
    }

    .block-cms-cta[data-variant='frame'] .cta-text {
        margin-inline: auto;
    }

    .block-cms-cta[data-variant='frame'] .block-actions {
        justify-content: center;
    }

    .block-cms-media_text[data-variant='offset']:is([data-tone='brand'], [data-tone='inverse'], [data-tone='highlight']) .media-text-body {
        border: 1px solid var(--tone-border);
        background: var(--tone-bg);
    }

    .block-cms-services[data-variant='tiles']:is([data-tone='brand'], [data-tone='inverse'], [data-tone='highlight']) .service {
        border: 1px solid var(--tone-border);
    }

    .block-cms-media_text[data-variant='offset'] .media-text-body {
        position: relative;
        z-index: 1;
        padding: calc(var(--space-unit) * 2);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        color: var(--tone-fg);
        box-shadow: 0 calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2) color-mix(in srgb, var(--tone-fg) 16%, transparent);
    }

    .block-cms-team[data-variant='list'] .team-member .image {
        max-width: 8rem;
    }

    .block-cms-features[data-variant='bento'] .features {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: dense;
        align-items: stretch;
    }

    .block-cms-features[data-variant='bento'] .feature {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: end;
        min-height: calc(var(--space-unit) * 14);
        overflow: clip;
        border-radius: var(--radius-surface);
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] {
        isolation: isolate;
    }

    /* below the text without positioning it, so the stretched link still spans the whole tile */
    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image {
        position: absolute;
        inset: 0;
        z-index: -1;
        margin: 0;
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--tone-bg) 72%, transparent);
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image img {
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        object-fit: cover;
    }

    .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image figcaption {
        position: absolute;
        top: calc(var(--space-unit) * 0.25);
        right: calc(var(--space-unit) * 0.5);
        z-index: 1;
    }

    .block-cms-features[data-variant='bento']:not([data-block-id]) .feature-link::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .block-cms-features[data-variant='steps'] .features {
        counter-reset: cms-step;
    }

    .block-cms-features[data-variant='steps'] .feature {
        counter-increment: cms-step;
    }

    .block-cms-features[data-variant='steps'] .feature::before {
        content: counter(cms-step);
        display: grid;
        place-items: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        margin-bottom: calc(var(--space-unit) * 0.75);
        border-radius: 50%;
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
        line-height: 1;
    }

    .block-cms-features[data-variant='checklist'] .features {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-unit) calc(var(--space-unit) * 2);
    }

    .block-cms-features[data-variant='checklist'] .feature {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: calc(var(--space-unit) * 0.75);
        align-items: start;
    }

    .block-cms-features[data-variant='checklist'] .feature-icon {
        grid-row: 1 / span 3;
        margin: 0;
        border-radius: var(--radius-control);
        background: color-mix(in srgb, var(--tone-accent) 14%, transparent);
    }

    .block-cms-features[data-variant='checklist'] .feature > :not(.feature-icon) {
        grid-column: 2;
    }

    .block-cms-gallery[data-variant='strip'] .gallery {
        display: flex;
        gap: var(--space-unit);
        overflow-x: auto;
        padding-block-end: calc(var(--space-unit) * 0.5);
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }

    .block-cms-gallery[data-variant='strip'] .gallery-item {
        flex: 0 0 min(calc(var(--space-unit) * 14), 80%);
        scroll-snap-align: start;
    }

    .block-cms-stats[data-variant='facts'] .stats {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        gap: var(--space-unit);
    }

    .block-cms-stats[data-variant='facts'] .stat {
        padding: calc(var(--space-unit) * 0.75) var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
    }

    .block-cms-stats[data-variant='facts'] .stat-label {
        margin: 0 0 calc(var(--space-unit) * 0.25);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .block-cms-stats[data-variant='facts'] .stat-value {
        margin: 0;
        font-size: 1.5rem;
    }

    .block-cms-cta[data-variant='glow'] .cta {
        position: relative;
        isolation: isolate;
        overflow: clip;
        padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5);
        border-radius: var(--radius-surface);
    }

    .block-cms-cta[data-variant='glow'] .cta::before,
    .block-cms-cta[data-variant='glow'] .cta::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }

    .block-cms-cta[data-variant='glow'] .cta::before {
        background:
            radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--tone-accent) 30%, transparent), transparent 35%),
            radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--tone-accent) 24%, transparent), transparent 40%);
    }

    .block-cms-cta[data-variant='glow'] .cta::after {
        background:
            radial-gradient(circle at 62% 8%, color-mix(in srgb, var(--tone-accent) 20%, transparent), transparent 28%),
            radial-gradient(circle at 30% 92%, color-mix(in srgb, var(--tone-accent) 16%, transparent), transparent 30%);
    }

    .block-cms-hero[data-variant='cover'] .hero-media {
        overflow: clip;
    }

    @supports (grid-template-rows: subgrid) {
        .block-cms-contacts:not([data-variant='list']) .contact {
            display: grid;
            grid-row: span 7;
            grid-template-rows: subgrid;
            row-gap: 0;
            align-self: stretch;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .image,
        .block-cms-contacts:not([data-variant='list']) .contact > .contact-avatar {
            grid-row: 1;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-name {
            grid-row: 2;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-role {
            grid-row: 3;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-note {
            grid-row: 4;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-phone {
            grid-row: 5;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-email {
            grid-row: 6;
        }

        .block-cms-contacts:not([data-variant='list']) .contact > .contact-vcard {
            grid-row: 7;
        }
    }

    @container (min-width: 30rem) {
        .block-cms-features[data-variant='bento'] .features {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .block-cms-features[data-variant='bento'] .feature:first-child {
            grid-column: span 2;
        }

        .timeline-item {
            grid-template-columns: 8rem 1rem minmax(0, 1fr);
        }

        .timeline-item > * {
            grid-column: 3;
        }

        .timeline-item::before {
            grid-column: 2;
        }

        .timeline-item > .timeline-when {
            grid-row: 1 / span 2;
            grid-column: 1;
            text-align: end;
        }

        .timeline-item::after {
            inset-inline-start: calc(8rem + var(--space-unit) + 0.5rem);
        }

        .block-cms-services[data-variant='pricelist'] .service {
            display: grid;
            grid-template-columns: minmax(0, 1fr) fit-content(40%);
            column-gap: calc(var(--space-unit) * 2);
        }

        .block-cms-services[data-variant='pricelist'] .service > * {
            grid-column: 1;
        }

        .block-cms-services[data-variant='pricelist'] .service-price {
            grid-row: 1;
            grid-column: 2;
            text-align: end;
        }
    }

    @container (min-width: 36rem) {
        .block-cms-team[data-variant='list'] .team-member:has(> .image) {
            display: grid;
            grid-template-columns: 8rem minmax(0, 1fr);
            column-gap: calc(var(--space-unit) * 1.5);
            align-items: start;
        }

        .block-cms-team[data-variant='list'] .team-member > .image {
            grid-row: 1 / span 3;
            margin-bottom: 0;
        }

        .block-cms-team[data-variant='list'] .team-member > :not(.image) {
            grid-column: 2;
        }
    }

    @container (min-width: 40rem) {
        /* the list reaches one unit left of the block: the line before the first item of a row is clipped
           and its text lines up with the title */
        .block-cms-stats[data-variant='row'] .stats {
            column-gap: 0;
            margin-inline-start: calc(var(--space-unit) * -1);
            overflow-x: clip;
        }

        .block-cms-stats[data-variant='row'] .stat {
            padding-inline: var(--space-unit);
            border-inline-start: 1px solid var(--tone-border);
        }

        .block-cms-features[data-variant='list'] .features {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: calc(var(--space-unit) * 2);
        }

        .block-cms-features[data-variant='checklist'] .features {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .block-cms-cta[data-variant='band'] .cta,
        .block-cms-cta[data-variant='glow'] .cta {
            display: grid;
            grid-template-columns: minmax(0, 1fr) fit-content(50%);
            column-gap: calc(var(--space-unit) * 2);
            align-items: center;
        }

        .block-cms-cta[data-variant='band'] .cta > .block-actions,
        .block-cms-cta[data-variant='glow'] .cta > .block-actions {
            grid-column: 2;
            grid-row: 1 / span 2;
            margin: 0;
        }

        /* dense packing lets the second column start on the first row again */
        .block-cms-contacts[data-variant='list'] .contact {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-auto-flow: dense;
            column-gap: calc(var(--space-unit) * 2);
        }

        .block-cms-contacts[data-variant='list'] .contact > :is(.contact-name, .contact-role, .contact-note) {
            grid-column: 1;
        }

        .block-cms-contacts[data-variant='list'] .contact > :is(.contact-phone, .contact-email, .contact-vcard) {
            grid-column: 2;
        }

        .block-cms-gallery[data-variant='mosaic'] .gallery {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .block-cms-gallery[data-variant='mosaic'] .gallery-item:first-child:not(:only-child) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }

    @container (min-width: 48rem) {
        .block-cms-features[data-variant='bento'] .features {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .block-cms-features[data-variant='bento'] .feature:first-child {
            grid-row: span 2;
        }

        .block-cms-features[data-variant='bento'] .feature:nth-child(2) {
            grid-column: span 2;
        }

        .block-cms-hero[data-variant='split'] .hero:has(> .hero-media, > .hero-slides) {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: calc(var(--space-unit) * 2.5);
            align-items: center;
        }

        .block-cms-hero[data-variant='split'] .hero-content {
            grid-row: 1;
            grid-column: 1;
        }

        /* The photo comes first in the markup; auto-placed, it takes the first column until the text is parsed and then jumps. */
        .block-cms-hero[data-variant='split'] .hero > :is(.hero-media, .hero-slides) {
            grid-row: 1;
            grid-column: 2;
        }

        .block-cms-media_text[data-variant='offset'] .media-text:has(> .image) {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            gap: 0;
        }

        .block-cms-media_text[data-variant='offset'] .media-text-end:has(> .image) {
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        }

        .block-cms-media_text[data-variant='offset'] .image ~ .media-text-body {
            margin: 0 0 0 calc(var(--space-unit) * -5);
        }

        .block-cms-media_text[data-variant='offset'] .media-text-end > .image ~ .media-text-body {
            margin: 0 calc(var(--space-unit) * -5) 0 0;
        }

        .block-cms-media_text[data-variant='offset'] .media-text-end > .media-text-badge {
            justify-self: end;
            margin: 0 var(--space-unit) calc(var(--space-unit) * 2.5) 0;
        }

        .block-cms-media_text[data-variant='offset'] .media-text-end > .image figcaption {
            justify-content: end;
        }
    }

    @container (min-width: 40rem) {
        .block-cms-hero[data-variant='card'] .hero:has(> .hero-media) {
            position: relative;
            min-height: 34rem;
            align-content: end;
            padding: calc(var(--space-unit) * 2) max(calc(var(--space-unit) * 2), var(--hero-gutter));
        }

        .block-cms-hero[data-variant='card'] .hero-media {
            position: absolute;
            inset: 0;
        }

        .block-cms-hero[data-variant='card'] .hero-media img {
            aspect-ratio: auto;
        }

        .block-cms-hero[data-variant='card'] .hero:has(> .hero-media) .hero-content {
            margin: 0;
        }

        html[data-header='transparent'] main > :first-child > .block-cms-hero[data-variant='card']:first-child[data-tone] .hero:has(> .hero-media) {
            padding-top: calc(var(--site-header-offset, var(--site-header-height)) + var(--space-unit) * 2);
        }

        .block-cms-hero[data-variant='headline'] .hero-media img,
        .block-cms-hero[data-variant='headline'] .hero-slide img {
            aspect-ratio: 21 / 9;
        }
    }

    @container (min-width: 56rem) {
        .block-cms-hero[data-variant='headline'] .hero-start .hero-content {
            display: grid;
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            grid-template-rows: auto 1fr auto auto;
            column-gap: calc(var(--space-unit) * 2.5);
        }

        .block-cms-hero[data-variant='headline'] .hero-start .hero-content > * {
            grid-column: 2;
        }

        .block-cms-hero[data-variant='headline'] .hero-start .hero-eyebrow {
            grid-column: 1 / -1;
        }

        .block-cms-hero[data-variant='headline'] .hero-start .block-title {
            grid-row: 2 / span 3;
            grid-column: 1;
            margin: 0;
        }

        .block-cms-hero[data-variant='headline'] .hero-start .hero-accent-field {
            grid-row: 5;
            grid-column: 1;
        }

        .block-cms-hero[data-variant='headline'] .hero-start .hero-subtitle {
            grid-row: 3;
        }

        .block-cms-hero[data-variant='headline'] .hero-start .block-actions {
            grid-row: 4;
            margin-block-start: var(--space-unit);
        }

        .block-cms-hero[data-variant='band'] .hero:has(> .hero-media, > .hero-slides) {
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        }

        .block-cms-hero[data-variant='band'] .hero-content {
            grid-column: 1;
            align-self: center;
            padding-inline-end: calc(var(--space-unit) * 2.5);
        }

        .block-cms-hero[data-variant='band'] .hero-media,
        .block-cms-hero[data-variant='band'] .hero-slides {
            grid-row: 1;
            grid-column: 2;
        }

        .block-cms-hero[data-variant='band'] .hero-media > .image,
        .block-cms-hero[data-variant='band'] .hero-slide > .image {
            height: 100%;
        }

        .block-cms-hero[data-variant='band'] .hero-media img,
        .block-cms-hero[data-variant='band'] .hero-slide img {
            height: 100%;
            aspect-ratio: auto;
        }

        html[data-header='transparent'] main > :first-child > .block-cms-hero[data-variant='band']:first-child[data-tone] .image figcaption {
            top: calc(var(--site-header-offset, var(--site-header-height)) + var(--space-unit) * 0.5);
        }

        .block-cms-faq[data-variant='exclusive'] .faq-layout:has(> .block-title) {
            display: grid;
            grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
            column-gap: calc(var(--space-unit) * 2.5);
            align-items: start;
        }
    }

    /* A grid, so the hero stretches to the height of the block, whose min-height counts its own padding. */
    .block-cms-hero:is([data-variant='cover'], [data-variant='card'], [data-variant='band'])[data-height] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .block-cms-hero:is([data-variant='cover'], [data-variant='card'], [data-variant='band'])[data-height='tall'] {
        min-height: min(70svh, 44rem);
    }

    .block-cms-hero:is([data-variant='cover'], [data-variant='card'], [data-variant='band'])[data-height='screen'] {
        position: relative;
        min-height: calc(100svh - var(--site-header-offset, var(--site-header-height)));
    }

    /* Under any header an untoned first block keeps the top padding of `main` above it; a toned one loses it to the core. */
    html[data-header='transparent'] main > :first-child > .block-cms-hero:is([data-variant='cover'], [data-variant='card'], [data-variant='band'])[data-height='screen']:first-child[data-tone] {
        min-height: 100svh;
    }

    main > :first-child > .block-cms-hero:is([data-variant='cover'], [data-variant='card'], [data-variant='band'])[data-height='screen']:first-child:not([data-tone]) {
        min-height: calc(100svh - var(--site-header-offset, var(--site-header-height)) - var(--space-unit) * 1.5);
    }

    .block-cms-hero[data-variant='cover'][data-height='screen'] {
        padding-bottom: calc(var(--space-unit) * 5.5);
    }

    .block-cms-hero[data-variant='card'][data-height='screen'] .hero {
        padding-bottom: calc(var(--space-unit) * 5.5);
    }

    .block-cms-hero[data-variant='card'][data-height] .hero:has(> .hero-media) {
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .block-cms-hero[data-variant='card'][data-height] .hero:not(:has(> .hero-media)) {
        align-content: center;
    }

    .block-cms-hero[data-variant='band'][data-height] .hero:has(> .hero-media, > .hero-slides) {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .block-cms-hero[data-variant='band'][data-height] .hero-media > .image,
    .block-cms-hero[data-variant='band'][data-height] .hero-slide > .image {
        height: 100%;
    }

    .block-cms-hero[data-variant='band'][data-height] .hero-media img,
    .block-cms-hero[data-variant='band'][data-height] .hero-slide img {
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .block-cms-hero[data-variant='card'][data-height] .hero-media img {
        aspect-ratio: auto;
    }

    .block-cms-hero[data-variant='band'][data-height] .hero-content {
        align-self: center;
    }

    .hero-next {
        position: absolute;
        right: 0;
        bottom: calc(var(--space-unit) * 1.25);
        left: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        width: var(--site-touch);
        height: var(--site-touch);
        margin-inline: auto;
        border: 0.125rem solid currentcolor;
        border-radius: 50%;
        background: color-mix(in srgb, var(--tone-bg) 72%, transparent);
        color: var(--tone-fg);
    }

    .hero-next-target {
        position: absolute;
        bottom: 0;
    }

    html[data-header='transparent'] main > :first-child > .block-cms-hero:is([data-variant='cover'], [data-variant='card']):first-child[data-tone] .hero-media::after {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: calc(var(--site-header-offset, var(--site-header-height)) * 2);
        background: linear-gradient(to bottom, color-mix(in srgb, var(--tone-bg) 72%, transparent) var(--site-header-offset, var(--site-header-height)), transparent);
        pointer-events: none;
    }

    @container (min-width: 40rem) {
        .block-cms-hero[data-variant='card'][data-height] .hero:has(> .hero-media) {
            grid-template-rows: none;
        }
    }

    @container (min-width: 56rem) {
        .block-cms-hero[data-variant='band'][data-height] .hero:has(> .hero-media, > .hero-slides) {
            grid-template-rows: minmax(0, 1fr);
        }
    }

    @keyframes cms-hero-zoom {
        from {
            scale: 1.2;
        }

        to {
            scale: 1.12;
        }
    }

    /* 5% of the photo stays inside the margin its 1.12 scale leaves, so no edge shows */
    @keyframes cms-hero-parallax {
        from {
            translate: 0 0;
        }

        to {
            translate: 0 5%;
        }
    }

    @keyframes cms-hero-rise {
        from {
            translate: 0 1.125rem;
        }

        to {
            translate: 0 0;
        }
    }

    @keyframes cms-hero-next-nudge {
        0%,
        100% {
            translate: 0 0;
        }

        50% {
            translate: 0 0.375rem;
        }
    }

    @keyframes cms-cta-glow {
        from {
            opacity: 0.55;
            translate: 0 0;
        }

        to {
            opacity: 1;
            translate: 2% -3%;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion='subtle'] .block-cms-hero[data-variant='cover'] .hero-media img {
            animation: cms-hero-zoom 5s ease-out both;
        }

        @supports (animation-timeline: scroll()) {
            html[data-motion='subtle'] .block-cms-hero[data-variant='cover'] .hero-media img {
                animation: cms-hero-zoom 5s ease-out both, cms-hero-parallax auto linear both;
                animation-timeline: auto, scroll(root);
                animation-range: normal, 0 40rem;
            }
        }

        html[data-motion='subtle'] .hero-content > * {
            animation: cms-hero-rise 0.6s ease-out both;
        }

        html[data-motion='subtle'] .hero-content > :nth-child(2) {
            animation-delay: 0.08s;
        }

        html[data-motion='subtle'] .hero-content > :nth-child(3) {
            animation-delay: 0.14s;
        }

        html[data-motion='subtle'] .hero-content > :nth-child(4) {
            animation-delay: 0.2s;
        }

        /* three runs of 1.6 s end within the 5 s WCAG 2.2.2 allows motion without a pause control */
        html[data-motion='subtle'] .hero-next {
            animation: cms-hero-next-nudge 1.6s ease-in-out 3;
        }

        html[data-motion='subtle'] .block-cms-features[data-variant='bento'] .feature[data-tone='image'] > .image img {
            transition: scale 0.4s ease-out;
        }

        html[data-motion='subtle'] .block-cms-features[data-variant='bento'] .feature[data-tone='image']:hover > .image img,
        html[data-motion='subtle'] .block-cms-features[data-variant='bento'] .feature[data-tone='image']:focus-within > .image img {
            scale: 1.05;
        }

        /* two alternating runs of 2.5 s end within the 5 s WCAG 2.2.2 allows motion without a pause control */
        html[data-motion='subtle'] .block-cms-cta[data-variant='glow'] .cta::before,
        html[data-motion='subtle'] .block-cms-cta[data-variant='glow'] .cta::after {
            animation: cms-cta-glow 2.5s ease-in-out 2 alternate both;
        }

        html[data-motion='subtle'] .block-cms-cta[data-variant='glow'] .cta::after {
            animation-direction: alternate-reverse;
        }
    }
}