/**
 * The Residential Summer Camp page (residential-camp.php), loaded only on /residential-camp-new/,
 * the page every visitor gets since 10 November 2026 (Eoghan, comment 11933496).
 *
 * Tokens only (tokens.css): no colour is written here, and the few translucent tones are
 * color-mix() of a token. The page opens on navy, the colour of the evening, so it reads as an
 * overnight camp from the first screen. Its one bold device is the set of photographs pinned like
 * prints on a camp noticeboard. The rest is the brand's own: Poppins, bold capitals for subtitles
 * and buttons, the navy block with yellow text for highlighted words.
 *
 * Every pairing is one the tokens already measure:
 *   white on navy 15.04:1     yellow on navy 13.34:1     blue on navy 6.2:1 (labels only)
 *   navy on white 15.04:1     navy on yellow 13.34:1
 *   navy on mint 13.8:1       blue text on white 5.01:1      deeper blue text on grey 5.2:1, mint 5.26:1
 *   muted on white 6.4:1, on grey 5.8:1, on mint 5.86:1
 * No white on blue and no white on pink anywhere.
 *
 * Keyboard focus is the site's one ring (navy with a white halo, refinements.css section 6), which
 * holds 3:1 on every ground here, so this file sets no focus style of its own.
 *
 * Cohesion pass, 3 November 2026 (Eoghan, comment 11931846: "energetic but reassuring for parents",
 * less "box after box"): the activity groups, the six ways campers are looked after, the travel
 * routes and the four booking steps are no longer boxes. The activities open under a coloured rule
 * each (water blue, land yellow, height pink), looking after campers is a checklist of ticks, the
 * booking steps run along one line, and From outside Ireland loses its outer frame. Each part keeps
 * its one box only where it is the thing to act on: the price, the packing list, booking from abroad.
 */

.bh-resi {
    font-family: var(--bh-font);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
    color: var(--bh-on-white);
    background: var(--bh-white);
}

/* main.min.css gives every section a 100px bottom margin and colours headings itself. */
.bh-resi section {
    margin: 0;
}

.bh-resi :is(h1, h2, h3, h4) {
    font-family: var(--bh-font);
    color: inherit;
}

/* The resets carry no weight of their own (:where), so every component class below wins over them. */
:where(.bh-resi) :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.bh-resi) p {
    margin: 0 0 var(--bh-space-4);
}

:where(.bh-resi) img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---- Type ------------------------------------------------------------------------------- */

.bh-resi__eyebrow {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-blue-text);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bh-resi__eyebrow--on-navy {
    color: var(--bh-yellow);
}

.bh-resi__h2 {
    max-width: 24ch;
    margin: 0 0 var(--bh-space-4);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, var(--bh-text-2xl));
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-resi__h3 {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-lg);
    font-weight: var(--bh-weight-bold);
    line-height: 1.25;
}

.bh-resi__h4 {
    margin: 0 0 var(--bh-space-1);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bh-resi__lead {
    max-width: 62ch;
    font-size: var(--bh-text-md);
}

.bh-resi__small {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
}

.bh-resi__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bh-resi__link:hover {
    color: var(--bh-navy);
}

/* The brand's highlighted text: a navy block with yellow words and square corners. */
.bh-resi__mark {
    display: inline-block;
    padding: var(--bh-space-2) var(--bh-space-3);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-weight: var(--bh-weight-bold);
}

.bh-resi__ticks li {
    position: relative;
    margin: 0 0 var(--bh-space-3);
    padding-left: var(--bh-space-6);
}

.bh-resi__ticks li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background: var(--bh-blue);
}

.bh-resi__ticks--on-navy li::before {
    background: var(--bh-yellow);
}

.bh-resi__notice {
    padding: var(--bh-space-4) var(--bh-space-5);
    border-left: 4px solid var(--bh-blue);
    background: var(--bh-surface-2);
}

/* ---- Buttons: bold capitals, rounded square ---------------------------------------------- */

.bh-resi__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    margin-top: var(--bh-space-6);
}

.bh-resi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--bh-space-6);
    border: 2px solid transparent;
    border-radius: var(--bh-radius-sm);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-resi-btn--yellow {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

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

.bh-resi-btn--ghost {
    border-color: var(--bh-white);
    background: transparent;
    color: var(--bh-white);
}

.bh-resi-btn--ghost:hover {
    border-color: var(--bh-yellow);
    color: var(--bh-yellow);
    text-decoration: none;
}

/* ---- 1: the first screen ---------------------------------------------------------------- */

.bh-resi-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 112px 0 var(--bh-space-12);
    background:
        radial-gradient(60rem 40rem at 78% 30%, color-mix(in srgb, var(--bh-yellow) 10%, transparent), transparent 70%),
        linear-gradient(180deg, var(--bh-navy) 0%, var(--bh-green-deep) 140%);
    color: var(--bh-on-navy);
}

/* On a phone the campfire comes first, under the header, then the words, then the two smaller
   prints side by side: the evening is the first thing seen. */
.bh-resi-hero__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-6) var(--bh-space-4);
}

.bh-resi-hero__words {
    grid-column: 1 / -1;
    order: 2;
}

.bh-resi-hero__title {
    margin: 0 0 var(--bh-space-4);
    font-size: clamp(2.1rem, 1.3rem + 3.6vw, var(--bh-text-3xl));
    font-weight: var(--bh-weight-black);
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.bh-resi-hero__highlight {
    display: block;
    color: var(--bh-yellow);
}

.bh-resi-hero__lede {
    max-width: 52ch;
    font-size: var(--bh-text-md);
}

.bh-resi-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: var(--bh-space-6) 0 0;
    border: 1px solid color-mix(in srgb, var(--bh-white) 22%, transparent);
    background: color-mix(in srgb, var(--bh-white) 22%, transparent);
}

.bh-resi-hero__fact {
    padding: var(--bh-space-3) var(--bh-space-4);
    background: var(--bh-navy);
}

.bh-resi-hero__fact dt {
    color: var(--bh-blue);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bh-resi-hero__fact dd {
    margin: 0;
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
}

/* The prints: a lead photograph and two smaller ones, white-bordered and a little askew. On a
   phone their box steps aside (display: contents, on a plain div) so each print takes its place in
   the order above. */
.bh-resi-hero__prints {
    display: contents;
}

.bh-resi-print--jetty-bench,
.bh-resi-print--pods-lights {
    order: 3;
}

.bh-resi-print {
    margin: 0;
    padding: var(--bh-space-2) var(--bh-space-2) 0;
    background: var(--bh-white);
    color: var(--bh-on-white);
    box-shadow: var(--bh-shadow-md);
}

.bh-resi-print__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.bh-resi-print--campfire {
    grid-column: 1 / -1;
    order: 1;
    transform: rotate(-1deg);
}

.bh-resi-print--campfire .bh-resi-print__img {
    aspect-ratio: 16 / 9;
}

.bh-resi-print--jetty-bench {
    transform: rotate(1.5deg);
}

.bh-resi-print--pods-lights {
    transform: rotate(-1.5deg);
}

.bh-resi-print__label {
    padding: var(--bh-space-2) var(--bh-space-1) var(--bh-space-3);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- Bands ------------------------------------------------------------------------------- */

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

.bh-resi__band--mint {
    background: var(--bh-green-mint);
}

.bh-resi__band--grey {
    background: var(--bh-surface-2);
}

.bh-resi__band--grey .bh-resi__eyebrow,
.bh-resi__band--grey .bh-resi__link,
.bh-resi__band--mint .bh-resi__eyebrow,
.bh-resi__band--mint .bh-resi__link,
.bh-resi-day .bh-resi__eyebrow,
.bh-resi-abroad__booking .bh-resi__link {
    color: var(--bh-blue-text-deep);
}

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

.bh-resi-split {
    display: grid;
    gap: var(--bh-space-8);
    align-items: center;
}

/* ---- 2: the week and the day ------------------------------------------------------------- */

.bh-resi-week {
    display: grid;
    gap: var(--bh-space-6);
    margin: var(--bh-space-8) 0 0;
    counter-reset: bh-resi-stage;
}

.bh-resi-week__stage {
    position: relative;
    padding: var(--bh-space-5) 0 0;
    border-top: 4px solid var(--bh-navy);
}

.bh-resi-week__when {
    display: inline-block;
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-1) var(--bh-space-3);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bh-resi-day {
    display: grid;
    gap: var(--bh-space-8);
    margin-top: var(--bh-space-12);
    padding: var(--bh-space-8) var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-surface-2);
}

.bh-resi-day__photo {
    width: 100%;
    margin-top: var(--bh-space-4);
    border-radius: var(--bh-radius-md);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* The day runs down a rail that turns from morning yellow, through the day's blue, to night. */
.bh-resi-day__list {
    position: relative;
    padding-left: var(--bh-space-8);
}

.bh-resi-day__list::before {
    content: "";
    position: absolute;
    top: var(--bh-space-2);
    bottom: var(--bh-space-2);
    left: 9px;
    width: 6px;
    border-radius: var(--bh-radius-pill);
    background: linear-gradient(180deg, var(--bh-yellow) 0%, var(--bh-blue) 45%, var(--bh-navy) 100%);
}

.bh-resi-day__item {
    position: relative;
    display: grid;
    gap: var(--bh-space-1);
    padding: 0 0 var(--bh-space-5);
}

.bh-resi-day__item::before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: calc(-1 * var(--bh-space-8) + 3px);
    width: 18px;
    height: 18px;
    border: 3px solid var(--bh-white);
    border-radius: var(--bh-radius-full);
    background: var(--bh-blue);
    box-shadow: var(--bh-shadow-sm);
}

.bh-resi-day__item--morning::before {
    background: var(--bh-yellow);
}

.bh-resi-day__item--evening::before {
    background: var(--bh-pink);
}

.bh-resi-day__item--night::before {
    background: var(--bh-navy);
}

.bh-resi-day__item p {
    margin: 0;
}

.bh-resi-day__time {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- 3: the village ---------------------------------------------------------------------- */

.bh-resi-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-3);
}

.bh-resi-gallery__item {
    margin: 0;
}

.bh-resi-gallery__item--village-air {
    grid-column: 1 / -1;
}

.bh-resi-gallery__img {
    width: 100%;
    border-radius: var(--bh-radius-md);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.bh-resi-gallery__item--village-air .bh-resi-gallery__img {
    aspect-ratio: 16 / 9;
}

.bh-resi-gallery__item figcaption {
    margin-top: var(--bh-space-1);
    color: var(--bh-on-white);
    font-size: var(--bh-text-2xs);
}

/* ---- 4: by day and by night -------------------------------------------------------------- */

.bh-resi-acts {
    display: grid;
    gap: var(--bh-space-4);
    margin: var(--bh-space-6) 0;
}

.bh-resi-acts__group {
    padding: var(--bh-space-4) 0 0;
    border-top: 6px solid var(--bh-blue);
}

.bh-resi-acts__group:nth-child(2) {
    border-top-color: var(--bh-yellow);
}

.bh-resi-acts__group:nth-child(3) {
    border-top-color: var(--bh-pink);
}

.bh-resi-acts__group li {
    padding: var(--bh-space-1) 0;
    border-bottom: 1px solid var(--bh-line);
}

.bh-resi-acts__group li:last-child {
    border-bottom: 0;
}

.bh-resi-strip {
    display: grid;
    gap: var(--bh-space-3);
}

.bh-resi-strip__img {
    width: 100%;
    border-radius: var(--bh-radius-md);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.bh-resi-night {
    padding: var(--bh-space-12) 0;
    background:
        radial-gradient(40rem 26rem at 85% 20%, color-mix(in srgb, var(--bh-pink) 18%, transparent), transparent 70%),
        var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-resi-night__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin-top: var(--bh-space-4);
}

.bh-resi-night__list li {
    padding: var(--bh-space-2) var(--bh-space-4);
    border: 2px solid var(--bh-yellow);
    border-radius: var(--bh-radius-pill);
    color: var(--bh-yellow);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
}

.bh-resi-night__img {
    width: 100%;
    border-radius: var(--bh-radius-md);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---- 5: the films ------------------------------------------------------------------------ */

.bh-resi-films {
    display: grid;
    gap: var(--bh-space-8);
    margin-top: var(--bh-space-6);
}

.bh-resi-film__frame {
    position: relative;
    margin-bottom: var(--bh-space-4);
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    aspect-ratio: 16 / 9;
    background: var(--bh-navy);
}

.bh-resi-film__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- 6: what they take home -------------------------------------------------------------- */

.bh-resi-grow {
    display: grid;
    gap: var(--bh-space-5);
    margin: var(--bh-space-6) 0;
}

.bh-resi-grow__item {
    padding-left: var(--bh-space-4);
    border-left: 4px solid var(--bh-yellow);
}

.bh-resi-grow__item p {
    margin: 0;
}

.bh-resi-callout {
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-green-mint);
}

.bh-resi-callout p {
    margin: 0;
}

.bh-resi-pair {
    position: relative;
    display: grid;
}

/* A parent's words under the photographs (template-parts/trust-quote.php, yellow rule as the grow items). */
.bh-resi-growth__quote {
    margin-top: var(--bh-space-8);
}

.bh-resi-pair__img {
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

.bh-resi-pair__img--a {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.bh-resi-pair__img--b {
    width: 58%;
    margin: -18% 0 0 auto;
    border: 6px solid var(--bh-white);
    aspect-ratio: 4 / 3;
    box-shadow: var(--bh-shadow-md);
}

/* ---- 7: looked after --------------------------------------------------------------------- */

.bh-resi-care__head {
    display: grid;
    gap: var(--bh-space-6);
    align-items: center;
    margin-bottom: var(--bh-space-8);
}

.bh-resi-care__photo {
    width: 100%;
    border-radius: var(--bh-radius-md);
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.bh-resi-cards {
    display: grid;
    gap: var(--bh-space-4);
    margin: var(--bh-space-4) 0 var(--bh-space-6);
}

.bh-resi-card {
    padding: var(--bh-space-4) 0 0;
    border-top: 3px solid var(--bh-navy);
}

.bh-resi-card p {
    margin: 0;
}

.bh-resi-card--route {
    border-top-color: var(--bh-blue);
}

/* How campers are looked after: a checklist a parent can run down, each point behind a tick. */
#care .bh-resi-cards {
    gap: var(--bh-space-6) var(--bh-space-8);
}

#care .bh-resi-card {
    position: relative;
    padding: 0 0 0 calc(36px + var(--bh-space-4));
    border-top: 0;
}

#care .bh-resi-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--bh-radius-full);
    background: var(--bh-yellow);
    content: "";
}

#care .bh-resi-card::after {
    position: absolute;
    top: 11px;
    left: 11px;
    width: 14px;
    height: 8px;
    border-bottom: 3px solid var(--bh-navy);
    border-left: 3px solid var(--bh-navy);
    content: "";
    transform: rotate(-45deg);
}

/* ---- 8: weeks and price ------------------------------------------------------------------ */

.bh-resi-book {
    display: grid;
    gap: var(--bh-space-8);
    margin-top: var(--bh-space-6);
}

/* On a phone the price and what it includes come before the six weeks, not after them. */
.bh-resi-book__weeks {
    order: 2;
}

.bh-resi-weeks {
    display: grid;
    gap: var(--bh-space-3);
    margin-bottom: var(--bh-space-4);
}

.bh-resi-weeks__week {
    display: grid;
    gap: var(--bh-space-2);
    padding: var(--bh-space-4) var(--bh-space-5);
    border: 1px solid var(--bh-line);
    border-left: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
}

.bh-resi-weeks__week p {
    margin: 0;
}

.bh-resi-weeks__week--full {
    border-left-color: var(--bh-line);
    background: var(--bh-surface-2);
}

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

.bh-resi-weeks__places {
    color: var(--bh-muted);
    font-size: var(--bh-text-xs);
}

.bh-resi-weeks__book {
    justify-self: start;
}

.bh-resi-price {
    align-self: start;
    padding: var(--bh-space-6);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-resi-price__figure {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-yellow);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-black);
    line-height: var(--bh-leading-tight);
}

.bh-resi-price__line {
    font-size: var(--bh-text-sm);
}

.bh-resi-price .bh-resi__h4 {
    margin-top: var(--bh-space-5);
    color: var(--bh-yellow);
}

.bh-resi-price__extras li {
    margin: 0 0 var(--bh-space-2);
    font-size: var(--bh-text-xs);
}

.bh-resi-steps__title {
    margin-top: var(--bh-space-12);
}

.bh-resi-steps {
    display: grid;
    gap: var(--bh-space-4);
    margin-top: var(--bh-space-4);
    counter-reset: bh-resi-step;
}

.bh-resi-steps__step {
    position: relative;
    padding: 0 0 0 calc(36px + var(--bh-space-4));
    counter-increment: bh-resi-step;
}

.bh-resi-steps__step::before {
    content: counter(bh-resi-step);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--bh-radius-full);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-weight: var(--bh-weight-black);
}

.bh-resi-steps__step p {
    margin: 0;
}

/* ---- 9: getting here, and from outside Ireland -------------------------------------------- */

.bh-resi-address {
    margin: 0 0 var(--bh-space-3);
    padding: var(--bh-space-4);
    border-left: 4px solid var(--bh-navy);
    background: var(--bh-white);
    font-style: normal;
}

.bh-resi-travel__photo {
    width: 100%;
    border-radius: var(--bh-radius-md);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bh-resi__band--mint .bh-resi-cards {
    margin-top: var(--bh-space-4);
}

.bh-resi-abroad {
    padding: 0;
}

.bh-resi-abroad__booking {
    padding: var(--bh-space-5);
    border-radius: var(--bh-radius-md);
    background: var(--bh-green-mint);
}

.bh-resi-contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2) var(--bh-space-6);
    margin: 0;
}

.bh-resi-contact a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-navy);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ---- 10: the first time away ------------------------------------------------------------- */

.bh-resi-first {
    display: grid;
    gap: var(--bh-space-8);
    margin-top: var(--bh-space-6);
}

.bh-resi-first__points li {
    margin-bottom: var(--bh-space-5);
}

.bh-resi-first__points p {
    margin: 0;
}

.bh-resi-pack {
    align-self: start;
    padding: var(--bh-space-6);
    border-radius: var(--bh-radius-md);
    background: var(--bh-surface-2);
}

.bh-resi-pack__more {
    margin-top: var(--bh-space-4);
}

.bh-resi-pack__more summary {
    display: flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    color: var(--bh-blue-text-deep);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.bh-resi-pack__more .bh-resi__h4 {
    margin-top: var(--bh-space-4);
}

.bh-resi-pack__more li {
    padding: var(--bh-space-1) 0;
    font-size: var(--bh-text-xs);
}

/* ---- 11 and 12: questions and the close ------------------------------------------------- */

.bh-resi-faq {
    max-width: 880px;
}

.bh-resi-faq .bh-faqs {
    display: grid;
    gap: 0;
    margin-bottom: var(--bh-space-3);
    border-top: 1px solid var(--bh-line);
}

.bh-resi-faq .bh-faq {
    border-bottom: 1px solid var(--bh-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.bh-resi-faq .bh-faq__question {
    padding: var(--bh-space-5) 0;
}

.bh-resi-faq .bh-faq__answer {
    padding: 0 0 var(--bh-space-6);
    font-size: var(--bh-text-sm);
}

.bh-resi-close {
    padding: var(--bh-space-12) 0;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    text-align: center;
}

.bh-resi-close__inner .bh-resi__h2 {
    margin-right: auto;
    margin-left: auto;
}

.bh-resi-close .bh-resi__actions {
    justify-content: center;
}

/* ---- Wider screens ----------------------------------------------------------------------- */

@media (min-width: 576px) {
    .bh-resi-hero__facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-resi-cards,
    .bh-resi-steps,
    .bh-resi-weeks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .bh-resi__band,
    .bh-resi-night,
    .bh-resi-close {
        padding: var(--bh-space-16) 0;
    }

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

    .bh-resi-films,
    .bh-resi-grow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (min-width: 992px) {
    .bh-resi-hero {
        padding: 150px 0 var(--bh-space-16);
    }

    .bh-resi-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--bh-space-12);
        align-items: center;
    }

    .bh-resi-hero__words {
        grid-column: auto;
        order: 0;
    }

    .bh-resi-hero__prints {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bh-space-4);
        align-content: start;
    }

    .bh-resi-print {
        order: 0;
    }

    .bh-resi-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--bh-space-12);
    }

    .bh-resi-split--reverse .bh-resi-split__words {
        order: 2;
    }

    .bh-resi-day {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: var(--bh-space-12);
        padding: var(--bh-space-12);
    }

    .bh-resi-care__head {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: var(--bh-space-12);
    }

    .bh-resi-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bh-resi-cards--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bh-resi-abroad .bh-resi-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-resi-book {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--bh-space-12);
    }

    .bh-resi-book__weeks {
        order: 0;
    }

    .bh-resi-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bh-resi-steps__step {
        padding: calc(36px + var(--bh-space-4)) var(--bh-space-4) 0 0;
    }

    .bh-resi-steps__step:not(:last-child)::after {
        position: absolute;
        top: 17px;
        right: calc(-1 * var(--bh-space-4));
        left: 44px;
        height: 3px;
        background: var(--bh-navy);
        content: "";
    }

    .bh-resi-first {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--bh-space-12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bh-resi-print {
        transform: none;
    }
}