/* base.css — the platform's half of every CSS-only theme's stylesheet (docs/COMPONENTS.md).
   It is what an unstyled component looks like: a reset, the tone system, a tidy neutral default
   for the frame and every type in the catalogue. Deliberately plain, so that a theme's work is
   visible and a missing one is too. The theme's own stylesheet is appended after this file; it
   overrides by using the same single-class selectors, which win by order. */

:root {
    --base-background: #ffffff;
    --base-foreground: #1c1f24;
    --base-card: #ffffff;
    --base-card-foreground: #1c1f24;
    --base-primary: #1f4e79;
    --base-primary-foreground: #ffffff;
    --base-secondary: #eef2f6;
    --base-secondary-foreground: #1c1f24;
    --base-muted: #f3f4f6;
    --base-muted-foreground: #5b6470;
    --base-border: #d9dee5;
    --imagery-tint: 0;
    --font-sans: ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--font-sans);
    --wrap: 80rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --band: clamp(4rem, 8vw, 7rem);
    --radius: 0.75rem;
}

/* Tone system: a [data-tone] band remaps the working colours for its subtree from the immutable
   --base-* copies above. ground = the page itself; tint, dark and accent are the standard bands.
   A theme may add tones of its own (butter, sky, …) by styling [data-tone="name"] the same way. */
body,
[data-tone],
[data-tone='ground'] {
    --background: var(--base-background);
    --foreground: var(--base-foreground);
    --card: var(--base-card);
    --card-foreground: var(--base-card-foreground);
    --primary: var(--base-primary);
    --primary-foreground: var(--base-primary-foreground);
    --secondary: var(--base-secondary);
    --secondary-foreground: var(--base-secondary-foreground);
    --muted: var(--base-muted);
    --muted-foreground: var(--base-muted-foreground);
    --border: var(--base-border);
    background: var(--background);
    color: var(--foreground);
}
[data-tone='tint'] {
    --background: var(--base-secondary);
    --foreground: var(--base-secondary-foreground);
    --card: var(--base-background);
    --card-foreground: var(--base-card-foreground);
    --border: color-mix(in oklab, var(--base-border), var(--base-secondary) 35%);
}
[data-tone='dark'] {
    --background: var(--base-foreground);
    --foreground: var(--base-background);
    --card: color-mix(in oklab, var(--base-foreground) 94%, white);
    --card-foreground: var(--base-background);
    --secondary: color-mix(in oklab, var(--base-foreground) 88%, white);
    --secondary-foreground: var(--base-background);
    --muted: color-mix(in oklab, var(--base-foreground) 90%, white);
    --muted-foreground: color-mix(in oklab, var(--base-background) 72%, var(--base-foreground));
    --border: color-mix(in oklab, var(--base-foreground) 82%, white);
}
[data-tone='accent'] {
    --background: var(--base-primary);
    --foreground: var(--base-primary-foreground);
    --card: color-mix(in oklab, var(--base-primary) 90%, black);
    --card-foreground: var(--base-primary-foreground);
    --muted-foreground: color-mix(in oklab, var(--base-primary-foreground) 78%, var(--base-primary));
    --border: color-mix(in oklab, var(--base-primary-foreground) 30%, var(--base-primary));
    --primary: var(--base-primary-foreground);
    --primary-foreground: var(--base-primary);
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
html[data-text-size='large'] {
    font-size: 125%;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-x: hidden;
    /* Names and words from the facts can be long; nothing may ever push the page sideways. */
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
dl,
dd,
figure,
blockquote {
    margin: 0;
}
ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
a {
    color: inherit;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
table {
    border-collapse: collapse;
    width: 100%;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}
[hidden] {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Shared pieces */
.c-wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border: 2px solid currentColor;
    border-radius: var(--radius);
    padding: 0.8125rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}
.c-button--primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}
.c-photo {
    position: relative;
    overflow: hidden;
    background: var(--muted);
    border-radius: var(--radius);
}
.c-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-photo__tint {
    position: absolute;
    inset: 0;
    background: var(--primary);
    opacity: var(--imagery-tint, 0);
    mix-blend-mode: color;
    pointer-events: none;
}
.c-hero__eyebrow,
.c-numbers__eyebrow,
.c-steps__eyebrow,
.c-prices__eyebrow,
.c-team__eyebrow,
.c-reviews__eyebrow,
.c-contact__eyebrow,
.c-services__eyebrow,
.c-pacePicker__eyebrow,
.c-quiz__eyebrow,
.c-schedule__eyebrow,
.c-faq__eyebrow,
.c-dayPlan__eyebrow,
.c-gallery__eyebrow,
.c-statement__eyebrow,
.c-routeMap__eyebrow,
.c-form__intro-eyebrow,
.c-legal-title__eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 1.25rem;
}
.c-hero__heading,
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-form__heading,
.c-services__heading,
.c-pacePicker__heading,
.c-quiz__heading,
.c-schedule__heading,
.c-faq__heading,
.c-dayPlan__heading,
.c-gallery__heading,
.c-statement__heading,
.c-routeMap__heading,
.c-form__intro-heading,
.c-legal-title__heading {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-services__heading,
.c-pacePicker__heading,
.c-quiz__heading,
.c-schedule__heading,
.c-faq__heading,
.c-dayPlan__heading,
.c-gallery__heading,
.c-statement__heading,
.c-routeMap__heading,
.c-form__intro-heading,
.c-legal-title__heading {
    font-size: clamp(1.75rem, 3.3vw, 3rem);
}
.c-steps__lead,
.c-prices__lead,
.c-team__lead,
.c-contact__text,
.c-services__lead,
.c-pacePicker__lead,
.c-quiz__lead,
.c-schedule__lead,
.c-faq__lead,
.c-dayPlan__lead,
.c-gallery__lead,
.c-routeMap__lead,
.c-form__intro-text {
    margin-top: 1.25rem;
    max-width: 40rem;
    font-size: 1.125rem;
    color: var(--muted-foreground);
}

/* Frame */
.c-strip {
    font-size: 0.8125rem;
    font-weight: 600;
}
.c-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.625rem;
}
.c-strip__places,
.c-strip__hours {
    display: none;
}
.c-strip__phone {
    margin-left: auto;
    text-decoration: none;
}
.c-strip__whatsapp {
    opacity: 0.7;
}
@media (min-width: 768px) {
    .c-strip__places {
        display: block;
    }
    .c-strip__phone {
        margin-left: 0;
    }
}
@media (min-width: 1024px) {
    .c-strip__hours {
        display: block;
    }
}
.c-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block: 1.25rem;
}
.c-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.c-header__mark {
    display: none;
}
.c-header__tagline {
    display: none;
    margin-left: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
@media (min-width: 768px) {
    .c-header__tagline {
        display: inline;
    }
}
/* The phone as the header's button: off unless a theme shows it (and hides __cta). */
.c-header__phone {
    display: none;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}
.c-header__toggle {
    font-weight: 700;
    margin-left: auto;
}
.c-header__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}
.c-header {
    position: relative;
}
.c-header[data-open] .c-header__nav {
    display: flex;
}
.c-header__link {
    text-decoration: none;
}
.c-header__textsize {
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
}
.c-header__cta {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}
@media (min-width: 1024px) {
    .c-header__toggle {
        display: none;
    }
    .c-header__nav {
        display: flex;
        position: static;
        flex-direction: row;
        gap: 2rem;
        padding: 0;
        background: none;
        border: 0;
    }
}
.c-footer {
    padding-top: var(--band);
}
.c-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem 3rem;
}
.c-footer__signoff {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.05;
}
.c-footer__owner {
    max-width: 28rem;
    color: var(--muted-foreground);
}
.c-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2.5rem;
    margin-top: 3rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}
.c-footer__nav a {
    text-decoration: none;
}

/* Legal pages */
.c-legal-title .c-wrap {
    padding-block: 1rem 3.5rem;
}
.c-legal {
    padding-block: var(--band);
}
.c-legal__text {
    max-width: 46rem;
    overflow-wrap: break-word;
    hyphens: auto;
}
.c-legal__text h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 2.75rem;
}
.c-legal__text h2:first-child {
    margin-top: 0;
}
.c-legal__text h3,
.c-legal__text h4 {
    font-weight: 800;
    font-size: 1.0625rem;
    margin-top: 2rem;
}
.c-legal__text p,
.c-legal__text ul,
.c-legal__text ol {
    margin-top: 0.875rem;
    line-height: 1.7;
}
.c-legal__text ul,
.c-legal__text ol {
    padding-left: 1.375rem;
}
.c-legal__text ul {
    list-style: disc;
}
.c-legal__text ol {
    list-style: decimal;
}
.c-legal__text li + li {
    margin-top: 0.375rem;
}
.c-legal__text a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.c-legal__source {
    margin-top: 3rem;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Components: bands */
.c-hero,
.c-numbers,
.c-steps,
.c-prices,
.c-team,
.c-reviews,
.c-contact,
.c-form,
.c-services,
.c-pacePicker,
.c-quiz,
.c-schedule,
.c-faq,
.c-dayPlan,
.c-gallery,
.c-statement,
.c-routeMap {
    padding-block: var(--band);
}

/* hero */
.c-hero__inner {
    display: grid;
    gap: 3rem;
    align-items: center;
}
.c-hero__heading {
    font-size: clamp(2.375rem, 5.3vw, 5rem);
}
.c-hero__line {
    display: block;
}
.c-hero__mark {
    color: var(--primary);
}
.c-hero__lead {
    margin-top: 1.75rem;
    max-width: 36rem;
    font-size: 1.25rem;
}
.c-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.c-hero__media {
    position: relative;
}
.c-hero__photo {
    aspect-ratio: 4 / 3;
}
.c-hero__badge {
    position: absolute;
    right: 1rem;
    bottom: -1rem;
    max-width: calc(100% - 2rem);
    display: grid;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    font-weight: 700;
    line-height: 1.2;
    font-size: 0.9375rem;
}
.c-hero__note {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-hero__chip {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    max-width: min(16rem, calc(100% - 2rem));
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    font-size: 0.9375rem;
    line-height: 1.35;
}
.c-hero__badge-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
}
.c-hero__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin-top: 2rem;
}
.c-hero__number {
    max-width: 16rem;
}
.c-hero__number-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
}
.c-hero__number-label {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-hero__number-detail {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-hero__caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}
.c-hero__caption-mark {
    font-weight: 700;
    color: var(--foreground);
}
.c-hero__phone {
    align-self: center;
    font-weight: 600;
}
.c-hero__phone-number {
    font-weight: 700;
    white-space: nowrap;
}
/* The course pick: a card of radios that belong to the sign-up form (data.courses). */
.c-hero__courses {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-hero__picks {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
}
.c-hero__legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-hero__pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.c-hero__pick:has(:checked) {
    border-color: var(--primary);
}
.c-hero__pick-input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--primary);
}
.c-hero__pick-when {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.c-hero__pick-what {
    display: block;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}
.c-hero__pick-seats {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}
.c-hero__courses-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.c-hero__courses-note {
    color: var(--muted-foreground);
}
.c-hero__courses-mark {
    font-weight: 700;
    color: var(--card-foreground);
}
@media (min-width: 1024px) {
    .c-hero__inner {
        grid-template-columns: 7fr 5fr;
    }
}

/* numbers */
.c-numbers__head {
    margin-bottom: 3rem;
}
.c-numbers__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
}
.c-numbers__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 4vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.03em;
    /* A number is one token: "12.345" or "99,9 %" never breaks, the grid shrinks instead. */
    white-space: nowrap;
    hyphens: none;
}
.c-numbers__unit {
    font-size: 0.5em;
    margin-left: 0.15em;
}
.c-numbers__label,
.c-numbers__detail {
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
.c-numbers__item:has(.c-numbers__detail) .c-numbers__label {
    display: none;
}
@media (min-width: 1024px) {
    .c-numbers__items {
        grid-template-columns: repeat(var(--count, 4), 1fr);
    }
    .c-numbers__items[data-count='2'] {
        --count: 2;
    }
    .c-numbers__items[data-count='3'] {
        --count: 3;
    }
}

/* steps */
.c-steps__items {
    display: grid;
    gap: 2rem;
    margin-top: 3.5rem;
    counter-reset: step;
}
.c-steps__item {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-steps__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.c-steps__index {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
}
.c-steps__when {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.c-steps__photo {
    margin-top: 1.25rem;
    aspect-ratio: 4 / 3;
}
.c-steps__title {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
}
.c-steps__text {
    margin-top: 0.75rem;
}
@media (min-width: 640px) {
    .c-steps__items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-steps__items {
        grid-template-columns: repeat(var(--count, 4), 1fr);
    }
    .c-steps__items[data-count='2'] {
        --count: 2;
    }
    .c-steps__items[data-count='3'] {
        --count: 3;
    }
    .c-steps__items[data-count='5'] {
        --count: 5;
    }
}

/* steps in two titled columns (what you do, what we do) */
.c-steps__columns {
    display: grid;
    gap: 3rem;
    margin-top: 3.5rem;
}
.c-steps__column-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
}
.c-steps__column .c-steps__items {
    margin-top: 1.25rem;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1024px) {
    .c-steps__columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* prices */
.c-prices__inner {
    display: grid;
    gap: 3rem;
}
.c-prices__photo {
    margin-top: 2.5rem;
    aspect-ratio: 4 / 3;
    max-width: 28rem;
}
.c-prices__table {
    font-size: 1.125rem;
    text-align: left;
}
.c-prices__caption {
    margin-bottom: 1rem;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-prices__row {
    border-top: 1px solid var(--border);
}
.c-prices__row:last-child {
    border-bottom: 1px solid var(--border);
}
.c-prices__item {
    padding: 1rem 1.5rem 1rem 0;
    font-weight: 600;
}
.c-prices__unit {
    display: block;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--muted-foreground);
}
.c-prices__price {
    padding-block: 1rem;
    text-align: right;
    font-family: var(--font-display);
    font-weight: 700;
    white-space: nowrap;
    hyphens: none;
}
.c-prices__typical {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-prices__typical-label {
    font-weight: 700;
    line-height: 1.3;
}
.c-prices__typical-note {
    display: block;
    font-weight: 500;
}
.c-prices__typical-total {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    white-space: nowrap;
    hyphens: none;
}
.c-prices__note {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
/* The calculator: the controls need the platform script, which marks the band data-live. */
.c-prices__calc {
    display: none;
    margin-top: 2.5rem;
}
.c-prices[data-live] .c-prices__calc {
    display: grid;
    gap: 1rem;
}
.c-prices__calc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.c-prices__calc-label {
    font-weight: 700;
}
.c-prices__calc-count {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}
.c-prices__calc-rate {
    color: var(--muted-foreground);
    white-space: nowrap;
}
.c-prices__calc-range {
    width: 100%;
    accent-color: var(--primary);
}
.c-prices__calc-scale {
    position: relative;
    height: 1.25rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}
.c-prices__calc-scale > * {
    position: absolute;
    left: calc(var(--at, 0) * 100%);
    translate: calc(var(--at, 0) * -100%);
    white-space: nowrap;
}
.c-prices__calc-mark {
    font-weight: 700;
    color: var(--foreground);
}
.c-prices__calc-typical {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-prices__calc-extra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin-top: 0.5rem;
    cursor: pointer;
}
.c-prices__calc-switch {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.2rem 0 0;
    accent-color: var(--primary);
}
.c-prices__calc-extra-label {
    font-weight: 700;
}
.c-prices__calc-extra-note,
.c-prices__calc-extra-price {
    display: block;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-prices__result {
    margin-bottom: 2rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-prices__result-label {
    font-weight: 700;
}
.c-prices__calc-total {
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    hyphens: none;
}
.c-prices__result .c-prices__calc-total {
    display: block;
    margin-top: 0.5rem;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
}
.c-prices__result-split {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
}
.c-prices__live-times {
    font-weight: 400;
    white-space: nowrap;
}
.c-prices__sum {
    border-top: 2px solid var(--foreground);
}
@media (min-width: 1024px) {
    .c-prices__inner {
        grid-template-columns: 5fr 6fr;
        gap: 2.5rem 5rem;
    }
}

/* team */
.c-team__items {
    display: grid;
    gap: 2.5rem;
    margin-top: 3.5rem;
}
.c-team__photo {
    aspect-ratio: 9 / 11;
}
.c-team__media {
    position: relative;
}
.c-team__initial {
    display: grid;
    place-items: center;
    aspect-ratio: 9 / 11;
    border-radius: var(--radius);
    background: var(--muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 5rem;
    color: var(--muted-foreground);
}
.c-team__name {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
}
.c-team__role {
    font-weight: 600;
    color: var(--muted-foreground);
}
.c-team__quote {
    margin-top: 0.75rem;
}
@media (min-width: 640px) {
    .c-team__items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-team__items {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* reviews */
.c-reviews__inner {
    display: grid;
    gap: 3rem;
}
.c-reviews__photo {
    margin-top: 2.5rem;
    aspect-ratio: 4 / 5;
    max-width: 20rem;
}
.c-reviews__rating {
    margin-top: 2.5rem;
    max-width: 20rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
}
.c-reviews__rating-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
}
.c-reviews__rating-of {
    font-size: 1.25rem;
    color: var(--muted-foreground);
}
.c-reviews__rating-count {
    margin-top: 0.5rem;
    font-weight: 700;
}
.c-reviews__rating-date {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-reviews__rating-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 700;
}
.c-reviews__items {
    display: grid;
    gap: 1.75rem;
}
.c-reviews__item {
    padding: 1.75rem;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
}
.c-reviews__quote {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.c-reviews__who {
    margin-top: 1.25rem;
    font-weight: 700;
    color: var(--muted-foreground);
}
.c-reviews__disclosure {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
@media (min-width: 1024px) {
    .c-reviews__inner {
        grid-template-columns: 4fr 7fr;
        gap: 2.5rem 5rem;
    }
}

/* beat */
.c-beat__photo {
    aspect-ratio: 4 / 3;
    border-radius: 0;
}
@media (min-width: 640px) {
    .c-beat__photo {
        aspect-ratio: 2400 / 1030;
    }
}

/* contact */
.c-contact__inner {
    display: grid;
    gap: 3rem;
}
.c-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.c-contact__photo {
    margin-top: 2.5rem;
    aspect-ratio: 4 / 3;
    max-width: 28rem;
}
.c-contact__places {
    display: grid;
    gap: 1.5rem;
}
.c-contact__place {
    border-top: 2px solid var(--foreground);
    padding-top: 1.25rem;
}
.c-contact__place-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
}
.c-contact__email {
    align-self: center;
    font-weight: 700;
}
/* Each place's own phone: off unless a theme shows it (the actions carry the first one). */
.c-contact__place-phone {
    display: none;
    margin-top: 0.75rem;
    font-weight: 700;
}
.c-contact__address,
.c-contact__hours {
    margin-top: 0.75rem;
    font-weight: 500;
}
@media (min-width: 640px) {
    .c-contact__places {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-contact__inner {
        grid-template-columns: 6fr 5fr;
        gap: 2.5rem 5rem;
    }
}

/* services */
.c-services__body {
    display: grid;
    gap: 3rem;
    margin-top: 3.5rem;
    align-items: start;
}
.c-services__photo {
    aspect-ratio: 5 / 6;
    max-width: 26rem;
}
.c-services__caption {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
.c-services__items {
    display: grid;
    gap: 1.5rem;
}
.c-services__item {
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-services__item-photo {
    aspect-ratio: 1;
    margin-bottom: 1.25rem;
}
.c-services__value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.3em;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
}
/* the figure is one token; the words after it may wrap */
.c-services__number {
    white-space: nowrap;
}
.c-services__unit {
    min-width: 0;
    font-size: 0.5em;
    overflow-wrap: anywhere;
}
.c-services__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.25;
}
.c-services__text {
    margin-top: 0.75rem;
}
.c-services__price {
    margin-top: 0.75rem;
    font-weight: 700;
}
.c-services__note {
    margin-top: 1.5rem;
    max-width: 40rem;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .c-services__items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .c-services__body:has(.c-services__figure) {
        grid-template-columns: 2fr 3fr;
    }
}

/* pacePicker: every pace's answer is in the page; the checked radio shows its own. */
.c-pacePicker__picker {
    margin-top: 3rem;
}
.c-pacePicker__choices {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}
.c-pacePicker__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.c-pacePicker__choice {
    position: relative;
}
.c-pacePicker__choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-pacePicker__choice span {
    display: block;
    cursor: pointer;
    padding: 0.625rem 1.25rem;
    border-radius: calc(var(--radius) - 0.25rem);
    font-weight: 700;
}
.c-pacePicker__choice input:checked + span {
    background: var(--foreground);
    color: var(--background);
}
.c-pacePicker__choice input:focus-visible + span {
    outline: 3px solid var(--foreground);
    outline-offset: 2px;
}
.c-pacePicker__result {
    display: none;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-pacePicker__picker:has(input[value='1']:checked) .c-pacePicker__result[data-i='1'],
.c-pacePicker__picker:has(input[value='2']:checked) .c-pacePicker__result[data-i='2'],
.c-pacePicker__picker:has(input[value='3']:checked) .c-pacePicker__result[data-i='3'],
.c-pacePicker__picker:has(input[value='4']:checked) .c-pacePicker__result[data-i='4'] {
    display: grid;
}
.c-pacePicker__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-pacePicker__weeks {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
}
.c-pacePicker__note,
.c-pacePicker__days-text,
.c-pacePicker__first {
    margin-top: 0.75rem;
    color: var(--muted-foreground);
}
.c-pacePicker__days {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.75rem;
}
.c-pacePicker__day {
    min-width: 2.25rem;
    padding: 0.25rem 0.375rem;
    border-radius: calc(var(--radius) - 0.25rem);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--muted-foreground);
    background: var(--muted);
}
.c-pacePicker__day[data-on='true'] {
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-pacePicker__lessons,
.c-pacePicker__place {
    margin-top: 0.75rem;
    font-weight: 700;
}
.c-pacePicker__footnote {
    margin-top: 2rem;
    max-width: 44rem;
    color: var(--muted-foreground);
}
@media (min-width: 1024px) {
    .c-pacePicker__result {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* form */
.c-form__intro {
    margin-bottom: 3rem;
}
.c-form__form {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
}
.c-form__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 2.5rem;
}
.c-form__heading {
    font-size: 1.5rem;
}
.c-form__note {
    font-weight: 600;
    color: var(--muted-foreground);
}
.c-form__fields {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.75rem;
    align-items: end;
}
.c-form__field label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.c-form__field input,
.c-form__field select,
.c-form__field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--foreground);
    padding: 0.75rem 0.9375rem;
    font: inherit;
    font-weight: 600;
    appearance: none;
}
.c-form__field select {
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: 6px 6px;
    background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}
/* The honeypot: a field no person sees or tabs into; a bot that fills every field trips it. */
.c-form__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.c-form__info {
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-weight: 600;
}
.c-form__error {
    margin-top: 1rem;
    font-weight: 700;
    color: #b42318;
}
.c-form__status {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-size: 1.125rem;
    font-weight: 700;
}
.c-form__privacy {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.c-form__privacy a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (min-width: 640px) {
    .c-form__fields {
        grid-template-columns: repeat(2, 1fr);
    }
    .c-form__field--message,
    .c-form__button {
        grid-column: 1 / -1;
    }
}
@media (min-width: 1024px) {
    .c-form__fields {
        grid-template-columns: repeat(var(--count, 4), 1fr) auto;
    }
    .c-form__fields[data-count='2'] {
        --count: 2;
    }
    .c-form__fields[data-count='3'] {
        --count: 3;
    }
    .c-form__fields[data-count='5'] {
        --count: 5;
    }
    .c-form__fields[data-count='6'] {
        --count: 6;
    }
    .c-form__button {
        grid-column: auto;
    }
    .c-form__fields:has(.c-form__field--message) .c-form__button {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* The words of a quiz, a schedule and a FAQ come from the site and may be one long German
   compound: they break anywhere rather than push the page sideways. */
.c-quiz__inner > *,
.c-quiz__ask > *,
.c-schedule__inner > *,
.c-faq__inner > * {
    min-width: 0;
}
.c-quiz__question,
.c-quiz__answer-text,
.c-quiz__why,
.c-schedule__what,
.c-faq__question,
.c-faq__answer {
    overflow-wrap: anywhere;
}

/* quiz: every question is in the page and one shows at a time; answering reveals the right
   answer and why, the "next" radio moves on, the score is a counter over the checked right
   answers. A question not shown is hidden by visibility, which keeps its answers counted (an
   element without a box increments no counter). */
.c-quiz__inner {
    display: grid;
    gap: 3rem;
    align-items: start;
}
.c-quiz__facts {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
    max-width: 30rem;
}
.c-quiz__fact {
    display: flex;
    gap: 1rem;
}
.c-quiz__fact-value {
    min-width: 3.5rem;
    font-weight: 700;
}
.c-quiz__card {
    display: grid;
    counter-reset: quiz-right;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-quiz__q,
.c-quiz__result {
    grid-area: 1 / 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
}
.c-quiz__card:not(:has(.c-quiz__go:checked)) > [data-i='1'],
.c-quiz__card:has(.c-quiz__go[value='2']:checked) > [data-i='2'],
.c-quiz__card:has(.c-quiz__go[value='3']:checked) > [data-i='3'],
.c-quiz__card:has(.c-quiz__go[value='4']:checked) > [data-i='4'],
.c-quiz__card:has(.c-quiz__go[value='5']:checked) > [data-i='5'],
.c-quiz__card:has(.c-quiz__go[value='6']:checked) > [data-i='6'] {
    visibility: visible;
}
.c-quiz__step {
    float: left;
    width: 100%;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.c-quiz__tag {
    clear: both;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.c-quiz__ask {
    clear: both;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.25rem;
}
/* A sign keeps its own proportions (a triangle is wider than tall); a photo is square. */
.c-quiz__sign,
.c-quiz__photo {
    flex: none;
    width: clamp(5rem, 12vw, 7.5rem);
    height: auto;
}
.c-quiz__photo {
    aspect-ratio: 1;
}
.c-quiz__question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.2;
}
.c-quiz__answers {
    display: grid;
    gap: 0.625rem;
    margin-top: 1.5rem;
}
.c-quiz__answer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
}
.c-quiz__answer input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-quiz__answer:has(input:focus-visible),
.c-quiz__next:has(input:focus-visible) {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}
.c-quiz__answer[data-right] input:checked {
    counter-increment: quiz-right;
}
.c-quiz__letter {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: calc(var(--radius) - 0.25rem);
    background: var(--muted);
    color: var(--foreground);
    font-weight: 700;
}
/* Answered: the answers are settled, the right one is marked, a wrong pick too. */
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__answer {
    pointer-events: none;
}
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__answer[data-right] {
    border-color: #1a7f37;
    background: color-mix(in oklab, #1a7f37 12%, transparent);
}
.c-quiz__answer:not([data-right]):has(input:checked) {
    border-color: #b42318;
    background: color-mix(in oklab, #b42318 12%, transparent);
}
.c-quiz__reveal {
    display: none;
    margin-top: 1.25rem;
}
.c-quiz__q:has(.c-quiz__answer input:checked) .c-quiz__reveal {
    display: block;
}
.c-quiz__q:has(.c-quiz__answer[data-right] input:checked) .c-quiz__wrong,
.c-quiz__q:has(.c-quiz__answer:not([data-right]) input:checked) .c-quiz__right {
    display: none;
}
.c-quiz__next {
    position: relative;
    margin-top: 1.25rem;
    cursor: pointer;
}
.c-quiz__go {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-quiz__result {
    align-self: center;
}
.c-quiz__score {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.c-quiz__count::before {
    content: counter(quiz-right);
}
/* The tally: per question "richtig" when its right answer is the checked one, else "falsch". */
.c-quiz__tally {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.c-quiz__mark-right {
    display: none;
}
.c-quiz__card:has(> [data-i='1'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='1'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='2'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='2'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='3'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='3'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='4'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='4'] .c-quiz__mark-right,
.c-quiz__card:has(> [data-i='5'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='5'] .c-quiz__mark-right {
    display: inline;
}
.c-quiz__card:has(> [data-i='1'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='1'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='2'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='2'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='3'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='3'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='4'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='4'] .c-quiz__mark-wrong,
.c-quiz__card:has(> [data-i='5'] .c-quiz__answer[data-right] input:checked) .c-quiz__mark[data-i='5'] .c-quiz__mark-wrong {
    display: none;
}
.c-quiz__result-text {
    margin-top: 0.75rem;
}
.c-quiz__cta {
    margin-top: 1.5rem;
}
@media (min-width: 1024px) {
    .c-quiz__inner {
        grid-template-columns: 5fr 6fr;
        gap: 4rem;
    }
}

/* schedule */
.c-schedule__inner {
    display: grid;
    gap: 2.5rem;
}
.c-schedule__phone {
    margin-top: 2rem;
}
.c-schedule__phone-number {
    font-variant-numeric: tabular-nums;
}
.c-schedule__recurring {
    display: grid;
    gap: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
}
.c-schedule__next {
    font-weight: 600;
}
.c-schedule__title {
    font-weight: 500;
}
.c-schedule__dates {
    border-bottom: 2px solid var(--foreground);
}
.c-schedule__recurring + .c-schedule__dates {
    margin-top: 1.5rem;
}
.c-schedule__date {
    display: grid;
    gap: 0.25rem 2rem;
    padding-block: 1rem;
    border-top: 2px solid var(--foreground);
}
.c-schedule__when {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.c-schedule__where {
    font-weight: 700;
}
.c-schedule__seats {
    font-size: 0.875rem;
    font-weight: 600;
}
.c-schedule__date[data-full] .c-schedule__seats {
    color: var(--muted-foreground);
}
.c-schedule__note {
    margin-top: 1.25rem;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .c-schedule__date {
        grid-template-columns: 11rem 1fr auto;
        align-items: baseline;
    }
}
@media (min-width: 1024px) {
    .c-schedule__inner {
        grid-template-columns: 2fr 3fr;
        gap: 4rem;
    }
}

/* faq: native details, the first one open */
.c-faq__inner {
    display: grid;
    gap: 2.5rem;
}
.c-faq__items {
    border-bottom: 1px solid var(--border);
}
.c-faq__item {
    border-top: 1px solid var(--border);
}
.c-faq__question {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1.125rem;
}
.c-faq__question::-webkit-details-marker {
    display: none;
}
.c-faq__question::after {
    content: '+';
    flex: none;
    font-weight: 700;
}
.c-faq__item[open] .c-faq__question::after {
    content: '–';
}
.c-faq__answer {
    max-width: 42rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 1024px) {
    .c-faq__inner {
        grid-template-columns: 2fr 3fr;
        gap: 4rem;
    }
}

/* dayPlan: the days of a course in a grid, a day off and an exam day marked by data-kind */
.c-dayPlan__days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 3rem;
}
.c-dayPlan__day {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
}
.c-dayPlan__day[data-kind='rest'] {
    background: transparent;
    color: var(--muted-foreground);
}
.c-dayPlan__day[data-kind='exam'] {
    border-color: var(--primary);
}
.c-dayPlan__date {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.c-dayPlan__title {
    margin-top: 0.5rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.c-dayPlan__slots {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}
.c-dayPlan__what {
    overflow-wrap: anywhere;
}
.c-dayPlan__code {
    font-weight: 700;
    text-decoration: none;
}
.c-dayPlan__foot {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-dayPlan__codes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}
.c-dayPlan__key {
    display: flex;
    gap: 0.375rem;
}
.c-dayPlan__key-code {
    font-weight: 700;
    color: var(--foreground);
}
@media (min-width: 640px) {
    .c-dayPlan__days {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .c-dayPlan__days {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

/* gallery: photos with a title, a caption and specs each */
.c-gallery__items {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem;
}
.c-gallery__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.c-gallery__photo {
    aspect-ratio: 4 / 3;
}
.c-gallery__body {
    padding-top: 1.25rem;
}
.c-gallery__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    overflow-wrap: anywhere;
}
.c-gallery__caption {
    margin-top: 0.5rem;
    color: var(--muted-foreground);
}
.c-gallery__specs {
    margin-top: 1rem;
    border-bottom: 1px solid var(--border);
}
.c-gallery__spec {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.9375rem;
}
.c-gallery__spec-label {
    color: var(--muted-foreground);
}
.c-gallery__spec-value {
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}
.c-gallery__note {
    margin-top: 2rem;
    max-width: 48rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}
@media (min-width: 640px) {
    .c-gallery__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .c-gallery__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .c-gallery__items[data-count='2'],
    .c-gallery__items[data-count='4'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* statement: a heading, one to three paragraphs, a photo with its caption, figures under it */
.c-statement__body {
    display: grid;
    gap: 3rem;
    margin-top: 2.5rem;
    align-items: start;
}
.c-statement__text {
    display: grid;
    gap: 1.25rem;
    max-width: 40rem;
}
.c-statement__paragraph[data-i='1'] {
    font-size: 1.25rem;
}
.c-statement__photo {
    aspect-ratio: 7 / 5;
}
.c-statement__caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.c-statement__numbers {
    display: grid;
    gap: 2rem;
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}
.c-statement__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1;
    white-space: nowrap;
    hyphens: none;
}
.c-statement__unit {
    font-size: 0.5em;
    margin-left: 0.15em;
}
.c-statement__label,
.c-statement__detail {
    margin-top: 0.75rem;
    color: var(--muted-foreground);
}
.c-statement__number:has(.c-statement__detail) .c-statement__label {
    display: none;
}
@media (min-width: 640px) {
    .c-statement__numbers {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}
@media (min-width: 1024px) {
    .c-statement__body:has(.c-statement__figure) {
        grid-template-columns: 1fr 1fr;
    }
}

/* routeMap: every spot is in the page and the checked radio shows its own; previous and next are
   labels of the neighbouring radios. The drawing has no colours of its own: the road takes the
   foreground, the stretch driven so far the primary colour. One driven path per spot, the checked
   one shown. Without :has every spot is listed and the map shows the whole road. */
.c-routeMap__body {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}
.c-routeMap__body > * {
    min-width: 0;
}
.c-routeMap__map {
    aspect-ratio: 1000 / 640;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
}
.c-routeMap__drawing {
    display: block;
    width: 100%;
    height: 100%;
}
.c-routeMap__feature {
    fill: none;
    stroke: var(--border);
    stroke-width: 2;
}
.c-routeMap__feature[data-kind='area'],
.c-routeMap__feature[data-kind='water'] {
    fill: var(--muted);
    stroke: none;
}
.c-routeMap__feature[data-kind='motorway'] {
    stroke-width: 6;
}
.c-routeMap__feature[data-kind='rail'] {
    stroke-dasharray: 10 6;
}
.c-routeMap__place {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--muted-foreground);
}
.c-routeMap__road-edge,
.c-routeMap__road,
.c-routeMap__driven {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.c-routeMap__road-edge {
    stroke: var(--foreground);
    stroke-width: 16;
}
.c-routeMap__road {
    stroke: var(--card);
    stroke-width: 7;
}
.c-routeMap__driven {
    stroke: var(--primary);
    stroke-width: 7;
    display: none;
}
.c-routeMap__pin {
    --pin: var(--foreground);
}
.c-routeMap__pin-dot {
    fill: var(--pin);
    stroke: var(--card);
    stroke-width: 3;
}
.c-routeMap__pin-n {
    fill: var(--card);
    font-size: 24px;
    font-weight: 700;
}
.c-routeMap[data-live] .c-routeMap__pin {
    cursor: pointer;
}
.c-routeMap__picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.c-routeMap__legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-routeMap__pick {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}
.c-routeMap__pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.c-routeMap__pick-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.c-routeMap__pick:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}
.c-routeMap__pick:has(input:focus-visible) {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}
.c-routeMap__spots {
    display: grid;
    gap: 2.5rem;
}
.c-routeMap__step {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-routeMap__title {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    line-height: 1.15;
}
.c-routeMap__text,
.c-routeMap__how {
    margin-top: 0.875rem;
}
.c-routeMap__step,
.c-routeMap__title,
.c-routeMap__text,
.c-routeMap__how {
    overflow-wrap: anywhere;
}
.c-routeMap__how {
    padding-left: 1rem;
    border-left: 3px solid var(--primary);
    color: var(--muted-foreground);
}
.c-routeMap__how-label {
    color: var(--foreground);
}
.c-routeMap__steps {
    display: none;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.c-routeMap__prev,
.c-routeMap__next {
    padding: 0.5rem 1rem;
    border: 2px solid currentColor;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
}
.c-routeMap__note {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
/* One spot at a time where :has works; the first one before anything is checked. */
.c-routeMap__body:has(.c-routeMap__pick-input:checked) .c-routeMap__spot {
    display: none;
}
.c-routeMap__body:has(.c-routeMap__pick-input:checked) .c-routeMap__steps {
    display: flex;
}
.c-routeMap__body:has(.c-routeMap__pick-input[value='1']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='1'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='2']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='2'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='3']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='3'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='4']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='4'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='5']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='5'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='6']:checked) :is(.c-routeMap__spot, .c-routeMap__driven)[data-i='6'] {
    display: block;
}
.c-routeMap__body:has(.c-routeMap__pick-input[value='1']:checked) .c-routeMap__pin[data-i='1'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='2']:checked) .c-routeMap__pin[data-i='2'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='3']:checked) .c-routeMap__pin[data-i='3'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='4']:checked) .c-routeMap__pin[data-i='4'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='5']:checked) .c-routeMap__pin[data-i='5'],
.c-routeMap__body:has(.c-routeMap__pick-input[value='6']:checked) .c-routeMap__pin[data-i='6'] {
    --pin: var(--primary);
}
@media (min-width: 1024px) {
    .c-routeMap__body {
        grid-template-columns: 3fr 2fr;
        grid-template-rows: auto auto 1fr auto;
        column-gap: 3rem;
    }
    .c-routeMap__map {
        grid-row: 1 / -1;
    }
}

/* theme */
/* 13 Taktung — warm spec sheet. An intensive driving school that argues with a plan and with
   numbers, set warm: paper ground, a warm near-black, hi-vis orange as the signal. Chivo 800 for
   headings, Chivo Mono with tabular figures for everything that is data (dates, codes, prices,
   specs). The opening is the owner's pick from the hero mock-ups (D „Zwei Termine"): a learner at
   the wheel on the right half, the heading on the left, and a card on the seam that offers the
   next two course starts to pick from, the fixed costs and the one button. Further down: the
   14 days as a plan of cards, the „before day 01" checklist, the cost sheet dark with the
   calculator on a paper sheet, the reviews as receipts, the fleet as spec cards, the closing band
   orange. The orange is a surface only twice (numbers, closing band); everywhere else it marks.
   Plain CSS over the platform's markup (docs/COMPONENTS.md); base.css comes first and this file
   overrides it. */

@font-face {
    font-family: "Chivo";
    src: url("./fonts/chivo.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Chivo Mono";
    src: url("./fonts/chivo-mono.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --base-background: #f3eee6;
    --base-foreground: #1c1915;
    --base-card: #fffdf9;
    --base-card-foreground: #1c1915;
    --base-primary: #ff5a00;
    --base-primary-foreground: #1c1915;
    --base-secondary: #e8e0d3;
    --base-secondary-foreground: #1c1915;
    --base-muted: #e2d9cb;
    --base-muted-foreground: #5d574f;
    --base-border: #d9d1c5;

    /* These keep their values in every band. */
    --ink: #1c1915;
    --paper: #f3eee6;
    --sheet: #fffdf9;
    --signal: #ff5a00;
    --soft: #ffe7d6;
    --line: #d9d1c5;
    --grey: #5d574f;
    --font-sans: "Chivo", ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--font-sans);
    --font-mono: "Chivo Mono", ui-monospace, monospace;
    --radius: 0;
    --wrap: 84rem;
    --gutter: clamp(1rem, 5vw, 4.5rem);
    --band: clamp(4rem, 8vw, 7.5rem);
    --shadow: 0 1rem 2.5rem rgb(60 40 20 / 0.14);
}

/* The bands: a darker paper, warm black with the orange as its accent, the orange itself. */
[data-tone="tint"] {
    --card: var(--sheet);
    --border: #d3c9b9;
}
[data-tone="dark"] {
    --card: #29251f;
    --muted-foreground: #b9b0a3;
    --border: #3d372f;
    --primary: var(--signal);
    --primary-foreground: var(--ink);
}
[data-tone="accent"] {
    --background: var(--signal);
    --foreground: var(--ink);
    --card: var(--sheet);
    --card-foreground: var(--ink);
    --muted-foreground: #2e1a0c;
    --border: var(--ink);
    --primary: var(--ink);
    --primary-foreground: var(--paper);
}

/* Type */
html {
    scroll-behavior: smooth;
}
body {
    /* Names and words from the facts can be long; nothing may push the page sideways. */
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 1.0625rem;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
}
.c-hero__heading,
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-form__heading,
.c-services__heading,
.c-schedule__heading,
.c-faq__heading,
.c-dayPlan__heading,
.c-gallery__heading,
.c-form__intro-heading,
.c-legal-title__heading,
.c-footer__signoff,
.c-legal__text h2 {
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.04;
}
.c-numbers__heading,
.c-steps__heading,
.c-prices__heading,
.c-team__heading,
.c-reviews__heading,
.c-contact__heading,
.c-services__heading,
.c-schedule__heading,
.c-faq__heading,
.c-dayPlan__heading,
.c-gallery__heading,
.c-form__intro-heading,
.c-legal-title__heading {
    font-size: clamp(2rem, 4vw, 3.5rem);
}
/* The marked word of a heading is underlined in orange, like a dimension line. */
.c-hero__mark,
.c-numbers__mark,
.c-steps__mark,
.c-prices__mark,
.c-team__mark,
.c-reviews__mark,
.c-contact__mark,
.c-services__mark,
.c-schedule__mark,
.c-faq__mark,
.c-dayPlan__mark,
.c-gallery__mark,
.c-form__mark {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.12em;
}
/* Labels and data: the mono cut. */
.c-hero__eyebrow,
.c-numbers__eyebrow,
.c-steps__eyebrow,
.c-prices__eyebrow,
.c-team__eyebrow,
.c-reviews__eyebrow,
.c-contact__eyebrow,
.c-services__eyebrow,
.c-schedule__eyebrow,
.c-faq__eyebrow,
.c-dayPlan__eyebrow,
.c-gallery__eyebrow,
.c-form__intro-eyebrow,
.c-legal-title__eyebrow,
.c-hero__legend,
.c-prices__caption {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-steps__lead,
.c-prices__lead,
.c-team__lead,
.c-contact__text,
.c-services__lead,
.c-schedule__lead,
.c-faq__lead,
.c-dayPlan__lead,
.c-gallery__lead,
.c-form__intro-text {
    max-width: 36rem;
    font-size: 1.125rem;
}

/* Buttons: square, the orange with ink, an arrow after the primary one. */
.c-button {
    border-width: 2px;
    padding: 0.9375rem 1.375rem;
    font-weight: 800;
    font-size: 1.0625rem;
    line-height: 1;
}
.c-button--primary::after {
    content: "";
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    mask: url("./img/arrow.svg") center / contain no-repeat;
}
.c-photo {
    background: var(--muted);
}

/* Frame: the bars of the logo are drawn, the fourth one orange. */
.c-header__inner {
    padding-block: 1rem;
    min-height: 4.25rem;
}
.c-header__brand {
    gap: 0.7rem;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.04em;
    line-height: 1;
}
.c-header__brand::before,
.c-footer__signoff::before {
    content: "";
    flex: none;
    width: 1.75rem;
    height: 1.5rem;
    background:
        linear-gradient(currentColor, currentColor) 0 0.625rem / 0.25rem 0.875rem no-repeat,
        linear-gradient(currentColor, currentColor) 0.5rem 0.625rem / 0.25rem 0.875rem no-repeat,
        linear-gradient(var(--signal), var(--signal)) 1rem 0 / 0.25rem 1.5rem no-repeat,
        linear-gradient(currentColor, currentColor) 1.5rem 0.625rem / 0.25rem 0.875rem no-repeat;
}
.c-header__tagline {
    display: none;
    margin-left: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-header__link {
    font-weight: 600;
    font-size: 0.9375rem;
}
.c-header__link:hover {
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}
.c-header__toggle {
    order: 3;
    margin-left: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.c-header__phone {
    display: inline-flex;
    order: 2;
    margin-left: auto;
    border: 0;
    padding: 0.25rem 0;
    font-weight: 800;
    font-size: 0.9375rem;
}
.c-header__cta {
    display: none;
}
.c-header[data-page="legal"] .c-header__cta,
.c-header:not([data-page="index"]) .c-header__cta {
    display: inline-flex;
    order: 4;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}
@media (min-width: 1024px) {
    .c-header__nav {
        order: 1;
        margin-inline: auto;
        gap: 2rem;
    }
    .c-header__phone {
        margin-left: 0;
    }
}

.c-footer__signoff {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 900;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.04em;
}
.c-footer__signoff::before {
    width: 2.33rem;
    height: 2rem;
    background-size: auto;
    background:
        linear-gradient(currentColor, currentColor) 0 0.833rem / 0.333rem 1.167rem no-repeat,
        linear-gradient(currentColor, currentColor) 0.667rem 0.833rem / 0.333rem 1.167rem no-repeat,
        linear-gradient(var(--signal), var(--signal)) 1.333rem 0 / 0.333rem 2rem no-repeat,
        linear-gradient(currentColor, currentColor) 2rem 0.833rem / 0.333rem 1.167rem no-repeat;
}
.c-footer__owner,
.c-footer__bottom {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* hero: text left, the learner right to the page's edge, the course card on the seam */
.c-hero {
    padding-block: 0;
}
.c-hero__inner {
    gap: 0;
    align-items: start;
}
.c-hero__media {
    order: -1;
    margin-inline: calc(-1 * var(--gutter));
}
.c-hero__photo {
    aspect-ratio: 5 / 4;
}
.c-hero__photo img {
    object-position: 50% 35%;
}
.c-hero__chip {
    left: auto;
    right: 0.75rem;
    bottom: 0.75rem;
    top: auto;
    max-width: calc(100% - 1.5rem);
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
}
.c-hero__chip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3em;
}
.c-hero__chip-title {
    font-weight: 600;
}
.c-hero__chip-text {
    font-weight: 800;
    color: #c84300;
}
.c-hero__text {
    padding-block: 1.75rem 1.5rem;
}
.c-hero__eyebrow {
    margin-bottom: 1rem;
}
.c-hero__heading {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.02;
    text-wrap: balance;
}
.c-hero__line {
    display: inline;
}
.c-hero__line + .c-hero__line::before {
    content: " ";
}
.c-hero__lead {
    margin-top: 1.25rem;
    max-width: 27em;
    font-size: 1.125rem;
    color: var(--muted-foreground);
}
.c-hero__actions {
    margin-top: 1.75rem;
    align-items: center;
}
.c-hero__cta-secondary {
    border: 0;
    padding: 0.25rem 0;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}
.c-hero__phone {
    font-weight: 700;
}
.c-hero__note {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
.c-hero__numbers {
    gap: 1.5rem 2rem;
}
.c-hero__number-value {
    font-weight: 900;
    letter-spacing: -0.03em;
}
.c-hero__number-label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
.c-hero__badge {
    border-radius: 0;
    background: var(--signal);
    color: var(--ink);
}
.c-hero__courses {
    margin-bottom: 2.5rem;
    padding: 1.25rem;
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    box-shadow: 0 0.5rem 1.5rem rgb(60 40 20 / 0.12);
}
.c-hero__legend {
    margin-bottom: 0.625rem;
    color: var(--grey);
}
.c-hero__pick {
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0;
    border-color: var(--line);
}
.c-hero__pick:has(:checked) {
    border-color: var(--signal);
    background: var(--soft);
}
.c-hero__pick-input {
    accent-color: var(--signal);
}
.c-hero__pick-when {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.c-hero__pick-what {
    color: var(--grey);
}
.c-hero__pick-seats {
    font-size: 0.9375rem;
}
.c-hero__courses-note {
    font-size: 0.9375rem;
    color: var(--grey);
}
.c-hero__courses-mark {
    color: var(--ink);
    font-weight: 800;
}
.c-hero__courses .c-hero__cta {
    flex: 1 1 auto;
}
@media (min-width: 640px) {
    .c-hero__courses .c-hero__cta {
        flex: none;
    }
    .c-hero__pick-when {
        font-size: 1.125rem;
    }
}
@media (min-width: 1024px) {
    /* The section is the grid: text and card in the left 44 %, the photo in the right 56 % from
       the header to the next band, the card reaching over the seam into it. */
    .c-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
        grid-template-rows: auto 1fr;
        min-height: clamp(40rem, calc(100svh - 4.25rem), 58rem);
        max-width: none;
        padding-right: 0;
        padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
    }
    .c-hero__text {
        grid-column: 1;
        grid-row: 1;
        padding: clamp(2.5rem, 9vh, 5.5rem) 1.5rem 2.5rem 0;
    }
    .c-hero__media {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: stretch;
        margin: 0;
    }
    .c-hero__photo {
        height: 100%;
        aspect-ratio: auto;
    }
    .c-hero__chip {
        top: 1.25rem;
        right: 1.25rem;
        bottom: auto;
    }
    .c-hero__courses {
        grid-column: 1 / 3;
        grid-row: 2;
        align-self: end;
        justify-self: start;
        position: relative;
        z-index: 2;
        width: min(42rem, 100%);
        padding: 1.4rem 1.5rem;
        box-shadow: var(--shadow);
    }
    .c-hero__pick-when {
        font-size: 1.1875rem;
    }
    /* Without the card the text column carries the whole hero. */
    .c-hero__inner:not(:has(.c-hero__courses)) .c-hero__text {
        grid-row: 1 / 3;
        align-self: center;
    }
    /* Without a photo the hero is the text and the card, one column. */
    .c-hero__inner:not(:has(.c-hero__media)) {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
    }
    .c-hero__inner:not(:has(.c-hero__media)) .c-hero__courses {
        grid-column: 1;
    }
}

/* numbers: the orange band, ruled in ink */
.c-numbers {
    padding-block: 0;
    border-block: 2px solid var(--ink);
}
.c-numbers__head {
    padding-top: 2.5rem;
}
.c-numbers__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}
.c-numbers__item {
    padding: 2rem 1rem 2rem 0;
    border: 0;
}
.c-numbers__item:nth-child(even) {
    padding-left: 1rem;
    border-left: 1px solid var(--ink);
}
.c-numbers__item:nth-child(n + 3) {
    border-top: 1px solid var(--ink);
}
.c-numbers__value {
    font-weight: 900;
    font-size: clamp(3rem, 6vw, 5.5rem);
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: var(--ink);
}
.c-numbers__unit {
    font-size: 0.5em;
}
.c-numbers__label,
.c-numbers__detail {
    margin-top: 1rem;
    max-width: 15rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink);
}
/* The longer line where there is one. */
.c-numbers__item:has(.c-numbers__detail) .c-numbers__label {
    display: none;
}
@media (min-width: 1024px) {
    .c-numbers__items {
        grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    }
    .c-numbers__items[data-count="2"] {
        --n: 2;
    }
    .c-numbers__items[data-count="3"] {
        --n: 3;
    }
    .c-numbers__item,
    .c-numbers__item:nth-child(even) {
        padding: 3rem 2rem;
        border-left: 1px solid var(--ink);
    }
    .c-numbers__item:nth-child(n + 3) {
        border-top: 0;
    }
    .c-numbers__item:first-child {
        padding-left: 0;
        border-left: 0;
    }
}

/* dayPlan: a sheet of fourteen cards; days off are dashed, exam days ruled in ink, the last one
   orange */
.c-dayPlan__head {
    display: grid;
    gap: 1rem 4rem;
}
.c-dayPlan__eyebrow {
    margin-bottom: 0;
}
.c-dayPlan__lead {
    margin-top: 0;
    color: var(--muted-foreground);
}
.c-dayPlan__days {
    gap: 0.375rem;
    margin-top: 2.5rem;
}
.c-dayPlan__day {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.875rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
}
.c-dayPlan__day[data-kind="rest"] {
    border-style: dashed;
    border-color: #bfb5a6;
    background: transparent;
    color: var(--grey);
}
.c-dayPlan__day[data-kind="exam"] {
    border: 2px solid var(--ink);
}
.c-dayPlan__day[data-kind="exam"]:last-child {
    border-color: var(--signal);
    background: var(--signal);
}
.c-dayPlan__date {
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--grey);
}
.c-dayPlan__day[data-kind="exam"]:last-child .c-dayPlan__date {
    color: var(--ink);
}
.c-dayPlan__word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.c-dayPlan__num {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
}
.c-dayPlan__day[data-kind="rest"] .c-dayPlan__num {
    color: var(--grey);
}
.c-dayPlan__weekday {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.c-dayPlan__title {
    margin-top: 0;
    font-weight: 800;
    font-size: 0.9375rem;
    line-height: 1.2;
    hyphens: manual;
}
.c-dayPlan__slots {
    gap: 0.3rem;
    margin-top: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
}
.c-dayPlan__slot {
    display: flex;
    gap: 0.375rem;
}
.c-dayPlan__code {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: help;
}
.c-dayPlan__day[data-kind="rest"] .c-dayPlan__code {
    background: var(--grey);
}
.c-dayPlan__foot {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
.c-dayPlan__codes {
    gap: 0.375rem 1.5rem;
}
.c-dayPlan__key-code {
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--foreground);
    color: var(--background);
    font-size: 0.6875rem;
}
@media (min-width: 640px) {
    .c-dayPlan__days {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .c-dayPlan__head {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
    }
    .c-dayPlan__eyebrow {
        grid-column: 1 / -1;
    }
    .c-dayPlan__days {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        margin-top: 3.5rem;
    }
    .c-dayPlan__day {
        min-height: 9.5rem;
    }
    .c-dayPlan__foot {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
    }
}

/* steps: numbered rows; in two columns they are the checklist before day 01, the school's side
   already ticked */
.c-steps__items {
    gap: 0;
    margin-top: 2.5rem;
    border-bottom: 1px solid var(--border);
}
.c-steps__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    align-items: baseline;
    padding: 1rem 0;
    border: 0;
    border-top: 1px solid var(--border);
    background: none;
    color: inherit;
}
.c-steps__meta {
    display: contents;
}
.c-steps__index {
    grid-column: 1;
    grid-row: 1;
    font-weight: 900;
    font-size: 1.5rem;
    color: #c84300;
}
.c-steps__when {
    grid-column: 3;
    grid-row: 1;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.c-steps__photo {
    grid-column: 2 / 4;
    margin-top: 0.5rem;
}
.c-steps__title {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    font-weight: 700;
    font-size: 1.0625rem;
}
.c-steps__text {
    grid-column: 2 / 4;
    margin-top: 0;
    color: var(--muted-foreground);
}
.c-steps__columns {
    gap: 2.5rem;
    margin-top: 2.5rem;
}
.c-steps__column-title {
    font-weight: 900;
    font-size: 1.375rem;
    letter-spacing: -0.025em;
}
.c-steps__column .c-steps__items {
    gap: 0;
    margin-top: 1rem;
}
.c-steps__column .c-steps__item {
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    padding: 0.875rem 0;
}
/* The number becomes a box to tick. */
.c-steps__column .c-steps__index {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--foreground);
    font-size: 0;
    align-self: center;
}
.c-steps__column[data-i="2"] .c-steps__index {
    border-color: var(--ink);
    background:
        linear-gradient(45deg, transparent 44%, var(--paper) 44% 58%, transparent 58%) no-repeat,
        var(--ink);
}
.c-steps__column .c-steps__title {
    font-weight: 500;
}
@media (min-width: 1024px) {
    .c-steps .c-wrap:has(.c-steps__columns) {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem;
    }
    .c-steps__columns {
        margin-top: 0.5rem;
    }
    .c-steps__items:not(.c-steps__column .c-steps__items) {
        grid-template-columns: 1fr;
    }
}

/* prices: the cost sheet. Dark band, the calculator on the left, the bill on a paper sheet. */
.c-prices__inner {
    gap: 3rem;
}
.c-prices__lead {
    color: var(--muted-foreground);
}
.c-prices__calc {
    margin-top: 3rem;
}
.c-prices__calc-label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.c-prices__calc-count {
    font-weight: 900;
    font-size: 2.75rem;
    letter-spacing: -0.04em;
    line-height: 1;
}
.c-prices__calc-rate {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
.c-prices__calc-range {
    accent-color: var(--signal);
    height: 1.5rem;
}
.c-prices__calc-scale {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.c-prices__calc-mark {
    color: var(--signal);
}
.c-prices__calc-typical {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
.c-prices__calc-extra {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
}
.c-prices__calc-extra:has(:checked) {
    border-color: var(--signal);
}
.c-prices__calc-switch {
    accent-color: var(--signal);
}
.c-prices__calc-extra-note,
.c-prices__calc-extra-price {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
/* The bill: a paper sheet on the dark band. */
.c-prices__body {
    --foreground: var(--ink);
    --muted-foreground: var(--grey);
    --border: var(--line);
    padding: 1.5rem;
    background: var(--sheet);
    color: var(--ink);
}
.c-prices__result {
    margin: -1.5rem -1.5rem 1.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: 0;
    border-bottom: 2px solid var(--ink);
    background: var(--soft);
    color: var(--ink);
}
.c-prices__result-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.c-prices__result-for {
    color: var(--grey);
}
.c-prices__result .c-prices__calc-total {
    margin-top: 0.75rem;
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 5rem);
    letter-spacing: -0.05em;
    line-height: 0.95;
}
.c-prices__result-split {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--grey);
}
.c-prices__result-split span {
    color: var(--ink);
}
.c-prices__table {
    width: 100%;
    font-size: 1rem;
}
.c-prices__caption {
    color: var(--grey);
}
.c-prices__row {
    border-color: var(--line);
}
.c-prices__item {
    padding: 0.875rem 1rem 0.875rem 0;
    font-weight: 700;
}
.c-prices__unit {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    margin-top: 0.125rem;
}
.c-prices__price {
    font-family: var(--font-mono);
    font-weight: 600;
    vertical-align: top;
}
.c-prices__row--live {
    background: var(--soft);
}
.c-prices__row--live .c-prices__item {
    padding-left: 0.5rem;
}
.c-prices__row--live .c-prices__price {
    padding-right: 0.5rem;
}
.c-prices__live-times {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
}
.c-prices__live-times .c-prices__calc-count {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
}
.c-prices__sum {
    border-top: 2px solid var(--ink);
}
.c-prices__sum .c-prices__item,
.c-prices__sum .c-prices__price {
    padding-top: 1rem;
    font-weight: 900;
    font-size: 1.25rem;
}
.c-prices__sum .c-prices__item {
    font-family: var(--font-sans);
}
.c-prices__typical {
    border-radius: 0;
    background: var(--soft);
    color: var(--ink);
}
.c-prices__note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
}
.c-prices__photo {
    filter: grayscale(1);
}
@media (min-width: 640px) {
    .c-prices__body {
        padding: 2.25rem;
    }
    .c-prices__result {
        margin: -2.25rem -2.25rem 2rem;
        padding: 1.5rem 2.25rem 2rem;
    }
}
@media (min-width: 1024px) {
    .c-prices__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem 5rem;
        align-items: start;
    }
}

/* reviews: receipts. Under a dark cost sheet they continue it. */
.c-prices[data-tone="dark"] + .c-reviews[data-tone="dark"] {
    padding-top: 0;
}
.c-reviews__inner {
    gap: 2.5rem;
}
.c-reviews__heading {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
}
.c-reviews__items {
    display: grid;
    gap: 1rem;
}
.c-reviews__item {
    position: relative;
    padding: 1.5rem 1.5rem 1.75rem;
    border: 0;
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    /* The torn foot of a till receipt. */
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.75rem 100%;
}
.c-reviews__quote {
    font-size: 1.0625rem;
    line-height: 1.55;
}
.c-reviews__who {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px dashed #b7ad9e;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--grey);
}
.c-reviews__items > .c-reviews__disclosure {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.c-reviews__rating {
    border-radius: 0;
}
@media (min-width: 768px) {
    .c-reviews__items {
        grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
        align-items: start;
    }
    .c-reviews__items[data-count="1"] {
        --n: 1;
    }
    .c-reviews__items[data-count="2"] {
        --n: 2;
    }
    .c-reviews__items > .c-reviews__disclosure {
        grid-column: 1 / -1;
        max-width: 46rem;
    }
}
@media (min-width: 1024px) {
    .c-reviews__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* gallery: spec cards, the photos printed grey on the sheet */
.c-gallery__head {
    display: grid;
    gap: 1rem 4rem;
}
.c-gallery__eyebrow {
    margin-bottom: 0;
}
.c-gallery__lead {
    margin-top: 0;
}
.c-gallery__items {
    gap: 1.25rem;
}
.c-gallery__item {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
}
.c-gallery__photo {
    background: var(--sheet);
}
.c-gallery__photo img {
    filter: grayscale(1) contrast(1.05);
    mix-blend-mode: multiply;
}
.c-gallery__body {
    padding: 1.25rem 1.5rem 1.5rem;
}
.c-gallery__title {
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.c-gallery__caption {
    font-size: 0.9375rem;
}
.c-gallery__specs {
    margin-top: 1.25rem;
    border-color: var(--border);
}
.c-gallery__spec {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    border-color: var(--border);
}
/* The first spec is the headline figure: the power. */
.c-gallery__spec[data-i="1"] {
    flex-direction: column;
    gap: 0;
    border-top: 0;
    padding-top: 0;
}
.c-gallery__spec[data-i="1"] .c-gallery__spec-value {
    order: -1;
    text-align: left;
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: 2.75rem;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #c84300;
}
.c-gallery__note {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
}
@media (min-width: 1024px) {
    .c-gallery__head {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
    }
    .c-gallery__eyebrow {
        grid-column: 1 / -1;
    }
}

/* services: the course modes, rows beside a photo of the room */
.c-services__body {
    gap: 2.5rem;
}
.c-services__photo {
    aspect-ratio: 3 / 2;
}
.c-services__caption {
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
.c-services__caption::before {
    content: "Fig. — ";
}
.c-services__items {
    display: block;
    border-bottom: 1px solid var(--border);
}
.c-services__item {
    display: grid;
    gap: 0.375rem 2rem;
    padding: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    color: inherit;
}
.c-services__title {
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}
.c-services__text {
    margin-top: 0;
}
.c-services__price {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
}
.c-services__note {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
@media (min-width: 768px) {
    .c-services__item {
        grid-template-columns: 12rem minmax(0, 1fr);
    }
    .c-services__price {
        grid-column: 2;
    }
}
@media (min-width: 1024px) {
    .c-services__body {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem;
        align-items: start;
    }
}

/* schedule: the course starts as a ruled table */
.c-schedule__phone {
    border-color: var(--foreground);
}
.c-schedule__recurring {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
}
.c-schedule__dates {
    border-bottom: 2px solid var(--foreground);
}
.c-schedule__date {
    border-top: 1px solid var(--border);
    padding-block: 1rem;
}
.c-schedule__date:first-child {
    border-top: 2px solid var(--foreground);
}
.c-schedule__when {
    font-weight: 800;
    font-size: 1.0625rem;
}
.c-schedule__what {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}
.c-schedule__where {
    font-weight: 600;
}
.c-schedule__seats {
    justify-self: start;
    padding: 0.25rem 0.5rem;
    background: var(--soft);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.c-schedule__date[data-full] .c-schedule__when,
.c-schedule__date[data-full] .c-schedule__what {
    color: var(--muted-foreground);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.c-schedule__date[data-full] .c-schedule__seats {
    background: transparent;
    padding-inline: 0;
    color: var(--muted-foreground);
}
.c-schedule__note {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
@media (min-width: 640px) {
    .c-schedule__date {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    }
    .c-schedule__seats {
        justify-self: end;
    }
}
@media (min-width: 1024px) {
    .c-schedule__inner {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

/* team: square portraits in colour, names in Chivo, roles in mono */
.c-team__items {
    gap: 1.25rem;
}
.c-team__item {
    padding: 0;
    border: 0;
    background: none;
}
.c-team__photo {
    aspect-ratio: 1;
    border-radius: 0;
}
.c-team__initial {
    border-radius: 0;
    background: var(--muted);
    font-weight: 900;
}
.c-team__name {
    margin-top: 1.25rem;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}
.c-team__role {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}
.c-team__quote {
    margin-top: 1rem;
}
/* On a phone a person is a row: the portrait small beside the name. */
@media (max-width: 639px) {
    .c-team__item {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 0 1rem;
        align-items: center;
    }
    .c-team__media {
        grid-row: 1 / 4;
    }
    .c-team__name {
        margin-top: 0;
        font-size: 1.25rem;
    }
    .c-team__quote {
        grid-column: 1 / -1;
    }
}

/* faq */
.c-faq__items,
.c-faq__item {
    border-color: var(--border);
}
.c-faq__question {
    font-weight: 800;
}
.c-faq__question::after {
    font-family: var(--font-mono);
    color: #c84300;
}

/* beat: a photo between bands, full width */
.c-beat__photo {
    border-radius: 0;
}

/* form: the closing orange band, the intro left and the form on a sheet */
.c-form {
    border-top: 2px solid var(--ink);
}
.c-form .c-wrap {
    display: grid;
    gap: 2.5rem 5rem;
}
.c-form__intro-heading {
    font-size: clamp(2.5rem, 4.8vw, 4.5rem);
    line-height: 1;
    hyphens: manual;
}
.c-form__intro-heading .c-form__mark {
    text-decoration-color: var(--ink);
}
.c-form__intro-text {
    color: var(--ink);
}
.c-form__form {
    padding: 1.5rem;
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    --foreground: var(--ink);
    --muted-foreground: var(--grey);
    --border: var(--line);
    --primary: var(--ink);
    --primary-foreground: var(--paper);
}
.c-form__heading {
    font-size: 1.625rem;
}
.c-form__note {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--grey);
}
.c-form__field label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey);
}
.c-form__field input,
.c-form__field select,
.c-form__field textarea {
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    padding-inline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1.0625rem;
}
.c-form__field input:focus-visible,
.c-form__field select:focus-visible,
.c-form__field textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--signal);
    box-shadow: 0 2px 0 var(--signal);
}
.c-form__button {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.c-form__info,
.c-form__privacy {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--grey);
}
.c-form__privacy a {
    color: var(--ink);
}
.c-form__error {
    font-weight: 700;
    color: #a12c00;
}
.c-form__status {
    border-radius: 0;
    background: var(--soft);
    color: var(--ink);
    font-weight: 700;
}
@media (min-width: 640px) {
    .c-form__form {
        padding: 2.25rem;
    }
}
@media (min-width: 1024px) {
    .c-form .c-wrap:has(.c-form__intro) {
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        align-items: start;
    }
}

/* contact: the phone as the biggest line, the places as ruled data */
.c-contact__inner {
    gap: 2.5rem 5rem;
}
.c-contact__phone {
    border: 0;
    padding: 0;
    font-weight: 900;
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    letter-spacing: -0.045em;
    line-height: 1;
}
.c-contact__phone:hover {
    text-decoration: underline;
    text-decoration-color: var(--signal);
}
.c-contact__email {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}
.c-contact__places {
    border-bottom: 1px solid var(--border);
}
.c-contact__place {
    padding: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
}
.c-contact__place-name {
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}
.c-contact__address,
.c-contact__hours {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* Legal pages */
.c-legal__text h2 {
    font-size: 1.5rem;
}
.c-legal__source {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}