:root{
	--bm-ef: #cd491d;
    --bm-yp: #7b64ce;
    --bm-pu: #418155;
    --bm-ht: #cb4862;
}

[hidden], [data-needsjs] {
    display: none !important;
}
/***** Filter groups *****/

/*
form.page-menu hmax
    div.course-filters.flex.gap-1r.ai-end
        ul.course-filters__list.flex
        div.course-filters__controls.flex.gap-1/2r
*/

.course-filters__list {
	gap: 0.5rem 1rem;
    margin: 0 !important;

	select {
		width: 100%;
	}
}

#age-field {
    input {
        width: 5.25rem;
        text-align: center;
        font-weight: 400;
    }

    [data-alert] {
        position: absolute;
        left: 0;
        bottom: -3.85em;
        z-index: 2;
        width: 12em;
        box-shadow: 0 .5em 2em rgba(0,0,0,.33);
    }
}

[data-radios="false"] #age-field input {
    width: 10.5rem;
}

[data-action="All"] {
    min-width: 5.125rem;
}

[data-disabled="true"] {
    opacity: 0.4;
}

.course-filters__results {
    grid-column: 1 / -1;
    flex-basis: 100%;
    font-weight: 400;
    line-height: 1.25;

    > .line-ib {
        padding: 0.5rem;
        background: rgb(255 255 255 / 0.5);
        border-radius: 0.25rem;
    }
}


/* Delete choice buttons */

button[data-choice] {
    background: rgb(0 0 0 / 0.07);
    border: 1px solid rgb(0 0 0 / 0.11);
    padding: 3px 0.5ch;
    color: inherit;
    font-weight: normal;
    border-radius: 2px;
    position: relative;
    line-height: 1;
    display: inline-flex;
    gap: 0.5ch;
    align-items: center;

    &::after {
        content: '\2715';
        padding: 0.25em;
        background: hsl( var(--bm-navy-hsl) / 0.4);
        color: rgb(255 255 255 / 0.75);
        font-size: 0.62rem;
        font-weight: 400;
        border-radius: 2px;
    }
}

button[data-choice]:focus,
button[data-choice]:hover {
    transform: scale(1) !important;

    &::after {
        background: var(--bm-navy);
        color: white;
    }
}



/* Fieldsets generated by JavaScript */

[data-filtergroup] {
    border: 0;
    padding: 0;
    margin: 0;

    legend {
        display: block;
        width: 100%;
        padding: 0.65rem 0.75rem 0.6rem 2.15rem;
        border-radius: 0.25em 0.25em 0 0;
    }

    button {
        border: 0;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        padding: 0.25rem 0.5rem;
        text-align: left;
    }

    .expander {
        width: 1.25rem;
        height: 1.25rem;
    }

    > [aria-expanded="true"] {
        
        .expander {
            transform: rotate(0);
        }
    }

    li:has([checked]) {
        font-weight: 400;
    }
}

[data-filtergroup][data-expanded="true"] legend {
    background: rgb(255 255 255 / 0.5);
}

[data-filtergroup] {
    ul {
        margin: 0;
        background: white;
        padding: 0.5rem 0.75rem;
        border-radius: 0 0 0.25em 0.25rem;
    }

    > [aria-expanded="false"] + ul {
        display: none;
    }

    label {
        display: grid;
        grid-template-columns: max-content max-content;
        gap: 0.5rem;
    }

    [type="radio"] {
        margin: 0;
        transform: translateY(-1px);
    }

    li {
        padding: 0.25rem 0 0.33rem;
    }

    li + li {
        border-top: 1px solid rgb(0 0 0 / 0.15);
    }
}


label > .attr-label {
    margin-bottom: 0.25rem;
}

#age-field .input-text {
    padding-block: 0.33rem;
}


/* All fieldsets expanded */
.course-filters[data-showall="true"] {
    display: grid;
    grid-template-columns: max-content 10.5rem;
    grid-template-areas: 'r c' 'l l';

    .course-filters__results  {grid-area: r; margin-right: 0;}
    .course-filters__list     {grid-area: l;}
    .course-filters__controls {grid-area: c;}
}


@media (max-width: 699px) {
    .course-filters.pos-rel {
        grid-template-columns: 1fr 5.25rem;
    }

    .course-filters__controls {
        position: absolute;
        top: 0;
        right: 0;
        width: 5.25rem;
    }

    .course-filters__results {
        margin-right: 6rem;
    }    

    .course-filters__list > li:nth-child(n + 3) [data-filtergroup]:not([data-expanded="true"])::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 0;
        right: 0;
        border-top: 1px solid rgb(0 0 0 / 0.08);
    }
}

@media (min-width: 700px) 
and (max-width: 1329px) {
    [data-radios="true"] {
        grid-template-columns: max-content min-content;
        align-items: start;
    }

    #age-field {
        padding-top: 0.65rem;
    }
}

@media (min-width: 700px) {
    .course-filters__list {
        grid-template-columns: repeat(3, max-content);

        #age-field {
            grid-row: span 3;
        }
    }
}

@media (min-width: 768px) {    
    [data-filtergroup] > [aria-expanded="true"]:not([data-showall="true"]) + ul {
        position: absolute;
        box-shadow: 0 .5em 2em rgba(0,0,0,.33);
        min-width: calc(100% + 0.5em);
        border-radius: 0 0.25em 0.25em 0.25rem;
        z-index: 1;
    }
}

@media (max-width: 789px) {
	[data-radios="false"] .course-filters {
		grid-template-columns: repeat(2, max-content);
	}

    form.page-menu {
        position: static;
    }
}

@media (min-width: 790px) 
and (max-width: 1435px) {
	[data-radios="false"] .course-filters {
		grid-template-columns: repeat(4, max-content);
	}
}

@media (min-width: 830px) {
    .course-filters__list {
        grid-template-columns: repeat(4, max-content);

        #age-field {
            grid-row: span 2;
        }
    }
}

@media (max-width: 1329px) {
    [data-radios="true"],
    .course-filters__list {
        display: grid;
    }

    [data-radios="true"] #age-field input {
        width: 10.5rem;
    }    

    .course-filters__controls button {
        white-space: nowrap;
        flex-grow: 1;
    }
}

@media (min-width: 1330px) {
    [data-radios="true"]:not([data-showall="true"]) {
        align-items: center;
    }

    [data-radios="true"] #age-field:not([data-showall="true"]) {
        label {
            display: flex;
            align-items: center;
            gap: 0 0.5rem;
        }

        .attr-label {
            white-space: nowrap;
            margin: 0;
        }
    }
}

@media (max-width: 1435px) {
	[data-radios="false"] .course-filters {
		display: grid;

        #theme-field {
            grid-column: span 2;
        }
    }
}
/* Markup pattern: 
courses.cards.grid.gap-2r <-- container
    h2                    <-- context specific heading for group of card which follow (not needed on course type specific pages) 
    article.course.card   <-- card
        div.attr-label.course__type
        a.course__link
            figure.course__fig
                figcaption
                    img.rarr
                    h3
                        span.em
                        span.line-br
                img.course__img
        div.course__text
            p
            ul.grid.gap-1/2r.jc-space-b.course__attr
                li[data-scope="{{ key }}
                    span.attr-label
                    span.attr-value
*/




/* Headings */

.courses.cards h2:not(:first-child) {
    margin-top: 4rem;
}

[data-filtered="true"] > h2 {
    display: none;
}


/* Card outer */

.course.card {
    font-size: 1rem;
	display: flex;
	flex-direction: column;
    box-shadow: 0 0 1.25rem rgb(0 0 0 / 0.15);
    border-radius: 0.75rem;
}


/* Card child ordering */

.course__link {order: 1;}
.course__type {order: 2;}
.course__text {order: 3;}


/* Course link */

.course .course__link {
    text-decoration: none;
}

.course__link {
    position: relative;
    display: block;
    overflow: hidden;
    flex-grow: 1;
    border-radius: 0.75rem 0.75rem 0 0;

    /* Arrow */
    .rarr {
        width: 3rem;
        height: 3rem;
        border-radius: 1.5rem;
        background: var(--bm-duckegg);
        padding: 0.75rem;
        opacity: 0.65;
        transition: 0.3s;
        align-self: start;
    }

    /* Smaller heading text */
    .smaller {
        font-size: 1.4rem;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 0.125em;
        transition: 0.3s;
        text-decoration-thickness: 2px;
    }
}

.course__link:focus,
.course__link:hover {
    .smaller {
        text-decoration-color: var(--bm-duckegg);
    }
    
    .course__img {
        transform: scale(1.05);
    }

    .rarr {
        opacity: 1;
    }
}


/* Course figure child of link */

.course__fig {
    margin: 0;
	background: var(--bm-navy);
    min-height: 13rem;
    height: 100%;

    figcaption {
        position: relative;
        z-index: 1;
        padding: 0.5rem 0.5rem 0.75rem;
        height: 100%;
        gap: 0.5rem 0.25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    h3 {
        color: white;
        margin: 0;
        text-shadow: 0 0 0.5rem hsl( var(--bm-navy-hsl) / 0.5);
    }

    .em {
        font-weight: 300;
        font-size: 2.25rem;
        line-height: 1;
        display: block;
        margin-bottom: 0.125rem;
    }
}


/* Course image */

.course__img {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: 0.3s;
    transform-origin: 0 0;
}


/* Course text: wrapper for para and attributes list */

.course__text {
    background: white;
    padding: 0.25rem 0.5rem 0.75rem;
    border-radius: 0 0 0.75rem 0.75rem;

    p {
        margin: 0;
    }
}

.course__attr {
    grid-template-columns: repeat(4, max-content);    
    margin-top: 0.75rem;
    padding-top: 0.75rem !important;
    border-top: 1px solid hsl( var(--bm-gold-hsl) / 0.4);

    li {
        position: relative;
    }

    li:not(:first-child)::after {
        content: '';
        position: absolute;
        top: 0;
        left: -0.55rem;
        bottom: 0;
        border-left: 1px solid hsl( var(--bm-gold-hsl) / 0.2);
    }

    .attr-label {
        line-height: 1.25;
        font-size: 68.75%;
        color: var(--bm-gold);
        min-height: 2.5em;
        display: grid;
        align-items: end;
    }

    .attr-value {
        font-weight: 400;
    }
}


/* Demo only -- once a decision has been made with regard to accessible colours: 
    - reconcile with lines 63 to 87 above and tidy up 
    - including rootvars.css and places where --bm-gold is used:
        - buttons.css
        - course-cards.css
        - disclosures.css
        - menus.css
        - quotes.css
        - setup.css
*/

.a-colours {
    .course__attr .attr-label {color: var(--bm-gold-a);}
    
    button:not(:is(.pseudo-link, .disclosure, [data-choice])), 
    .expander {background: var(--bm-gold-a);}

    [data-type="english_foundation"] .course__type {
        border-color: var(--bm-ef-a);
        color: var(--bm-ef-a);
    }

    [data-type="young_professionals"] .course__type {
        border-color: var(--bm-yp-a);
        color: var(--bm-yp-a);
    }

    [data-type="pre_university"] .course__type {
        border-color: var(--bm-pu-a);
        color: var(--bm-pu-a);
    }

    [data-type="home_tuition"] .course__type {
        border-color: var(--bm-ht-a);
        color: var(--bm-ht-a);
    }
}


@media (max-width: 360px) {
    .attr-label {
        font-weight: 500;
    }
}

@media (min-width: 768px) {
    .courses.cards {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

		h2 {
			grid-column: 1 / -1;
		}
    }
}



























// EVERYTHING - TO BE CHERRY PICKED AS NEEDED
:root {
    --bm-navy-hsl: 236deg 39% 22%;
    --bm-navy: hsl(var(--bm-navy-hsl));
    --bm-duckegg-hsl: 191deg 62% 73%;
    --bm-duckegg: hsl(var(--bm-duckegg-hsl));
    --bm-sky-hsl: 195deg 90% 93%;
    --bm-sky: hsl(var(--bm-sky-hsl));
    --bm-gold-hsl: 41deg 37% 56%;
    --bm-gold: hsl(var(--bm-gold-hsl));
    --bm-gold-a: #917230;
    --bm-green-hsl: 110deg 27% 49%;
    --bm-green: hsl(var(--bm-green-hsl));
    --bm-green2-hsl: 116deg 23% 45%;
    --bm-green2: hsl(var(--bm-green2-hsl));
    --bm-ef: #dd6f4b;
    --bm-yp: #826cd0;
    --bm-pu: #52a36c;
    --bm-ht: #cf546d;
    --bm-ef-a: #cd491d;
    --bm-yp-a: #7b64ce;
    --bm-pu-a: #418155;
    --bm-ht-a: #cb4862;
    --default-link-hsl: 220deg 65% 50%;
    --default-link: hsl(var(--default-link-hsl));
    --default-underline: hsl(var(--default-link-hsl)/.5);
    --link-underline: #77d8f8;
    --link-underline-thickness: 2px;
    --link-underline-offset: .1em;
    --btn-bg: var(--bm-gold);
    --btn-radius: 0;
    --btn-padding: .5em .75em;
    --btn-focus-bg: hsl(var(--bm-navy-hsl)/.75);
    --btn-active-bg: var(--bm-navy);
    --btn-active-color: white;
    --hmax: clamp(10px,3vw,2rem);
    --size-l: 1.33rem;
    --size-xl: 1.5625rem;
    --size-xxl: 2rem;
    --size-xxxl: 3rem;
    --line-solid: 1;
    --line-tight: 1.15;
    --line-compact: 1.33;
    --line-normal: 1.5;
    --input-outline: 1px solid rgba(0,0,0,.25)
}

*,:before,:after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none
}

body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,blockquote {
    margin-block-end:0}

blockquote,figure {
    margin-inline-start:0;margin-inline-end:0}

body {
    min-height: 100dvh;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    line-height: 1.5
}

h2,h3,h4 {
    text-wrap: balance
}

a:not([class]) {
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

img,picture {
    max-width: 100%;
    display: block
}

use {
    transition: all .3s
}

use rect,use circle,use path,use polygon {
    fill: inherit
}

use line,use polyline {
    stroke: inherit
}

button,input,textarea,select {
    font: inherit
}

textarea:not([rows]) {
    min-height: 10em
}

:target {
    scroll-margin-block: 5ex
}

.size-s {
    font-size: var(--size-s,.875rem)
}

h5,.h5,h6,.h6,.size-r {
    font-size: var(--size-r,1rem)
}

h4,.h4,.size-l {
    font-size: var(--size-l,1.125rem)
}

h3,.h3,.size-xl {
    font-size: var(--size-xl,1.375rem)
}

h2,.h2,.size-xxl {
    font-size: var(--size-xxl,1.6875rem)
}

h1,.size-xxxl {
    font-size: var(--size-xxxl,2.5rem)
}

.h2,.h3,.h4,.h5,.h6 {
    font-weight: 700
}

.line-br,label,.input-error {
    display: block
}

.line-ib,.input-label:not(.line-br),.input-guide:not(.line-br) {
    display: inline-block
}

.line-solid {
    line-height: var(--line-solid,1)
}

h1,h2,.h2,h3,.h3,.line-tight {
    line-height: var(--line-tight,1.15)
}

h4,.h4,.line-compact {
    line-height: var(--line-compact,1.25)
}

.line-normal {
    line-height: var(--line-normal,1.5)
}

.measure {
    max-width: var(--measure,34rem)
}

.measure-wide {
    max-width: var(--measure-wide,75ch)
}

.sentence:first-letter {
    text-transform: uppercase;
    letter-spacing: -.01em
}

.flex {
    flex-wrap: wrap;
    display: flex
}

.grid {
    display: grid
}

.flex:where(ol,ul) {
    margin-inline-start:0;margin-inline-end:0}

.grid:where(ol,ul) {
    margin-inline-start:0;margin-inline-end:0}

[class*=gap-]>:not(:-webkit-any([class*=bmar-],[class*=vmar-])) {
    margin-block-end:0}

[class*=gap-]>:not(:is([class*=bmar-],[class*=vmar-])) {
    margin-block-end:0}

.fd-col {
    flex-direction: column
}

.flex.cgrow>*,.fg-1 {
    flex-grow: 1
}

.fg-0 {
    flex-grow: 0
}

.fw-none {
    flex-wrap: nowrap
}

.grid.auto {
    grid-template-columns: repeat(auto-fit,minmax(var(--col-min,18rem),var(--col-max,1fr)))
}

.ai-start {
    align-items: start
}

.ai-base {
    align-items: baseline
}

.ai-center {
    align-items: center
}

.ai-end {
    align-items: end
}

.as-start {
    align-self: start
}

.flex .as-start {
    align-self: flex-start
}

.flex .as-end {
    align-self: flex-end
}

.jc-start {
    justify-content: start
}

.jc-space-b {
    justify-content: space-between
}

.jc-center {
    justify-content: center
}

.jc-end {
    justify-content: end
}

.gap-1\/4r {
    gap: .25rem
}

.gap-1\/2r {
    gap: .5rem
}

.gap-1r {
    gap: 1rem
}

.gap-3\/2r {
    gap: 1.5rem
}

.gap-2r {
    gap: 2rem
}

.pos-abs {
    position: absolute
}

.pos-rel {
    position: relative
}

.pos-stk {
    position: -webkit-sticky;
    position: sticky
}

.pos-abs.fill {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.pos-abs.hfill {
    left: 0;
    right: 0
}

.pos-abs.vfill {
    top: 0;
    bottom: 0
}

ol:not(:-webkit-any(.flex,.grid,.ls-none)),ul:not(:-webkit-any(.flex,.grid,.ls-none)) {
    margin-inline-start:1em}

:is(ol:not(:-webkit-any(.flex,.grid,.ls-none)),ul:not(:-webkit-any(.flex,.grid,.ls-none))) li:not(:last-child) {
    margin-bottom: var(--li-margin,.25rem)
}

:is(ol:not(:-webkit-any(.flex,.grid,.ls-none)),ul:not(:-webkit-any(.flex,.grid,.ls-none))) li::marker {
    color: var(--bm-gold)
}

ol:not(:is(.flex,.grid,.ls-none)),ul:not(:is(.flex,.grid,.ls-none)) {
    margin-inline-start:1em}

:is(ol:not(:is(.flex,.grid,.ls-none)),ul:not(:is(.flex,.grid,.ls-none))) li:not(:last-child) {
    margin-bottom: var(--li-margin,.25rem)
}

:is(ol:not(:is(.flex,.grid,.ls-none)),ul:not(:is(.flex,.grid,.ls-none))) li::marker {
    color: var(--bm-gold)
}

ol:not(:-webkit-any(.flex,.grid,.ls-none)) {
    margin-inline-start:1.25em}

ol:not(:is(.flex,.grid,.ls-none)) {
    margin-inline-start:1.25em}

.ls-none {
    margin-inline-start:0;margin-inline-end:0;list-style-type: ""
}

.flex:where(ol,ul) {
    margin-inline-start:0;margin-inline-end:0;list-style-type: ""
}

.grid:where(ol,ul) {
    margin-inline-start:0;margin-inline-end:0;list-style-type: ""
}

ol:not(:-webkit-any([class*=pad-],[class*=-box])),ul:not(:-webkit-any([class*=pad-],[class*=-box])) {
    padding: 0
}

ol:not(:is([class*=pad-],[class*=-box])),ul:not(:is([class*=pad-],[class*=-box])) {
    padding: 0
}

.flow>:not([class*=mar-]):first-child {
    margin-top: 0
}

.vmar-1r {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.cmar-0>* {
    margin: 0
}

.ctmar-1\/2r>:not(:-webkit-any(:first-child,[class*=tmar])) {
    margin-top: .5rem
}

.ctmar-1\/2r>:not(:is(:first-child,[class*=tmar])) {
    margin-top: .5rem
}

.ctmar-1r>:not(:-webkit-any(:first-child,[class*=tmar])) {
    margin-top: 1rem
}

.ctmar-1r>:not(:is(:first-child,[class*=tmar])) {
    margin-top: 1rem
}

.ctmar-2r>:not(:-webkit-any(:first-child,[class*=tmar])) {
    margin-top: 2rem
}

.ctmar-2r>:not(:is(:first-child,[class*=tmar])) {
    margin-top: 2rem
}

.tmar-1\/2r {
    margin-top: .5rem
}

.tmar-1r {
    margin-top: 1rem
}

.tmar-2r {
    margin-top: 2rem
}

.pad-1r {
    padding: 1rem
}

.cvpad-1\/2r>* {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.bpad-1\/2r {
    padding-bottom: .5rem
}

.trule,.ctruled>* {
    border-top: var(--trule,1px solid rgba(0,0,0,.15))
}

.brule {
    border-bottom: var(--brule,1px solid rgba(0,0,0,.15))
}

.sr-only:not(:focus):not(:active),.hidden:not(:focus):not(:active),.trips .attr-label {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

[hidden],[data-needsjs] {
    display: none!important
}

::selection {
    color: var(--selected-color,white);
    background: var(--selected-bg,#333)
}

.outline>* {
    outline: 1px dashed pink
}

.outline>*>* {
    outline: 1px dashed green
}

body {
    color: var(--text,#333);
    background: var(--body-bg,white);
    margin: 0;
    font-family: Lato,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    font-size: 1.125rem;
    font-weight: 300
}

.hmax {
    padding-left: var(--hmax,4vw);
    padding-right: var(--hmax,4vw)
}

.lede {
    font-size: var(--size-l);
    text-wrap: balance;
    max-width: 75ch
}

h2,h3,h4,h5,.h2,.h3,.h4,.h5 {
    font-weight: 700
}

h1,h2,h3,h4,.h1,.h2,.h3,.h4 {
    color: var(--bm-navy);
    font-family: Playfair Display,serif
}

h1>span,h2,h3,h4,h5,.h2,.h3,.h4,.h5 {
    text-wrap: balance
}

h2,.h2 {
    font-size: var(--size-xxxl);
    margin-top: 0
}

@media (max-width: 625px) {
    h2,.h2,.size-xxl {
        font-size:2.25rem
    }
}

main>.page-section,main>.section-content {
    margin-top: 8rem
}

main>.has-bg {
    padding-block-start:5rem;padding-block-end:5rem}

main>.has-bg+.has-bg,main>form+.has-bg {
    margin-top: 0
}

.page-section>*>:where(p,ol,ul) {
    max-width: 40rem
}

.section-content>*>:where(p,ol,ul) {
    max-width: 40rem
}

.page-sections {
    position: -webkit-sticky;
    position: sticky;
    top: -1px
}

.brad-3\/4r {
    border-radius: .75rem
}

.course-apply {
    background: var(--bm-gold)
}

.course-apply p {
    text-shadow: 0 0 .5em rgba(0,0,0,.4)
}

.course-apply p .btn {
    text-shadow: none
}

.course-apply,.course-apply h2 {
    color: #fff
}

.course-midway,.course-workshops,.course-excursions,.course-others {
    background: var(--bm-sky)
}

main>.page-section:last-child {
    padding-bottom: 10rem
}

.qna {
    border-top: 1px solid rgba(0,0,0,.15);
    padding-block-start:1rem;padding-block-end:1rem}

.qna h3 {
    margin: 0
}

[data-alert=true] {
    color: #000;
    background: #ff9;
    border: 2px solid #000;
    border-radius: .25rem;
    padding: .5rem;
    font-weight: 400;
    line-height: 1.25;
    display: inline-block
}

.btn.rounder {
    color: rgba(0,0,0,.7);
    text-transform: uppercase;
    z-index: 3;
    background: rgba(204,204,204,.5);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .25rem;
    min-width: 5.5rem;
    padding: .25rem;
    font-size: .75rem;
    font-weight: 400;
    position: fixed;
    top: .5rem;
    right: .5rem
}

.btn.rounder[aria-pressed=true] {
    color: rgba(0,0,0,.7);
    background: rgba(204,204,204,.5)
}

.btn.rounder[aria-pressed=true],body[data-unrounded=true] .attr-box,body[data-unrounded=true] .btn,body[data-unrounded=true] img:not(.rarr),body[data-unrounded=true] .persona,body[data-unrounded=true] .quote,body[data-unrounded=true] .trip__text,body[data-unrounded=true] .trip__popup,body[data-unrounded=true] .course__text {
    border-radius: 0!important
}

body[data-unrounded=true] .course__link:before,body[data-unrounded=true] .course__link:after {
    content: normal
}

@media (max-width: 1023px) {
    .section-content.duo:not(.reverse)>:first-child,.section-content.duo.reverse>:last-child {
        margin-top:5rem
    }
}

@media (min-width: 1024px) {
    .section-content {
        gap:0 4rem;
        display: flex
    }

    .section-content>* {
        flex-basis: calc(50% - 2rem)
    }

    .section-content:not(.reverse) {
        flex-direction: row-reverse
    }

    .section-content:not(.reverse)>div:first-child {
        background-image: url(../assets/grid.svg);
        position: relative
    }

    .section-image {
        mix-blend-mode: multiply;
        position: -webkit-sticky;
        position: sticky;
        top: 6rem
    }

    .qna .disclosure {
        margin-left: calc(-1em - .5rem)
    }
}

@media (min-width: 1280px) {
    .hmax {
        padding-left:var(--hmax-l,6vw);
        padding-right: var(--hmax-l,6vw)
    }
}

@media (min-width: 1920px) {
    .hmax {
        padding-left:var(--hmax-l,10vw);
        padding-right: var(--hmax-l,10vw)
    }
}

a:not(:-webkit-any([aria-selected],.btn,.x-anchor-menu-item)),.pseudo-link {
    background: var(--link-bg,transparent);
    color: currentColor;
    text-decoration: underline
}

a:not(:is([aria-selected],.btn,.x-anchor-menu-item)),.pseudo-link {
    background: var(--link-bg,transparent);
    color: currentColor;
    text-decoration: underline
}

.nonederline {
    text-decoration: none
}

.nonederline .underline {
    text-decoration: underline
}

a:not(.nonederline,.x-anchor-menu-item),.nonederline .underline,.pseudo-link {
    -webkit-text-decoration-color: var(--link-underline,var(--default-underline,currentColor));
    text-decoration-color: var(--link-underline,var(--default-underline,currentColor));
    text-decoration-thickness: var(--link-underline-thickness,auto);
    text-underline-offset: var(--link-underline-offset,auto);
    transition: all .3s
}

a:not([aria-selected]):focus,a:not([aria-selected]):hover,.pseudo-link:focus,.pseudo-link:hover {
    background: var(--link-focus-bg,transparent);
    color: var(--link-focus,var(--default-link-focus,currentColor));
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto
}

a:not(.nonederline):focus,a:not(.nonederline):hover,.underline:focus,.underline:hover,.pseudo-link:focus,.pseudo-link:hover {
    -webkit-text-decoration-color: var(--link-focus-underline,var(--default-focus-underline,currentColor));
    text-decoration-color: var(--link-focus-underline,var(--default-focus-underline,currentColor))
}

a[aria-selected=true] {
    cursor: default
}

.course-detail :target {
    scroll-margin-top: 150px
}

.course-detail>.page-section:target {
    scroll-margin-top: 70px
}

@media (min-width: 1024px) {
    .course-detail :target {
        scroll-margin-top:90px
    }

    .course-detail>.page-section:target {
        scroll-margin-top: 10px
    }
}

.menu,.page-menu {
    line-height: 1
}

:is(.menu,.page-menu) ul {
    margin: 0 -.5rem
}

:is(.menu,.page-menu) a {
    color: var(--bm-navy);
    text-decoration: none
}

:is(.menu,.page-menu) a {
    padding: .5rem;
    display: inline-block
}

:is(.menu,.page-menu) a:not([class]) {
    font-weight: 400
}

:is(.menu,.page-menu) a:focus {
    background: var(--bm-sky);
    color: #000
}

:is(.menu,.page-menu) a:hover {
    background: var(--bm-sky);
    color: #000
}

.menu {
    --menu-rule: 1px solid hsl(var(--bm-gold-hsl)/.3);
    padding-block-start:1rem;padding-block-end:1rem}

.menu__brand {
    margin-right: 1.5rem
}

.menu__brand a:focus {
    background: 0 0;
    transform: scale(1.05)
}

.menu__brand a:hover {
    background: 0 0;
    transform: scale(1.05)
}

.menu__h {
    display: none
}

@media (min-width: 320px) and (max-width:590px) {
    .menu__list {
        grid-template-columns:4.7rem 4.7rem 1fr;
        display: grid
    }

    .menu__list li:nth-child(n+6) {
        margin-top: .75rem
    }

    .menu__list:after {
        width: 18rem;
        bottom: 2.4rem
    }

    .menu__brand {
        grid-column: span 3
    }

    .menu__e,.menu__b {
        grid-column: span 2
    }
}

@media (min-width: 591px) {
    .menu {
        padding-top:3rem;
        padding-bottom: 1.5rem
    }

    .menu__list {
        gap: .5rem
    }

    .menu__list:after {
        width: 34.6rem;
        bottom: 2.3rem
    }
}

@media (min-width: 591px) and (max-width:869px) {
    .menu__t {
        flex-basis:calc(100% - 450px)
    }
}

@media (max-width: 869px) {
    .menu__list:after {
        content:"";
        border-top: var(--menu-rule);
        position: absolute;
        left: .5rem
    }
}

@media (min-width: 870px) {
    .menu__t {
        border-right:var(--menu-rule);
        padding-right: .75rem
    }

    .menu__v {
        padding-left: .25rem
    }
}

@media (max-width: 1180px) {
    .menu__brand {
        flex-basis:100%
    }
}

@media (min-width: 1181px) {
    .menu__list>li:nth-child(n+2) {
        margin-bottom:5.5px
    }
}

.path a {
    color: var(--link-underline);
    font-weight: 400;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px
}

.path a:focus {
    color: #fff
}

.path a:hover {
    color: #fff
}

.path>li:not(:last-child):after {
    content: "/";
    color: rgba(255,255,255,.5);
    margin-left: .5ch
}

.page-menu {
    background: var(--bm-duckegg);
    z-index: 2;
    border-bottom: 2px solid #fff;
    padding-block-start:.75rem;padding-block-end:.75rem;position: -webkit-sticky;
    position: sticky;
    top: -1px
}

.page-menu .btn {
    border: 1.5px solid #fff;
    padding: .4em .75em
}

.page-menu li>span {
    display: inline-block
}

@media (max-width: 599px) {
    .page-menu .sections {
        grid-template-columns:repeat(3,max-content);
        gap: .25rem 0
    }

    .page-menu li[data-section=apply] {
        bottom: -1px;
        right: 3vw
    }
}

@media (min-width: 600px) and (max-width:1023px) {
    .page-menu .sections {
        grid-template-columns:repeat(4,max-content)
    }

    .page-menu li[data-section=apply] {
        width: 100px;
        bottom: -4px;
        right: 0
    }

    .page-menu li[data-section=apply]>.btn {
        text-align: center;
        flex-grow: 1
    }
}

@media (max-width: 1023px) {
    .page-menu .sections {
        display:grid;
        position: relative
    }

    .page-menu li[data-section=apply] {
        position: absolute
    }
}

@media (min-width: 1080px) {
    .page-menu .btn {
        font-size:1.33rem
    }
}

footer {
    background: var(--bm-navy);
    color: rgba(255,255,255,.75);}

footer a {
    text-decoration: none!important
}

.footer-menu {
    gap: 2rem 4rem;
    margin-bottom: 2rem;
    font-weight: 400
}

.footer-menu h2 {
    color: var(--bm-gold);
    margin: 0
}

.footer-menu .ls-none {
    margin-top: .25rem
}

.footer-menu li {
    break-inside: avoid
}

.footer-menu a {
    color: #fff;
    padding: .25rem 3px;
    line-height: 1.25
}

.footer-menu a:focus {
    background: var(--bm-sky);
    color: var(--bm-navy)
}

.footer-menu a:hover {
    background: var(--bm-sky);
    color: var(--bm-navy)
}

.footer-menu h2,.footer-adr {
    padding-inline-start:3px;padding-inline-end:3px}

.footer-social {
    line-height: 1
}

.footer-social a {
    background: #fff;
    border-radius: 50%
}

.footer-social a:focus {
    background: var(--bm-sky);
    transform: scale(1.1)
}

.footer-social a:hover {
    background: var(--bm-sky);
    transform: scale(1.1)
}

.footer-social svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: .25rem
}

.footer-social use {
    fill: var(--bm-navy)
}

@media (min-width: 520px) {
    .footer-bucksmore .grid {
        grid-template-rows:repeat(4,max-content);
        grid-template-columns: 15.6rem 1fr;
        grid-auto-flow: column
    }
}

@media (min-width: 940px) {
    .footer-bucksmore .grid {
        grid-template-columns:11.5rem 1fr
    }
}

@media (min-width: 1120px) and (max-width:1419px) {
    .footer-bucksmore .grid {
        grid-template-rows:repeat(3,max-content);
        grid-template-columns: 9rem 17rem 1fr
    }
}

@media (min-width: 1420px) {
    .footer-contact {
        flex-basis:19rem
    }
}

h1 {
    max-width: 22em;
    margin: 0 0 2rem;
    font-size: 2.25rem
}

h1 span:not(.em) {
    font-weight: 600;
    display: inline-block
}

h1 .em {
    word-break: break-word;
    font-size: max(2.5rem,min(1rem + 11vw,5rem));
    font-weight: 300;
    line-height: 1;
    display: block
}

h1 .em+span {
    margin-top: .25rem
}

h1 .em+span:first-letter {
    text-transform: uppercase
}

h1,.page-header .lede {
    color: #fff
}

.page-header {
    background: var(--bm-navy);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 4rem;
    padding-bottom: 9rem;
    overflow-x: hidden
}

.header-info {
    gap: 2rem;
    display: grid
}

.header-info>p {
    text-shadow: 0 0 .5em #000;
    margin-top: 0
}

.header-img {
    width: 100%;
    position: absolute;
    bottom: 0
}

.caps,.attr-label,.quote cite {
    text-transform: uppercase
}

.attr-label,.quote cite {
    letter-spacing: .03em;
    color: var(--bm-navy);
    font-size: .75rem;
    font-style: normal;
    display: block
}

.attr-label,.quote cite strong {
    font-weight: 700
}

[data-scope=certs] .flex {
    gap: 0 1rem;
    margin-top: .25rem
}

@media (min-width: 1024px) {
    .page-header {
        padding-bottom:3rem
    }

    .header-info {
        grid-template-columns: 1fr 1fr
    }
}

.attr-box {
    background: #fff;
    border-radius: .75rem;
    flex-wrap: wrap;
    display: flex
}

.attr-box__hmax {
    max-width: 30.5rem
}

.attr-list [data-scope=ages] {
    grid-area: a
}

.attr-list [data-scope=certs] {
    grid-area: c
}

.attr-list [data-scope=dates] {
    grid-area: d
}

.attr-list [data-scope=hours] {
    grid-area: h
}

.attr-list [data-scope=location] {
    grid-area: l
}

.attr-list [data-scope=min] {
    grid-area: m
}

.attr-list [data-scope=price] {
    grid-area: p
}

.attr-list [data-scope=size] {
    grid-area: s
}

.attr-list [data-scope=weeks] {
    grid-area: w
}

.attr-list {
    grid-template-columns: 4.5rem minmax(7.25rem,1fr);
    grid-template-areas: "d d""w w""m m""a a""s h""c c""l l""p p";
    gap: 1rem 2rem;
    padding: 1.5rem 1rem!important
}

.attr-list .large {
    font-size: 1.75rem;
    line-height: 1
}

.attr-list ul.attr-value {
    line-height: 1.25
}

.attr-list ul.attr-value li+li {
    margin-top: .25em
}

@media (min-width: 568px) {
    .attr-list {
        grid-template-columns:4.5rem minmax(7.25rem,1fr) minmax(12rem,18rem);
        grid-template-areas: "d d d""w w m""a a c""s h c""l l p";
        margin: 0
    }

    .attr-list [data-scope=location] .attr-value {
        line-height: 2
    }
}

@media (min-width: 1024px) {
    .attr-box {
        transform:translateY(-2.875rem)
    }
}

.btn,a.btn,button:not(:-webkit-any(.pseudo-link,.disclosure)) {
    background: var(--btn-bg,#444);
    border: var(--btn-border,0);
    border-radius: var(--btn-radius,3px);
    color: var(--btn-color,white);
    line-height: 1;
    font-weight: var(--btn-weight,bold);
    outline: var(--btn-outline,0);
    padding: var(--btn-padding,.5rem);
    transition: var(--btn-transition,.3s);
    text-decoration: none;
    display: inline-block
}

.btn,a.btn,button:not(:is(.pseudo-link,.disclosure)) {
    background: var(--btn-bg,#444);
    border: var(--btn-border,0);
    border-radius: var(--btn-radius,3px);
    color: var(--btn-color,white);
    line-height: 1;
    font-weight: var(--btn-weight,bold);
    outline: var(--btn-outline,0);
    padding: var(--btn-padding,.5rem);
    transition: var(--btn-transition,.3s);
    text-decoration: none;
    display: inline-block
}

[type=submit] {
    background: var(--btn-bg,#444);
    border: var(--btn-border,0);
    border-radius: var(--btn-radius,3px);
    color: var(--btn-color,white);
    line-height: 1;
    font-weight: var(--btn-weight,bold);
    outline: var(--btn-outline,0);
    padding: var(--btn-padding,.5rem);
    transition: var(--btn-transition,.3s);
    text-decoration: none;
    display: inline-block
}

[type=submit]:not([aria-selected=true]):focus {
    background: var(--btn-focus-bg,black);
    color: var(--btn-focus-color,white);
    transform: var(--btn-focus-transform,scale(1.05))
}

[type=submit]:not([aria-selected=true]):hover {
    background: var(--btn-focus-bg,black);
    color: var(--btn-focus-color,white);
    transform: var(--btn-focus-transform,scale(1.05))
}

[type=submit]:focus {
    outline: var(--btn-focus-outline,2px solid black);
    outline-offset: var(--btn-focus-outline-offset,.125rem)
}

:is(.btn,a.btn,button:not(:-webkit-any(.pseudo-link,.disclosure))):not([aria-selected=true]):focus {
    background: var(--btn-focus-bg,black);
    color: var(--btn-focus-color,white);
    transform: var(--btn-focus-transform,scale(1.05))
}

:is(.btn,a.btn,button:not(:-webkit-any(.pseudo-link,.disclosure))):not([aria-selected=true]):hover {
    background: var(--btn-focus-bg,black);
    color: var(--btn-focus-color,white);
    transform: var(--btn-focus-transform,scale(1.05))
}

:is(.btn,a.btn,button:not(:-webkit-any(.pseudo-link,.disclosure))):focus {
    outline: var(--btn-focus-outline,2px solid black);
    outline-offset: var(--btn-focus-outline-offset,.125rem)
}

:is(.btn,a.btn,button:not(:is(.pseudo-link,.disclosure))):not([aria-selected=true]):focus {
    background: var(--btn-focus-bg,black);
    color: var(--btn-focus-color,white);
    transform: var(--btn-focus-transform,scale(1.05))
}

:is(.btn,a.btn,button:not(:is(.pseudo-link,.disclosure))):not([aria-selected=true]):hover {
    background: var(--btn-focus-bg,black);
    color: var(--btn-focus-color,white);
    transform: var(--btn-focus-transform,scale(1.05))
}

:is(.btn,a.btn,button:not(:is(.pseudo-link,.disclosure))):focus {
    outline: var(--btn-focus-outline,2px solid black);
    outline-offset: var(--btn-focus-outline-offset,.125rem)
}

.btn[aria-selected=true],.btn[aria-pressed=true] {
    background: var(--btn-active-bg,auto);
    color: var(--btn-active-color,auto)
}

.cta.btn.large {
    margin-left: -.25rem;
    font-size: 2rem
}

.cta.btn {
    background: var(--bm-navy);
    border: 2px solid #fff
}

.cta.btn:hover {
    outline-offset: -1px;
    outline: 2.5px solid #fff
}

.pseudo-link {
    background: 0 0;
    border: 0;
    margin-left: .5ch;
    padding: 0;
    font-size: 1rem;
    font-weight: 400
}

.disclosure {
    color: inherit;
    text-align: left;
    background: 0;
    border: 0
}

.table-wrapper {
    max-width: calc(100vw - 2rem);
    overflow-x: auto
}

table {
    border-collapse: collapse;
    width: 100%
}

table th,table td {
    line-height: var(--line-compact);
    border: 1px solid var(--cell-border,rgba(0,0,0,.15));
    padding: .25em
}

caption {
    text-align: left
}

th:not([align=right]) {
    text-align: left
}

thead th {
    vertical-align: bottom
}

tbody th {
    vertical-align: top
}

tbody td {
    vertical-align: top
}

:is(thead,tbody) tr:first-child>* {
    border-top: var(--first-row-top,1.5px solid rgba(0,0,0,.25))
}

td .line-ib {
    white-space: nowrap
}

.timetable caption {
    padding-block-start:.5rem;padding-block-end:.5rem}

.timetable td {
    border-left: 0;
    border-right: 0;
    padding: .5rem .25rem
}

.timetable th {
    border-left: 0;
    border-right: 0;
    padding: .5rem .25rem
}

.timetable tbody .times {
    padding-top: .78rem
}

.timetable tbody>.break {
    background: hsl(var(--bm-sky-hsl)/.5)
}

@media (max-width: 900px) {
    .programme {
        flex-wrap:wrap;
        gap: 1rem;
        display: flex
    }

    .programme h3 {
        flex-basis: 100%
    }

    .programme .table-wrapper {
        flex-grow: 1
    }

    .timetable,.timetable caption,.timetable tbody,.timetable tr,.timetable td,.timetable td:before {
        display: block
    }

    .timetable tr {
        border-top: 1.5px solid rgba(0,0,0,.25)
    }

    .timetable td {
        border: 0!important
    }

    .timetable thead {
        display: none
    }

    .timetable td:first-of-type {
        flex-basis: 100%;
        font-weight: 400
    }

    .timetable td:before {
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--bm-navy);
        font-size: .75rem;
        font-weight: 700
    }

    .timetable td:nth-of-type(2):before {
        content: "Tuesday "
    }

    .timetable td:nth-of-type(3):before {
        content: "Wednesday "
    }

    .timetable td:nth-of-type(4):before {
        content: "Thursday "
    }

    .timetable td:nth-of-type(5):before {
        content: "Friday "
    }

    .timetable td:nth-of-type(6):before {
        content: "Saturday "
    }

    .timetable td:nth-of-type(7):before {
        content: "Sunday "
    }

    .timetable td:nth-of-type(8):before {
        content: "Monday "
    }

    .timetable .break td:nth-of-type(2):before {
        content: normal
    }

    .timetable .break td:first-of-type {
        padding-bottom: 0
    }

    .timetable .break [colspan] {
        padding-top: 0
    }
}

[data-progday=true] .programme__week {
    display: none
}

.programme__week {
    border-bottom: 1px solid rgba(0,0,0,.15);
    margin: 0
}

.programme__week h4 {
    margin: 0 0 1rem
}

.programme__week summary {
    color: var(--bm-navy);
    line-height: 1
}

.programme__week details:not([open]) {
    border-top: 1px solid rgba(0,0,0,.15)
}

.programme__week details:not([open]):nth-of-type(odd) {
    background: var(--bm-sky)
}

.programme__week details[open]+details:not([open]) {
    border-top: 1.5px solid rgba(0,0,0,.25)
}

.programme__week svg {
    width: 2rem;
    padding: .5em;
    transform: rotate(-90deg)
}

.programme__week use {
    stroke: var(--bm-navy);
    stroke-width: 2px
}

.programme__week [open] summary {
    background: var(--bm-navy);
    color: #fff
}

.programme__week [open] use {
    stroke: #fff
}

.programme__week [open] svg {
    transform: rotate(0)
}

.programme__menu {
    margin-block-start:1rem;margin-block-end:1rem}

.programme__list {
    margin: 0
}

.programme__list li {
    border-top: 1px solid rgba(0,0,0,.15);
    gap: 0 .5em;
    padding: .5em .25em
}

.programme__list .break {
    background: hsl(var(--bm-sky-hsl)/.5)
}

.timetable .times,.programme__list .times {
    letter-spacing: .05em;
    color: var(--bm-navy);
    flex-basis: 11.5rem;
    font-size: .875rem;
    font-weight: 700
}

.programme__list .times {
    text-align: right
}

@media (max-width: 600px) {
    .programme__list .times {
        text-align:left;
        flex-basis: 100%
    }
}

@media (max-width: 1023px) {
    [data-progday=true] .timetable {
        display:none
    }

    [data-progday=true] .programme__week {
        display: block
    }
}

.input-label {
    color: var(--input-label-color,var(--text,#333))
}

.input-guide {
    color: var(--input-guide-color,#737373)
}

.input-error {
    color: var(--input-error-color,#c00)
}

.input-text {
    padding: var(--input-padding,.5rem);
    background: var(--input-bg,#f5f5f5);
    border: var(--input-border,0);
    outline: var(--input-outline,1px solid rgba(0,0,0,.15));
    border-radius: var(--input-radius,3px);
    width: var(--input-width,100%)
}

[aria-invalid=true] {
    outline: var(--invalid-outline,2px solid #c00);
    background: var(--invalid-bg,#ffe6e6)
}

[aria-invalid=false] {
    outline: var(--valid-outline,2px solid #460);
    background: var(--valid-bg,#f1ffd6)
}

.input-text:not([aria-invalid=true]):focus {
    outline: var(--input-focus-outline,2px solid black);
    background: var(--input-focus-bg,white)
}

.checkrad {
    padding-left: 1.5em;
    position: relative
}

.checkrad .input-wrapper {
    position: absolute;
    top: 0;
    left: 0
}

select {
    -webkit-appearance: none;
    appearance: none;
    border: var(--input-border,0);
    outline: var(--input-outline,1px solid rgba(0,0,0,.15));
    border-radius: 0;
    border-radius: var(--input-radius,3px);
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b8c6cc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E),linear-gradient(#fff 0% 100%);
    background-position: right .4em top .5em,0 0;
    background-repeat: no-repeat,repeat;
    background-size: .85em,100%;
    max-width: 100%;
    padding: .25em 1.6em .25em .4em;
    line-height: 1.25
}

summary {
    cursor: pointer;
    list-style: none
}

summary::-webkit-details-marker {
    display: none
}

summary .icon-plus {
    background: var(--icon-plus-bg,rgba(255,255,255,.9));
    outline: 1px solid var(--icon-plus-outline,rgba(0,0,0,.1));
    border-radius: 50%;
    transition: all .3s
}

summary .icon-plus use {
    stroke: var(--icon-plus-stroke,#999);
    stroke-width: 1.5px
}

details:not([open]) summary:hover .icon-plus {
    background: var(--icon-plus-focus-bg,white);
    outline-color: var(--icon-plus-focus-outline,rgba(0,0,0,.3));
    transform: scale(1.07)
}

details:not([open]) summary:focus-within .icon-plus {
    background: var(--icon-plus-focus-bg,white);
    outline-color: var(--icon-plus-focus-outline,rgba(0,0,0,.3));
    transform: scale(1.07)
}

details:not([open]) summary:focus-within .icon-plus use {
    stroke: var(--icon-plus-focus-stroke,#4d4d4d)
}

details:not([open]) summary:hover .icon-plus use {
    stroke: var(--icon-plus-focus-stroke,#4d4d4d)
}

details[open] summary .icon-plus {
    background: var(--icon-plus-open-bg,black);
    outline-color: var(--icon-plus-open-outline,black);
    transform: rotate(45deg)
}

details[open] summary .icon-plus use {
    stroke: var(--icon-plus-open-stroke,white)
}

.disclosure {
    flex-wrap: nowrap
}

.expander {
    background: var(--bm-gold);
    border-radius: 50%;
    width: 1em;
    height: 1em;
    margin-top: .125em;
    padding: .33rem .25rem .25rem
}

.expander use {
    stroke: #fff;
    stroke-width: 2px;
    stroke-linecap: round
}

[aria-expanded=false] .expander {
    transform: rotate(-90deg)
}

[aria-expanded=true] .expander {
    background: var(--bm-navy)
}

.trip.card {
    flex-direction: column;
    display: flex
}

.trips {
    font-size: 1.125rem;
    line-height: 1.5
}

.trips p,.trips figure {
    margin: 0!important
}

.trips img {
    border-radius: .75rem .75rem 0 0
}

.trip__text {
    background: #fff;
    border-radius: 0 0 .75rem .75rem;
    flex-grow: 1;
    padding: .5em .5em .75rem
}

.trip__text button {
    transition: unset
}

.trips header {
    position: relative
}

.trips h3,.trips p {
    text-wrap: balance
}

.trips h3 {
    letter-spacing: 0;
    color: #fff;
    text-shadow: 0 0 1em #000;
    background: rgba(0,0,0,.4);
    align-items: end;
    width: 100%;
    min-height: 2.75em;
    margin: 0;
    padding: .55rem .5rem .25rem;
    font-weight: 600;
    line-height: 1.15;
    display: flex;
    position: absolute;
    bottom: 0
}

.trip__meta {
    margin-bottom: .5em;
    font-size: 1rem
}

.trip__meta strong {
    font-weight: 600
}

.trip__popup>button {
    border-radius: 50%;
    outline: 3px solid #fff;
    width: 1.5em;
    height: 1.5em;
    text-decoration: none;
    position: absolute;
    top: -.5em;
    right: -.5em;
    background: var(--bm-green2)!important;
    color: #fff!important
}

.trip__popup>button span:last-child:before {
    content: "×"
}

@media (max-width: 625px) {
    .trip__popup button {
        display:none
    }
}

@media (min-width: 626px) {
    .trip__popup {
        z-index:1;
        background: #fff;
        border-radius: .75rem;
        width: calc(100% + 1em + 4vw);
        padding: 1rem;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        box-shadow: 0 .5em 2em rgba(0,0,0,.33)
    }

    .trip__popup>button:focus {
        transition: all .3s;
        transform: scale(1.1)
    }

    .trip__popup>button:hover {
        transition: all .3s;
        transform: scale(1.1)
    }
}

.trips.cards {
    grid-template-columns: repeat(auto-fit,minmax(290px,1fr))
}

[data-results="1"] {
    max-width: 24rem
}

[data-results="2"] {
    max-width: 62rem
}

[data-results="3"] {
    max-width: 82rem
}

[data-results="4"] {
    max-width: 120rem
}

[data-results="5"] {
    max-width: 140rem
}

.courses.cards h2:not(:first-child) {
    margin-top: 4rem
}

[data-filtered=true]>h2 {
    display: none
}

.course.card {
    border-radius: .75rem;
    flex-direction: column;
    font-size: 1rem;
    display: flex;
    box-shadow: 0 0 1.25rem rgba(0,0,0,.15)
}

.course__link {
    order: 1
}

.course__type {
    order: 2
}

.course__text {
    order: 3
}

.course__type {
    background: #fff;
    border-top: .5rem solid gray;
    margin-top: -1px;
    padding: .5rem .5rem 0;
    font-size: .875rem
}

[data-type=english_foundation] .course__type {
    border-color: var(--bm-ef);
    color: var(--bm-ef)
}

[data-type=young_professionals] .course__type {
    border-color: var(--bm-yp);
    color: var(--bm-yp)
}

[data-type=pre_university] .course__type {
    border-color: var(--bm-pu);
    color: var(--bm-pu)
}

[data-type=home_tuition] .course__type {
    border-color: var(--bm-ht);
    color: var(--bm-ht)
}

.course .course__link {
    text-decoration: none
}

.course__link {
    border-radius: .75rem .75rem 0 0;
    flex-grow: 1;
    display: block;
    position: relative;
    overflow: hidden
}

.course__link .rarr {
    background: var(--bm-duckegg);
    opacity: .65;
    border-radius: 1.5rem;
    align-self: start;
    width: 3rem;
    height: 3rem;
    padding: .75rem;
    transition: all .3s
}

.course__link .smaller {
    text-underline-offset: .125em;
    font-size: 1.4rem;
    -webkit-text-decoration: underline transparent;
    text-decoration: underline transparent;
    text-decoration-thickness: 2px;
    transition: all .3s
}

:is(.course__link:focus,.course__link:hover) .smaller {
    -webkit-text-decoration-color: var(--bm-duckegg);
    text-decoration-color: var(--bm-duckegg)
}

:is(.course__link:focus,.course__link:hover) .course__img {
    transform: scale(1.05)
}

:is(.course__link:focus,.course__link:hover) .rarr {
    opacity: 1
}

.course__fig {
    background: var(--bm-navy);
    height: 100%;
    min-height: 13rem;
    margin: 0
}

.course__fig figcaption {
    z-index: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem .25rem;
    height: 100%;
    padding: .5rem .5rem .75rem;
    display: flex;
    position: relative
}

.course__fig h3 {
    color: #fff;
    text-shadow: 0 0 .5rem hsl(var(--bm-navy-hsl)/.5);
    margin: 0
}

.course__fig .em {
    margin-bottom: .125rem;
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1;
    display: block
}

.course__img {
    object-fit: cover;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    transition: all .3s;
    position: absolute;
    top: 0
}

.course__text {
    background: #fff;
    border-radius: 0 0 .75rem .75rem;
    padding: .25rem .5rem .75rem
}

.course__text p {
    margin: 0
}

.course__attr {
    border-top: 1px solid hsl(var(--bm-gold-hsl)/.4);
    grid-template-columns: repeat(4,max-content);
    margin-top: .75rem;
    padding-top: .75rem!important
}

.course__attr li {
    position: relative
}

.course__attr li:not(:first-child):after {
    content: "";
    border-left: 1px solid hsl(var(--bm-gold-hsl)/.2);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -.55rem
}

.course__attr .attr-label {
    color: var(--bm-gold);
    align-items: end;
    min-height: 2.5em;
    font-size: 68.75%;
    line-height: 1.25;
    display: grid
}

.course__attr .attr-value {
    font-weight: 400
}

.a-colours .course__attr .attr-label {
    color: var(--bm-gold-a)
}

.a-colours button:not(:-webkit-any(.pseudo-link,.disclosure,[data-choice])) {
    background: var(--bm-gold-a)
}

.a-colours button:not(:is(.pseudo-link,.disclosure,[data-choice])) {
    background: var(--bm-gold-a)
}

.a-colours .expander {
    background: var(--bm-gold-a)
}

.a-colours [data-type=english_foundation] .course__type {
    border-color: var(--bm-ef-a);
    color: var(--bm-ef-a)
}

.a-colours [data-type=young_professionals] .course__type {
    border-color: var(--bm-yp-a);
    color: var(--bm-yp-a)
}

.a-colours [data-type=pre_university] .course__type {
    border-color: var(--bm-pu-a);
    color: var(--bm-pu-a)
}

.a-colours [data-type=home_tuition] .course__type {
    border-color: var(--bm-ht-a);
    color: var(--bm-ht-a)
}

@media (max-width: 360px) {
    .attr-label {
        font-weight:500
    }
}

@media (min-width: 768px) {
    .courses.cards {
        grid-template-columns:repeat(auto-fit,minmax(25rem,1fr))
    }

    .courses.cards h2 {
        grid-column: 1/-1
    }
}

.course-filters__list {
    gap: .5rem 1rem;
    margin: 0!important
}

.course-filters__list select {
    width: 100%
}

#age-field input {
    text-align: center;
    width: 5.25rem;
    font-weight: 400
}

#age-field [data-alert] {
    z-index: 2;
    width: 12em;
    position: absolute;
    bottom: -3.85em;
    left: 0;
    box-shadow: 0 .5em 2em rgba(0,0,0,.33)
}

[data-radios=false] #age-field input {
    width: 10.5rem
}

[data-action=All] {
    min-width: 5.125rem
}

[data-disabled=true] {
    opacity: .4
}

.course-filters__results {
    flex-basis: 100%;
    grid-column: 1/-1;
    font-weight: 400;
    line-height: 1.25
}

.course-filters__results>.line-ib {
    background: rgba(255,255,255,.5);
    border-radius: .25rem;
    padding: .5rem
}

button[data-choice] {
    color: inherit;
    background: rgba(0,0,0,.07);
    border: 1px solid rgba(0,0,0,.11);
    border-radius: 2px;
    align-items: center;
    gap: .5ch;
    padding: 3px .5ch;
    font-weight: 400;
    line-height: 1;
    display: inline-flex;
    position: relative
}

button[data-choice]:after {
    content: "✕";
    background: hsl(var(--bm-navy-hsl)/.4);
    color: rgba(255,255,255,.75);
    border-radius: 2px;
    padding: .25em;
    font-size: .62rem;
    font-weight: 400
}

button[data-choice]:focus,button[data-choice]:hover {
    transform: scale(1)!important
}

:is(button[data-choice]:focus,button[data-choice]:hover):after {
    background: var(--bm-navy);
    color: #fff
}

[data-filtergroup] {
    border: 0;
    margin: 0;
    padding: 0
}

[data-filtergroup] legend {
    border-radius: .25em .25em 0 0;
    width: 100%;
    padding: .65rem .75rem .6rem 2.15rem;
    display: block
}

[data-filtergroup] button {
    text-align: left;
    border: 0;
    width: 100%;
    padding: .25rem .5rem;
    display: block;
    top: 0;
    left: 0
}

[data-filtergroup] .expander {
    width: 1.25rem;
    height: 1.25rem
}

[data-filtergroup]>[aria-expanded=true] .expander {
    transform: rotate(0)
}

[data-filtergroup] li:has([checked]) {
    font-weight: 400
}

[data-filtergroup][data-expanded=true] legend {
    background: rgba(255,255,255,.5)
}

[data-filtergroup] ul {
    background: #fff;
    border-radius: 0 0 .25em .25rem;
    margin: 0;
    padding: .5rem .75rem
}

[data-filtergroup]>[aria-expanded=false]+ul {
    display: none
}

[data-filtergroup] label {
    grid-template-columns: max-content max-content;
    gap: .5rem;
    display: grid
}

[data-filtergroup] [type=radio] {
    margin: 0;
    transform: translateY(-1px)
}

[data-filtergroup] li {
    padding: .25rem 0 .33rem
}

[data-filtergroup] li+li {
    border-top: 1px solid rgba(0,0,0,.15)
}

label>.attr-label {
    margin-bottom: .25rem
}

#age-field .input-text {
    padding-block-start:.33rem;padding-block-end:.33rem}

.course-filters[data-showall=true] {
    grid-template-columns: max-content 10.5rem;
    grid-template-areas: "r c""l l";
    display: grid
}

.course-filters[data-showall=true] .course-filters__results {
    grid-area: r;
    margin-right: 0
}

.course-filters[data-showall=true] .course-filters__list {
    grid-area: l
}

.course-filters[data-showall=true] .course-filters__controls {
    grid-area: c
}

@media (max-width: 699px) {
    .course-filters.pos-rel {
        grid-template-columns:1fr 5.25rem
    }

    .course-filters__controls {
        width: 5.25rem;
        position: absolute;
        top: 0;
        right: 0
    }

    .course-filters__results {
        margin-right: 6rem
    }

    .course-filters__list>li:nth-child(n+3) [data-filtergroup]:not([data-expanded=true]):before {
        content: "";
        border-top: 1px solid rgba(0,0,0,.08);
        position: absolute;
        top: -4px;
        left: 0;
        right: 0
    }
}

@media (min-width: 700px) and (max-width:1329px) {
    [data-radios=true] {
        grid-template-columns:max-content min-content;
        align-items: start
    }

    #age-field {
        padding-top: .65rem
    }
}

@media (min-width: 700px) {
    .course-filters__list {
        grid-template-columns:repeat(3,max-content)
    }

    .course-filters__list #age-field {
        grid-row: span 3
    }
}

@media (min-width: 768px) {
    [data-filtergroup]>[aria-expanded=true]:not([data-showall=true])+ul {
        z-index:1;
        border-radius: 0 .25em .25em .25rem;
        min-width: calc(100% + .5em);
        position: absolute;
        box-shadow: 0 .5em 2em rgba(0,0,0,.33)
    }
}

@media (max-width: 789px) {
    [data-radios=false] .course-filters {
        grid-template-columns:repeat(2,max-content)
    }

    form.page-menu {
        position: static
    }
}

@media (min-width: 790px) and (max-width:1435px) {
    [data-radios=false] .course-filters {
        grid-template-columns:repeat(4,max-content)
    }
}

@media (min-width: 830px) {
    .course-filters__list {
        grid-template-columns:repeat(4,max-content)
    }

    .course-filters__list #age-field {
        grid-row: span 2
    }
}

@media (max-width: 1329px) {
    [data-radios=true],.course-filters__list {
        display:grid
    }

    [data-radios=true] #age-field input {
        width: 10.5rem
    }

    .course-filters__controls button {
        white-space: nowrap;
        flex-grow: 1
    }
}

@media (min-width: 1330px) {
    [data-radios=true]:not([data-showall=true]) {
        align-items:center
    }

    [data-radios=true] #age-field:not([data-showall=true]) label {
        align-items: center;
        gap: 0 .5rem;
        display: flex
    }

    [data-radios=true] #age-field:not([data-showall=true]) .attr-label {
        white-space: nowrap;
        margin: 0
    }
}

@media (max-width: 1435px) {
    [data-radios=false] .course-filters {
        display:grid
    }

    [data-radios=false] .course-filters #theme-field {
        grid-column: span 2
    }
}

.features {
    margin-top: 2rem
}

.features[data-icons=true] li {
    display: flex;
    position: relative
}

.features[data-icons=true] span {
    text-wrap: balance
}

.features[data-icons=true] use {
    --icon-dark: var(--bm-gold)
}

.ft-check {
    z-index: 1;
    flex: none;
    width: 40px;
    height: 40px;
    position: relative;
    top: -8px;
    left: -3px
}

.grid.students {
    grid-template-columns: minmax(40px,290px) max-content
}

.grid.students .pull-box {
    flex-direction: column;
    justify-content: center;
    height: 100%;
    display: flex
}

.pull-box {
    line-height: var(--line-compact);
    border: 1px solid var(--bm-gold);
    background: #fff;
    border-radius: .75rem;
    padding: 1rem .75rem 1.25rem 1rem
}

.pull-box:not(.line-br) {
    display: inline-block
}

.pull-box li+li {
    margin-top: .75rem
}

@media (min-width: 520px) {
    .hours-days {
        float:left;
        margin: 1.5rem 1rem 0 0!important
    }
}

.hours-days-1 {
    font-size: 290%
}

.hours-days-2 {
    font-size: 240%
}

.hours-days-3 {
    font-size: 248%
}

.hours-days-4 {
    margin-top: .14em;
    font-size: 112%
}

.student-numbers-1 {
    font-size: 173%
}

.student-numbers-2 {
    font-size: 137%
}

.student-numbers-3 {
    text-indent: -.1em;
    font-size: 341%
}

.student-numbers-4 {
    font-size: 100%;
    line-height: .33
}

blockquote>:first-child:where(p,ol,ul) {
    text-indent: -.33em;
    margin-top: 0
}

blockquote>:first-child:where(p,ol,ul):before {
    content: "“"
}

blockquote>:last-of-type:where(p,ol,ul):after {
    content: "”"
}

.quote,.persona {
    border: 1px solid var(--bm-gold);
    border-radius: .75rem;
    padding: 1.5rem 1rem 2rem;
    position: relative
}

:is(.quote,.persona) img {
    border-radius: 50%;
    width: 120px
}

.quote:after {
    content: "”";
    color: hsl(var(--bm-gold-hsl)/.25);
    mix-blend-mode: multiply;
    font-family: Playfair Display,serif;
    font-size: 300px;
    font-weight: 700;
    line-height: .4;
    position: absolute;
    right: .5rem;
    transform: translateY(-2.75rem)
}

.quote blockquote,.persona h3 {
    margin-top: .5rem
}
[data-filtergroup] legend {
    border-bottom: unset;
}

.course__fig figcaption::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 40%, transparent);
  z-index: -1;
}

.course__fig h3 small {
  margin-top: 0.2em;
}