/* ==========================================================================
 * Book Now and Homepage, design v4 (comment 11931278)
 *
 * Loaded only on /book-now/ and the homepage, every visitor's since 10 November
 * 2026 (inc/book-now-v4.php). Tokens only: every colour, size step, radius, focus
 * ring and shadow is a tokens.css variable, and a translucent navy is
 * color-mix() of the navy token, so nothing here can drift from the brand.
 * The only values of its own are timings and layout measures, named once below.
 *
 * Brand (docs/brand-guidelines.md): Poppins; buttons and subtitles in bold
 * capitals; buttons rounded square, the highlighted title square; navy text on
 * blue, yellow and pink (tokens' --bh-on-* pairs).
 *
 * Motion answers an action only: the mode switch slides, a step that opens
 * slides in, and results move to their new places when a filter changes. All
 * of it is switched off under prefers-reduced-motion (end of this file).
 * ========================================================================== */

.bh-v4,
.bh-v4-hero {
    --v4-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --v4-fast: 160ms;
    --v4-mid: 280ms;
    --v4-header: 70px;
    --v4-scrim-strong: color-mix(in srgb, var(--bh-navy) 90%, transparent);
    --v4-scrim-mid: color-mix(in srgb, var(--bh-navy) 62%, transparent);
    --v4-scrim-none: color-mix(in srgb, var(--bh-navy) 0%, transparent);
    --v4-on-navy-line: color-mix(in srgb, var(--bh-white) 28%, transparent);
    /* One type scale for both pages (comment 11931304, point 5), from the tokens' sizes: the brand
     * guide's "titles significantly larger than subtitles", bold, with subtitles in bold capitals.
     * Poppins is self-hosted at 300 to 700, so 700 is the heaviest weight used. */
    --v4-display: clamp(var(--bh-text-2xl), 4.8vw, var(--bh-text-3xl));
    --v4-title: clamp(var(--bh-text-xl), 3vw, var(--bh-text-2xl));
    --v4-title-minor: clamp(var(--bh-text-lg), 2vw, var(--bh-text-xl));
    font-family: var(--bh-font);
    color: var(--bh-navy);
}

@media (min-width: 1199px) {
    .bh-v4,
    .bh-v4-hero {
        --v4-header: 96px;
    }
}

/* The compiled sheet gives every section 100px below it. */
.bh-v4 section,
section.bh-v4-hero {
    margin-bottom: 0;
}

.bh-v4 h2,
.bh-v4 h3,
.bh-v4 h4,
.bh-v4 p {
    font-family: var(--bh-font);
}

/* ------------------------------------------------------------------ hero */

.bh-v4-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-v4-hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-v4-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--v4-scrim-strong) 0%, var(--v4-scrim-mid) 48%, var(--v4-scrim-none) 100%);
}

.bh-v4-hero__inner {
    position: relative;
}

.bh-v4-hero--book {
    padding: calc(var(--v4-header) + var(--bh-space-8)) 0 calc(var(--bh-space-16) + var(--bh-space-16) + var(--bh-space-8));
}

.bh-v4-hero--book .bh-v4-hero__photo {
    object-position: center 30%;
}

.bh-v4-hero__title {
    margin: 0;
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
    font-size: var(--v4-display);
    font-weight: var(--bh-weight-bold);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

/* "Inspiring an Outdoor Generation" over the homepage photograph, in the guide's highlighted text. */
.bh-v4-hero__brand {
    margin: 0 0 var(--bh-space-4);
    font-size: clamp(var(--bh-text-sm), 1.6vw, var(--bh-text-lg));
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* The guide's highlighted text: navy block, Activities Yellow, square corners. */
.bh-v4-highlight {
    display: inline-block;
    padding: 0.06em 0.28em 0.1em;
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    text-transform: uppercase;
}

.bh-v4-hero__lede {
    max-width: 34rem;
    margin: var(--bh-space-4) 0 0;
    color: var(--bh-on-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

/* --------------------------------------------------------------- console */

.bh-v4-console {
    position: relative;
    z-index: 2;
}

/* While the phone sheet is open the console sits over the header too. */
.bh-v4-console.has-sheet {
    z-index: 1050;
}

.bh-v4-console {
    margin-top: calc(-1 * (var(--bh-space-16) + var(--bh-space-16)));
}

.bh-v4-modes {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 36rem);
    padding: var(--bh-space-1) var(--bh-space-1) 0;
    border-radius: var(--bh-radius-md) var(--bh-radius-md) 0 0;
    background: var(--bh-navy);
}

.bh-v4-modes__tab {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    padding: var(--bh-space-2) var(--bh-space-5);
    color: var(--bh-on-navy);
    text-decoration: none;
    transition: color var(--v4-mid) var(--v4-ease);
}

.bh-v4-modes__tab:hover,
.bh-v4-modes__tab:focus {
    color: var(--bh-on-navy);
    text-decoration: none;
}

.bh-v4-modes__tab[aria-selected="true"],
.bh-v4-modes__tab[aria-selected="true"]:hover {
    color: var(--bh-on-white);
}

.bh-v4-modes__name {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.bh-v4-modes__line {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

/* The white tab that slides under the mode chosen, joined to the panel below it. */
.bh-v4-modes__thumb {
    position: absolute;
    top: var(--bh-space-1);
    bottom: 0;
    left: var(--bh-space-1);
    width: calc(50% - var(--bh-space-1));
    border-radius: var(--bh-radius-sm) var(--bh-radius-sm) 0 0;
    background: var(--bh-white);
    transition: transform var(--v4-mid) var(--v4-ease);
}

.bh-v4-console[data-mode="find"] .bh-v4-modes__thumb {
    transform: translateX(100%);
}

.bh-v4-console__stage {
    position: relative;
    overflow: hidden;
    overflow: clip; /* clips the sliding panels without becoming a scroll box */
    border-radius: 0 var(--bh-radius-md) var(--bh-radius-md) var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-md);
}

.bh-v4-panel[hidden] {
    display: none;
}

/* Switching mode: the new panel slides in from the side it was chosen on. */
.bh-v4-panel.is-from-right {
    animation: bh-v4-from-right var(--v4-mid) var(--v4-ease);
}

.bh-v4-panel.is-from-left {
    animation: bh-v4-from-left var(--v4-mid) var(--v4-ease);
}

@keyframes bh-v4-from-right {
    from { opacity: 0; transform: translateX(48px); }
    to { opacity: 1; transform: none; }
}

@keyframes bh-v4-from-left {
    from { opacity: 0; transform: translateX(-48px); }
    to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- steps */

.bh-v4-steps {
    display: grid;
    grid-template-columns: 1fr;
}

.bh-v4-step {
    min-width: 0;
    margin: 0;
    padding: var(--bh-space-5) var(--bh-space-5) var(--bh-space-6);
    border: 0;
    border-top: 1px solid var(--bh-line);
}

.bh-v4-step:first-child {
    border-top: 0;
}

.bh-v4-step__label {
    float: left;
    width: 100%;
    margin: 0 0 var(--bh-space-3);
    padding: 0;
    color: var(--bh-blue-text);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* The legend floats so it sits inside the step's padding like every other label; all that
   follows starts below it (a flex row would otherwise sit beside it). */
.bh-v4-step > :not(.bh-v4-step__label) {
    clear: both;
}

.bh-v4-step__group {
    margin: var(--bh-space-3) 0 var(--bh-space-2);
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-v4-step__group:first-of-type {
    margin-top: 0;
}

.bh-v4-step__wait,
.bh-v4-step__hint,
.bh-v4-step__note {
    margin: 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-v4-step__note:empty {
    display: none;
}

.bh-v4-step__note {
    margin-top: var(--bh-space-3);
    color: var(--bh-navy);
}

.bh-v4-step__note a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-semibold);
}

/* A step that is waiting for the one before it: its words, not its controls. */
.bh-v4-step.is-waiting [data-controls],
.bh-v4-step.is-waiting [data-dates],
.bh-v4-step.is-waiting [data-times] {
    display: none;
}

.bh-v4-step.is-waiting .bh-v4-step__label {
    color: var(--bh-muted);
}

/* Waiting, a step is one line: its label and what it waits for. */
.bh-v4-step.is-waiting {
    padding-top: var(--bh-space-4);
    padding-bottom: var(--bh-space-4);
}

.bh-v4-step.is-waiting .bh-v4-step__label {
    width: auto;
    margin: 0 var(--bh-space-3) 0 0;
    line-height: 1.7;
}

.bh-v4-step.is-waiting > [data-wait] {
    clear: none;
    font-size: var(--bh-text-xs);
}

/* A step that has just opened slides in, once. */
.bh-v4-step.is-entering > :not(legend):not(.bh-v4-step__label) {
    animation: bh-v4-step-in var(--v4-mid) var(--v4-ease);
}

@keyframes bh-v4-step-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

.bh-v4-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
}

.bh-v4-input {
    min-height: 48px;
    padding: 0 var(--bh-space-3);
    border: 2px solid var(--bh-field-edge);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
}

.bh-v4-input--short {
    width: 6rem;
}

.js-v4 .bh-v4-nojs {
    display: none;
}

/* Experience choices: the photograph small beside the name. */
.bh-v4-exps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: var(--bh-space-2);
}

.bh-v4-exp {
    position: relative;
    display: flex;
}

.bh-v4-exp input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bh-v4-exp label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--bh-space-3);
    min-height: 56px;
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-3) var(--bh-space-1) var(--bh-space-1);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.25;
    cursor: pointer;
    transition: background-color var(--v4-fast) var(--v4-ease), border-color var(--v4-fast) var(--v4-ease);
}

.bh-v4-exp__words {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bh-v4-exp__line {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-exp input:checked + label .bh-v4-exp__line {
    color: var(--bh-on-navy);
}

.bh-v4-exp img,
.bh-v4-exp__initial {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--bh-radius-sm);
    object-fit: cover;
}

.bh-v4-exp__initial {
    display: grid;
    place-items: center;
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
}

.bh-v4-exp label:hover {
    border-color: var(--bh-navy);
}

.bh-v4-exp input:checked + label {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

.bh-v4-exp input:focus-visible + label {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

.bh-v4-more {
    margin-top: var(--bh-space-3);
}

.bh-v4-more__summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    cursor: pointer;
}

.bh-v4-more[open] .bh-v4-exps {
    margin-top: var(--bh-space-2);
}

/* Dates: weekday, day and month in one tile. */
.bh-v4-dates {
    scrollbar-width: thin;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
    gap: var(--bh-space-2);
}

.bh-v4-date {
    position: relative;
    display: flex;
}

.bh-v4-date input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bh-v4-date label {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin: 0;
    padding: var(--bh-space-2) var(--bh-space-1);
    border: 2px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-navy);
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--v4-fast) var(--v4-ease), border-color var(--v4-fast) var(--v4-ease);
}

.bh-v4-date__weekday,
.bh-v4-date__month {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-v4-date__day {
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
}

.bh-v4-date label:hover {
    border-color: var(--bh-navy);
}

.bh-v4-date input:checked + label {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-yellow);
}

.bh-v4-date input:focus-visible + label {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

/* Times: each one a link straight into booking with that session chosen. */
.bh-v4-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-v4-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--bh-space-1);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-navy);
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--v4-fast) var(--v4-ease), color var(--v4-fast) var(--v4-ease);
}

.bh-v4-time__at {
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

.bh-v4-time__left {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

a.bh-v4-time:hover,
a.bh-v4-time:focus {
    background: var(--bh-navy);
    color: var(--bh-yellow);
    text-decoration: none;
}

.bh-v4-time.is-full {
    border-style: dashed;
    border-color: var(--bh-line);
    color: var(--bh-muted);
}

.bh-v4-times__lengths {
    margin-bottom: var(--bh-space-3);
}

.bh-v4-times__more {
    margin: var(--bh-space-3) 0 0;
    font-size: var(--bh-text-xs);
}

.bh-v4-bylength {
    display: grid;
    gap: var(--bh-space-3);
    justify-items: start;
}

.bh-v4-quick__status,
.bh-v4-quick__note {
    margin: 0;
    padding: 0 var(--bh-space-5) var(--bh-space-4);
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-quick__status:empty {
    display: none;
}

.bh-v4-quick__status {
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
}

/* Loading: the step keeps its place and says so. */
.bh-v4-loading {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
}

/* Find Adventure */
.bh-v4-party {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-2) var(--bh-space-3);
    margin-top: var(--bh-space-4);
}

.bh-v4-party .bh-v4-step__hint:last-child {
    flex-basis: 100%;
}

.bh-v4-pickdate {
    display: flex;
    align-items: center;
    gap: var(--bh-space-3);
    margin-top: var(--bh-space-3);
}

.js-v4 .bh-v4-pickdate:not(.is-open) {
    display: none;
}

.bh-v4-find [data-public][hidden] {
    display: none;
}

.bh-v4-sheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-4);
    padding: 0 var(--bh-space-5) var(--bh-space-5);
}

/* With the script every choice updates the results, so on a larger screen there is nothing to
 * press. On a phone the same button closes the sheet onto them. */
.js-v4 .bh-v4-sheet:not(.is-sheet) [data-find-submit] {
    display: none;
}

/* The sheet's title takes focus when it opens, to start reading there; it is not a control. */
.bh-v4-sheet__title:focus {
    outline: none;
}

.bh-v4-filterbar[hidden],
.bh-v4-sheet__head[hidden] {
    display: none;
}

@media (min-width: 992px) {
    .bh-v4-steps--quick {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
    }

    .bh-v4-steps--quick .bh-v4-step--experience {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--bh-line);
    }

    .bh-v4-steps--find {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .bh-v4-steps .bh-v4-step {
        border-top: 0;
        border-left: 1px solid var(--bh-line);
    }

    .bh-v4-steps .bh-v4-step:first-child,
    .bh-v4-steps--quick .bh-v4-step--venue {
        border-left: 0;
    }

    .bh-v4-steps--quick .bh-v4-exps {
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    }
}

/* -------------------------------------------- Find Adventure on a phone */

@media (max-width: 767.98px) {
    .bh-v4-filterbar {
        position: sticky;
        top: var(--v4-header);
        z-index: 5;
        display: flex;
        align-items: center;
        gap: var(--bh-space-3);
        padding: var(--bh-space-3) var(--bh-space-4);
        background: var(--bh-white);
    }

    .bh-v4-filterbar__open {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: var(--bh-space-2);
        min-height: var(--bh-target-comfortable);
        padding: 0 var(--bh-space-4);
        border: 2px solid var(--bh-navy);
        border-radius: var(--bh-radius-sm);
        background: var(--bh-navy);
        color: var(--bh-on-navy);
        font-family: var(--bh-font);
        font-size: var(--bh-text-xs);
        font-weight: var(--bh-weight-bold);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .bh-v4-filterbar__summary {
        min-width: 0;
        margin: 0;
        font-size: var(--bh-text-2xs);
        font-weight: var(--bh-weight-semibold);
        line-height: 1.35;
    }

    .bh-v4-filterbar__count {
        display: block;
        color: var(--bh-muted);
        font-weight: var(--bh-weight-medium);
    }

    /* The steps as a sheet from the foot of the screen. */
    .bh-v4-sheet.is-sheet {
        display: none;
    }

    .bh-v4-sheet.is-sheet.is-open {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1060;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--bh-space-8));
        max-height: calc(100dvh - var(--bh-space-8));
        border-radius: var(--bh-radius-md) var(--bh-radius-md) 0 0;
        background: var(--bh-white);
        box-shadow: var(--bh-shadow-md);
        animation: bh-v4-sheet-up var(--v4-mid) var(--v4-ease);
    }

    .bh-v4-sheet.is-sheet.is-open .bh-v4-steps {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .bh-v4-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--bh-space-3) var(--bh-space-3) var(--bh-space-3) var(--bh-space-5);
        border-bottom: 1px solid var(--bh-line);
    }

    .bh-v4-sheet__title {
        margin: 0;
        font-size: var(--bh-text-sm);
        font-weight: var(--bh-weight-bold);
        text-transform: uppercase;
    }

    .bh-v4-sheet__close {
        min-width: var(--bh-target-comfortable);
        min-height: var(--bh-target-comfortable);
        border: 0;
        background: transparent;
        color: var(--bh-navy);
        font-size: var(--bh-text-xl);
        line-height: 1;
    }

    .bh-v4-sheet.is-sheet .bh-v4-sheet__foot {
        padding-top: var(--bh-space-3);
        border-top: 1px solid var(--bh-line);
    }

    .bh-v4-sheet.is-sheet [data-find-submit] {
        flex: 1;
        gap: 0.35em;
    }

    /* SHOW RESULTS lands on the results' title, below the header and the filter bar. */
    .bh-v4-results {
        scroll-margin-top: calc(var(--v4-header) + var(--bh-target-comfortable) + var(--bh-space-8));
    }

    /* On a phone the dates are one row that scrolls sideways. */
    .bh-v4-dates {
        display: flex;
        overflow-x: auto;
        margin: 0 calc(-1 * var(--bh-space-5));
        padding: 0 var(--bh-space-5) var(--bh-space-2);
        scroll-snap-type: x proximity;
    }

    .bh-v4-date {
        flex: 0 0 4.25rem;
        scroll-snap-align: start;
    }

    .bh-v4-exps {
        grid-template-columns: 1fr 1fr;
    }

    .bh-v4-modes {
        width: 100%;
    }

    .bh-v4-modes__tab {
        min-height: 56px;
        padding: var(--bh-space-2) var(--bh-space-3);
    }
}

.bh-v4-scrim {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: var(--v4-scrim-mid);
    animation: bh-v4-fade var(--v4-fast) linear;
}

@keyframes bh-v4-sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes bh-v4-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --------------------------------------------------------------- results */

.bh-v4-results {
    margin-top: var(--bh-space-12);
    padding-bottom: var(--bh-space-16);
    transition: opacity var(--v4-fast) linear;
}

.bh-v4-results:focus {
    outline: none;
}

.bh-v4-results.is-loading {
    opacity: 0.55;
}

/* ------------------------------------------------------ section heads
 * One head for every section on both pages: a subtitle in the guide's highlighted text (navy block,
 * Activities Yellow, square corners, bold capitals), a large bold title in sentence case, an
 * optional line under it, and an optional link on the right. */

.bh-v4-kicker {
    display: inline-block;
    justify-self: start;
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.bh-v4-kicker--on-navy {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-v4-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--bh-space-6);
    margin-bottom: var(--bh-space-8);
}

.bh-v4-head > * {
    grid-column: 1;
}

.bh-v4-head__title {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--v4-title);
    font-weight: var(--bh-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.bh-v4-head--minor .bh-v4-head__title {
    font-size: var(--v4-title-minor);
}

.bh-v4-head__lede {
    max-width: 40rem;
    margin: var(--bh-space-2) 0 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-v4-head > .bh-v4-head__link {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    white-space: nowrap;
}

.bh-v4-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-v4-grid--way {
    grid-template-columns: 1fr;
}

@media (min-width: 1199px) {
    .bh-v4-results > .bh-v4-grid,
    .bh-v4-block > .bh-v4-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bh-v4-block {
    margin-top: var(--bh-space-12);
}

.bh-v4-block__title,
.bh-v4-way__title {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-v4-block__lede,
.bh-v4-way__lede {
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-v4-empty,
.bh-v4-hint {
    margin: 0 0 var(--bh-space-6);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-hint a,
.bh-v4-link {
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bh-v4-notice,
.bh-v4-fallback {
    margin: 0 0 var(--bh-space-8);
    padding: var(--bh-space-6);
    border-left: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-surface-2);
}

.bh-v4-notice__title,
.bh-v4-fallback__title {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

.bh-v4-notice p {
    max-width: 44rem;
    margin: 0 0 var(--bh-space-4);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-notice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-3) var(--bh-space-5);
}

.bh-v4-fallback__moves {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: var(--bh-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.bh-v4-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-1);
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: none;
}

.bh-v4-pill:hover,
.bh-v4-pill:focus {
    background: var(--bh-navy);
    color: var(--bh-yellow);
    text-decoration: none;
}

/* ------------------------------------------------------------------ card */

.bh-v4-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bh-line);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-v4-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bh-surface-2);
}

/* Out of the flow, so the photograph fills the frame's shape and never stretches the card: an
 * aspect-ratio box grows to fit what is in it. */
.bh-v4-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-v4-card__media--panel {
    display: grid;
    place-items: center;
    background: var(--bh-navy);
}

.bh-v4-card__panel-name {
    padding: var(--bh-space-4);
    color: var(--bh-yellow);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    text-align: center;
    text-transform: uppercase;
}

/* The one state on the photograph. Words first; the colour only repeats them. */
.bh-v4-state {
    position: absolute;
    top: var(--bh-space-3);
    left: var(--bh-space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    max-width: calc(100% - var(--bh-space-6));
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-3);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: uppercase;
}

.bh-v4-state--now::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--bh-radius-full);
    background: currentColor;
}

.bh-v4-state--now { background: var(--bh-yellow); color: var(--bh-on-yellow); }
.bh-v4-state--future { background: var(--bh-navy); color: var(--bh-yellow); }
.bh-v4-state--group { background: var(--bh-blue); color: var(--bh-on-blue); }
.bh-v4-state--partner { background: var(--bh-pink); color: var(--bh-on-pink); }
.bh-v4-state--returning { background: var(--bh-navy); color: var(--bh-on-navy); }

.bh-v4-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--bh-space-2);
    padding: var(--bh-space-4) var(--bh-space-5) var(--bh-space-5);
}

.bh-v4-card__title {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.2;
}

/* The name as a link to the experience's page, where one is known (homepage, Teamwork 11933527).
 * Navy like any card's name, underlined in the accessible blue so it reads as a link; the blue text
 * (#0B7A8E, 5.01:1 on white) under the pointer and on focus. Keyboard focus takes the site's one
 * ring (refinements.css section 6), inside the card's padding, so the card's overflow cannot clip it. */
.bh-v4-card__title-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--bh-blue-text);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.bh-v4-card__title-link:hover,
.bh-v4-card__title-link:focus-visible {
    color: var(--bh-blue-text);
    text-decoration-color: currentColor;
}

.bh-v4-card__descriptor {
    max-width: 36rem;
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-v4-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-1) var(--bh-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-v4-card__facts li,
.bh-v4-card__suits {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-1);
    margin: 0;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

.bh-v4-icon {
    flex: none;
    fill: currentColor;
}

/* The next session: beside the name, as large as the facts allow, on its own band (comment 11931304,
 * point 6: "give it more visual weight alongside the activity name and price"). */
.bh-v4-card__when {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--bh-space-3);
    margin: var(--bh-space-1) 0;
    padding: var(--bh-space-2) var(--bh-space-3);
    border-left: 4px solid var(--bh-blue);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-surface-2);
    color: var(--bh-navy);
    line-height: 1.25;
}

.bh-v4-card__when .bh-v4-icon {
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    color: var(--bh-blue-text);
}

.bh-v4-card__when-label {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bh-v4-card__when-at {
    color: var(--bh-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
}

.bh-v4-card__when--note {
    display: block;
    border-left-color: var(--bh-line);
    background: transparent;
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

.bh-v4-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bh-space-3);
    margin-top: auto;
    padding-top: var(--bh-space-4);
    border-top: 1px solid var(--bh-line);
}

.bh-v4-card__price {
    display: flex;
    flex-direction: column;
    margin: 0;
    line-height: 1.1;
}

.bh-v4-card__price-from,
.bh-v4-card__price-for {
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-card__price-amount {
    color: var(--bh-navy);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
}

/* ----------------------------------------------------------------- buttons */

.bh-v4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-left: auto;
    padding: 0 var(--bh-space-5);
    border: 2px solid var(--bh-navy);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--v4-fast) var(--v4-ease), color var(--v4-fast) var(--v4-ease);
}

.bh-v4-btn:hover,
.bh-v4-btn:focus {
    border-color: var(--bh-navy);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    text-decoration: none;
}

/* Not a booking: a route to someone else, so an outline, never the booking fill. */
.bh-v4-btn--group,
.bh-v4-btn--partner,
.bh-v4-btn--contact,
.bh-v4-btn--member,
.bh-v4-btn--info,
.bh-v4-btn--returning,
.bh-v4-btn--light {
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-v4-btn--group:hover,
.bh-v4-btn--group:focus,
.bh-v4-btn--partner:hover,
.bh-v4-btn--partner:focus,
.bh-v4-btn--contact:hover,
.bh-v4-btn--contact:focus,
.bh-v4-btn--member:hover,
.bh-v4-btn--member:focus,
.bh-v4-btn--info:hover,
.bh-v4-btn--info:focus,
.bh-v4-btn--returning:hover,
.bh-v4-btn--returning:focus {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-v4-notice .bh-v4-btn,
.bh-v4-sheet__foot .bh-v4-btn,
.bh-v4-way .bh-v4-btn,
.bh-v4-nojs .bh-v4-btn,
.bh-v4-bylength .bh-v4-btn {
    margin-left: 0;
}

/* ------------------------------------------------------- other ways to book */

.bh-v4-ways {
    margin-top: var(--bh-space-16);
}

.bh-v4-ways__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--bh-space-6);
    align-items: start;
}

.bh-v4-way {
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-surface-2);
}

.bh-v4-way__list {
    display: grid;
    gap: var(--bh-space-3);
    margin: 0 0 var(--bh-space-5);
    padding: 0;
    list-style: none;
}

.bh-v4-way__list a {
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bh-v4-way__meta {
    display: block;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

.bh-v4-way .bh-v4-card__media {
    aspect-ratio: 16 / 9;
}

.bh-v4-later {
    margin-top: var(--bh-space-12);
    border-top: 1px solid var(--bh-line);
    border-bottom: 1px solid var(--bh-line);
}

.bh-v4-later__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bh-space-1) var(--bh-space-4);
    min-height: 64px;
    padding: var(--bh-space-4) 0;
    cursor: pointer;
}

.bh-v4-later__title {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-v4-later__lede {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-later__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--bh-space-4) var(--bh-space-6);
    margin: 0;
    padding: 0 0 var(--bh-space-6);
    list-style: none;
}

.bh-v4-later__name {
    display: block;
    font-weight: var(--bh-weight-semibold);
}

.bh-v4-later__meta {
    display: block;
    color: var(--bh-muted);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-medium);
}

/* ------------------------------------------------------------ the homepage */

.bh-v4-hero--home {
    display: flex;
    align-items: flex-end;
    min-height: clamp(36rem, 88vh, 52rem);
    padding: 150px 0 var(--bh-space-12);
}

/* White text over a bright aerial: navy deepest under the words, clear over the lake. */
.bh-v4-hero--home::after {
    background:
        linear-gradient(0deg, var(--v4-scrim-strong) 0%, var(--v4-scrim-none) 62%),
        linear-gradient(90deg, var(--v4-scrim-strong) 0%, var(--v4-scrim-mid) 38%, var(--v4-scrim-none) 66%);
}

/* Two people on the high ropes, centre right: the words keep the lake side. */
.bh-v4-hero--home .bh-v4-hero__photo {
    object-position: 60% 40%;
}

.bh-v4-hero__title--home {
    max-width: 15ch;
}

.bh-v4-doors__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bh-space-3);
    margin: var(--bh-space-8) 0 0;
    padding: 0;
    list-style: none;
}

.bh-v4-door {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--bh-space-1);
    min-height: 100%;
    padding: var(--bh-space-4) var(--bh-space-12) var(--bh-space-4) var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    color: var(--bh-on-white);
    text-decoration: none;
    transition: background-color var(--v4-fast) var(--v4-ease);
}

.bh-v4-door:hover,
.bh-v4-door:focus {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    text-decoration: none;
}

.bh-v4-door__name {
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.bh-v4-door__line {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

.bh-v4-door__arrow {
    position: absolute;
    top: 50%;
    right: var(--bh-space-5);
    transform: translateY(-50%);
    transition: transform var(--v4-fast) var(--v4-ease);
}

.bh-v4-door:hover .bh-v4-door__arrow {
    transform: translate(4px, -50%);
}

.bh-v4-section {
    padding: var(--bh-space-16) 0;
}

.bh-v4-section + .bh-v4-section {
    padding-top: 0;
}

/* ------------------------------------------------------------- what's on */

.bh-v4-group + .bh-v4-group {
    margin-top: var(--bh-space-12);
}

/* ------------------------------------------------------------- our story
 * The one brand moment (comment 11931304, point 3): navy, Ballyhass's own words, the film and
 * three photographs of people, between what's on and the other routes. */

.bh-v4-section.bh-v4-story,
.bh-v4-story + .bh-v4-section {
    padding-top: var(--bh-space-16);
}

.bh-v4-story {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-v4-story__inner {
    display: grid;
    gap: var(--bh-space-8);
}

.bh-v4-story .bh-v4-head__title {
    margin-bottom: var(--bh-space-5);
    color: var(--bh-on-navy);
}

.bh-v4-story__text {
    max-width: 34rem;
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-on-navy);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-v4-story__quote {
    margin: var(--bh-space-6) 0;
    padding-left: var(--bh-space-5);
    border-left: 4px solid var(--bh-yellow);
}

.bh-v4-story__quote blockquote {
    margin: 0;
}

.bh-v4-story__quote p {
    margin: 0;
    color: var(--bh-yellow);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.35;
}

.bh-v4-story__quote figcaption {
    margin-top: var(--bh-space-2);
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-v4 .bh-v4-link--on-navy {
    color: var(--bh-yellow);
    font-size: var(--bh-text-sm);
}

.bh-v4-film {
    margin: 0;
}

.bh-v4-film__play {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    text-decoration: none;
}

.bh-v4-film__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--v4-mid) var(--v4-ease);
}

.bh-v4-film__play:hover .bh-v4-film__poster {
    transform: scale(1.03);
}

.bh-v4-film__button {
    position: absolute;
    bottom: var(--bh-space-5);
    left: var(--bh-space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: 48px;
    padding: 0 var(--bh-space-5);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.06em;
}

.bh-v4-film__play:hover .bh-v4-film__button,
.bh-v4-film__play:focus .bh-v4-film__button {
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-v4-film__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
}

/* The captions in the site's type, navy behind white (15.04:1), whatever the photograph under them. */
.bh-v4-film__player::cue {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-film__caption {
    margin: var(--bh-space-2) 0 0;
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-film__words {
    margin-top: var(--bh-space-2);
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-film__words summary {
    min-height: var(--bh-target-min);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.bh-v4-film__words p {
    max-width: 40rem;
    margin: var(--bh-space-2) 0 0;
    line-height: var(--bh-leading-body);
}

.bh-v4-story__photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bh-space-3);
    margin: var(--bh-space-4) 0 0;
    padding: 0;
    list-style: none;
}

.bh-v4-story__photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

@media (min-width: 992px) {
    .bh-v4-story__inner {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--bh-space-12);
        align-items: center;
    }
}

.bh-v4-business {
    margin-top: var(--bh-space-8);
}

.bh-v4-routes__list {
    display: grid;
    grid-auto-columns: minmax(11rem, 1fr);
    grid-auto-flow: column;
    gap: var(--bh-space-4);
    overflow-x: auto;
    margin: 0;
    padding: 0 0 var(--bh-space-2);
    list-style: none;
    scroll-snap-type: x proximity;
}

.bh-v4-routes__list li {
    scroll-snap-align: start;
}

.bh-v4-route {
    display: grid;
    gap: var(--bh-space-1);
    color: var(--bh-navy);
    text-decoration: none;
}

.bh-v4-route:hover,
.bh-v4-route:focus {
    color: var(--bh-navy);
    text-decoration: none;
}

.bh-v4-route__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: var(--bh-space-2);
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

.bh-v4-route__name {
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-decoration-thickness: 4px;
    text-underline-offset: 0.3em;
}

.bh-v4-route:hover .bh-v4-route__name {
    text-decoration-color: var(--bh-navy);
}

.bh-v4-route__line {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: 1.4;
}

.bh-v4-venues__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-v4-venue {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-v4-venue__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bh-v4-venue__body {
    display: grid;
    flex: 1;
    align-content: start;
    justify-items: start;
    gap: var(--bh-space-3);
    padding: var(--bh-space-6);
}

.bh-v4-venue__name {
    margin: 0;
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
}

.bh-v4-venue__on {
    margin: 0;
    color: var(--bh-on-navy);
    font-weight: var(--bh-weight-medium);
}

.bh-v4-venue .bh-v4-btn {
    margin-left: 0;
}

@media (min-width: 768px) {
    .bh-v4-doors__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .bh-v4-door {
        padding: var(--bh-space-5) var(--bh-space-12) var(--bh-space-6) var(--bh-space-6);
    }

    .bh-v4-venues__list {
        grid-template-columns: 1fr 1fr;
    }

    .bh-v4-whatson__grid--week {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Later: two to a row, each on its side, so it reads as second to this week. */
    .bh-v4-whatson__grid--later {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-v4-whatson__grid--later > .bh-v4-card:not(.bh-v4-card--lead) {
        flex-direction: row;
    }

    .bh-v4-whatson__grid--later > .bh-v4-card:not(.bh-v4-card--lead) .bh-v4-card__media {
        flex: 0 0 40%;
        aspect-ratio: auto;
    }

    /* The lead across the row: photograph on the left, its facts beside it. */
    .bh-v4-card--lead {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .bh-v4-card--lead .bh-v4-card__media {
        flex: 0 0 58%;
        aspect-ratio: auto;
        min-height: 22rem;
    }

    .bh-v4-card--lead .bh-v4-card__body {
        justify-content: center;
        padding: var(--bh-space-8);
    }

    .bh-v4-card--lead .bh-v4-card__title {
        font-size: var(--v4-title);
    }

    .bh-v4-card--lead .bh-v4-card__when-at {
        font-size: var(--bh-text-lg);
    }

    .bh-v4-card--lead .bh-v4-card__foot {
        margin-top: var(--bh-space-4);
    }
}

@media (min-width: 1199px) {
    .bh-v4-routes__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-flow: row;
        overflow: visible;
    }
}

@media (max-width: 767.98px) {
    .bh-v4-hero--book {
        padding: calc(var(--v4-header) + var(--bh-space-6)) 0 calc(var(--bh-space-12) + var(--bh-space-8));
    }

    /* On a phone the console is the first thing under the title. */
    .bh-v4-hero--book .bh-v4-hero__lede {
        display: none;
    }

    .bh-v4-hero__lede {
        font-size: var(--bh-text-xs);
    }

    .bh-v4-console {
        margin-top: calc(-1 * var(--bh-space-12));
    }

    /* On a phone the photograph is a band under the header, clear of the words, so the two on the
     * high ropes are seen rather than lettered over; the navy rises from its foot into the words. */
    .bh-v4-hero--home {
        min-height: 0;
        padding: calc(var(--v4-header) + 58vw) 0 var(--bh-space-8);
    }

    .bh-v4-hero--home .bh-v4-hero__photo {
        top: var(--v4-header);
        bottom: auto;
        height: 64vw;
        object-position: 60% 45%;
    }

    .bh-v4-head {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bh-space-6);
    }

    .bh-v4-head > .bh-v4-head__link {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: var(--bh-space-3);
    }

    .bh-v4-section.bh-v4-story,
    .bh-v4-story + .bh-v4-section {
        padding-top: var(--bh-space-12);
    }

    .bh-v4-story__text {
        font-size: var(--bh-text-sm);
    }

    /* On a phone the film comes straight after the title, then the words. */
    .bh-v4-story__inner {
        gap: 0;
    }

    .bh-v4-story__words {
        display: contents;
    }

    .bh-v4-story__words > * {
        order: 3;
    }

    .bh-v4-story__words > .bh-v4-kicker,
    .bh-v4-story__words > .bh-v4-head__title {
        order: 1;
    }

    .bh-v4-story__media {
        order: 2;
        margin-bottom: var(--bh-space-6);
    }

    .bh-v4-film__button {
        bottom: var(--bh-space-3);
        left: var(--bh-space-3);
    }

    .bh-v4-hero--home::after {
        background: linear-gradient(180deg, var(--v4-scrim-none) 0, var(--v4-scrim-none) calc(var(--v4-header) + 40vw), var(--v4-scrim-strong) calc(var(--v4-header) + 58vw), var(--bh-navy) calc(var(--v4-header) + 64vw));
    }

    .bh-v4-door {
        padding: var(--bh-space-3) var(--bh-space-12) var(--bh-space-3) var(--bh-space-4);
    }

    .bh-v4-section {
        padding: var(--bh-space-12) 0;
    }

    /* A phone: the photograph still leads, the facts are tighter. */
    .bh-v4-card__media {
        aspect-ratio: 2 / 1;
    }

    .bh-v4-card__body {
        gap: var(--bh-space-1);
        padding: var(--bh-space-3) var(--bh-space-4) var(--bh-space-4);
    }

    .bh-v4-card__foot {
        padding-top: var(--bh-space-3);
    }

    .bh-v4-grid {
        gap: var(--bh-space-4);
    }

    .bh-v4-results {
        margin-top: var(--bh-space-8);
    }
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
    .bh-v4 *,
    .bh-v4-hero *,
    .bh-v4-scrim {
        animation: none !important;
        transition: none !important;
    }

    .bh-v4-film__play:hover .bh-v4-film__poster {
        transform: none;
    }
}