html { scroll-padding-block-start: 8rem; }
.hero { display: grid; isolation: isolate; background: var(--header); color: var(--inverse); }
.hero > * { grid-area: 1 / 1; }
.hero-media { inline-size: 100%; block-size: clamp(23rem, 44vw, 46rem); object-fit: cover; }
.hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: left top; }
.hero-copy { align-self: start; position: relative; padding-block: clamp(4rem, 10vw, 10rem); display: grid; grid-template-columns: 58% 1fr; }
.hero h1 { grid-column: 2; font: 700 clamp(2rem, 3.45vw, 4.6rem)/1.16 var(--sans); text-shadow: 0 .08em .35em #000b; text-wrap: balance; }
.cards { gap: var(--step-4); }
.card { padding: var(--step-2); background: transparent; }
.card h3 { font-family: var(--sans); margin-block-start: var(--step-1); }
.card p { margin-block-end: var(--step-1); }
.preview-media img { inline-size: 100%; aspect-ratio: 2.7; object-fit: cover; border-radius: var(--radius); }

.contact-content { gap: var(--step-4); text-align: start; }
.contact-content .divider { margin-block-end: var(--step-5); }
.contact-content .contact-intro, .contact-notes p { max-inline-size: none; }
.contact-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.contact-columns address h2 { font-size: 1.1em; }
.contact-columns address p, .contact-notes p + p { margin-block-start: var(--step-2); }
.contact-columns address a { overflow-wrap: anywhere; }

.tours-content .intro { max-inline-size: none; color: var(--text); }
.tours-content .media-row { align-items: start; }
.tours-content .media-row > div { padding-block: var(--step-2); }
.tours-content .media-row h3 { font-size: 1.125rem; }
.tours-content .vertical-list article + article { border: 0; padding-block-start: 0; }
@media (width > 48rem) {
    .tours-content .media-row:has(picture) {
        grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    }
}
@media (width <= 48rem) {
    .tours-content .media-row { gap: var(--step-1); }
}

.about-biography p + p { margin-block-start: var(--step-3); }

.tours-content .media-row p + p { margin-block-start: var(--step-2); }

.pricing-intro p + p { margin-block-start: var(--step-1); }
.pricing-table th, .pricing-table td { text-align: center; vertical-align: middle; }

.pricing-table caption { text-align: center; }
.price-notes {
    list-style: disc;
    padding: var(--step-2) var(--step-2) var(--step-2) var(--step-4);
    background: var(--surface);
    border-inline-start: 3px solid var(--line);
    border-radius: var(--radius);
    text-align: start;
}
.price-notes li + li { margin-block-start: var(--step-1); }